Add automatic network configuration

marketing/.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_TESTNET_MODE=true

marketing/app/[locale]/layout.tsx

@@ -1,9 +1,11 @@
 import 'styles/globals.css'
+import '@rainbow-me/rainbowkit/styles.css'
 
 import { locales, type Locale } from 'app/i18n'
 import { bricolageGrotesque, inter } from 'fonts'
 import { notFound } from 'next/navigation'
 import { NextIntlClientProvider } from 'next-intl'
+import { WalletContext } from 'ui-common/components/walletContext'
 
 import { Header } from './header'
 
@@ -34,8 +36,10 @@ export default async function RootLayout({
         className={`font-inter flex w-full flex-col py-7 ${bricolageGrotesque.variable} ${inter.className} bg-zinc-100 px-4 sm:mx-auto sm:w-4/5 lg:w-3/4 xl:w-5/6 2xl:max-w-[1500px]`}
       >
         <NextIntlClientProvider locale={locale} messages={messages}>
-          <Header />
-          <div className="mt-6">{children}</div>
+          <WalletContext locale={locale}>
+            <Header />
+            <div className="mt-6">{children}</div>
+          </WalletContext>
         </NextIntlClientProvider>
       </body>
     </html>

marketing/app/[locale]/network/addChain.tsx

@@ -0,0 +1,49 @@
+import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { useTranslations } from 'next-intl'
+import { useState } from 'react'
+import { Button } from 'ui-common/components/button'
+import { useAccount, useWalletClient, type Chain } from 'wagmi'
+
+type Props = {
+  chain: Chain
+}
+
+export const AddChain = function ({ chain }: Props) {
+  const [isChainAdded, setIsChainAdded] = useState(false)
+
+  const t = useTranslations('network')
+
+  const { isConnected } = useAccount()
+  const { data: walletClient } = useWalletClient()
+
+  const addChain = () =>
+    walletClient?.addChain({ chain }).then(() => setIsChainAdded(true))
+
+  return (
+    <>
+      {!isConnected && <ConnectButton />}
+      {isConnected && !isChainAdded && (
+        <Button onClick={addChain} size="small" type="button">
+          {t('add-to-wallet')}
+        </Button>
+      )}
+      {isConnected && isChainAdded && (
+        <>
+          <svg
+            fill="none"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14.354 4.85378L6.35403 12.8538C6.30759 12.9003 6.25245 12.9372 6.19175 12.9623C6.13105 12.9875 6.06599 13.0004 6.00028 13.0004C5.93457 13.0004 5.86951 12.9875 5.80881 12.9623C5.74811 12.9372 5.69296 12.9003 5.64653 12.8538L2.14653 9.35378C2.05271 9.25996 2 9.13272 2 9.00003C2 8.86735 2.05271 8.7401 2.14653 8.64628C2.24035 8.55246 2.3676 8.49976 2.50028 8.49976C2.63296 8.49976 2.76021 8.55246 2.85403 8.64628L6.00028 11.7932L13.6465 4.14628C13.7403 4.05246 13.8676 3.99976 14.0003 3.99976C14.133 3.99976 14.2602 4.05246 14.354 4.14628C14.4478 4.2401 14.5006 4.36735 14.5006 4.50003C14.5006 4.63272 14.4478 4.75996 14.354 4.85378Z"
+              fill="#16A34A"
+            />
+          </svg>
+          <span className="text-green-600">{t('added')}</span>
+        </>
+      )}
+    </>
+  )
+}

marketing/app/[locale]/network/configureNetworks.tsx

@@ -1,10 +1,37 @@
 'use client'
 
 import { bridgeableNetworks, hemi } from 'hemi-metadata'
+import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { useTranslations } from 'next-intl'
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
+import { type Chain } from 'wagmi'
+
+const AddChain = dynamic(
+  () => import('app/[locale]/network/addChain').then(mod => mod.AddChain),
+  {
+    ssr: false,
+  },
+)
+
+const EthLogo = () => (
+  <svg fill="none" height={24} width={24} xmlns="http://www.w3.org/2000/svg">
+    <circle cx={12} cy={12} fill="#343434" fillOpacity={0.15} r={12} />
+    <path
+      d="m11.998 3-.121.41v11.902l.12.12 5.525-3.265L11.998 3Z"
+      fill="#343434"
+    />
+    <path d="m11.996 3-5.524 9.167 5.524 3.266V3Z" fill="#8C8C8C" />
+    <path
+      d="m11.998 16.477-.068.083v4.24l.068.198 5.528-7.785-5.528 3.264Z"
+      fill="#3C3C3B"
+    />
+    <path d="M11.996 20.998v-4.521l-5.524-3.264 5.524 7.785Z" fill="#8C8C8C" />
+    <path d="m12 15.439 5.525-3.266L12 9.662v5.777Z" fill="#141414" />
+    <path d="m6.472 12.173 5.524 3.266V9.662l-5.524 2.511Z" fill="#393939" />
+  </svg>
+)
 
 type NetworkConfiguration = 'automatic' | 'manual'
 
@@ -86,7 +113,7 @@ const ExternalLink = ({
   HTMLAnchorElement
 >) => (
   <a
-    className={`cursor-pointer text-rose-400 ${order}`}
+    className={`cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-rose-400 ${order}`}
     href={href}
     rel="noopener noreferrer"
     target="_blank"
@@ -96,13 +123,55 @@ const ExternalLink = ({
   </a>
 )
 
+type ChainRowProps = {
+  chain: Chain
+  layer: number
+  logo: React.ReactNode
+}
+
+const ChainRow = function ({ chain, layer, logo }: ChainRowProps) {
+  const t = useTranslations('network')
+
+  return (
+    <div className="flex items-center gap-x-3 text-sm font-medium">
+      {logo}
+      <div className="flex flex-col lg:flex-row lg:gap-x-4">
+        <p>{chain.name}</p>
+        <span className="text-neutral-400">{t('layer', { layer })}</span>
+      </div>
+      <div className="ml-auto flex w-40 items-center justify-end gap-x-4">
+        <AddChain chain={chain} />
+      </div>
+    </div>
+  )
+}
+
 const AutomaticConfiguration = function () {
-  return <span>Automatic configuration TBD</span>
+  const t = useTranslations('network')
+  const ethereum = bridgeableNetworks.at(-1)
+
+  return (
+    <div className="flex flex-col gap-y-6 py-2 lg:gap-y-9">
+      <ChainRow chain={ethereum} layer={1} logo={<EthLogo />} />
+      <ChainRow
+        chain={hemi}
+        layer={2}
+        // TODO https://github.com/BVM-priv/ui-monorepo/issues/63
+        logo={
+          <div className="h-6 w-6 rounded-full bg-gradient-to-r from-red-400 to-indigo-500" />
+        }
+      />
+      {/* TODO add link for troubleshooting https://github.com/BVM-priv/ui-monorepo/issues/62 */}
+      <p className="text-xs font-normal text-neutral-400">
+        {t('troubleshoot-other-errors')}
+      </p>
+    </div>
+  )
 }
 
 const ManualConfiguration = function () {
   const t = useTranslations('network')
-  const [ethereum] = bridgeableNetworks
+  const ethereum = bridgeableNetworks.at(-1)
 
   return (
     <div className="grid grid-cols-1 gap-y-4 rounded-lg bg-slate-100 p-4 text-black xl:grid-cols-2 2xl:grid-cols-3 [&>a]:text-sm [&>h5]:text-base xl:[&>h5]:text-lg [&>p]:text-sm xl:[&>p]:text-base">
@@ -164,7 +233,7 @@ export const ConfigureNetwork = function () {
   const networkConfiguration = useSelectedTab('automatic')
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col px-1 py-2">
       <h4 className="text-xl">{t('network.configure-sepolia-testnet')}</h4>
       <div className="text-center text-sm">
         <ul className="flex flex-wrap gap-x-4">

marketing/app/[locale]/network/welcomePack.tsx

@@ -8,6 +8,7 @@ const giveAwayTokens = [
   {
     amount: 200,
     icon: (
+      // https://github.com/BVM-priv/ui-monorepo/issues/63
       <div className="h-6 w-6 rounded-full bg-gradient-to-r from-red-400 to-indigo-500" />
     ),
     symbol: 'HEMI',

marketing/messages/en.json

@@ -10,6 +10,8 @@
     "tunnel-and-swap": "Tunnel & Swap"
   },
   "network": {
+    "added": "Added",
+    "add-to-wallet": "Add to wallet",
     "amount-of-tokens": "{amount} {symbol} tokens",
     "automatic": "Automatic",
     "block-explorer-url": "Block explorer URL",
@@ -20,6 +22,7 @@
     "dive-into-docs": "Dive into Hemi documentation",
     "dive-into-architecture": "Dive into Hemi architecture",
     "documentation": "Documentation",
+    "layer": "Layer {layer}",
     "learn": "Learn",
     "learn-with-tutorials": "Get up to speed with our tutorials",
     "manual": "Manual",
@@ -28,6 +31,7 @@
     "page-title": "Add Hemi network",
     "rpc-url": "RPC URL",
     "technology": "Technology",
+    "troubleshoot-other-errors": "Having issues? Troubleshoot other common errors here",
     "tunnel-and-swap-description": "Tunnel and swap into Hemi network",
     "welcome-pack-description": "We will send you an email to claim your welcome pack tokens",
     "your-quick-starter": "Your quick starter",

marketing/messages/es.json

@@ -10,6 +10,8 @@
     "tunnel-and-swap": "Túnel e Intercambio"
   },
   "network": {
+    "added": "Añadida",
+    "add-to-wallet": "Añadir a la billetera",
     "amount-of-tokens": "{amount} {symbol} tokens",
     "automatic": "Automático",
     "block-explorer-url": "URL del explorador de bloques",
@@ -20,6 +22,7 @@
     "dive-into-docs": "Sumergirse en la documentación de Hemi",
     "dive-into-architecture": "Sumergirse en la arquitectura de Hemi",
     "documentation": "Documentación",
+    "layer": "Capa {layer}",
     "learn": "Aprender",
     "learn-with-tutorials": "Póngase al dia con nuestros tutoriales",
     "manual": "Manual",
@@ -28,6 +31,7 @@
     "page-title": "Añadir la red Hemi",
     "rpc-url": "URL de RPC",
     "technology": "Tecnología",
+    "troubleshoot-other-errors": "¿Tiene problemas? Resuelva otros errores comunes aquí.",
     "tunnel-and-swap-description": "Tunnel and swap into Hemi network",
     "welcome-pack-description": "Le enviaremos un email para reclamar sus tokens de bienvenida",
     "your-quick-starter": "Comienzo rápido",

marketing/next.config.js

@@ -10,12 +10,11 @@ const nextConfig = {
   output: 'export',
   reactStrictMode: true,
   transpilePackages: ['ui-common'],
-  // Enable when adding wallet connection with rainbow kit
-  // webpack(config) {
-  //   config.resolve.fallback = { fs: false, net: false, tls: false }
-  //   config.externals.push('pino-pretty', 'lokijs', 'encoding')
-  //   return config
-  // },
+  webpack(config) {
+    config.resolve.fallback = { fs: false, net: false, tls: false }
+    config.externals.push('pino-pretty', 'lokijs', 'encoding')
+    return config
+  },
 }
 
 module.exports = nextConfig

marketing/package.json

@@ -10,12 +10,15 @@
   },
   "version": "1.0.0",
   "dependencies": {
+    "@rainbow-me/rainbowkit": "1.3.3",
     "hemi-metadata": "1.0.0",
     "next": "14.1.0",
     "next-intl": "2.22.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "ui-common": "1.0.0"
+    "ui-common": "1.0.0",
+    "viem": "1.21.4",
+    "wagmi": "1.4.13"
   },
   "devDependencies": {
     "@types/node": "20.10.5",