feat: web svg icons

apps/mobile/src/app/wallet/(tabs)/_layout.tsx

@@ -11,7 +11,7 @@ import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { t } from '@lingui/macro';
 import { Tabs, usePathname, useRouter } from 'expo-router';
 
-import { Box, EmojiSmileIcon, HamburgerIcon, Text, TouchableOpacity } from '@leather.io/ui/native';
+import { BarsTwoIcon, Box, EmojiSmileIcon, Text, TouchableOpacity } from '@leather.io/ui/native';
 
 function HeaderCenter({ onPress }: { onPress?(): void }) {
   return (
@@ -40,7 +40,7 @@ function HeaderRight({ onPress }: { onPress?(): void }) {
       justifyContent="center"
       alignItems="center"
     >
-      <HamburgerIcon />
+      <BarsTwoIcon />
     </TouchableOpacity>
   );
 }

apps/mobile/src/app/wallet/create-new-wallet.tsx

@@ -16,9 +16,9 @@ import { generateMnemonic } from '@leather.io/crypto';
 import {
   Box,
   CopyIcon,
-  PointerIcon,
+  GraduateCapIcon,
+  PointerHandIcon,
   QuestionCircleIcon,
-  StudyIcon,
   Text,
   Theme,
   TouchableOpacity,
@@ -105,7 +105,7 @@ export default function CreateNewWallet() {
                 alignItems="center"
                 gap="2"
               >
-                <PointerIcon />
+                <PointerHandIcon />
                 <Box>
                   <Text variant="label02">{t`Tap to view Secret Key`}</Text>
                   <Text variant="label02" color="red.action-primary-default">
@@ -117,7 +117,7 @@ export default function CreateNewWallet() {
           )}
           <MnemonicDisplay mnemonic={mnemonic} />
           <Box p="3" mt="3" flexDirection="row" gap="4" borderRadius="xs">
-            <StudyIcon color={theme.colors['ink.text-subdued']} />
+            <GraduateCapIcon color={theme.colors['ink.text-subdued']} />
             <Text
               style={{
                 flexShrink: 1,

apps/mobile/src/app/wallet/recover-wallet.tsx

@@ -20,7 +20,7 @@ import {
   ChevronRightIcon,
   ChevronUpIcon,
   LockIcon,
-  NoteIcon,
+  NoteEmptyIcon,
   QuestionCircleIcon,
   Text,
   Theme,
@@ -135,7 +135,7 @@ export default function RecoverWallet() {
                 style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 100 }}
                 buttonState="default"
                 title={t`Paste`}
-                icon={<NoteIcon color={theme.colors['ink.background-primary']} />}
+                icon={<NoteEmptyIcon color={theme.colors['ink.background-primary']} />}
               />
             )}
             <TextInput

apps/mobile/src/components/action-bar/container.tsx

@@ -9,10 +9,10 @@ import { t } from '@lingui/macro';
 import { useRouter } from 'expo-router';
 
 import {
+  ArrowsRepeatLeftRightIcon,
   InboxIcon,
+  PaperPlaneIcon,
   PlusIcon,
-  SendIcon,
-  SwapIcon,
   Text,
   TouchableOpacity,
 } from '@leather.io/ui/native';
@@ -164,7 +164,7 @@ export const ActionBarContainer = forwardRef<ActionBarMethods>((_, ref) => {
       left={
         <ActionBarButton
           onPress={() => router.navigate(APP_ROUTES.WalletSend)}
-          icon={<SendIcon />}
+          icon={<PaperPlaneIcon />}
           label={t`Send`}
         />
       }
@@ -178,7 +178,7 @@ export const ActionBarContainer = forwardRef<ActionBarMethods>((_, ref) => {
       right={
         <ActionBarButton
           onPress={() => router.navigate(APP_ROUTES.WalletSwap)}
-          icon={<SwapIcon />}
+          icon={<ArrowsRepeatLeftRightIcon />}
           label={t`Swap`}
         />
       }

apps/mobile/src/components/add-wallet/add-wallet-modal.tsx

@@ -14,14 +14,14 @@ import { Image } from 'expo-image';
 import { useRouter } from 'expo-router';
 
 import {
+  ArrowRotateClockwiseIcon,
   Box,
-  ColorSwatchIcon,
   EllipsisHIcon,
   EmailIcon,
-  EyeIcon,
-  NfcIcon,
+  Eye2Icon,
+  PaletteIcon,
   PlusIcon,
-  ReloadIcon,
+  SignalIcon,
   Text,
   Theme,
   TouchableOpacity,
@@ -62,7 +62,7 @@ function getUnavailableFeatures(theme: Theme) {
     hardwareWallet: {
       title: t`Connect hardware wallet`,
       subtitle: t`Ledger, Trezor, Ryder and more`,
-      icon: <NfcIcon color={theme.colors['ink.text-subdued']} />,
+      icon: <SignalIcon color={theme.colors['ink.text-subdued']} />,
     },
     emailRestore: {
       title: t`Create or restore via email`,
@@ -72,12 +72,12 @@ function getUnavailableFeatures(theme: Theme) {
     mpcWallet: {
       title: t`Connect MPC wallet`,
       subtitle: t`Import existing accounts`,
-      icon: <ColorSwatchIcon color={theme.colors['ink.text-subdued']} />,
+      icon: <PaletteIcon color={theme.colors['ink.text-subdued']} />,
     },
     watchOnlyWallet: {
       title: t`Create watch-only wallet`,
       subtitle: t`No key needed`,
-      icon: <EyeIcon color={theme.colors['ink.text-subdued']} />,
+      icon: <Eye2Icon color={theme.colors['ink.text-subdued']} />,
     },
   };
   return UNAVAILABLE_FEATURES;
@@ -174,7 +174,7 @@ export function AddWalletModalUI({
               onPress={restoreWallet}
               title={t`Restore wallet`}
               subtitle={t`Import existing accounts`}
-              icon={<ReloadIcon />}
+              icon={<ArrowRotateClockwiseIcon />}
             />
             <AddWalletListItem
               onPress={openOptions}

apps/mobile/src/components/browser/browser-in-use.tsx

@@ -9,12 +9,12 @@ import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { useTheme } from '@shopify/restyle';
 
 import {
+  ArrowRotateClockwiseIcon,
   Box,
   ChevronLeftIcon,
   ChevronRightIcon,
   CloseIcon,
   EllipsisHIcon,
-  ReloadIcon,
   Text,
   Theme,
   TouchableOpacity,
@@ -130,7 +130,7 @@ export function BrowerInUse({ textURL, goToInactiveBrowser }: BrowserInUseProp)
           <ChevronRightIcon />
         </TouchableOpacity>
         <TouchableOpacity p="3" onPress={reload}>
-          <ReloadIcon />
+          <ArrowRotateClockwiseIcon />
         </TouchableOpacity>
         <TouchableOpacity p="3" onPress={openSettings}>
           <EllipsisHIcon />

apps/mobile/src/components/headers/leather-logo.tsx

@@ -1,9 +1,9 @@
-import { Box, LogomarkIcon } from '@leather.io/ui/native';
+import { Box, LeatherLogomarkIcon } from '@leather.io/ui/native';
 
 export function LeatherLogoHeader() {
   return (
     <Box p="3">
-      <LogomarkIcon />
+      <LeatherLogomarkIcon />
     </Box>
   );
 }

apps/mobile/src/components/headers/menu.tsx

@@ -1,9 +1,9 @@
-import { HamburgerIcon, TouchableOpacity } from '@leather.io/ui/native';
+import { BarsTwoIcon, TouchableOpacity } from '@leather.io/ui/native';
 
 export function MenuHeader({ onPress }: { onPress?(): void }) {
   return (
     <TouchableOpacity onPress={onPress} p="3">
-      <HamburgerIcon />
+      <BarsTwoIcon />
     </TouchableOpacity>
   );
 }

apps/mobile/src/components/headers/options.tsx

@@ -1,18 +1,18 @@
 import { APP_ROUTES } from '@/constants';
 import { useRouter } from 'expo-router';
 
-import { Box, ConsoleIcon, SettingsIcon, TouchableOpacity } from '@leather.io/ui/native';
+import { Box, PulseIcon, SettingsSliderThreeIcon, TouchableOpacity } from '@leather.io/ui/native';
 
 export function OptionsHeader() {
   const router = useRouter();
 
   return (
     <Box flexDirection="row">
       <TouchableOpacity p="3" onPress={() => router.navigate(APP_ROUTES.WalletSettings)}>
-        <SettingsIcon />
+        <SettingsSliderThreeIcon />
       </TouchableOpacity>
       <TouchableOpacity p="3" onPress={() => router.navigate(APP_ROUTES.WalletDeveloperConsole)}>
-        <ConsoleIcon />
+        <PulseIcon />
       </TouchableOpacity>
     </Box>
   );

apps/mobile/src/components/notify-user-modal.tsx

@@ -7,9 +7,9 @@ import { t } from '@lingui/macro';
 import { useTheme } from '@shopify/restyle';
 
 import {
+  BellAlarmIcon,
   Box,
   CloseIcon,
-  NotificationIcon,
   Text,
   Theme,
   TouchableOpacity,
@@ -67,7 +67,7 @@ export function NotifyUserModal({
         </Box>
         <Button
           onPress={onNotify}
-          icon={<NotificationIcon color={theme.colors[getTextColor('default')]} />}
+          icon={<BellAlarmIcon color={theme.colors[getTextColor('default')]} />}
           buttonState="default"
           title={t`Notify me when it's ready`}
         />

apps/mobile/src/components/warning-modal/warning-modal.tsx

@@ -2,7 +2,7 @@ import { RefObject } from 'react';
 
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
 
-import { Box, Text, TriangleExclamationIcon } from '@leather.io/ui/native';
+import { Box, ErrorTriangleIcon, Text } from '@leather.io/ui/native';
 
 import { Modal } from '../bottom-sheet-modal';
 import { Button, ButtonState } from '../button';
@@ -51,7 +51,7 @@ export function WarningModal({
             <ModalHeader
               title={title}
               modalVariant={variant}
-              Icon={TriangleExclamationIcon}
+              Icon={ErrorTriangleIcon}
               onPressSupport={onPressSupport}
             />
           </Box>

apps/mobile/src/locales/en/messages.po

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2024-08-20 14:14+0400\n"
+"POT-Creation-Date: 2024-08-22 11:16-0400\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"

apps/mobile/src/locales/pseudo-locale/messages.po

@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2024-08-20 14:14+0400\n"
+"POT-Creation-Date: 2024-08-22 11:16-0400\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"

packages/tokens/src/tokens.ts

@@ -42,8 +42,6 @@ export const tokens = {
     popupHeight: { value: '756px' },
     popupHeaderHeight: { value: '68px' },
     headerContainerHeight: { value: '40px' },
-    logoHeight: { value: '32px' },
-    logoWidth: { value: '86px' },
     inputHeight: { value: '64px' },
     iconButtonWithLabelWidth: { value: '64px' },
     settingsMenuWidth: { value: '240px' },

packages/ui/.gitignore

@@ -2,7 +2,6 @@
 
 # dependencies
 node_modules/
-.npmrc
 
 # Expo
 .expo/

packages/ui/.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers=true
+save-exact=true

packages/ui/README.md

@@ -16,7 +16,7 @@ Specify the library as part of the `panda.config` `include`:
 
 ```js
   include: [
-    './node_modules/@leather.io/ui/dist-all/src/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@leather.io/ui/dist-web/src/**/*.{js,jsx,ts,tsx}',
     './src/**/*.{js,jsx,ts,tsx}',
   ],
 ```

packages/ui/package.json

@@ -4,13 +4,12 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "assets:web": "mkdir -p dist-web/src && cp -r src/assets-web ./dist-web/src && cp -r src/assets ./dist-web/src",
-    "build": "pnpm panda && pnpm build:native && pnpm build:web && pnpm build:all",
+    "build": "pnpm panda && pnpm build:native && pnpm build:web",
     "build-storybook:web": "storybook build -c ./src/.storybook-web",
     "build:all": "tsc --build ./tsconfig.json",
     "build:native": "tsup --config tsup.config.native.ts",
     "build:watch": "concurrently  \"pnpm panda:watch\"  \"pnpm build:native --watch --preserveWatchOutput\"  \"pnpm build:web --watch\" ",
-    "build:web": "pnpm assets:web && tsup --config tsup.config.web.ts",
+    "build:web": "tsup --config tsup.config.web.ts",
     "format": "prettier . --write \"src/**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
     "format:check": "prettier . --check \"src/**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
     "lint": "eslint . --ignore-path ../../.eslintignore",
@@ -24,7 +23,7 @@
     "typecheck": "tsc --noEmit --project ./tsconfig.json"
   },
   "exports": {
-    ".": "./dist-all/web.js",
+    ".": "./dist-web/web.js",
     "./native": "./dist-native/native.js"
   },
   "dependencies": {
@@ -87,6 +86,7 @@
     "babel-preset-expo": "11.0.6",
     "concurrently": "8.2.2",
     "css-loader": "6.10.0",
+    "esbuild-plugin-clean": "1.0.1",
     "esbuild-plugin-copy": "2.1.1",
     "esbuild-plugin-svgr": "2.1.0",
     "eslint": "8.53.0",
@@ -102,7 +102,6 @@
     "typescript": "5.5.4"
   },
   "files": [
-    "dist-all",
     "dist-web",
     "dist-native"
   ],