Connect wallet (#74)

feat: connect a wallet

---------

Co-authored-by: Neil Campbell <[email protected]>

Author: negar-abbasi

package-lock.json

@@ -24,8 +24,12 @@
   "dependencies": {
     "@algorandfoundation/algokit-subscriber": "^1.3.0-beta.6",
     "@algorandfoundation/algokit-utils": "^6.0.4",
+    "@blockshake/defly-connect": "^1.1.6",
+    "@daffiwallet/connect": "^1.0.3",
+    "@perawallet/connect": "^1.3.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
@@ -35,6 +39,7 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-table": "^8.16.0",
     "@tauri-apps/api": "^1.5.3",
+    "@txnlab/use-wallet": "^2.8.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
@@ -44,6 +49,7 @@
     "jotai": "^2.7.2",
     "jotai-effect": "^0.6.0",
     "lucide-react": "^0.356.0",
+    "lute-connect": "^1.2.0",
     "multiformats": "^13.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -86,6 +92,7 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.2.9",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vitest": "^1.5.0"
   },
   "release": {

package.json

@@ -2,17 +2,17 @@ import './App.css'
 import { routes } from './App.routes'
 import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 import { TooltipProvider } from './features/common/components/tooltip'
-import { DataProvider } from './features/common/components/data-provider'
+import { PlatformProvider } from './features/common/components/platform-provider'
 
 const router = createBrowserRouter(routes)
 
 function App() {
   return (
-    <DataProvider>
+    <PlatformProvider>
       <TooltipProvider>
         <RouterProvider router={router} />
       </TooltipProvider>
-    </DataProvider>
+    </PlatformProvider>
   )
 }
 

src/App.tsx

@@ -2,6 +2,7 @@ import { cn } from '@/features/common/utils'
 import { TemplatedNavLink } from '@/features/routing/components/templated-nav-link/templated-nav-link'
 import { Urls } from '@/routes/urls'
 import { ellipseAddress } from '@/utils/ellipse-address'
+import { fixedForwardRef } from '@/utils/fixed-forward-ref'
 import { PropsWithChildren } from 'react'
 
 type Props = PropsWithChildren<{
@@ -10,14 +11,18 @@ type Props = PropsWithChildren<{
   className?: string
 }>
 
-export function AccountLink({ address, short, className, children }: Props) {
-  return (
-    <TemplatedNavLink
-      className={cn(!children && 'text-primary underline', className)}
-      urlTemplate={Urls.Explore.Account.ById}
-      urlParams={{ address }}
-    >
-      {children ? children : short ? ellipseAddress(address) : address}
-    </TemplatedNavLink>
-  )
-}
+export const AccountLink = fixedForwardRef(
+  ({ address, short, className, children, ...rest }: Props, ref?: React.LegacyRef<HTMLAnchorElement>) => {
+    return (
+      <TemplatedNavLink
+        className={cn(!children && 'text-primary underline', className)}
+        urlTemplate={Urls.Explore.Account.ById}
+        urlParams={{ address }}
+        ref={ref}
+        {...rest}
+      >
+        {children ? children : short ? ellipseAddress(address) : address}
+      </TemplatedNavLink>
+    )
+  }
+)

src/features/accounts/components/account-link.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+
+import { cn } from '@/features/common/utils'
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

src/features/common/components/hover-card.tsx

@@ -1,40 +1,28 @@
-import { NetworkConfig, useNetworkConfig, useTheme } from '@/features/settings/data'
 import { PropsWithChildren, useEffect } from 'react'
-import { JotaiStore } from '../data/types'
 import { useDataStore } from '../data/data-store'
-import { Provider } from 'jotai'
+import { Provider as DataProvider } from 'jotai'
+import { JotaiStore } from '../data/types'
+import { WalletProvider } from './wallet-provider'
+import { NetworkConfig, useTheme } from '@/features/settings/data'
+import { SupportedProviders } from '@txnlab/use-wallet'
 
-type ContextualDataProviderProps = PropsWithChildren<{
+type Props = PropsWithChildren<{
   networkConfig: NetworkConfig
+  walletProviders: SupportedProviders | null
   store?: JotaiStore // This is only used for unit tests
 }>
 
-function JotaiDataProvider({ children, networkConfig, store }: ContextualDataProviderProps) {
+export function PlatformProviderInner({ networkConfig, store, walletProviders, children }: Props) {
   const dataStore = useDataStore(networkConfig, store)
 
-  return (
-    <Provider key={networkConfig.id} store={dataStore}>
-      {children}
-    </Provider>
-  )
-}
-
-type Props = PropsWithChildren<{
-  store?: JotaiStore // This is only used for unit tests
-}>
-
-export function DataProvider({ children, store }: Props) {
-  const networkConfig = useNetworkConfig()
   const [theme] = useTheme()
 
   useEffect(() => {
     const root = window.document.documentElement
-
     root.classList.remove('light', 'dark')
 
     if (theme === 'system') {
       const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-
       root.classList.add(systemTheme)
       return
     }
@@ -43,8 +31,10 @@ export function DataProvider({ children, store }: Props) {
   }, [theme])
 
   return (
-    <JotaiDataProvider key={networkConfig.id} networkConfig={networkConfig} store={store}>
-      {children}
-    </JotaiDataProvider>
+    <DataProvider key={networkConfig.id} store={dataStore}>
+      <WalletProvider networkConfig={networkConfig} walletProviders={walletProviders}>
+        {children}
+      </WalletProvider>
+    </DataProvider>
   )
 }

src/features/common/components/data-provider.tsx renamed to src/features/common/components/platform-provider-inner.tsx

@@ -3,7 +3,7 @@ import { render, waitFor } from '@/tests/testing-library'
 import MatchMediaMock from '@/tests/mock-match-media'
 import { executeComponentTest } from '@/tests/test-component'
 
-describe('data-provider', () => {
+describe('platform-provider', () => {
   describe('when using the default system light theme', () => {
     it('the theme is set to light', () => {
       return executeComponentTest(

src/features/common/components/data-provider.test.tsx renamed to src/features/common/components/platform-provider.test.tsx

@@ -0,0 +1,40 @@
+import { useNetworkConfig } from '@/features/settings/data'
+import { PropsWithChildren } from 'react'
+
+import { PROVIDER_ID, useInitializeProviders } from '@txnlab/use-wallet'
+import { DaffiWalletConnect } from '@daffiwallet/connect'
+import { PeraWalletConnect } from '@perawallet/connect'
+import LuteConnect from 'lute-connect'
+import algosdk from 'algosdk'
+import { DeflyWalletConnect } from '@blockshake/defly-connect'
+import { PlatformProviderInner } from './platform-provider-inner'
+
+export function PlatformProvider({ children }: PropsWithChildren) {
+  const networkConfig = useNetworkConfig()
+
+  const walletProviders = useInitializeProviders({
+    providers: [
+      { id: PROVIDER_ID.DEFLY, clientStatic: DeflyWalletConnect },
+      { id: PROVIDER_ID.DAFFI, clientStatic: DaffiWalletConnect },
+      { id: PROVIDER_ID.PERA, clientStatic: PeraWalletConnect },
+      { id: PROVIDER_ID.EXODUS },
+      {
+        id: PROVIDER_ID.LUTE,
+        clientStatic: LuteConnect,
+        clientOptions: { siteName: 'Algorand Studio' },
+      },
+    ],
+    nodeConfig: {
+      network: networkConfig.id,
+      nodeServer: networkConfig.algod.server,
+      nodePort: networkConfig.algod.port,
+    },
+    algosdkStatic: algosdk,
+  })
+
+  return (
+    <PlatformProviderInner networkConfig={networkConfig} walletProviders={walletProviders}>
+      {children}
+    </PlatformProviderInner>
+  )
+}

src/features/common/components/platform-provider.tsx

@@ -0,0 +1,31 @@
+import { NetworkConfig } from '@/features/settings/data'
+import { SupportedProviders, WalletProvider as UseWalletProvider, useWallet } from '@txnlab/use-wallet'
+import { PropsWithChildren, useEffect } from 'react'
+
+type Props = PropsWithChildren<{
+  networkConfig: NetworkConfig
+  walletProviders: SupportedProviders | null
+}>
+
+function WalletProviderInner({ networkConfig, children }: Omit<Props, 'walletProviders'>) {
+  const { providers } = useWallet()
+
+  useEffect(() => {
+    // Disconnect wallets that aren't applicable to the chosen network
+    providers?.forEach((provider) => {
+      if (provider.isConnected && !networkConfig.walletProviders.includes(provider.metadata.id)) {
+        provider.disconnect()
+      }
+    })
+  }, [networkConfig.walletProviders, providers])
+
+  return children
+}
+
+export function WalletProvider({ networkConfig, walletProviders, children }: Props) {
+  return (
+    <UseWalletProvider value={walletProviders}>
+      <WalletProviderInner networkConfig={networkConfig}>{children}</WalletProviderInner>
+    </UseWalletProvider>
+  )
+}