settings: add Bitcoin Unit settings screen

app/src/components/common/base.tsx

@@ -53,6 +53,23 @@ export const Button = styled.button<ButtonProps>`
   }
 `;
 
+interface RadioButtonProps {
+  checked?: boolean;
+}
+
+export const RadioButton = styled.span<RadioButtonProps>`
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 14px;
+  border: 1px solid ${props => props.theme.colors.lightPurple};
+  background-color: ${props => (props.checked ? props.theme.colors.lightPurple : 'none')};
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
 /**
  * the react-virtualized list doesn't play nice with the bootstrap row -15px
  * margin. We need to manually offset the container and remove the

app/src/components/settings/GeneralSettings.tsx

@@ -32,13 +32,13 @@ const GeneralSettings: React.FC = () => {
           name={l('bitcoinUnit')}
           value={formatUnit(settingsStore.unit)}
           onClick={handleUnitClick}
-          arrow
+          icon="arrow"
         />
         <SettingItem
           name={l('balances')}
           value="Receive Optimized"
           onClick={handleColorsClick}
-          arrow
+          icon="arrow"
         />
       </Content>
     </Wrapper>

app/src/components/settings/SettingItem.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import { RadioButton } from 'components/common/base';
 import { Icon } from 'components/common/icons';
 import { styled } from 'components/theme';
 
@@ -29,23 +30,27 @@ const Styled = {
   Icon: styled(Icon)`
     line-height: 80px;
   `,
+  Radio: styled(RadioButton)`
+    margin-top: 32px;
+  `,
 };
 
 interface Props {
   name: string;
   value?: string;
-  arrow?: boolean;
+  icon: 'arrow' | 'radio';
+  checked?: boolean;
   onClick: () => void;
 }
 
-const SettingItem: React.FC<Props> = ({ name, value, arrow, children, onClick }) => {
-  const { Wrapper, Name, Value, Icon } = Styled;
+const SettingItem: React.FC<Props> = ({ name, value, icon, checked, onClick }) => {
+  const { Wrapper, Name, Value, Radio, Icon } = Styled;
   return (
     <Wrapper onClick={onClick}>
       <Name>{name}</Name>
       {value && <Value>{value}</Value>}
-      {children}
-      {arrow && <Icon icon="arrow-right" />}
+      {icon === 'radio' && <Radio checked={checked} />}
+      {icon === 'arrow' && <Icon icon="arrow-right" />}
     </Wrapper>
   );
 };

app/src/components/settings/SettingsPage.tsx

@@ -1,8 +1,9 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'store';
 import { styled } from 'components/theme';
 import GeneralSettings from './GeneralSettings';
+import UnitSettings from './UnitSettings';
 
 const Styled = {
   Wrapper: styled.div`
@@ -13,8 +14,18 @@ const Styled = {
 const SettingsPage: React.FC = () => {
   const { uiStore } = useStore();
 
+  useEffect(() => {
+    // reset the setting screen to 'general' when this page unmounts
+    return () => {
+      uiStore.showSettings('general');
+    };
+  }, [uiStore]);
+
   let cmp: ReactNode;
   switch (uiStore.selectedSetting) {
+    case 'unit':
+      cmp = <UnitSettings />;
+      break;
     case 'general':
     default:
       cmp = <GeneralSettings />;

app/src/components/settings/UnitSettings.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import { usePrefixedTranslation } from 'hooks';
+import { Unit } from 'util/constants';
+import { formatUnit } from 'util/formatters';
+import { useStore } from 'store';
+import PageHeader from 'components/common/PageHeader';
+import { styled } from 'components/theme';
+import SettingItem from './SettingItem';
+
+const Styled = {
+  Wrapper: styled.section``,
+  Content: styled.div`
+    margin: 100px auto;
+    max-width: 500px;
+  `,
+};
+
+const UnitItem: React.FC<{ unit: Unit }> = observer(({ unit }) => {
+  const { settingsStore } = useStore();
+
+  const handleClick = useCallback(() => {
+    settingsStore.setUnit(unit);
+  }, [unit, settingsStore]);
+
+  return (
+    <SettingItem
+      name={formatUnit(unit)}
+      icon="radio"
+      checked={settingsStore.unit === unit}
+      onClick={handleClick}
+    />
+  );
+});
+
+const UnitSettings: React.FC = () => {
+  const { l } = usePrefixedTranslation('cmps.settings.UnitSettings');
+  const { uiStore } = useStore();
+
+  const handleBack = useCallback(() => uiStore.showSettings('general'), [uiStore]);
+
+  const { Wrapper, Content } = Styled;
+  return (
+    <Wrapper>
+      <PageHeader
+        title={l('pageTitle')}
+        backText={l('backText')}
+        onBackClick={handleBack}
+      />
+      <Content>
+        <UnitItem unit={Unit.sats} />
+        <UnitItem unit={Unit.bits} />
+        <UnitItem unit={Unit.btc} />
+      </Content>
+    </Wrapper>
+  );
+};
+
+export default observer(UnitSettings);

app/src/components/theme.tsx

@@ -29,6 +29,7 @@ export interface Theme {
     orange: string;
     tileBack: string;
     purple: string;
+    lightPurple: string;
   };
 }
 
@@ -58,6 +59,7 @@ const theme: Theme = {
     orange: '#f66b1c',
     tileBack: 'rgba(245,245,245,0.04)',
     purple: '#57038d',
+    lightPurple: '#a540cd',
   },
 };
 

app/src/i18n/locales/en-US.json

@@ -39,5 +39,7 @@
   "cmps.settings.GeneralSettings.title": "General",
   "cmps.settings.GeneralSettings.bitcoinUnit": "Bitcoin Unit",
   "cmps.settings.GeneralSettings.balances": "Channel Balances",
-  "cmps.settings.GeneralSettings.pageTitle": "Settings"
+  "cmps.settings.GeneralSettings.pageTitle": "Settings",
+  "cmps.settings.UnitSettings.pageTitle": "Bitcoin Unit",
+  "cmps.settings.UnitSettings.backText": "Settings"
 }