Review fixes

src/components/@molecules/Hamburger/MainMenu.tsx

@@ -25,6 +25,7 @@ import { SocialIcon } from '@app/components/SocialIcon'
 import { useChainName } from '@app/hooks/chain/useChainName'
 import { useGasPrice } from '@app/hooks/chain/useGasPrice'
 import { routes } from '@app/routes'
+import { ENS_LINKS } from '@app/utils/constants'
 import { makeDisplay } from '@app/utils/currency'
 import { useGraphOutOfSync } from '@app/utils/SyncProvider/SyncProvider'
 import useUserConfig from '@app/utils/useUserConfig'
@@ -295,24 +296,16 @@ const MainMenu = ({ setCurrentView }: { setCurrentView: (view: 'main' | 'languag
         ))}
       </RoutesSection>
       <SocialSection>
-        <SocialIcon Icon={SocialX} color="black" href="https://x.com/ensdomains" />
-        <SocialIcon Icon={SocialGithub} color="#0F0F0F" href="https://github.com/ensdomains" />
-        <SocialIcon Icon={SocialDiscord} color="#7F83FF" href="https://chat.ens.domains" />
-        <SocialIcon
-          Icon={SocialMirror}
-          ColoredIcon={SocialMirrorColour}
-          href="https://ens.mirror.xyz"
-        />
+        <SocialIcon Icon={SocialX} color="black" href={ENS_LINKS.X} />
+        <SocialIcon Icon={SocialGithub} color="#0F0F0F" href={ENS_LINKS.GITHUB} />
+        <SocialIcon Icon={SocialDiscord} color="#7F83FF" href={ENS_LINKS.DISCORD} />
+        <SocialIcon Icon={SocialMirror} ColoredIcon={SocialMirrorColour} href={ENS_LINKS.MIRROR} />
         <SocialIcon
           Icon={SocialDiscourse}
           ColoredIcon={SocialDiscourseColour}
-          href="https://discuss.ens.domains/"
-        />
-        <SocialIcon
-          Icon={SocialYoutube}
-          color="#EE1919"
-          href="https://www.youtube.com/ensdomains"
+          href={ENS_LINKS.DISCOURSE}
         />
+        <SocialIcon Icon={SocialYoutube} color="#EE1919" href={ENS_LINKS.YOUTUBE} />
       </SocialSection>
       <NetworkSection />
     </Container>

src/components/ConnectButton.tsx

@@ -3,7 +3,7 @@ import { Key, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 import type { Address } from 'viem'
-import { Config, useDisconnect, useEnsAvatar } from 'wagmi'
+import { useConnections, useDisconnect, useEnsAvatar } from 'wagmi'
 
 import {
   Button,
@@ -26,7 +26,6 @@ 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'
@@ -108,13 +107,6 @@ 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()
@@ -154,7 +146,10 @@ const HeaderProfile = ({ address }: { address: Address }) => {
   const { copy, copied } = useCopied(300)
   const hasPendingTransactions = useHasPendingTransactions()
 
-  const isCapsuleConnected = getIsCapsuleConnected(wagmiConfig.state)
+  const connections = useConnections()
+  const isCapsuleConnected = connections.some(
+    (connection) => connection?.connector?.id === 'capsule-integrated',
+  )
 
   return (
     <Profile
@@ -196,25 +191,27 @@ 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,
+          ...(isCapsuleConnected
+            ? [
+                {
+                  label: t('wallet.myWallet'),
+                  color: 'text',
+                  icon: <WalletSVG />,
+                  wrapper: (children: ReactNode, key: Key) => (
+                    <BaseLink href="https://connect.usecapsule.com/" key={key}>
+                      {children}
+                    </BaseLink>
+                  ),
+                },
+              ]
+            : []),
           {
             label: t('wallet.disconnect'),
             color: 'red',
             onClick: () => disconnect(),
             icon: <ExitSVG />,
           },
-        ].filter((dropdownItem) => !!dropdownItem) as DropdownItem[]
+        ] as DropdownItem[]
       }
       avatar={{
         src: avatar || zorb,

src/pages/_app.tsx

@@ -1,4 +1,3 @@
-// prettier-ignore-file
 import { NextPage } from 'next'
 import type { AppProps } from 'next/app'
 import { ReactElement, ReactNode } from 'react'

src/utils/constants.ts

@@ -26,3 +26,14 @@ export const IS_DEV_ENVIRONMENT =
   process.env.NEXT_PUBLIC_PROVIDER
 
 export const INVALID_NAME = '[Invalid ENS Name]'
+
+export const ENS_LINKS = {
+  X: 'https://x.com/ensdomains',
+  DISCORD: 'https://chat.ens.domains',
+  MIRROR: 'https://ens.mirror.xyz',
+  DISCOURSE: 'https://discuss.ens.domains',
+  GITHUB: 'https://github.com/ensdomains',
+  EMAIL: 'mailto:[email protected]',
+  HOMEPAGE: 'https://ens.domains/',
+  YOUTUBE: 'https://www.youtube.com/ensdomains',
+}

src/utils/query/RainbowKitWithCapsuleProvider.tsx

@@ -1,13 +1,16 @@
 import { lightTheme, RainbowKitProvider, Theme } from '@usecapsule/rainbowkit'
 import { ComponentProps, useEffect, useState } from 'react'
 
+import { lightTheme as thorinLightTheme } from '@ensdomains/thorin'
+
+import { hslToHex } from '../utils'
 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
+    accentColor: hslToHex(thorinLightTheme.colors.accent),
     borderRadius: 'medium',
   }),
   fonts: {

src/utils/query/capsuleWallet.ts

@@ -9,6 +9,8 @@ import {
   type CapsuleModalProps,
 } from '@usecapsule/rainbowkit-wallet'
 
+import { ENS_LINKS } from '../constants'
+
 const APP_NAME = 'ENS'
 const CAPSULE_ENV: Environment = Environment.BETA
 const CAPSULE_API_KEY = 'ea5557d8aed418b3c195f28c5a8dd3bb'
@@ -23,10 +25,10 @@ const capsuleConstructorOpts: ConstructorOpts = {
   // User Email Branding
   emailTheme: 'light' as any,
   emailPrimaryColor: '#5298FF',
-  githubUrl: 'https://github.com/ensdomains',
-  xUrl: 'https://twitter.com/ensdomains',
-  homepageUrl: 'https://ens.domains/',
-  supportUrl: 'mailto:[email protected]',
+  githubUrl: ENS_LINKS.GITHUB,
+  xUrl: ENS_LINKS.X,
+  homepageUrl: ENS_LINKS.HOMEPAGE,
+  supportUrl: ENS_LINKS.EMAIL,
 
   disableWorkers: true,
 }

src/utils/query/wagmi.ts

@@ -122,6 +122,25 @@ const wagmiConfig_ = createConfig({
   },
 })
 
+const isSupportedChain = (chainId: number): chainId is (typeof chains)[number]['id'] =>
+  chains.some((c) => c.id === chainId)
+
+// hotfix for wagmi bug
+wagmiConfig_.subscribe(
+  ({ connections, current }) => (current ? connections.get(current)?.chainId : undefined),
+  (chainId_) => {
+    const chainId = chainId_ || chains[0].id
+    // If chain is not configured, then don't switch over to it.
+    const isChainConfigured = isSupportedChain(chainId)
+    if (!isChainConfigured) return
+
+    return wagmiConfig_.setState((x) => ({
+      ...x,
+      chainId: chainId ?? x.chainId,
+    }))
+  },
+)
+
 export const wagmiConfig = wagmiConfig_ as typeof wagmiConfig_ & {
   _isEns: true
 }

src/utils/utils.ts

@@ -205,3 +205,18 @@ export const thread = <F extends [(arg: any) => any, ...Array<(arg: any) => any>
   arg: ArgType<F[0]>,
   ...f: F & AsChain<F>
 ): LaxReturnType<Last<F>> => f.reduce((acc, fn) => fn(acc), arg) as LaxReturnType<Last<F>>
+
+// Adpated from: https://stackoverflow.com/questions/36721830/convert-hsl-to-rgb-and-hex
+export const hslToHex = (hsl: string) => {
+  const [h, s, l] = hsl.match(/\d+/g)!.map(Number)
+  const _l = l / 100
+  const a = (s * Math.min(_l, 1 - _l)) / 100
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12
+    const color = _l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, '0') // convert to Hex and prefix "0" if needed
+  }
+  return `#${f(0)}${f(8)}${f(4)}`
+}