feat: mobile ui svg icons

leather-io · Aug 19, 2024 · 126f912 · 126f912
1 parent 06603c9
commit 126f912
Show file tree

Hide file tree

Showing 246 changed files with 2,488 additions and 3,722 deletions.
diff --git a/.dependency-cruiser.cjs b/.dependency-cruiser.cjs
@@ -223,6 +223,7 @@ module.exports = {
         pathNot: [
           '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx|ls|coffee|litcoffee|coffee[.]md)$',
           'theme-web',
+          'tsup',
         ],
       },
       to: {

diff --git a/.eslintignore b/.eslintignore
@@ -10,5 +10,6 @@ dist-native/
 dist-all/
 dist-web/
 .turbo/
+.tsup/
 leather-styles/
-messages.js
+messages.js
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ dist
 build
 tsconfig.tsbuildinfo
 .turbo/
+.tsup/
 # macOS
 .DS_Store
 leather-styles

diff --git a/.prettierignore b/.prettierignore
@@ -1,11 +1,12 @@
 node_modules/
 pnpm-lock.yaml
 .turbo/
+.tsup/
 dist/
 dist-native/
 dist-all/
 dist-web/
 leather-styles/
 package.json
 CHANGELOG.md
-messages.js
+messages.js
diff --git a/apps/mobile/app.json b/apps/mobile/app.json
@@ -15,9 +15,7 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": false
     },
@@ -29,16 +27,25 @@
       "package": "io.leather.mobilewallet"
     },
     "plugins": [
-      "expo-font",
+      [
+        "expo-font",
+        {
+          "fonts": [
+            "node_modules/@leather.io/ui/dist-native/src/assets-native/fonts/SpaceMono-Regular.ttf",
+            "node_modules/@leather.io/ui/src/assets-native/fonts/ABCDiatype-Regular.otf",
+            "node_modules/@leather.io/ui/src/assets-native/fonts/ABCDiatype-Light.otf",
+            "node_modules/@leather.io/ui/src/assets-native/fonts/ABCDiatype-Medium.otf",
+            "node_modules/@leather.io/ui/src/assets-native/fonts/marche-super-pro.otf"
+          ]
+        }
+      ],
       "expo-router",
       "expo-secure-store",
       "@config-plugins/detox",
       [
         "expo-asset",
         {
-          "assets": [
-            "src/assets/scripts/injected-provider.js"
-          ]
+          "assets": ["src/assets/scripts/injected-provider.js"]
         }
       ],
       [

diff --git a/apps/mobile/src/app/_layout.tsx b/apps/mobile/src/app/_layout.tsx
@@ -18,7 +18,7 @@ import { Slot } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 import { PersistGate } from 'redux-persist/integration/react';
 
-import { Box, ThemeProvider as LeatherThemeProvider, useLoadFonts } from '@leather.io/ui/native';
+import { Box, ThemeProvider as LeatherThemeProvider } from '@leather.io/ui/native';
 
 void SplashScreen.preventAutoHideAsync();
 
@@ -31,13 +31,7 @@ export const unstable_settings = { initialRouteName: '/' };
 initiateI18n();
 
 export default function RootLayout() {
-  const { fontsLoaded } = useLoadFonts({
-    onLoaded() {
-      void SplashScreen.hideAsync();
-    },
-  });
-
-  if (!fontsLoaded) return null;
+  void SplashScreen.hideAsync();
 
   return (
     <ReduxProvider store={store}>

diff --git a/apps/mobile/src/app/waiting-list/waiting-list.tsx b/apps/mobile/src/app/waiting-list/waiting-list.tsx
@@ -3,9 +3,7 @@ import { Image, Keyboard, KeyboardAvoidingView, Pressable } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-import CheckmarkCircle from '@/assets/checkmark-circle.svg';
-import XLogo from '@/assets/logo-x.svg';
-import { AnimatedButton, Button, ButtonState } from '@/components/button';
+import { AnimatedButton, Button, ButtonState, getTextColor } from '@/components/button';
 import { InputState, TextInput } from '@/components/text-input';
 import { BROWSER_EXTENSION_LINK, TWITTER_LINK } from '@/constants';
 import { useSubmitWaitingListEmailForm } from '@/queries/use-submit-waiting-list-form-email';
@@ -15,7 +13,7 @@ import { useTheme } from '@shopify/restyle';
 import * as Linking from 'expo-linking';
 import LottieView from 'lottie-react-native';
 
-import { Box, Text, Theme } from '@leather.io/ui/native';
+import { Box, CheckmarkCircleIcon, Text, Theme, XLogoIcon } from '@leather.io/ui/native';
 
 import { WelcomeScreenTestIds } from '../../../test-ids';
 import { Spinner } from '../../components/spinner';
@@ -241,7 +239,7 @@ export function WaitingList(props: WelcomeScreenLayoutProps) {
         onPress={() => Linking.openURL(TWITTER_LINK)}
         title={t`Follow us`}
         buttonState="outline"
-        Icon={XLogo}
+        icon={<XLogoIcon color={theme.colors[getTextColor('outline')]} />}
         mb="3"
       />
       <Button
@@ -299,7 +297,7 @@ export function WaitingList(props: WelcomeScreenLayoutProps) {
         buttonState={getButtonState()}
         disabled={isButtonDisabled}
         testID={WelcomeScreenTestIds.SubmitEmailButton}
-        Icon={isPending ? Spinner : showSuccess ? CheckmarkCircle : undefined}
+        icon={isPending ? <Spinner /> : showSuccess ? <CheckmarkCircleIcon /> : undefined}
       />
     </Box>
   );

diff --git a/apps/mobile/src/app/wallet/(tabs)/_layout.tsx b/apps/mobile/src/app/wallet/(tabs)/_layout.tsx
@@ -1,8 +1,6 @@
 import { useRef } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import EmojiSmile from '@/assets/emoji-smile.svg';
-import Menu from '@/assets/menu.svg';
 import { ActionBarMethods } from '@/components/action-bar';
 import { ActionBarContainer, ActionBarContext } from '@/components/action-bar/container';
 import { Modal } from '@/components/bottom-sheet-modal';
@@ -13,7 +11,7 @@ import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { t } from '@lingui/macro';
 import { Tabs, usePathname, useRouter } from 'expo-router';
 
-import { Box, Text, TouchableOpacity } from '@leather.io/ui/native';
+import { Box, EmojiSmileIcon, HamburgerIcon, Text, TouchableOpacity } from '@leather.io/ui/native';
 
 function HeaderCenter({ onPress }: { onPress?(): void }) {
   return (
@@ -26,7 +24,7 @@ function HeaderCenter({ onPress }: { onPress?(): void }) {
       gap="2"
     >
       <Box borderRadius="round" p="1" bg="blue.background-secondary">
-        <EmojiSmile width={24} height={24} />
+        <EmojiSmileIcon />
       </Box>
       <Text variant="heading05">{t`Account 1`}</Text>
     </TouchableOpacity>
@@ -42,7 +40,7 @@ function HeaderRight({ onPress }: { onPress?(): void }) {
       justifyContent="center"
       alignItems="center"
     >
-      <Menu height={24} width={24} />
+      <HamburgerIcon />
     </TouchableOpacity>
   );
 }

diff --git a/apps/mobile/src/app/wallet/create-new-wallet.tsx b/apps/mobile/src/app/wallet/create-new-wallet.tsx
@@ -2,11 +2,6 @@ import { useEffect, useState } from 'react';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import Checkmark from '@/assets/checkmark-circle.svg';
-import CircleQuestionMark from '@/assets/circle-questionmark.svg';
-import Copy from '@/assets/copy.svg';
-import GraduateCap from '@/assets/graduate-cap.svg';
-import Pointer from '@/assets/pointer.svg';
 import { Button } from '@/components/button';
 import { MnemonicWordBox } from '@/components/create-new-wallet/mnemonic-word-box';
 import { useCreateWallet } from '@/hooks/create-wallet';
@@ -17,7 +12,17 @@ import { BlurView } from 'expo-blur';
 import * as Clipboard from 'expo-clipboard';
 
 import { generateMnemonic } from '@leather.io/crypto';
-import { Box, Text, Theme, TouchableOpacity } from '@leather.io/ui/native';
+import {
+  Box,
+  CheckmarkCircleIcon,
+  CopyIcon,
+  PointerIcon,
+  QuestionCircleIcon,
+  StudyIcon,
+  Text,
+  Theme,
+  TouchableOpacity,
+} from '@leather.io/ui/native';
 
 function MnemonicDisplay({ mnemonic }: { mnemonic: string | null }) {
   if (!mnemonic) return null;
@@ -66,7 +71,7 @@ export default function CreateNewWallet() {
             zIndex={10}
             top={theme.spacing['1']}
           >
-            <CircleQuestionMark height={16} width={16} color={theme.colors['ink.text-primary']} />
+            <QuestionCircleIcon color={theme.colors['ink.text-primary']} variant="small" />
           </TouchableOpacity>
           <Text variant="heading03">{t`BACK UP YOUR SECRET KEY`}</Text>
           <Text variant="label01">
@@ -96,7 +101,7 @@ export default function CreateNewWallet() {
                 alignItems="center"
                 gap="2"
               >
-                <Pointer height={24} width={24} color={theme.colors['ink.text-primary']} />
+                <PointerIcon />
                 <Box>
                   <Text variant="label02">{t`Tap to view Secret Key`}</Text>
                   <Text variant="label02" color="red.action-primary-default">
@@ -108,7 +113,7 @@ export default function CreateNewWallet() {
           )}
           <MnemonicDisplay mnemonic={mnemonic} />
           <Box p="3" mt="3" flexDirection="row" gap="4" borderRadius="xs">
-            <GraduateCap height={24} width={24} color={theme.colors['ink.text-subdued']} />
+            <StudyIcon color={theme.colors['ink.text-subdued']} />
             <Text
               style={{
                 flexShrink: 1,
@@ -143,7 +148,7 @@ export default function CreateNewWallet() {
             }
           }}
           pb="4"
-          Icon={isCopied ? Checkmark : Copy}
+          icon={isCopied ? <CheckmarkCircleIcon /> : <CopyIcon />}
           buttonState="ghost"
           title={isCopied ? t`Copied to clipboard` : t`Copy to clipboard`}
         />

diff --git a/apps/mobile/src/app/wallet/recover-wallet.tsx b/apps/mobile/src/app/wallet/recover-wallet.tsx
@@ -2,12 +2,6 @@ import { useRef, useState } from 'react';
 import { TextInput as RNTextInput } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import ChevronDown from '@/assets/chevron-down.svg';
-import ChevronRight from '@/assets/chevron-right.svg';
-import ChevronUp from '@/assets/chevron-up.svg';
-import CircleQuestionMark from '@/assets/circle-questionmark.svg';
-import Lock from '@/assets/lock.svg';
-import Note from '@/assets/note-2.svg';
 import { Button } from '@/components/button';
 import { RecoverWalletModal } from '@/components/recover-wallet/recover-wallet-modal';
 import { InputState, TextInput } from '@/components/text-input';
@@ -19,7 +13,18 @@ import { useTheme } from '@shopify/restyle';
 import * as Clipboard from 'expo-clipboard';
 
 import { isValidMnemonic, isValidMnemonicWord } from '@leather.io/crypto';
-import { Box, Text, Theme, TouchableOpacity } from '@leather.io/ui/native';
+import {
+  Box,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  LockIcon,
+  NoteIcon,
+  QuestionCircleIcon,
+  Text,
+  Theme,
+  TouchableOpacity,
+} from '@leather.io/ui/native';
 
 function constructErrorMessage(invalidWords: string[]) {
   const joinedInvalidWords = invalidWords.join(', ');
@@ -92,8 +97,6 @@ export default function RecoverWallet() {
     setShowAdvancedOptions(!showAdvancedOptions);
   }
 
-  const ToggledChevron = showAdvancedOptions ? ChevronUp : ChevronDown;
-
   return (
     <>
       <Box
@@ -115,7 +118,7 @@ export default function RecoverWallet() {
               zIndex={10}
               top={theme.spacing['1']}
             >
-              <CircleQuestionMark height={16} width={16} color={theme.colors['ink.text-primary']} />
+              <QuestionCircleIcon color={theme.colors['ink.text-primary']} variant="small" />
             </TouchableOpacity>
             <Text variant="heading03">{t`ENTER YOUR SECRET KEY`}</Text>
             <Text variant="label01">{t`Paste or type a Secret Key to add its associated wallet.`}</Text>
@@ -126,7 +129,7 @@ export default function RecoverWallet() {
               style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 100 }}
               buttonState="default"
               title={t`Paste`}
-              Icon={Note}
+              icon={<NoteIcon />}
             />
             <TextInput
               onBlur={validateMnemonicOnBlur}
@@ -152,7 +155,11 @@ export default function RecoverWallet() {
             justifyContent="space-between"
           >
             <Text variant="label02">{t`Advanced options`}</Text>
-            <ToggledChevron color={theme.colors['ink.text-primary']} height={16} width={16} />
+            {showAdvancedOptions ? (
+              <ChevronUpIcon color={theme.colors['ink.text-primary']} variant="small" />
+            ) : (
+              <ChevronDownIcon color={theme.colors['ink.text-primary']} variant="small" />
+            )}
           </TouchableOpacity>
           {!showAdvancedOptions ? null : (
             <TouchableOpacity
@@ -166,7 +173,7 @@ export default function RecoverWallet() {
             >
               <Box flexDirection="row" gap="4">
                 <Box flexDirection="row" p="2" bg="ink.background-secondary" borderRadius="round">
-                  <Lock color={theme.colors['ink.text-primary']} width={24} height={24} />
+                  <LockIcon color={theme.colors['ink.text-primary']} />
                 </Box>
                 <Box flexDirection="column">
                   <Text variant="label02">{t`BIP39 passphrase`}</Text>
@@ -175,7 +182,7 @@ export default function RecoverWallet() {
                   </Text>
                 </Box>
               </Box>
-              <ChevronRight color={theme.colors['ink.text-primary']} width={16} height={16} />
+              <ChevronRightIcon color={theme.colors['ink.text-primary']} variant="small" />
             </TouchableOpacity>
           )}
         </Box>

diff --git a/apps/mobile/src/app/wallet/secure-your-wallet.tsx b/apps/mobile/src/app/wallet/secure-your-wallet.tsx
@@ -1,16 +1,21 @@
 import { useRef } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import CircleQuestionMark from '@/assets/circle-questionmark.svg';
-import Lock from '@/assets/lock.svg';
 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 { useTheme } from '@shopify/restyle';
 
-import { Box, Text, Theme, TouchableOpacity } from '@leather.io/ui/native';
+import {
+  Box,
+  LockIcon,
+  QuestionCircleIcon,
+  Text,
+  Theme,
+  TouchableOpacity,
+} from '@leather.io/ui/native';
 
 export default function SecureYourWalletScreen() {
   const { bottom } = useSafeAreaInsets();
@@ -38,15 +43,15 @@ export default function SecureYourWalletScreen() {
             zIndex={10}
             top={theme.spacing['1']}
           >
-            <CircleQuestionMark height={16} width={16} color={theme.colors['ink.text-primary']} />
+            <QuestionCircleIcon variant="small" />
           </TouchableOpacity>
           <Text variant="heading03">{t`SECURE YOUR WALLET`}</Text>
           <Text variant="label01">
             {t`Use your device’s PIN, Face ID, or other biometrics for quick and secure access.`}
           </Text>
         </Box>
         <Box justifyContent="center" alignItems="center">
-          <Lock height={204} width={204} color={theme.colors['ink.text-primary']} />
+          <LockIcon height={204} width={204} />
         </Box>
         <Box>
           <Button

diff --git a/apps/mobile/src/assets/arrow-rotate-clockwise.svg b/apps/mobile/src/assets/arrow-rotate-clockwise.svg
diff --git a/apps/mobile/src/assets/bell.svg b/apps/mobile/src/assets/bell.svg
diff --git a/apps/mobile/src/assets/checkmark-circle.svg b/apps/mobile/src/assets/checkmark-circle.svg