Capsule integration final

next.config.mjs

@@ -23,6 +23,17 @@ const babelIncludeRegexes = [
  * @type {import('next').NextConfig}
  * */
 const nextConfig = {
+  transpilePackages: [
+    '@usecapsule/rainbowkit',
+    '@usecapsule/rainbowkit-wallet',
+    '@usecapsule/core-components',
+    '@usecapsule/react-components',
+    '@usecapsule/react-sdk',
+    '@usecapsule/core-sdk',
+    '@usecapsule/web-sdk',
+    '@usecapsule/wagmi-v2-integration',
+    '@usecapsule/viem-v2-integration',
+  ],
   reactStrictMode: true,
   compiler: {
     styledComponents: true,

package.json

@@ -59,18 +59,21 @@
     "@metamask/post-message-stream": "^6.1.2",
     "@metamask/providers": "^14.0.2",
     "@noble/hashes": "^1.3.2",
-    "@rainbow-me/rainbowkit": "2.1.2",
-    "@sentry/nextjs": "7.43.x",
+    "@sentry/nextjs": "^7.43.0",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/query-persist-client-core": "5.22.2",
     "@tanstack/query-sync-storage-persister": "5.22.2",
     "@tanstack/react-query": "5.22.2",
     "@tanstack/react-query-persist-client": "5.22.2",
+    "@usecapsule/rainbowkit": "3.1.0",
+    "@usecapsule/rainbowkit-wallet": "1.1.0",
     "@wagmi/core": "2.13.3",
     "@walletconnect/ethereum-provider": "^2.11.1",
     "@walletconnect/modal": "^2.6.2",
     "calendar-link": "^2.2.0",
     "dns-packet": "^5.4.0",
+    "form-data": "^4.0.0",
+    "glob": "^8.0.3",
     "graphql-request": "5.1.0",
     "i18next": "^21.9.1",
     "i18next-browser-languagedetector": "^6.1.5",
@@ -82,6 +85,7 @@
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.1.7",
     "next": "13.5.6",
+    "node-forge": "1.3.1",
     "node-fetch": "^3.3.2",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
@@ -202,7 +206,8 @@
     },
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]"
     }
   },
   "packageManager": "[email protected]"

patches/node-forge@1.3.1.patch

@@ -0,0 +1,36 @@
+diff --git a/CHANGELOG.md b/CHANGELOG.md
+deleted file mode 100644
+index 27d0e3a0073c20adff764c71575e200d6ac23432..0000000000000000000000000000000000000000
+diff --git a/flash/README.md b/flash/README.md
+deleted file mode 100644
+index 1576ebf1a99dab1462caa81c14240864ed1454cb..0000000000000000000000000000000000000000
+diff --git a/flash/package.json b/flash/package.json
+deleted file mode 100644
+index 92689fa9b24e93a631d2b52572030d7e17ccb10f..0000000000000000000000000000000000000000
+diff --git a/lib/rsa.js b/lib/rsa.js
+index 5c73209f9a1c97c8f1e58bc2930426c4f580776a..fb4cdad07208d23c10dedbc1f39b1435a4539d65 100644
+--- a/lib/rsa.js
++++ b/lib/rsa.js
+@@ -1717,13 +1717,15 @@ function _generateKeyPair(state, options, callback) {
+
+   var opts = {
+     algorithm: {
+-      name: options.algorithm || 'PRIMEINC',
+-      options: {
+-        workers: options.workers || 2,
+-        workLoad: options.workLoad || 100,
+-        workerScript: options.workerScript
+-      }
+-    }
++      name: options.algorithm || "PRIMEINC",
++      options: options.workerScript
++        ? {
++            workers: options.workers || 2,
++            workLoad: options.workLoad || 100,
++            workerScript: options.workerScript,
++          }
++        : {},
++    },
+   };
+   if('prng' in options) {
+     opts.prng = options.prng;

public/locales/en/common.json

@@ -98,7 +98,8 @@
     "noPrimaryName": "No Primary Name",
     "viewProfile": "View Profile",
     "viewDetails": "View Details",
-    "register": "Register"
+    "register": "Register",
+    "myWallet": "My Wallet"
   },
   "name": {
     "registered": "Registered",

src/components/ConnectButton.tsx

@@ -1,9 +1,9 @@
-import { useConnectModal } from '@rainbow-me/rainbowkit'
+import { useConnectModal } from '@usecapsule/rainbowkit'
 import { Key, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 import type { Address } from 'viem'
-import { useDisconnect, useEnsAvatar } from 'wagmi'
+import { Config, useDisconnect, useEnsAvatar } from 'wagmi'
 
 import {
   Button,
@@ -14,6 +14,7 @@ import {
   mq,
   PersonSVG,
   Profile,
+  WalletSVG,
 } from '@ensdomains/thorin'
 import { DropdownItem } from '@ensdomains/thorin/dist/types/components/molecules/Dropdown/Dropdown'
 
@@ -25,6 +26,7 @@ import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
 import { useZorb } from '@app/hooks/useZorb'
 import { useBreakpoint } from '@app/utils/BreakpointProvider'
 import { ensAvatarConfig } from '@app/utils/query/ipfsGateway'
+import { wagmiConfig } from '@app/utils/query/wagmi'
 import { shortenAddress } from '@app/utils/utils'
 
 import BaseLink from './@atoms/BaseLink'
@@ -106,6 +108,13 @@ const calculateTestId = (isTabBar: boolean | undefined, inHeader: boolean | unde
   return 'connect-button'
 }
 
+const getIsCapsuleConnected = (wagmiState: Config['state']) => {
+  const capsuleIntegratedConnection = Array.from(wagmiState.connections.values()).find(
+    (connection) => connection?.connector?.id === 'capsule-integrated',
+  )
+  return !!capsuleIntegratedConnection
+}
+
 export const ConnectButton = ({ isTabBar, large, inHeader }: Props) => {
   const { t } = useTranslation('common')
   const breakpoints = useBreakpoint()
@@ -145,6 +154,8 @@ const HeaderProfile = ({ address }: { address: Address }) => {
   const { copy, copied } = useCopied(300)
   const hasPendingTransactions = useHasPendingTransactions()
 
+  const isCapsuleConnected = getIsCapsuleConnected(wagmiConfig.state)
+
   return (
     <Profile
       address={address}
@@ -185,13 +196,25 @@ const HeaderProfile = ({ address }: { address: Address }) => {
             onClick: () => copy(address),
             icon: copied ? <CheckSVG /> : <CopySVG />,
           },
+          isCapsuleConnected
+            ? {
+                label: t('wallet.myWallet'),
+                color: 'text',
+                icon: <WalletSVG />,
+                wrapper: (children: ReactNode, key: Key) => (
+                  <BaseLink href="https://connect.usecapsule.com/" key={key}>
+                    {children}
+                  </BaseLink>
+                ),
+              }
+            : null,
           {
             label: t('wallet.disconnect'),
             color: 'red',
             onClick: () => disconnect(),
             icon: <ExitSVG />,
           },
-        ] as DropdownItem[]
+        ].filter((dropdownItem) => !!dropdownItem) as DropdownItem[]
       }
       avatar={{
         src: avatar || zorb,

src/components/pages/import/[name]/steps/VerifyOffchainOwnership.tsx

@@ -1,4 +1,4 @@
-import { useConnectModal } from '@rainbow-me/rainbowkit'
+import { useConnectModal } from '@usecapsule/rainbowkit'
 import { Dispatch, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'

src/components/pages/import/[name]/steps/onchain/VerifyOnchainOwnership.tsx

@@ -1,4 +1,4 @@
-import { useConnectModal } from '@rainbow-me/rainbowkit'
+import { useConnectModal } from '@usecapsule/rainbowkit'
 import { Dispatch, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'

src/components/pages/profile/[name]/registration/steps/Pricing/Pricing.test.tsx

@@ -25,7 +25,6 @@ describe('ActionButton', () => {
     ethPrice: 1n,
     durationType: 'years',
   }
-
   it('should have disabled "Next" button if no choice has been made', () => {
     render(<ActionButton {...baseMockData} />)
     expect(screen.getByText('action.next')).toBeInTheDocument()

src/components/pages/profile/[name]/registration/steps/Pricing/Pricing.tsx

@@ -541,7 +541,9 @@ const Pricing = ({
   const previousMoonpayTransactionStatus = usePrevious(moonpayTransactionStatus)
 
   const [paymentMethodChoice, setPaymentMethodChoice] = useState<PaymentMethod>(
-    hasPendingMoonpayTransaction ? PaymentMethod.moonpay : PaymentMethod.ethereum,
+    hasPendingMoonpayTransaction || balance?.value === 0n
+      ? PaymentMethod.moonpay
+      : PaymentMethod.ethereum,
   )
 
   // Keep radio button choice up to date

src/pages/_app.tsx

@@ -1,7 +1,4 @@
-import { lightTheme, RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit'
-
-import '@rainbow-me/rainbowkit/styles.css'
-
+// prettier-ignore-file
 import { NextPage } from 'next'
 import type { AppProps } from 'next/app'
 import { ReactElement, ReactNode } from 'react'
@@ -19,25 +16,18 @@ import { TransactionFlowProvider } from '@app/transaction-flow/TransactionFlowPr
 import { setupAnalytics } from '@app/utils/analytics'
 import { BreakpointProvider } from '@app/utils/BreakpointProvider'
 import { QueryProviders } from '@app/utils/query/providers'
+import { RainbowKitWithCapsuleProvider } from '@app/utils/query/RainbowKitWithCapsuleProvider'
 import { SyncDroppedTransaction } from '@app/utils/SyncProvider/SyncDroppedTransaction'
 import { SyncProvider } from '@app/utils/SyncProvider/SyncProvider'
 
+import '@usecapsule/rainbowkit/styles.css'
+
 import i18n from '../i18n'
 
 import '../styles.css'
 
 const INTERCOM_ID = process.env.NEXT_PUBLIC_INTERCOM_ID || 'eotmigir'
 
-const rainbowKitTheme: Theme = {
-  ...lightTheme({
-    accentColor: thorinLightTheme.colors.accent,
-    borderRadius: 'medium',
-  }),
-  fonts: {
-    body: 'Satoshi, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
-  },
-}
-
 const anim = keyframes`
   0% {
     opacity: 1;
@@ -144,7 +134,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   return (
     <I18nextProvider i18n={i18n}>
       <QueryProviders>
-        <RainbowKitProvider theme={rainbowKitTheme}>
+        <RainbowKitWithCapsuleProvider>
           <TransactionStoreProvider>
             <ThemeProvider theme={thorinLightTheme}>
               <BreakpointProvider queries={breakpoints}>
@@ -164,7 +154,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
               </BreakpointProvider>
             </ThemeProvider>
           </TransactionStoreProvider>
-        </RainbowKitProvider>
+        </RainbowKitWithCapsuleProvider>
       </QueryProviders>
     </I18nextProvider>
   )

src/test-utils.tsx

@@ -26,6 +26,13 @@ vi.mock('@app/hooks/useRegistrationReducer', () => vi.fn(() => ({ item: { stepIn
 
 export const mockUseAccountReturnValue = { address: '0x123' }
 
+vi.mock('@usecapsule/rainbowkit', () => ({
+  useConnectModal: () => ({
+    openConnectModal: vi.fn(),
+  }),
+  connectorsForWallets: () => [() => {}],
+}))
+
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (value: string, opts: any) => {

src/utils/query/RainbowKitWithCapsuleProvider.tsx

@@ -0,0 +1,33 @@
+import { lightTheme, RainbowKitProvider, Theme } from '@usecapsule/rainbowkit'
+import { ComponentProps, useEffect, useState } from 'react'
+
+import { loadCapsule } from './loadCapsule'
+
+type RainbowKitProviderProps = ComponentProps<typeof RainbowKitProvider>
+
+const rainbowKitTheme: Theme = {
+  ...lightTheme({
+    // accentColor: thorinLightTheme.colors.accent, // requires a hex string color but thorinLightTheme returns a hsl string
+    borderRadius: 'medium',
+  }),
+  fonts: {
+    body: 'Satoshi, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
+  },
+}
+
+export const RainbowKitWithCapsuleProvider = (props: RainbowKitProviderProps) => {
+  const [capsuleData, setCapsule] = useState<Awaited<ReturnType<typeof loadCapsule>> | null>(null)
+
+  useEffect(() => {
+    loadCapsule().then(setCapsule)
+  }, [])
+
+  return (
+    <RainbowKitProvider
+      theme={rainbowKitTheme}
+      {...props}
+      capsule={capsuleData?.capsuleClient}
+      capsuleIntegratedProps={capsuleData?.capsuleModalProps}
+    />
+  )
+}