Add token transfer functionality. Minor UX fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "devwallet",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "extension": {
     "name": "DW: DevWallet",
@@ -42,7 +42,7 @@
     "@radix-ui/react-form": "^0.0.3",
     "@radix-ui/react-polymorphic": "^0.0.14",
     "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-hook/resize-observer": "^1.2.6",
@@ -67,14 +67,14 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-flatten-children": "^1.1.2",
-    "react-hook-form": "^7.65.0",
+    "react-hook-form": "^7.66.0",
     "react-intersection-observer": "^9.16.0",
     "react-router": "^6.30.1",
     "react-router-dom": "^6.30.1",
     "remeda": "^1.61.0",
     "sonner": "^0.7.4",
     "use-sync-external-store": "^1.6.0",
-    "viem": "^2.38.3",
+    "viem": "^2.38.6",
     "zustand": "^4.5.7"
   },
   "devDependencies": {
@@ -90,7 +90,7 @@
     "@types/which-pm-runs": "^1.0.2",
     "@vanilla-extract/vite-plugin": "^4.0.20",
     "@vitejs/plugin-react": "^4.7.0",
-    "bun-types": "^1.3.0",
+    "bun-types": "^1.3.1",
     "cross-env": "^7.0.3",
     "globby": "^13.2.2",
     "patch-package": "^8.0.1",

src/app.tsx

@@ -50,6 +50,7 @@ import OnboardingRun from './screens/onboarding/run'
 import OnboardingStart from './screens/onboarding/start'
 import Session from './screens/session'
 import Settings from './screens/settings'
+import TokenTransfer from './screens/token-transfer'
 import TransactionDetails from './screens/transaction-details'
 
 export function init({ type = 'standalone' }: { type?: AppMeta['type'] } = {}) {
@@ -73,6 +74,10 @@ export function init({ type = 'standalone' }: { type?: AppMeta['type'] } = {}) {
           path: 'account/:address',
           element: <AccountDetails />,
         },
+        {
+          path: 'transfer/:accountAddress/:tokenAddress?',
+          element: <TokenTransfer />,
+        },
         {
           path: 'block-config',
           element: <BlockConfig />,

src/components/Header.tsx

@@ -431,10 +431,9 @@ function BaseFee() {
   )
   if (!block) return null
   return (
-    <HeaderItem label="Base Fee">
+    <HeaderItem label="Base Fee (gwei)">
       <Text family="numeric" size="12px">
-        {intl.format(Number(formatGwei(block.baseFeePerGas!)))}{' '}
-        <Text color="text/tertiary">gwei</Text>
+        {intl.format(Number(formatGwei(block.baseFeePerGas!)))}
       </Text>
     </HeaderItem>
   )

src/components/abi/AbiFunctionsAccordion.tsx

@@ -213,7 +213,7 @@ export function AbiFunctionContent({
                   <Button
                     height="24px"
                     onClick={() => invoke({ type: 'read' })}
-                    variant="stroked fill"
+                    variant="solid invert"
                     width="fit"
                     type="button"
                   >
@@ -222,7 +222,7 @@ export function AbiFunctionContent({
                   <Button
                     height="24px"
                     onClick={() => invoke({ type: 'write' })}
-                    variant="stroked fill"
+                    variant="solid invert"
                     width="fit"
                     type="button"
                   >
@@ -232,7 +232,7 @@ export function AbiFunctionContent({
               ) : isWrite || abiFunction.inputs?.length > 0 ? (
                 <Button
                   height="24px"
-                  variant="stroked fill"
+                  variant="solid invert"
                   width="fit"
                   type="submit"
                 >

src/design-system/components/SFSymbol.tsx

@@ -18,6 +18,7 @@ import {
   Minus,
   Plus,
   RefreshCcw,
+  Send,
   Settings,
   SkipBack,
   SquarePen,
@@ -73,6 +74,7 @@ const symbolToIcon: Record<SymbolName, LucideIcon> = {
   minus: Minus,
   'backward.fill': ArrowLeft,
   'arrow.counterclockwise': Undo2,
+  paperplane: Send,
 }
 
 export const SFSymbol = forwardRef<SVGSVGElement, SFSymbolProps>(

src/design-system/tokens.ts

@@ -679,6 +679,7 @@ export const symbolNames = [
   'minus',
   'backward.fill',
   'arrow.counterclockwise',
+  'paperplane',
 ] as const
 export type SymbolName = (typeof symbolNames)[number]