Add a settings dialog, with "dangerous mode" setting

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/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
 }