add new wallet

.changeset/chilly-poets-beg.md

@@ -0,0 +1,6 @@
+---
+'@status-im/wallet': patch
+'wallet': patch
+---
+
+add new wallet flow

.vscode/extensions.json

@@ -7,6 +7,8 @@
     "mikestead.dotenv",
     "bradlc.vscode-tailwindcss",
     "vitest.explorer",
-    "github.vscode-github-actions"
+    "github.vscode-github-actions",
+    "eamodio.gitlens",
+    "github.vscode-pull-request-github"
   ]
 }

apps/portfolio/src/app/_components/navbar.tsx

@@ -1,12 +1,9 @@
 'use client'
 
 import { Navbar as NavbarBase } from '@status-im/wallet/components'
-import { usePathname } from 'next/navigation'
 
 const Navbar = () => {
-  const pathname = usePathname()
-
-  return <NavbarBase pathname={pathname} />
+  return <NavbarBase />
 }
 
 export { Navbar }

apps/wallet/package.json

@@ -30,6 +30,7 @@
     "@cardano-sdk/core": "^0.45.4",
     "@cardano-sdk/crypto": "^0.2.3",
     "@cardano-sdk/key-management": "^0.27.5",
+    "@hookform/resolvers": "^3.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@status-im/colors": "workspace:*",
     "@status-im/components": "workspace:*",

apps/wallet/src/data/api.ts

@@ -573,7 +573,7 @@ const apiRouter = router({
         // )
 
         const { id } = await keyStore.importKey(
-          Buffer.from(input.privateKey),
+          new Uint8Array(Buffer.from(input.privateKey)),
           input.name,
           input.password,
           walletCore.CoinType.ethereum,

apps/wallet/src/hooks/use-create-wallet.tsx

@@ -1,9 +1,10 @@
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 import { useAPI } from '../providers/api-client'
 
 export const useCreateWallet = () => {
   const api = useAPI()
+  const queryClient = useQueryClient()
 
   const { mutate, mutateAsync, ...result } = useMutation({
     mutationKey: ['create-wallet'],
@@ -15,6 +16,9 @@ export const useCreateWallet = () => {
 
       return mnemonic
     },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['wallets'] })
+    },
   })
 
   return {

apps/wallet/src/hooks/use-import-wallet.tsx

@@ -1,9 +1,10 @@
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 import { useAPI } from '../providers/api-client'
 
 export const useImportWallet = () => {
   const api = useAPI()
+  const queryClient = useQueryClient()
 
   const { mutate, mutateAsync, ...result } = useMutation({
     mutationKey: ['import-wallet'],
@@ -20,6 +21,9 @@ export const useImportWallet = () => {
         name: 'Imported Wallet',
       })
     },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['wallets'] })
+    },
   })
 
   return {

apps/wallet/src/hooks/use-pin-extension.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+export const usePinExtension = () => {
+  const [isPinExtension, setIsPinExtension] = useState<boolean>(false)
+
+  const handleClose = async () => {
+    setIsPinExtension(false)
+    await chrome.storage.local.set({ pinExtension: true })
+  }
+
+  useEffect(() => {
+    async function checkSettings() {
+      const storage = await chrome.storage.local.get(['pinExtension'])
+      if (storage.pinExtension) {
+        setIsPinExtension(false)
+        return
+      }
+
+      const settings = await chrome.action.getUserSettings()
+      setIsPinExtension(!settings.isOnToolbar)
+    }
+
+    checkSettings()
+  }, [])
+
+  return { isPinExtension, handleClose }
+}

apps/wallet/src/providers/wallet-context.tsx

@@ -0,0 +1,76 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+
+import { useQuery } from '@tanstack/react-query'
+
+import { apiClient } from './api-client'
+
+import type { KeyStore } from '@trustwallet/wallet-core'
+
+type Wallet = KeyStore.Wallet
+
+type WalletContext = {
+  currentWallet: Wallet | null
+  wallets: Wallet[]
+  isLoading: boolean
+  hasWallets: boolean
+  setCurrentWallet: (id: Wallet['id']) => void
+}
+
+const WalletContext = createContext<WalletContext | undefined>(undefined)
+
+export function useWallet() {
+  const context = useContext(WalletContext)
+  if (!context) {
+    throw new Error('useWallet must be used within WalletProvider')
+  }
+  return context
+}
+
+export function WalletProvider({ children }: { children: React.ReactNode }) {
+  const [selectedWalletId, setSelectedWalletId] = useState<string | null>(null)
+
+  const { data: wallets = [], isLoading } = useQuery({
+    queryKey: ['wallets'],
+    queryFn: () => apiClient.wallet.all.query(),
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  })
+
+  const hasWallets = wallets.length > 0
+
+  const currentWallet = useMemo(() => {
+    if (!hasWallets) return null
+
+    if (selectedWalletId) {
+      const selectedWallet = wallets.find(
+        wallet => wallet.id === selectedWalletId,
+      )
+      if (selectedWallet) return selectedWallet
+    }
+
+    return wallets[0] || null
+  }, [hasWallets, selectedWalletId, wallets])
+
+  useEffect(() => {
+    if (hasWallets && !selectedWalletId && wallets[0]) {
+      setSelectedWalletId(wallets[0].id)
+    }
+  }, [hasWallets, selectedWalletId, wallets])
+
+  const setCurrentWallet = (id: string) => {
+    setSelectedWalletId(id)
+  }
+
+  const contextValue: WalletContext = {
+    currentWallet,
+    wallets,
+    isLoading,
+    hasWallets,
+    setCurrentWallet,
+  }
+
+  return (
+    <WalletContext.Provider value={contextValue}>
+      {children}
+    </WalletContext.Provider>
+  )
+}

apps/wallet/src/routes/__root.tsx

@@ -19,6 +19,7 @@ import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 // import { QueryClientProvider } from '../../../portfolio/src/app/_providers/query-client-provider'
 // import { StatusProvider } from '../../../portfolio/src/app/_providers/status-provider'
 import { WagmiProvider } from '../../../portfolio/src/app/_providers/wagmi-provider'
+import { WalletProvider } from '../providers/wallet-context'
 
 // import { Inter } from 'next/font/google'
 import type { QueryClient } from '@tanstack/react-query'
@@ -69,26 +70,28 @@ function RootComponent() {
       <head>
         <HeadContent />
       </head>
-      <div id="app" className="isolate">
+      <div id="app" className="isolate" data-customisation="blue">
         {/* <StatusProvider> */}
         <WagmiProvider>
           {/* <QueryClientProvider> */}
           {/* <Suspense fallback={<div>Loading...</div>}> */}
           {/* <AccountsProvider> */}
           {/* <ConnectKitProvider> */}
-          <div className="flex min-h-[56px] items-center px-2">
-            <Navbar pathname={pathname} />
-          </div>
-          <div className="px-1">
-            <div className="flex-1 flex-col 2md:flex xl:pb-1">
-              <div className="flex h-[calc(100vh-60px)] flex-col overflow-clip rounded-[24px] bg-white-100">
-                {/* <OnboardingPage /> */}
-                <Outlet />
+          <WalletProvider>
+            <div className="flex min-h-[56px] items-center px-2">
+              <Navbar pathname={pathname} />
+            </div>
+            <div className="px-1">
+              <div className="flex-1 flex-col 2md:flex xl:pb-1">
+                <div className="flex h-[calc(100vh-60px)] flex-col overflow-y-auto rounded-[24px] bg-white-100">
+                  {/* <OnboardingPage /> */}
+                  <Outlet />
+                </div>
               </div>
+              {/* <NotAllowed /> */}
+              <ToastContainer />
             </div>
-            {/* <NotAllowed /> */}
-            <ToastContainer />
-          </div>
+          </WalletProvider>
           {/* </ConnectKitProvider> */}
           {/* </AccountsProvider> */}
           {/* </Suspense> */}

apps/wallet/src/routes/index.tsx

@@ -1,4 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+import { apiClient } from '../providers/api-client'
 
 export const Route = createFileRoute('/')({
   component: RouteComponent,
@@ -9,6 +11,12 @@ export const Route = createFileRoute('/')({
       },
     ],
   }),
+  beforeLoad: async () => {
+    const wallets = await apiClient.wallet.all.query()
+    if (wallets && wallets.length > 0) {
+      throw redirect({ to: '/portfolio' })
+    } else throw redirect({ to: '/onboarding' })
+  },
 })
 
 function RouteComponent() {

apps/wallet/src/routes/onboarding/_layout.tsx

@@ -1,13 +1,21 @@
-import { createFileRoute, Outlet } from '@tanstack/react-router'
+import { createFileRoute, Outlet, redirect } from '@tanstack/react-router'
+
+import { apiClient } from '../../providers/api-client'
 
 export const Route = createFileRoute('/onboarding')({
   component: RouteComponent,
-  beforeLoad: () => {
-    // TODO: check if user is already onboarded
-    // throw redirect({ to: '/' })
+  beforeLoad: async () => {
+    const wallets = await apiClient.wallet.all.query()
+    if (wallets && wallets.length > 0) {
+      throw redirect({ to: '/portfolio' })
+    }
   },
 })
 
 function RouteComponent() {
-  return <Outlet />
+  return (
+    <div className="m-auto min-h-[650px] w-full max-w-[440px] rounded-[24px] border border-neutral-5 p-5 shadow-2">
+      <Outlet />
+    </div>
+  )
 }

apps/wallet/src/routes/onboarding/index.tsx

@@ -1,4 +1,5 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
+import { Button, Text } from '@status-im/components'
+import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/onboarding/')({
   component: RouteComponent,
@@ -13,19 +14,49 @@ export const Route = createFileRoute('/onboarding/')({
 
 function RouteComponent() {
   return (
-    <div className="grid gap-2">
-      <Link
-        to="/onboarding/new"
-        className="flex h-10 items-center rounded-12 bg-neutral-50 px-3 text-15 font-medium transition-colors active:bg-neutral-50 hover:bg-neutral-90"
-      >
-        Create a wallet
-      </Link>
-      <Link
-        to="/onboarding/import"
-        className="flex h-10 items-center rounded-12 bg-neutral-50 px-3 text-15 font-medium transition-colors active:bg-neutral-50 hover:bg-neutral-90"
-      >
-        I already have a wallet
-      </Link>
+    <div className="flex flex-col items-center gap-6 py-3 text-center">
+      <img
+        src="/images/onboarding.png"
+        alt="Onboarding"
+        className="size-[264px]"
+      />
+      <div className="flex flex-col gap-4">
+        <Text size={40} weight="bold">
+          Your Wallet.
+          <br />
+          Your crypto.
+        </Text>
+        <Text size={15} color="$neutral-50">
+          Some awesome sub copy
+        </Text>
+      </div>
+      <div className="flex w-full max-w-[270px] flex-col gap-3">
+        <Button href="/onboarding/new">New wallet</Button>
+        <Button href="/onboarding/import" variant="grey">
+          Import wallet
+        </Button>
+      </div>
+      <Text size={13} color="$neutral-50">
+        By continuing you agree with Status
+        <br />
+        <a
+          href="https://github.com/status-im/status-software-legal-documents/blob/master/terms-of-use.md"
+          className="text-neutral-100"
+          target="_blank"
+          rel="noopenernoreferrer"
+        >
+          Terms of use
+        </a>{' '}
+        and{' '}
+        <a
+          href="https://github.com/status-im/status-software-legal-documents/blob/master/privacy-policy.md"
+          className="text-neutral-100"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Privacy policy
+        </a>
+      </Text>
     </div>
   )
 }