Add a settings dialog, with "dangerous mode" setting

Author: csillag

src/app/components/SettingsButton/index.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react'
+import { SidebarButton } from '../Sidebar'
+import { Configure } from 'grommet-icons/icons'
+import { useTranslation } from 'react-i18next'
+import { SettingsDialog } from '../SettingsDialog'
+
+export const SettingsButton = () => {
+  const [layerVisibility, setLayerVisibility] = useState(false)
+  const { t } = useTranslation()
+  return (
+    <>
+      <SidebarButton
+        icon={<Configure />}
+        label={t('menu.settings', 'Settings')}
+        onClick={() => {
+          setLayerVisibility(true)
+        }}
+      />
+      {layerVisibility && <SettingsDialog closeHandler={() => setLayerVisibility(false)} />}
+    </>
+  )
+}

src/app/components/SettingsDialog/index.tsx

@@ -0,0 +1,76 @@
+import React, { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ResponsiveLayer } from '../ResponsiveLayer'
+import { Box, Button, Heading, Paragraph, RadioButtonGroup, ResponsiveContext } from 'grommet'
+import { useDispatch, useSelector } from 'react-redux'
+import { selectDangerousModeSetting } from './slice/selectors'
+import { Threats } from 'grommet-icons'
+import { settingsActions } from './slice'
+
+interface SettingsDialogProps {
+  closeHandler: () => void
+}
+
+export const SettingsDialog = (props: SettingsDialogProps) => {
+  const { t } = useTranslation()
+  const size = useContext(ResponsiveContext)
+
+  const dispatch = useDispatch()
+  const dangerousMode = useSelector(selectDangerousModeSetting)
+
+  return (
+    <ResponsiveLayer
+      onClickOutside={props.closeHandler}
+      onEsc={props.closeHandler}
+      animation="slide"
+      background="background-front"
+      modal
+    >
+      <Box pad={{ vertical: 'small' }} margin="medium" width={size === 'small' ? 'auto' : '700px'}>
+        <Heading size="1" margin={{ vertical: 'small' }}>
+          {t('settings.dialog.title', 'Wallet settings')}
+        </Heading>
+        <Paragraph fill>
+          {t(
+            'settings.dialog.description',
+            'This is where you can configure the behavior of the Oasis Wallet.',
+          )}
+        </Paragraph>
+        <Box
+          gap="small"
+          pad={{ vertical: 'medium', right: 'small' }}
+          overflow={{ vertical: 'auto' }}
+          height={{ max: '400px' }}
+        >
+          <Paragraph fill>
+            <b>{t('dangerMode.title', 'Dangerous mode')}:</b>{' '}
+            {t('dangerMode.description', 'should the wallet let the user shoot himself in the foot?')}
+          </Paragraph>
+          <RadioButtonGroup
+            name="doc"
+            options={[
+              {
+                value: false,
+                label: t('dangerMode.off', 'Off - Refuse to execute nonsensical actions'),
+              },
+              {
+                value: true,
+                label: (
+                  <span>
+                    {t('dangerMode.on', "On - Allow executing nonsensical actions. Don't blame Oasis!")}{' '}
+                    <Threats size={'large'} />
+                  </span>
+                ),
+              },
+            ]}
+            value={dangerousMode}
+            onChange={event => dispatch(settingsActions.setDangerousMode(event.target.value === 'true'))}
+          />
+        </Box>
+        <Box align="end" pad={{ top: 'medium' }}>
+          <Button primary label={t('settings.dialog.close', 'Close')} onClick={props.closeHandler} />
+        </Box>
+      </Box>
+    </ResponsiveLayer>
+  )
+}

src/app/components/SettingsDialog/slice/index.ts

@@ -0,0 +1,22 @@
+import { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from 'utils/@reduxjs/toolkit'
+
+import { SettingsState } from './types'
+
+export const initialState: SettingsState = {
+  dangerousMode: false,
+}
+
+const slice = createSlice({
+  name: 'settings',
+  initialState,
+  reducers: {
+    setDangerousMode(state, action: PayloadAction<boolean>) {
+      state.dangerousMode = action.payload
+    },
+  },
+})
+
+export const { actions: settingsActions } = slice
+
+export default slice.reducer

src/app/components/SettingsDialog/slice/selectors.ts

@@ -0,0 +1,11 @@
+import { createSelector } from '@reduxjs/toolkit'
+
+import { RootState } from 'types'
+import { initialState } from '.'
+import { useSelector } from 'react-redux'
+
+const selectSlice = (state: RootState) => state.settings || initialState
+
+export const selectDangerousModeSetting = createSelector([selectSlice], settings => settings.dangerousMode)
+
+export const useDangerModeSetting = () => useSelector(selectDangerousModeSetting)

src/app/components/SettingsDialog/slice/types.ts

@@ -0,0 +1,3 @@
+export interface SettingsState {
+  dangerousMode: boolean
+}

src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap

@@ -680,6 +680,39 @@ exports[`<Navigation /> should match snapshot 1`] = `
     <div
       class="c6"
     />
+    <button
+      aria-label="menu.settings"
+      class="c13"
+      type="button"
+    >
+      <div
+        class="c14"
+      >
+        <svg
+          aria-label="Configure"
+          class="c10"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M16 15c4.009-.065 7-3.033 7-7 0-3.012-.997-2.015-2-1-.991.98-3 3-3 3l-4-4s2.02-2.009 3-3c1.015-1.003 1.015-2-1-2-3.967 0-6.947 2.991-7 7 .042.976 0 3 0 3-1.885 1.897-4.34 4.353-6 6-2.932 2.944 1.056 6.932 4 4 1.65-1.662 4.113-4.125 6-6 0 0 2.024-.042 3 0z"
+            fill="none"
+            stroke="#000"
+            stroke-width="2"
+          />
+        </svg>
+        <div
+          class="c11"
+        />
+        <span
+          class="c5"
+        >
+          menu.settings
+        </span>
+      </div>
+    </button>
+    <div
+      class="c6"
+    />
     <a
       aria-label="GitHub"
       href="https://github.com/oasisprotocol/oasis-wallet-web"

src/app/components/Sidebar/index.tsx

@@ -22,6 +22,7 @@ import { Language } from '../../../styles/theme/icons/language/Language'
 import { ThemeSwitcher } from '../ThemeSwitcher'
 import logotype from '../../../../public/logo192.png'
 import { languageLabels } from '../../../locales/i18n'
+import { SettingsButton } from '../SettingsButton'
 
 const SidebarTooltip = (props: { children: React.ReactNode; isActive: boolean; label: string }) => {
   const size = useContext(ResponsiveContext)
@@ -211,6 +212,7 @@ const SidebarFooter = (props: SidebarFooterProps) => {
           </Menu>
         </Box>
       </SidebarTooltip>
+      <SettingsButton />
       <SidebarButton
         icon={<Github />}
         label="GitHub"

src/locales/en/translation.json

@@ -119,6 +119,12 @@
     "newMnemonic": "Generate a new mnemonic",
     "thisIsYourPhrase": "This is your mnemonic"
   },
+  "dangerMode": {
+    "description": "should the wallet let the user shoot himself in the foot?",
+    "off": "Off - Refuse to execute nonsensical actions",
+    "on": "On - Allow executing nonsensical actions. Don't blame Oasis!",
+    "title": "Dangerous mode"
+  },
   "delegations": {
     "activeDelegations": "Active delegations",
     "debondingDelegations": "Debonding delegations",
@@ -193,6 +199,7 @@
   "menu": {
     "closeWallet": "Close wallet",
     "home": "Home",
+    "settings": "Settings",
     "stake": "Stake",
     "wallet": "Wallet"
   },
@@ -229,6 +236,13 @@
       "showPrivateKey": "Show private key"
     }
   },
+  "settings": {
+    "dialog": {
+      "close": "Close",
+      "description": "This is where you can configure the behavior of the Oasis Wallet.",
+      "title": "Wallet settings"
+    }
+  },
   "theme": {
     "darkMode": "Dark mode",
     "lightMode": "Light mode"

src/store/reducers.ts

@@ -12,6 +12,7 @@ import stakingReducer from 'app/state/staking'
 import transactionReducer from 'app/state/transaction'
 import walletReducer from 'app/state/wallet'
 import themeReducer from 'styles/theme/slice'
+import settingReducer from 'app/components/SettingsDialog/slice'
 
 export function createReducer() {
   const rootReducer = combineReducers({
@@ -24,6 +25,7 @@ export function createReducer() {
     theme: themeReducer,
     transaction: transactionReducer,
     wallet: walletReducer,
+    settings: settingReducer,
   })
 
   return rootReducer

src/types/RootState.ts

@@ -8,6 +8,7 @@ import { TransactionState } from 'app/state/transaction/types'
 import { ImportAccountsState } from 'app/state/importaccounts/types'
 import { StakingState } from 'app/state/staking/types'
 import { FatalErrorState } from 'app/state/fatalerror/types'
+import { SettingsState } from '../app/components/SettingsDialog/slice/types'
 // [IMPORT NEW CONTAINERSTATE ABOVE] < Needed for generating containers seamlessly
 
 export interface RootState {
@@ -20,6 +21,7 @@ export interface RootState {
   importAccounts: ImportAccountsState
   staking: StakingState
   fatalError: FatalErrorState
+  settings: SettingsState
   // [INSERT NEW REDUCER KEY ABOVE] < Needed for generating containers seamlessly
 }