add new wallet flow (#696)

Co-authored-by: Felicio <[email protected]>

Author: jkbktl

.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>
+  )
+}