fix: address design qa issues

leather-io · Aug 21, 2024 · 6adcfeb · 6adcfeb
1 parent 1713a85
commit 6adcfeb
Show file tree

Hide file tree

Showing 38 changed files with 598 additions and 328 deletions.
diff --git a/apps/mobile/ios/Podfile.lock b/apps/mobile/ios/Podfile.lock
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -98,6 +98,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.74.1",
     "react-native-gesture-handler": "2.16.1",
+    "react-native-keyboard-aware-scroll-view": "0.9.5",
     "react-native-keychain": "8.2.0",
     "react-native-reanimated": "3.10.1",
     "react-native-safe-area-context": "4.10.1",

diff --git a/apps/mobile/src/app/wallet/create-new-wallet.tsx b/apps/mobile/src/app/wallet/create-new-wallet.tsx
@@ -2,19 +2,19 @@ import { useEffect, useState } from 'react';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { ThemedBlurView } from '@/components/blur-view';
 import { Button } from '@/components/button';
 import { MnemonicWordBox } from '@/components/create-new-wallet/mnemonic-word-box';
+import { useToastContext } from '@/components/toast/toast-context';
 import { useCreateWallet } from '@/hooks/create-wallet';
 import { tempMnemonicStore } from '@/state/storage-persistors';
-import { t } from '@lingui/macro';
+import { Trans, t } from '@lingui/macro';
 import { useTheme } from '@shopify/restyle';
-import { BlurView } from 'expo-blur';
 import * as Clipboard from 'expo-clipboard';
 
 import { generateMnemonic } from '@leather.io/crypto';
 import {
   Box,
-  CheckmarkCircleIcon,
   CopyIcon,
   PointerIcon,
   QuestionCircleIcon,
@@ -42,9 +42,9 @@ export default function CreateNewWallet() {
   const { bottom } = useSafeAreaInsets();
   const theme = useTheme<Theme>();
   const [isHidden, setIsHidden] = useState(true);
-  const [isCopied, setIsCopied] = useState(false);
   const [mnemonic, setMnemonic] = useState<string | null>(null);
   const { navigateAndCreateWallet } = useCreateWallet();
+  const { displayToast } = useToastContext();
 
   useEffect(() => {
     const tempMnemonic = generateMnemonic();
@@ -73,16 +73,20 @@ export default function CreateNewWallet() {
           >
             <QuestionCircleIcon color={theme.colors['ink.text-primary']} variant="small" />
           </TouchableOpacity>
-          <Text variant="heading03">{t`BACK UP YOUR SECRET KEY`}</Text>
+          <Box>
+            <Trans>
+              <Text variant="heading03">BACK UP YOUR</Text>
+              <Text variant="heading03">SECRET KEY</Text>
+            </Trans>
+          </Box>
           <Text variant="label01">
             {t`Your Secret Key grants you access to your wallet and its assets.`}
           </Text>
         </Box>
 
         <Box my="5">
           {isHidden && (
-            <BlurView
-              tint="systemChromeMaterialLight"
+            <ThemedBlurView
               intensity={isHidden ? 30 : 0}
               style={{
                 position: 'absolute',
@@ -109,7 +113,7 @@ export default function CreateNewWallet() {
                   </Text>
                 </Box>
               </TouchableOpacity>
-            </BlurView>
+            </ThemedBlurView>
           )}
           <MnemonicDisplay mnemonic={mnemonic} />
           <Box p="3" mt="3" flexDirection="row" gap="4" borderRadius="xs">
@@ -123,7 +127,7 @@ export default function CreateNewWallet() {
               variant="label03"
               color="ink.text-subdued"
             >
-              {t`We recommend writing these words in numbered order on a piece of paper and storing it in a safe place.`}
+              {t`We recommend writing these words in numbered order on a piece of paper and storing it in a safe place.`}{' '}
               <Text
                 onPress={() => {
                   // TODO: navigate to a website
@@ -139,18 +143,17 @@ export default function CreateNewWallet() {
           </Box>
         </Box>
       </ScrollView>
-      <Box px="5">
+      <Box px="5" gap="4">
         <Button
           onPress={async () => {
             if (mnemonic) {
               await Clipboard.setStringAsync(mnemonic);
-              setIsCopied(true);
+              displayToast({ title: t`Successfully copied to clipboard!`, type: 'success' });
             }
           }}
-          pb="4"
-          icon={isCopied ? <CheckmarkCircleIcon /> : <CopyIcon />}
+          icon={<CopyIcon />}
           buttonState="ghost"
-          title={isCopied ? t`Copied to clipboard` : t`Copy to clipboard`}
+          title={t`Copy to clipboard`}
         />
         <Button
           onPress={() => {

diff --git a/apps/mobile/src/app/wallet/recover-wallet.tsx b/apps/mobile/src/app/wallet/recover-wallet.tsx
@@ -1,5 +1,6 @@
 import { useRef, useState } from 'react';
 import { TextInput as RNTextInput } from 'react-native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Button } from '@/components/button';
@@ -8,7 +9,7 @@ import { InputState, TextInput } from '@/components/text-input';
 import { useCreateWallet } from '@/hooks/create-wallet';
 import { tempMnemonicStore } from '@/state/storage-persistors';
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
-import { t } from '@lingui/macro';
+import { Trans, t } from '@lingui/macro';
 import { useTheme } from '@shopify/restyle';
 import * as Clipboard from 'expo-clipboard';
 
@@ -50,11 +51,12 @@ export default function RecoverWallet() {
   const recoverWalletModalRef = useRef<BottomSheetModal>(null);
   const [passphrase, setPassphrase] = useState('');
   const { navigateAndCreateWallet } = useCreateWallet();
+  const hidePasteButton = recoveryMnemonic.length > 0;
 
   function validateMnemonicOnBlur() {
     const invalidWords = getInvalidMnemonicWords(recoveryMnemonic);
     const isError = invalidWords.length !== 0;
-    if (isError) {
+    if (recoveryMnemonic.length > 0 && isError) {
       setInputState('error');
       setErrorMessage(constructErrorMessage(invalidWords));
     } else {
@@ -102,11 +104,9 @@ export default function RecoverWallet() {
       <Box
         flex={1}
         backgroundColor="ink.background-primary"
-        px="5"
-        justifyContent="space-between"
         style={{ paddingBottom: bottom + theme.spacing['5'] }}
       >
-        <Box>
+        <KeyboardAwareScrollView contentContainerStyle={{ paddingHorizontal: theme.spacing['5'] }}>
           <Box gap="3" pt="5">
             <TouchableOpacity
               onPress={() => {
@@ -120,18 +120,26 @@ export default function RecoverWallet() {
             >
               <QuestionCircleIcon color={theme.colors['ink.text-primary']} variant="small" />
             </TouchableOpacity>
-            <Text variant="heading03">{t`ENTER YOUR SECRET KEY`}</Text>
+            <Box>
+              <Trans>
+                <Text variant="heading03">ENTER YOUR</Text>
+                <Text variant="heading03">SECRET KEY</Text>
+              </Trans>
+            </Box>
             <Text variant="label01">{t`Paste or type a Secret Key to add its associated wallet.`}</Text>
           </Box>
           <Box mb="3">
-            <Button
-              onPress={pasteFromClipboard}
-              style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 100 }}
-              buttonState="default"
-              title={t`Paste`}
-              icon={<NoteIcon />}
-            />
+            {!hidePasteButton && (
+              <Button
+                onPress={pasteFromClipboard}
+                style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 100 }}
+                buttonState="default"
+                title={t`Paste`}
+                icon={<NoteIcon color={theme.colors['ink.background-primary']} />}
+              />
+            )}
             <TextInput
+              textVariant="label01"
               onBlur={validateMnemonicOnBlur}
               ref={inputRef}
               mt="5"
@@ -166,7 +174,8 @@ export default function RecoverWallet() {
               onPress={() => {
                 recoverWalletModalRef.current?.present();
               }}
-              py="3"
+              pt="3"
+              pb="5"
               flexDirection="row"
               justifyContent="space-between"
               alignItems="center"
@@ -185,8 +194,9 @@ export default function RecoverWallet() {
               <ChevronRightIcon color={theme.colors['ink.text-primary']} variant="small" />
             </TouchableOpacity>
           )}
-        </Box>
+        </KeyboardAwareScrollView>
         <Button
+          mx="5"
           onPress={onSubmit}
           disabled={isButtonDisabled}
           buttonState={isButtonDisabled ? 'disabled' : 'default'}

diff --git a/apps/mobile/src/app/wallet/secure-your-wallet.tsx b/apps/mobile/src/app/wallet/secure-your-wallet.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/components/button';
 import { SkipSecureWalletModal } from '@/components/secure-your-wallet/skip-secure-wallet-modal';
 import { useCreateWallet } from '@/hooks/create-wallet';
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
-import { t } from '@lingui/macro';
+import { Trans, t } from '@lingui/macro';
 import { useTheme } from '@shopify/restyle';
 
 import {
@@ -45,7 +45,12 @@ export default function SecureYourWalletScreen() {
           >
             <QuestionCircleIcon variant="small" />
           </TouchableOpacity>
-          <Text variant="heading03">{t`SECURE YOUR WALLET`}</Text>
+          <Box>
+            <Trans>
+              <Text variant="heading03">SECURE</Text>
+              <Text variant="heading03">YOUR WALLET</Text>
+            </Trans>
+          </Box>
           <Text variant="label01">
             {t`Use your device’s PIN, Face ID, or other biometrics for quick and secure access.`}
           </Text>
@@ -72,7 +77,8 @@ export default function SecureYourWalletScreen() {
         </Box>
       </Box>
       <SkipSecureWalletModal
-        onSkip={async () => {
+        onSubmit={async () => {
+          skipSecureWalletModalRef.current?.close();
           await createWallet({ biometrics: false });
         }}
         skipSecureWalletModalRef={skipSecureWalletModalRef}

diff --git a/apps/mobile/src/components/action-bar/index.tsx b/apps/mobile/src/components/action-bar/index.tsx
@@ -8,10 +8,11 @@ import Animated, {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '@shopify/restyle';
-import { BlurView } from 'expo-blur';
 
 import { Box, Theme } from '@leather.io/ui/native';
 
+import { ThemedBlurView } from '../blur-view';
+
 export const ACTION_BAR_HEIGHT = 70;
 export const ACTION_BAR_BOTTOM_OFFSET = 40;
 export const ACTION_BAR_TOTAL_HEIGHT = ACTION_BAR_HEIGHT + ACTION_BAR_BOTTOM_OFFSET;
@@ -83,8 +84,7 @@ export const ActionBar = forwardRef<ActionBarMethods, ActionBarProps>(function (
       ]}
     >
       <Box width="100%" px="5" justifyContent="center" alignItems="center">
-        <BlurView
-          tint="systemChromeMaterialLight"
+        <ThemedBlurView
           intensity={90}
           style={{
             flexDirection: 'row',
@@ -99,16 +99,22 @@ export const ActionBar = forwardRef<ActionBarMethods, ActionBarProps>(function (
             borderRadius: theme.borderRadii.xs,
           }}
         >
-          <Box flex={1} flexDirection="row" justifyContent="center" alignItems="center">
-            {props?.left}
-          </Box>
-          <Box flex={1} flexDirection="row" justifyContent="center" alignItems="center">
-            {props?.center}
-          </Box>
-          <Box flex={1} flexDirection="row" justifyContent="center" alignItems="center">
-            {props?.right}
-          </Box>
-        </BlurView>
+          {props.left && (
+            <Box flex={1} flexDirection="row" justifyContent="center" alignItems="center">
+              {props.left}
+            </Box>
+          )}
+          {props.center && (
+            <Box flex={1} flexDirection="row" justifyContent="center" alignItems="center">
+              {props.center}
+            </Box>
+          )}
+          {props.right && (
+            <Box flex={1} flexDirection="row" justifyContent="center" alignItems="center">
+              {props?.right}
+            </Box>
+          )}
+        </ThemedBlurView>
       </Box>
     </Animated.View>
   );

diff --git a/apps/mobile/src/components/add-wallet/add-wallet-modal.tsx b/apps/mobile/src/components/add-wallet/add-wallet-modal.tsx
@@ -27,7 +27,7 @@ import {
   TouchableOpacity,
 } from '@leather.io/ui/native';
 
-import { CLOSED_ANIMATED_POSITION, Modal } from '../bottom-sheet-modal';
+import { CLOSED_ANIMATED_SHARED_VALUE, Modal } from '../bottom-sheet-modal';
 import { NotifyUserModal, OptionData } from '../notify-user-modal';
 
 interface AddWalletListItemProps {
@@ -138,20 +138,19 @@ export function AddWalletModalUI({
   onOpenNotificationsModal,
 }: AddWalletModalUIProps) {
   const [moreOptionsVisible, setMoreOptionsVisible] = useState(false);
-  const animatedPosition = useSharedValue<number>(CLOSED_ANIMATED_POSITION);
+  const animatedIndex = useSharedValue<number>(CLOSED_ANIMATED_SHARED_VALUE);
   const theme = useTheme<Theme>();
 
   function openOptions() {
     setMoreOptionsVisible(!moreOptionsVisible);
   }
-
   const animatedStyle = useAnimatedStyle(() => ({
-    marginTop: interpolate(animatedPosition.value, [800, 300], [-200, 0], Extrapolation.CLAMP),
-    marginBottom: interpolate(animatedPosition.value, [800, 300], [200, 0], Extrapolation.CLAMP),
+    marginTop: interpolate(animatedIndex.value, [-1, 0], [-200, 0], Extrapolation.CLAMP),
+    marginBottom: interpolate(animatedIndex.value, [-1, 0], [200, 0], Extrapolation.CLAMP),
   }));
 
   return (
-    <Modal isScrollView animatedPosition={animatedPosition} ref={addWalletModalRef}>
+    <Modal isScrollView animatedIndex={animatedIndex} ref={addWalletModalRef}>
       <AnimatedBox style={animatedStyle}>
         <Box width="100%" style={{ height: 200, overflow: 'hidden' }} bg="ink.text-primary">
           <Image
@@ -160,7 +159,7 @@ export function AddWalletModalUI({
             source={require('@/assets/create-wallet-image.png')}
           />
         </Box>
-        <Box px="5" pt="5">
+        <Box p="5">
           <Text pb="5" variant="heading03">
             {t`Add wallet to "Use case"`}
           </Text>

diff --git a/apps/mobile/src/components/blur-view.tsx b/apps/mobile/src/components/blur-view.tsx
@@ -0,0 +1,11 @@
+import { LegacyRef, forwardRef } from 'react';
+
+import { useSettings } from '@/state/settings/settings.slice';
+import { BlurTint, BlurView, BlurViewProps } from 'expo-blur';
+
+export const ThemedBlurView = forwardRef((props: BlurViewProps, ref: LegacyRef<BlurView>) => {
+  const { theme } = useSettings();
+  const tint: BlurTint =
+    theme === 'dark' ? 'systemChromeMaterialDark' : 'systemChromeMaterialLight';
+  return <BlurView ref={ref} tint={tint} {...props} />;
+});