Integrate LI.FI provider

apps/portfolio/src/app/_config.ts

@@ -1,12 +1,16 @@
-import { createConfig, http } from 'wagmi'
-import { mainnet } from 'wagmi/chains'
+import { createClient } from 'viem'
+import { createConfig, http, injected } from 'wagmi'
+import { arbitrum, mainnet, optimism } from 'wagmi/chains'
+
+export const supportedChains = [mainnet, optimism, arbitrum] as const
 
 export const config = createConfig({
-  chains: [mainnet],
+  chains: supportedChains,
   ssr: false,
-  transports: {
-    // todo: replace public clients
-    [mainnet.id]: http(),
+  connectors: [injected()],
+  // todo: replace public clients
+  client({ chain }) {
+    return createClient({ chain, transport: http() })
   },
 })
 

apps/wallet/.env.development

@@ -1 +1,2 @@
 WXT_STATUS_API_URL="http://localhost:3030"
+WXT_ETHERSCAN_API_KEY=""

apps/wallet/env.d.ts

@@ -5,6 +5,7 @@
 interface ImportMeta {
   readonly env: {
     readonly WXT_STATUS_API_URL: string
+    readonly WXT_ETHERSCAN_API_KEY: string
     readonly WXT_GETBLOCK_API_KEY: string
   }
 }

apps/wallet/package.json

@@ -31,6 +31,7 @@
     "@cardano-sdk/crypto": "^0.2.3",
     "@cardano-sdk/key-management": "^0.27.5",
     "@hookform/resolvers": "^3.1.1",
+    "@lifi/widget": "^3.23.3",
     "@radix-ui/react-dialog": "^1.1.1",
     "@status-im/colors": "workspace:*",
     "@status-im/components": "workspace:*",
@@ -62,7 +63,9 @@
     "trpc-chrome": "^1.0.0",
     "ts-pattern": "^5.7.1",
     "unified": "^11.0.5",
+    "viem": "^2.21.1",
     "vite-plugin-node-polyfills": "^0.23.0",
+    "wagmi": "^2.12.8",
     "zod": "^3.23.8"
   },
   "devDependencies": {

apps/wallet/src/components/lifi-widget.tsx

@@ -0,0 +1,67 @@
+'use client'
+import { useEffect } from 'react'
+
+import { LiFiWidget, type WidgetConfig } from '@lifi/widget'
+import { useAccount } from 'wagmi'
+
+type Props = {
+  config?: Partial<WidgetConfig>
+}
+
+const StatusLifiWidget = ({ config = {} }: Props) => {
+  const { isConnected, address, chainId } = useAccount()
+
+  useEffect(() => {
+    if (window.ethereum && isConnected && address) {
+      setTimeout(() => {
+        if (window.ethereum.emit) {
+          window.ethereum.emit('connect', { chainId })
+          window.ethereum.emit('accountsChanged', [address])
+          window.ethereum.emit('chainChanged', chainId)
+        }
+
+        window.dispatchEvent(new Event('ethereum#initialized'))
+        window.dispatchEvent(
+          new CustomEvent('eip6963:announceProvider', {
+            detail: {
+              info: {
+                uuid: 'c14d6a7e-14c2-477d-bcb7-ffb732145eae',
+                name: 'Status',
+                rdns: 'app.status',
+                icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzk1MF8xMjM5NikiPiA8bWFzayBpZD0ibWFzazBfOTUwXzEyMzk2IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSItMSIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMzIj4gPHBhdGggZD0iTTE2IC0wLjAwMDQ4ODI4MUM0IC0wLjAwMDQ4ODI4MSAwIDMuOTk5NTEgMCAxNS45OTk1QzAgMjcuOTk5NSA0IDMxLjk5OTUgMTYgMzEuOTk5NUMyOCAzMS45OTk1IDMyIDI3Ljk5OTUgMzIgMTUuOTk5NUMzMiAzLjk5OTUxIDI4IC0wLjAwMDQ4ODI4MSAxNiAtMC4wMDA0ODgyODFaIiBmaWxsPSJ3aGl0ZSIvPiA8L21hc2s+IDxnIG1hc2s9InVybCgjbWFzazBfOTUwXzEyMzk2KSI+IDxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfOTUwXzEyMzk2KSI+IDxjaXJjbGUgY3g9IjIzIiBjeT0iOC45OTk1MSIgcj0iMTkiIGZpbGw9IiMxOTkyRDciLz4gPC9nPiA8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMV9mXzk1MF8xMjM5NikiPiA8Y2lyY2xlIGN4PSIzMyIgY3k9IjE4Ljk5OTUiIHI9IjE5IiBmaWxsPSIjRjZCMDNDIi8+IDwvZz4gPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjJfZl85NTBfMTIzOTYpIj4gPGNpcmNsZSBjeD0iNSIgY3k9IjMwLjk5OTUiIHI9IjE5IiBmaWxsPSIjRkY3RDQ2Ii8+IDwvZz4gPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjNfZl85NTBfMTIzOTYpIj4gPGNpcmNsZSBjeD0iLTciIGN5PSI4Ljk5OTUxIiByPSIxOSIgZmlsbD0iIzcxNDBGRCIvPiA8L2c+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTguMTI4NCA4LjgwODQzQzE0Ljk1NTEgOC45ODk4NCAxMi42MTIxIDExLjg3NDMgMTIuMzUxNiAxNS4xMzc1QzEyLjM2NzYgMTUuMTMyNiAxMi4zODUzIDE1LjEyNzYgMTIuNDAzIDE1LjEyMjdDMTIuNDIwNyAxNS4xMTc4IDEyLjQzODQgMTUuMTEyOSAxMi40NTQ0IDE1LjEwOEMxMi44NTM1IDE1LjAwNjcgMTMuMjYxNyAxNC45NDUyIDEzLjY3MzEgMTQuOTI0M0MxNC41NjQxIDE0Ljg3NDUgMTUuMjg4NyAxNC45NTE2IDE2LjAxMzIgMTUuMDI4OEMxNi43Mzg3IDE1LjEwNiAxNy40NjQgMTUuMTgzMiAxOC4zNTYyIDE1LjEzMjlDMTguNzY1OCAxNS4xMTEzIDE5LjE3MjIgMTUuMDQ3OSAxOS41Njg4IDE0Ljk0NEMyMS4yNDc2IDE0LjUwODYgMjIuMjEzNSAxMy4zNzQgMjIuMTI4MiAxMS44MTkxQzIyLjAyMzEgOS44ODcwOCAyMC4wNzY5IDguNjk3MzIgMTguMTI4NCA4LjgwODQzWk0xMy44Nzk2IDIzLjE5MDlDMTcuMDUyOSAyMy4wMDk1IDE5LjM5NTkgMjAuMTI1IDE5LjY1NjQgMTYuODYxOEMxOS42MzYzIDE2Ljg2OCAxOS42MTM1IDE2Ljg3NDIgMTkuNTkxNSAxNi44ODAxQzE5LjU3ODQgMTYuODgzNyAxOS41NjU1IDE2Ljg4NzIgMTkuNTUzNiAxNi44OTA1QzE5LjE1NDUgMTYuOTkxOSAxOC43NDYyIDE3LjA1MzQgMTguMzM0OCAxNy4wNzQyQzE3LjQ0MjcgMTcuMTI0OSAxNi43MTczIDE3LjA0NzkgMTUuOTkxOSAxNi45NzA4QzE1LjI2NzQgMTYuODkzOCAxNC41NDI4IDE2LjgxNjkgMTMuNjUxOCAxNi44NjcxQzEzLjI0MjEgMTYuODg4OCAxMi44MzU4IDE2Ljk1MjEgMTIuNDM5MiAxNy4wNTYxQzEwLjc2MDMgMTcuNDkwNyA5Ljc5ODI5IDE4LjYyNTMgOS44Nzk3OSAyMC4xODAyQzkuOTg0OTEgMjIuMTEyMiAxMS45MzExIDIzLjMwMiAxMy44Nzk2IDIzLjE5MDlaIiBmaWxsPSJ3aGl0ZSIvPiA8L2c+IDwvZz4gPGRlZnM+IDxmaWx0ZXIgaWQ9ImZpbHRlcjBfZl85NTBfMTIzOTYiIHg9Ii01LjQzMDI2IiB5PSItMTkuNDMwNyIgd2lkdGg9IjU2Ljg2MDUiIGhlaWdodD0iNTYuODYwNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPiA8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPiA8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPiA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0LjcxNTEzIiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfOTUwXzEyMzk2Ii8+IDwvZmlsdGVyPiA8ZmlsdGVyIGlkPSJmaWx0ZXIxX2ZfOTUwXzEyMzk2IiB4PSI0LjU2OTc0IiB5PSItOS40MzA3NSIgd2lkdGg9IjU2Ljg2MDUiIGhlaWdodD0iNTYuODYwNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPiA8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPiA8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPiA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0LjcxNTEzIiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfOTUwXzEyMzk2Ii8+IDwvZmlsdGVyPiA8ZmlsdGVyIGlkPSJmaWx0ZXIyX2ZfOTUwXzEyMzk2IiB4PSItMjMuNDMwMyIgeT0iMi41NjkyNSIgd2lkdGg9IjU2Ljg2MDUiIGhlaWdodD0iNTYuODYwNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPiA8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPiA8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPiA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0LjcxNTEzIiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfOTUwXzEyMzk2Ii8+IDwvZmlsdGVyPiA8ZmlsdGVyIGlkPSJmaWx0ZXIzX2ZfOTUwXzEyMzk2IiB4PSItMzUuNDMwMyIgeT0iLTE5LjQzMDciIHdpZHRoPSI1Ni44NjA1IiBoZWlnaHQ9IjU2Ljg2MDUiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4gPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4gPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4gPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNC43MTUxMyIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzk1MF8xMjM5NiIvPiA8L2ZpbHRlcj4gPGNsaXBQYXRoIGlkPSJjbGlwMF85NTBfMTIzOTYiPiA8cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IndoaXRlIi8+IDwvY2xpcFBhdGg+IDwvZGVmcz4gPC9zdmc+',
+              },
+              provider: window.ethereum as unknown,
+            },
+          }),
+        )
+      }, 100)
+    }
+  }, [isConnected, address, chainId])
+
+  const widgetConfig: WidgetConfig = {
+    integrator: 'status-wallet',
+    appearance: 'light',
+    theme: {
+      container: {
+        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.03)',
+        borderRadius: '16px',
+      },
+    },
+    walletConfig:
+      isConnected && address
+        ? {
+            onConnect: async () => {
+              return {
+                address,
+                chainId,
+              }
+            },
+          }
+        : undefined,
+    ...config,
+  }
+
+  return <LiFiWidget {...widgetConfig} />
+}
+
+export { StatusLifiWidget as LifiWidget, type WidgetConfig }

apps/wallet/src/data/api.ts

@@ -5,6 +5,7 @@
 import { initTRPC } from '@trpc/server'
 import superjson from 'superjson'
 import { createChromeHandler } from 'trpc-chrome/adapter'
+import { privateKeyToAccount } from 'viem/accounts'
 import { z } from 'zod'
 
 import * as bitcoin from './bitcoin/bitcoin'
@@ -271,6 +272,8 @@
               gasLimit: z.string(),
               maxFeePerGas: z.string(),
               maxInclusionFeePerGas: z.string(),
+              chainId: z.string().optional(),
+              data: z.string().optional(),
             }),
           )
           .mutation(async ({ input, ctx }) => {
@@ -318,12 +321,101 @@
               gasLimit: input.gasLimit,
               maxFeePerGas: input.maxFeePerGas,
               maxInclusionFeePerGas: input.maxInclusionFeePerGas,
+              data: input.data,
             })
 
             return {
               id,
             }
           }),
+
+        signTypedData: t.procedure
+          .input(
+            z.object({
+              walletId: z.string(),
+              password: z.string(),
+              fromAddress: z.string(),
+              typedData: z.string(),
+            }),
+          )
+          .mutation(async ({ input, ctx }) => {
+            try {
+              const { keyStore, walletCore } = ctx
+
+              const wallet = await keyStore.load(input.walletId)
+
+              const account = wallet.activeAccounts.find(
+                account => account.address === input.fromAddress,
+              )
+
+              if (!account) throw new Error('From address not found')
+
+              const privateKey = await keyStore.getKey(
+                wallet.id,
+                input.password,
+                account,
+              )
+
+              const privateKeyBytes = privateKey.data()
+              let pkHex = walletCore.HexCoding.encode(privateKeyBytes)
+
+              // Ensure the hex string is properly formatted for viem
+              if (!pkHex.startsWith('0x')) {
+                pkHex = `0x${pkHex}`
+              }
+
+              if (pkHex.length !== 66) {
+                throw new Error(
+                  `Invalid private key length: expected 66 characters (including 0x), got ${pkHex.length}`,
+                )
+              }
+
+              let parsed: {
+                domain: Record<string, unknown>
+                types: Record<string, Array<{ name: string; type: string }>>
+                primaryType: string
+                message: Record<string, unknown>
+              }
+              try {
+                parsed = JSON.parse(input.typedData)
+              } catch (error) {
+                throw new Error(
+                  `Invalid typed data JSON: ${error instanceof Error ? error.message : 'Unknown parsing error'}`,
+                )
+              }
+
+              if (
+                !parsed.domain ||
+                !parsed.types ||
+                !parsed.primaryType ||
+                !parsed.message
+              ) {
+                throw new Error(
+                  'Missing required fields in typed data: domain, types, primaryType, or message',
+                )
+              }
+
+              // Remove EIP712Domain from types as per viem requirement
+              const otherTypes = Object.fromEntries(
+                Object.entries(parsed.types).filter(
+                  ([key]) => key !== 'EIP712Domain',
+                ),
+              ) as Record<string, Array<{ name: string; type: string }>>
+
+              const accountViem = privateKeyToAccount(pkHex as `0x${string}`)
+              const signature = await accountViem.signTypedData({
+                domain: parsed.domain as any,
+                types: otherTypes,
+                primaryType: parsed.primaryType,
+                message: parsed.message as any,
+              })
+
+              return { signature }
+            } catch (error) {
+              if (error instanceof Error) throw error
+              throw new Error(`SignTypedData failed: ${String(error)}`)
+            }
+          }),
       }),
 
       bitcoin: router({