feat: can connect wallet

apps/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "desktop",
   "private": true,
-  "version": "0.3.33",
+  "version": "0.3.34",
   "type": "module",
   "scripts": {
     "vite:dev": "vite",
@@ -31,6 +31,7 @@
     "@penx/hooks": "workspace:*",
     "@penx/icons": "workspace:*",
     "@penx/local-db": "workspace:*",
+    "@penx/math": "workspace:*",
     "@penx/mnemonic": "workspace:*",
     "@penx/model": "workspace:*",
     "@penx/model-types": "workspace:*",
@@ -42,6 +43,7 @@
     "@penx/unique-id": "workspace:*",
     "@penx/widget": "workspace:*",
     "@penx/worker": "workspace:*",
+    "@penxio/api": "workspace:*",
     "@penxio/preset-ui": "workspace:*",
     "@tanstack/react-query": "^5.45.1",
     "@tauri-apps/api": "2.0.0-beta.13",
@@ -61,7 +63,6 @@
     "ky": "^1.1.3",
     "lucide-react": "^0.344.0",
     "next": "14.1.4",
-    "@penxio/api": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fast-compare": "^3.2.2",
@@ -70,7 +71,9 @@
     "tauri-plugin-clipboard-api": "^2.0.4",
     "tauri-plugin-jarvis-api": "workspace:*",
     "tauri-plugin-shellx-api": "^2.0.7",
-    "uikit": "workspace:*"
+    "uikit": "workspace:*",
+    "viem": "^2.9.28",
+    "wagmi": "^2.10.8"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.6.3",

apps/desktop/src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import { WagmiProvider } from 'wagmi'
 import { ToastContainer } from 'uikit'
 import { appEmitter } from '@penx/event'
 import { StoreProvider } from '@penx/store'
@@ -17,6 +18,7 @@ import { useInitThemeMode } from './hooks/useInitThemeMode'
 import { MainApp } from './MainApp'
 import '~/styles/globals.css'
 import '~/styles/command.scss'
+import { config } from './config'
 
 initFower()
 
@@ -56,11 +58,13 @@ function MyApp() {
 
   return (
     <StoreProvider>
-      <TrpcProvider>
-        <ToastContainer position="bottom-right" />
-        <MainApp />
-        <div id="portal" />
-      </TrpcProvider>
+      <WagmiProvider config={config}>
+        <TrpcProvider>
+          <ToastContainer position="bottom-right" />
+          <MainApp />
+          <div id="portal" />
+        </TrpcProvider>
+      </WagmiProvider>
     </StoreProvider>
   )
 }

apps/desktop/src/ConnectWallet.tsx

@@ -0,0 +1,9 @@
+import { useAccount, WagmiProvider } from 'wagmi'
+import { Account } from './account.tsx'
+import { WalletOptions } from './wallet-options.tsx'
+
+export function ConnectWallet() {
+  const { isConnected } = useAccount()
+  if (isConnected) return <Account />
+  return <WalletOptions />
+}

apps/desktop/src/WalletInfo.tsx

@@ -0,0 +1,45 @@
+import { Box } from '@fower/react'
+import { Copy, Wallet } from 'lucide-react'
+import { useAccount } from 'wagmi'
+import { toast } from 'uikit'
+import { precision } from '@penx/math'
+import { useCopyToClipboard } from '@penx/shared'
+import { useEthBalance } from './hooks/useEthBalance'
+
+export function WalletInfo() {
+  const { data } = useEthBalance()
+  const { copy } = useCopyToClipboard()
+  const { address = '' } = useAccount()
+
+  const shortAddress = address.slice(0, 22) + '...' + address.slice(-4)
+  return (
+    <Box rounded2XL bgWhite column gap3 dashboardCard>
+      <Box toCenterY gap1>
+        <Wallet size={20} />
+        <Box>Wallet</Box>
+      </Box>
+      <Box toBetween>
+        <Box>{shortAddress}</Box>
+        <Box
+          inlineFlex
+          cursorPointer
+          neutral500
+          white--dark--hover
+          onClick={() => {
+            copy(address)
+            toast.success('Copied to clipboard')
+          }}
+        >
+          <Copy size={20} />
+        </Box>
+      </Box>
+
+      <Box toBetween toCenterY>
+        <Box>Balance</Box>
+        <Box text2XL fontBold>
+          {typeof data !== 'undefined' && `${precision.toDecimal(data).toFixed(5)} ETH`}
+        </Box>
+      </Box>
+    </Box>
+  )
+}

apps/desktop/src/account.tsx.tsx

@@ -0,0 +1,38 @@
+import { Box } from '@fower/react'
+import { useAccount, useDisconnect, useEnsAvatar, useEnsName } from 'wagmi'
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from 'uikit'
+import { WalletInfo } from './WalletInfo'
+
+export function Account() {
+  const { address = '' } = useAccount()
+  const { disconnect } = useDisconnect()
+
+  const name = address.slice(0, 3) + '...' + address.slice(-3)
+  return (
+    <Popover placement="bottom-end">
+      <PopoverTrigger asChild cursorPointer>
+        <Box cursorPointer toCenterY gap1 bgNeutral100 px2 py2 roundedLG>
+          <Avatar size={24}>
+            <AvatarFallback
+              bgGradientX={['red500', 'orange500', 'yellow400']}
+              borderNone
+            ></AvatarFallback>
+          </Avatar>
+          {address && <Box neutral500>{name}</Box>}
+        </Box>
+      </PopoverTrigger>
+      <PopoverContent w-340 p3>
+        <WalletInfo />
+        <Button onClick={() => disconnect()}>Disconnect</Button>
+      </PopoverContent>
+    </Popover>
+  )
+}

apps/desktop/src/components/CommandPalette/SearchBar/SearchBar.tsx

@@ -1,5 +1,6 @@
 import { Box } from '@fower/react'
 import { appEmitter } from '@penx/event'
+import { ConnectWallet } from '~/ConnectWallet'
 import { useCommandPosition } from '~/hooks/useCommandPosition'
 import { useCurrentCommand } from '~/hooks/useCurrentCommand'
 import { useCommands, useItems } from '~/hooks/useItems'
@@ -35,6 +36,7 @@ export const SearchBar = ({ searchBarHeight }: Props) => {
       borderNeutral200
       relative
       h={searchBarHeight}
+      mr2
     >
       {isCommandApp && <BackRootButton pl3 mr--8 />}
 
@@ -88,6 +90,7 @@ export const SearchBar = ({ searchBarHeight }: Props) => {
       {isCommandApp && currentCommand?.filters && (
         <SearchBarFilter filters={currentCommand?.filters} />
       )}
+      <ConnectWallet></ConnectWallet>
 
       <CommandAppLoading />
     </Box>

apps/desktop/src/config.ts

@@ -0,0 +1,15 @@
+import { createConfig, http } from 'wagmi'
+import { arbitrumSepolia, base, mainnet, optimism } from 'wagmi/chains'
+import { injected, metaMask, safe, walletConnect } from 'wagmi/connectors'
+
+const projectId = '75879ee8d0e1f47758a4bb4577361f08'
+
+export const config = createConfig({
+  chains: [mainnet, base],
+  connectors: [walletConnect({ projectId: projectId })],
+  transports: {
+    [mainnet.id]: http(),
+    [base.id]: http(),
+    [arbitrumSepolia.id]: http(),
+  },
+})

apps/desktop/src/hooks/useEthBalance.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query'
+import { createPublicClient, http } from 'viem'
+import { arbitrumSepolia } from 'viem/chains'
+import { useAccount } from 'wagmi'
+
+export function useEthBalance() {
+  const { address } = useAccount()
+
+  return useQuery({
+    queryKey: ['eth_balance', address],
+    queryFn: async () => {
+      const publicClient = createPublicClient({
+        chain: arbitrumSepolia,
+        transport: http(),
+      })
+      const data = await publicClient.getBalance({
+        address: address!,
+      })
+      return data
+    },
+  })
+}

apps/desktop/src/wallet-options.tsx

@@ -0,0 +1,21 @@
+import { Box } from '@fower/react'
+import { Connector, useConnect } from 'wagmi'
+import { Button } from 'uikit'
+import { IconWalletConnect } from '@penx/icons'
+
+export function WalletOptions() {
+  const { connectors, connect } = useConnect()
+
+  return connectors.map((connector) => (
+    <Button
+      key={connector.uid}
+      colorScheme="neutral900"
+      textSM
+      variant="light"
+      onClick={() => connect({ connector })}
+    >
+      <IconWalletConnect sky500 />
+      <Box>Connect Wallet</Box>
+    </Button>
+  ))
+}

packages/icons/src/IconWalletConnect.tsx

@@ -0,0 +1,14 @@
+import { iconify } from 'uikit'
+
+export const IconWalletConnect = iconify({
+  displayName: 'IconWalletConnect',
+  viewBox: '0 0 24 24',
+  atomicProps: {
+    sky500: true,
+  },
+  pathProps: {
+    // fill: 'black',
+    fill: 'currentColor',
+  },
+  d: 'M4.913 7.519c3.915-3.831 10.26-3.831 14.174 0l.471.461a.483.483 0 0 1 0 .694l-1.611 1.577a.25.25 0 0 1-.354 0l-.649-.634c-2.73-2.673-7.157-2.673-9.887 0l-.694.68a.255.255 0 0 1-.355 0L4.397 8.719a.48.48 0 0 1 0-.693zm17.506 3.263l1.434 1.404a.483.483 0 0 1 0 .694l-6.466 6.331a.51.51 0 0 1-.709 0l-4.588-4.493a.126.126 0 0 0-.178 0l-4.589 4.493a.51.51 0 0 1-.709 0L.147 12.88a.483.483 0 0 1 0-.694l1.434-1.404a.51.51 0 0 1 .709 0l4.589 4.493c.05.048.129.048.178 0l4.589-4.493a.51.51 0 0 1 .709 0l4.589 4.493c.05.048.128.048.178 0l4.589-4.493a.507.507 0 0 1 .708 0',
+})

packages/icons/src/index.ts

@@ -1,4 +1,3 @@
-export * from './IconDiscord'
 export * from './IconDrag'
 export * from './IconGitHub'
 export * from './IconGitHubOutline'
@@ -34,3 +33,5 @@ export * from './IconPassword'
 export * from './IconSidebar'
 export * from './IconImage'
 export * from './IconSwap'
+export * from './IconDiscord'
+export * from './IconWalletConnect'