feat: use testnet by default and add settings option to allow mainnet (…

…#36) * feat: use testnet as default network and change testnet toggle to mainnet in the settings * feat: add confirm modal with warning when switching on mainnet * feat: update styling of settings, add account page and change/create password page
kibis-is · Nov 28, 2023 · 593785b · 593785b
1 parent 150b0cb
commit 593785b
Show file tree

Hide file tree

Showing 17 changed files with 165 additions and 56 deletions.
diff --git a/src/extension/components/CreatePasswordInput/CreatePasswordInput.tsx b/src/extension/components/CreatePasswordInput/CreatePasswordInput.tsx
@@ -81,10 +81,12 @@ const CreatePasswordInput: FC<IProps> = ({
           <Text color={error ? 'red.300' : defaultTextColor} textAlign="left">
             {label || t<string>('labels.password')}
           </Text>
+
           <Text color="red.300" fontSize="xs" textAlign="right">
             {error}
           </Text>
         </HStack>
+
         <InputGroup size="md">
           <Input
             disabled={disabled}
@@ -106,6 +108,7 @@ const CreatePasswordInput: FC<IProps> = ({
             />
           </InputRightElement>
         </InputGroup>
+
         <Text color={subTextColor} fontSize="xs" textAlign="left">
           <Trans i18nKey="captions.passwordScoreInfo">
             To conform with our{' '}
@@ -121,6 +124,7 @@ const CreatePasswordInput: FC<IProps> = ({
             must be at least 8 characters.
           </Trans>
         </Text>
+
         <StrengthMeter score={score} />
       </VStack>
     </>

diff --git a/src/extension/components/SettingsSelectItem/SettingsSelectItem.tsx b/src/extension/components/SettingsSelectItem/SettingsSelectItem.tsx
@@ -35,6 +35,7 @@ const SettingsSelectItem: FC<IProps> = ({
       alignItems="center"
       h={SETTINGS_ITEM_HEIGHT}
       justifyContent="space-between"
+      pb={DEFAULT_GAP - 2}
       px={DEFAULT_GAP - 2}
       spacing={2}
       w="full"

diff --git a/src/extension/components/SettingsSubHeading/SettingsSubHeading.tsx b/src/extension/components/SettingsSubHeading/SettingsSubHeading.tsx
@@ -16,8 +16,10 @@ const SettingsSubHeading: FC<IProps> = ({ color, text }: IProps) => {
 
   return (
     <Text
+      as="b"
       color={color || subTextColor}
-      fontSize="sm"
+      fontSize="md"
+      pb={DEFAULT_GAP - 2}
       px={DEFAULT_GAP - 2}
       textAlign="left"
       w="full"

diff --git a/src/extension/components/SettingsSwitchItem/SettingsSwitchItem.tsx b/src/extension/components/SettingsSwitchItem/SettingsSwitchItem.tsx
@@ -31,6 +31,7 @@ const SettingsSwitchItem: FC<IProps> = ({
       alignItems="center"
       minH={SETTINGS_ITEM_HEIGHT}
       justifyContent="space-between"
+      pb={DEFAULT_GAP - 2}
       px={DEFAULT_GAP - 2}
       spacing={2}
       w="full"

diff --git a/src/extension/components/Warning/Warning.tsx b/src/extension/components/Warning/Warning.tsx
@@ -33,6 +33,7 @@ const Warning: FC<IProps> = ({ message, size = 'md' }: IProps) => {
 
   return (
     <HStack
+      backgroundColor="red.500"
       borderColor="red.500"
       borderRadius={theme.radii['3xl']}
       borderStyle="solid"
@@ -41,8 +42,8 @@ const Warning: FC<IProps> = ({ message, size = 'md' }: IProps) => {
       py={1}
       spacing={2}
     >
-      <Icon as={IoWarningOutline} color="red.500" h={iconSize} w={iconSize} />
-      <Text color="red.500" fontSize={size} textAlign="left">
+      <Icon as={IoWarningOutline} color="white" h={iconSize} w={iconSize} />
+      <Text as="b" color="white" fontSize={size} textAlign="left">
         {message}
       </Text>
     </HStack>

diff --git a/src/extension/features/settings/thunks/setSettings.ts b/src/extension/features/settings/thunks/setSettings.ts
@@ -34,13 +34,13 @@ const setSettings: AsyncThunk<
           value.genesisHash === settings.general.selectedNetworkGenesisHash
       ) || null;
 
-    // if the beta/test net has been disallowed and the selected network is one of the disallowed, set it to a stable one
+    // if the beta/main-net has been disallowed and the selected network is one of the disallowed, set it to a test one
     if (
       !selectedNetwork ||
       (!settings.advanced.allowBetaNet &&
         selectedNetwork.type === NetworkTypeEnum.Beta) ||
-      (!settings.advanced.allowTestNet &&
-        selectedNetwork.type === NetworkTypeEnum.Test)
+      (!settings.advanced.allowMainNet &&
+        selectedNetwork.type === NetworkTypeEnum.Stable)
     ) {
       selectedNetwork = selectDefaultNetwork(networks);
 

diff --git a/src/extension/features/settings/utils/createDefaultSettings.ts b/src/extension/features/settings/utils/createDefaultSettings.ts
@@ -16,7 +16,7 @@ export default function createDefaultSettings(networks: INetwork[]): ISettings {
     advanced: {
       allowBetaNet: false,
       allowDidTokenFormat: false,
-      allowTestNet: false,
+      allowMainNet: false,
     },
     appearance: {
       theme: 'light',

diff --git a/src/extension/features/settings/utils/getInitialState.ts b/src/extension/features/settings/utils/getInitialState.ts
@@ -6,7 +6,7 @@ export default function getInitialState(): ISettingsState {
     advanced: {
       allowBetaNet: false,
       allowDidTokenFormat: false,
-      allowTestNet: false,
+      allowMainNet: false,
     },
     appearance: {
       theme: 'light',

diff --git a/src/extension/pages/AdvancedSettingsPage/AdvancedSettingsPage.tsx b/src/extension/pages/AdvancedSettingsPage/AdvancedSettingsPage.tsx
@@ -8,8 +8,12 @@ import PageHeader from '@extension/components/PageHeader';
 import SettingsSubHeading from '@extension/components/SettingsSubHeading';
 import SettingsSwitchItem from '@extension/components/SettingsSwitchItem';
 
+// constants
+import { DEFAULT_GAP } from '@extension/constants';
+
 // features
 import { setSettings } from '@extension/features/settings';
+import { setConfirm } from '@extension/features/system';
 
 // selectors
 import { useSelectSettings } from '@extension/selectors';
@@ -24,7 +28,43 @@ import {
 const AdvancedSettingsPage: FC = () => {
   const { t } = useTranslation();
   const dispatch: IAppThunkDispatch = useDispatch<IAppThunkDispatch>();
+  // selectors
   const settings: ISettings = useSelectSettings();
+  // handlers
+  const handleMainNetSwitchChange = (event: ChangeEvent<HTMLInputElement>) => {
+    // if the switch is being enabled, get the user to confirmation
+    if (event.target.checked) {
+      dispatch(
+        setConfirm({
+          description: t<string>('captions.allowMainNetConfirm'),
+          onConfirm: () =>
+            dispatch(
+              setSettings({
+                ...settings,
+                advanced: {
+                  ...settings.advanced,
+                  allowMainNet: event.target.checked,
+                },
+              })
+            ),
+          title: t<string>('headings.allowMainNetConfirm'),
+          warningText: t<string>('captions.allowMainNetWarning'),
+        })
+      );
+
+      return;
+    }
+
+    dispatch(
+      setSettings({
+        ...settings,
+        advanced: {
+          ...settings.advanced,
+          allowMainNet: event.target.checked,
+        },
+      })
+    );
+  };
   const handleOnSwitchChange =
     (key: keyof IAdvancedSettings) =>
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -42,27 +82,25 @@ const AdvancedSettingsPage: FC = () => {
   return (
     <>
       <PageHeader title={t<string>('titles.page', { context: 'advanced' })} />
-      <VStack spacing={4} w="full">
-        {/* Developer */}
+      <VStack spacing={DEFAULT_GAP - 2} w="full">
+        {/* beta */}
         <VStack w="full">
-          <SettingsSubHeading text={t<string>('headings.developer')} />
+          <SettingsSubHeading text={t<string>('headings.beta')} />
+
           <SettingsSwitchItem
-            checked={settings.advanced.allowTestNet}
-            description={t<string>('captions.allowTestNet')}
-            label={t<string>('labels.allowTestNet')}
-            onChange={handleOnSwitchChange('allowTestNet')}
+            checked={settings.advanced.allowMainNet}
+            description={t<string>('captions.allowMainNet')}
+            label={t<string>('labels.allowMainNet')}
+            onChange={handleMainNetSwitchChange}
           />
-        </VStack>
 
-        {/* Beta */}
-        <VStack w="full">
-          <SettingsSubHeading text={t<string>('headings.beta')} />
           <SettingsSwitchItem
             checked={settings.advanced.allowBetaNet}
             description={t<string>('captions.allowBetaNet')}
             label={t<string>('labels.allowBetaNet')}
             onChange={handleOnSwitchChange('allowBetaNet')}
           />
+
           <SettingsSwitchItem
             checked={settings.advanced.allowDidTokenFormat}
             description={t<string>('captions.allowDidTokenFormat')}

diff --git a/src/extension/pages/ChangePasswordPage/ChangePasswordPage.tsx b/src/extension/pages/ChangePasswordPage/ChangePasswordPage.tsx
@@ -34,11 +34,14 @@ const ChangePasswordPage: FC = () => {
   const { t } = useTranslation();
   const navigate: NavigateFunction = useNavigate();
   const { isOpen, onClose, onOpen } = useDisclosure();
+  // hooks
   const toast: CreateToastFnReturn | null = useSelectToast();
   const { changePassword, error, passwordTag, saving } = useChangePassword();
   const subTextColor: string = useSubTextColor();
+  // state
   const [newPassword, setNewPassword] = useState<string | null>(null);
   const [score, setScore] = useState<number>(-1);
+  // handlers
   const handlePasswordChange = (newPassword: string, newScore: number) => {
     setNewPassword(newPassword);
     setScore(newScore);
@@ -93,20 +96,23 @@ const ChangePasswordPage: FC = () => {
       <PageHeader
         title={t<string>('titles.page', { context: 'changePassword' })}
       />
+
       <VStack
         flexGrow={1}
         pb={DEFAULT_GAP}
         px={DEFAULT_GAP}
-        spacing={8}
+        spacing={DEFAULT_GAP + 2}
         w="full"
       >
-        <VStack flexGrow={1} spacing={4} w="full">
-          <Text color={subTextColor} size="md" textAlign="left">
+        <VStack flexGrow={1} spacing={DEFAULT_GAP / 2} w="full">
+          <Text color={subTextColor} fontSize="sm" textAlign="left" w="full">
             {t<string>('captions.changePassword1')}
           </Text>
-          <Text color={subTextColor} size="md" textAlign="left">
+
+          <Text color={subTextColor} fontSize="sm" textAlign="left" w="full">
             {t<string>('captions.changePassword2')}
           </Text>
+
           <CreatePasswordInput
             disabled={saving}
             label={t<string>('labels.newPassword')}
@@ -115,6 +121,7 @@ const ChangePasswordPage: FC = () => {
             value={newPassword || ''}
           />
         </VStack>
+
         <Button
           isLoading={saving}
           onClick={handleChangeClick}