feat: pay (#4032)

Author: lukaisailovic

apps/laboratory/app/library/multichain-all/page.tsx

@@ -25,7 +25,7 @@ const queryClient = new QueryClient()
 const networks = ConstantsUtil.AllNetworks
 
 const wagmiAdapter = new WagmiAdapter({
-  ssr: true,
+  ssr: false,
   networks,
   projectId: ConstantsUtil.ProjectId
 })

apps/laboratory/app/library/pay-default/page.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { HuobiWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { WagmiProvider } from 'wagmi'
+
+import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
+import { SolanaAdapter } from '@reown/appkit-adapter-solana/react'
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
+import { mainnet } from '@reown/appkit/networks'
+import { createAppKit } from '@reown/appkit/react'
+
+import { AppKitButtonsMultiChain } from '@/src/components/AppKitButtonsMultiChain'
+import { AppKitInfo } from '@/src/components/AppKitInfo'
+import { AppKitInfoMultiChain } from '@/src/components/AppKitInfoMultiChain'
+import { AppKitPay } from '@/src/components/AppKitPay'
+import { ConstantsUtil } from '@/src/utils/ConstantsUtil'
+
+const queryClient = new QueryClient()
+
+const networks = ConstantsUtil.AllNetworks
+
+const wagmiAdapter = new WagmiAdapter({
+  ssr: false,
+  networks,
+  projectId: ConstantsUtil.ProjectId
+})
+const solanaWeb3JsAdapter = new SolanaAdapter({
+  wallets: [new HuobiWalletAdapter(), new SolflareWalletAdapter()]
+})
+
+const bitcoinAdapter = new BitcoinAdapter()
+
+createAppKit({
+  adapters: [wagmiAdapter, solanaWeb3JsAdapter, bitcoinAdapter],
+  networks,
+  defaultNetwork: mainnet,
+  projectId: ConstantsUtil.ProjectId,
+  features: {
+    analytics: true,
+    pay: true
+  },
+  metadata: ConstantsUtil.Metadata
+})
+
+export default function Page() {
+  return (
+    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <AppKitButtonsMultiChain />
+        <AppKitInfoMultiChain />
+        <AppKitInfo />
+        <AppKitPay />
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}

apps/laboratory/app/page.tsx

@@ -9,6 +9,7 @@ import {
   ethersSdkOptions,
   featuredSdkOptions,
   multichainSdkOptions,
+  paySdkOptions,
   siwxSdkOptions,
   solanaSdkOptions,
   testingSdkOptions,
@@ -34,6 +35,7 @@ export default function HomePage() {
         sdkOptions={multichainSdkOptions}
       />
       <ConfigurationList title="SIWX" sdkOptions={siwxSdkOptions} />
+      <ConfigurationList title="Pay" sdkOptions={paySdkOptions} />
     </>
   )
 }

apps/laboratory/package.json

@@ -106,6 +106,7 @@
     "@reown/appkit-siwx": "workspace:*",
     "@reown/appkit-wallet": "workspace:*",
     "@reown/appkit-wallet-button": "workspace:*",
+    "@reown/appkit-pay": "workspace:*",
     "@sentry/browser": "7.119.1",
     "@sentry/react": "7.92.0",
     "@solana/wallet-adapter-wallets": "0.19.32",

apps/laboratory/src/components/AppKitInfo.tsx

@@ -69,12 +69,14 @@ export function AppKitInfo() {
             </Box>
           ) : null}
 
-          <Box>
-            <Heading size="xs" textTransform="uppercase" pb="2">
-              Chain Id
-            </Heading>
-            <Text data-testid="w3m-chain-id">{chainId}</Text>
-          </Box>
+          {chainId !== undefined && (
+            <Box>
+              <Heading size="xs" textTransform="uppercase" pb="2">
+                Chain Id
+              </Heading>
+              <Text data-testid="w3m-chain-id">{chainId}</Text>
+            </Box>
+          )}
 
           <RelayClientInfo />