feat: add porto and config

.env.example

@@ -9,6 +9,9 @@ PUBLIC_APP_DESCRIPTION=''
 PUBLIC_APP_URL=''
 # App's logo. Optional.
 PUBLIC_APP_LOGO=''
+
+# Enable Ithaca Porto connector. Optional. Default true.
+PUBLIC_ENABLE_PORTO=true
 # Include testnets. Optional.
 PUBLIC_INCLUDE_TESTNETS=true
 

.gitignore

@@ -11,6 +11,7 @@ node_modules
 *.sln
 *.sw?
 tsconfig.tsbuildinfo
+.tool-versions
 
 # Project folders
 typedoc
@@ -37,4 +38,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
-lerna-debug.log*
+lerna-debug.log*

package.json

@@ -29,6 +29,9 @@
     "@chakra-ui/react": "^3.17.0",
     "@emotion/react": "^11.14.0",
     "@lifi/sdk": "^3.6.13",
+    "@rainbow-me/rainbowkit": "^2.2.9",
+    "@reown/appkit": "^1.8.10",
+    "@reown/appkit-adapter-wagmi": "^1.8.10",
     "@t3-oss/env-core": "^0.13.4",
     "@tanstack/react-query": "^5.75.7",
     "@tanstack/react-router": "^1.120.3",
@@ -41,14 +44,15 @@
     "graphql": "^16.11.0",
     "graphql-request": "^7.1.2",
     "next-themes": "^0.4.6",
+    "porto": "^0.2.28",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-error-boundary": "^6.0.0",
     "react-jazzicon": "^1.0.4",
     "react-number-format": "^5.4.4",
     "use-debounce": "^10.0.4",
-    "viem": "^2.29.1",
-    "wagmi": "^2.15.2",
+    "viem": "^2.37.9",
+    "wagmi": "^2.17.5",
     "zod": "^3.24.4"
   },
   "devDependencies": {
@@ -91,11 +95,16 @@
     "onlyBuiltDependencies": [
       "@biomejs/biome",
       "@parcel/watcher",
+      "@reown/appkit",
       "@swc/core",
-      "ufferutil",
-      "sbuild",
+      "bufferutil",
       "eccak",
-      "tf-8-validate"
+      "esbuild",
+      "keccak",
+      "sbuild",
+      "tf-8-validate",
+      "ufferutil",
+      "utf-8-validate"
     ]
   }
 }

src/components/sharedComponents/ui/Header/MobileMenu/MobileMenu.tsx

@@ -2,7 +2,7 @@ import Logo from '@/src/components/sharedComponents/ui/Header/Logo'
 import MainMenu from '@/src/components/sharedComponents/ui/Header/MainMenu'
 import { SwitchThemeButton } from '@/src/components/sharedComponents/ui/SwitchThemeButton'
 import { ConnectWalletButton } from '@/src/providers/Web3Provider'
-import { chakra } from '@chakra-ui/react'
+import { Box, chakra } from '@chakra-ui/react'
 import { Drawer } from '@chakra-ui/react'
 import { useTheme } from 'next-themes'
 import { useState } from 'react'
@@ -118,10 +118,12 @@ export const MobileMenu = () => {
             flexDirection="column"
             rowGap={6}
           >
-            <ConnectWalletButton
+            <Box
               marginBottom={10}
               maxWidth="fit-content"
-            />
+            >
+              <ConnectWalletButton />
+            </Box>
             <MainMenu />
             <SwitchThemeButton
               marginTop="auto"

src/env.ts

@@ -22,6 +22,7 @@ export const env = createEnv({
     PUBLIC_APP_LOGO: z.string().optional(),
     PUBLIC_APP_NAME: z.string().min(1),
     PUBLIC_APP_URL: z.string().optional(),
+    PUBLIC_ENABLE_PORTO: zBoolean,
     PUBLIC_USE_DEFAULT_TOKENS: zBoolean,
     PUBLIC_INFURA_KEY: z.string().optional(),
     PUBLIC_NATIVE_TOKEN_ADDRESS: z

src/lib/wallets/connectkit.config.tsx

@@ -7,6 +7,7 @@ import { ConnectKitButton, ConnectKitProvider, type Types, getDefaultConfig } fr
 import type { FC, ReactNode } from 'react'
 import type { Address } from 'viem'
 import { normalize } from 'viem/ens'
+
 import { createConfig, useEnsAvatar, useEnsName } from 'wagmi'
 
 interface Props {

src/lib/wallets/portoInit.ts

@@ -0,0 +1,10 @@
+import { env } from '@/src/env'
+import { Porto } from 'porto'
+
+if (env.PUBLIC_ENABLE_PORTO) {
+  try {
+    Porto.create()
+  } catch (error) {
+    console.error('Failed to initialize Porto:', error)
+  }
+}

src/lib/wallets/rainbowkit.config.tsx

@@ -3,16 +3,15 @@
  * version used: 2.0.8
  */
 
-// import { type ReactNode } from 'react'
+// import type { ReactNode } from 'react'
 
-// import { RainbowKitProvider, type AvatarComponent, ConnectButton } from '@rainbow-me/rainbowkit'
-// import { getDefaultConfig } from 'connectkit'
-// import { createConfig } from 'wagmi'
+// import { type AvatarComponent, ConnectButton, RainbowKitProvider } from '@rainbow-me/rainbowkit'
+// import { getDefaultConfig } from '@rainbow-me/rainbowkit';
 
 // import { env } from '@/src/env'
 // import { chains, transports } from '@/src/lib/networks.config'
 
-// import CustomAvatar from '@/src/components/sharedComponents/ui/Avatar'
+// import CustomAvatar from '@/src/components/sharedComponents/Avatar'
 
 // export const WalletProvider = ({ children }: { children: ReactNode }) => {
 //   return (
@@ -30,6 +29,7 @@
 
 //   // Required API Keys
 //   walletConnectProjectId: env.PUBLIC_WALLETCONNECT_PROJECT_ID,
+//   projectId: env.PUBLIC_WALLETCONNECT_PROJECT_ID,
 
 //   // Required App Info
 //   appName: env.PUBLIC_APP_NAME,
@@ -40,6 +40,4 @@
 //   appIcon: env.PUBLIC_APP_LOGO,
 // } as const
 
-// const rainbowkitConfig = getDefaultConfig(defaultConfig)
-
-// export const config = createConfig(rainbowkitConfig)
+// export const config = getDefaultConfig(defaultConfig)

src/lib/wallets/web3modal.config.tsx

@@ -3,44 +3,54 @@
  * version used: 4.2.1
  */
 
-// import { type FC, type DetailedHTMLProps, type HTMLAttributes, type PropsWithChildren } from 'react'
-
-// import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi'
-
-// import { env } from '@/src/env'
-
-// import { chains, transports } from '@/src/lib/networks.config'
-
-// export const WalletProvider: FC<PropsWithChildren> = ({ children }) => children
-
-// declare global {
-//   namespace JSX {
-//     interface IntrinsicElements {
-//       'w3m-button': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>
-//     }
-//   }
-// }
-// export const ConnectWalletButton = ({ label = 'Connect' }: { label?: string }) => (
-//   <w3m-button label={label} />
-// )
-
-// // Required API Keys
-// const projectId = env.PUBLIC_WALLETCONNECT_PROJECT_ID
-
-// export const config = defaultWagmiConfig({
-//   chains,
-//   projectId,
-//   metadata: {
-//     // Required App Info
-//     name: env.PUBLIC_APP_NAME,
-//     description: env.PUBLIC_APP_DESCRIPTION ?? '',
-//     url: env.PUBLIC_APP_URL ?? '',
-//     icons: [env.PUBLIC_APP_LOGO ?? ''],
-//   },
-//   transports,
-// })
-
-// createWeb3Modal({
-//   wagmiConfig: config,
-//   projectId,
-// })
+import type { DetailedHTMLProps, FC, HTMLAttributes, PropsWithChildren } from 'react'
+
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
+import { createAppKit } from '@reown/appkit/react'
+
+import { env } from '@/src/env'
+
+import { chains } from '@/src/lib/networks.config'
+import type { Chain } from 'viem'
+
+export const WalletProvider: FC<PropsWithChildren> = ({ children }) => children
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'w3m-button': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>
+    }
+  }
+}
+export const ConnectWalletButton = ({ label = 'Connect' }: { label?: string }) => (
+  <appkit-button label={label} />
+)
+
+// Required API Keys
+const projectId = env.PUBLIC_WALLETCONNECT_PROJECT_ID
+
+const metadata = {
+  // Required App Info
+  name: env.PUBLIC_APP_NAME,
+  description: env.PUBLIC_APP_DESCRIPTION ?? '',
+  url: env.PUBLIC_APP_URL ?? '',
+  icons: [env.PUBLIC_APP_LOGO ?? ''],
+}
+
+// TODO avoid readonly types mismatch
+const wagmiAdapter = new WagmiAdapter({
+  networks: chains as unknown as Chain[],
+  projectId,
+})
+
+createAppKit({
+  adapters: [wagmiAdapter],
+  networks: chains as unknown as [Chain, ...Chain[]],
+  metadata: metadata,
+  projectId,
+  features: {
+    analytics: true,
+  },
+})
+
+export const config = wagmiAdapter.wagmiConfig

src/providers/Web3Provider.tsx

@@ -3,6 +3,7 @@ import type { FC, PropsWithChildren } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WagmiProvider } from 'wagmi'
 
+import '@/src/lib/wallets/portoInit'
 import { ConnectWalletButton, WalletProvider, config } from '@/src/lib/wallets/connectkit.config'
 
 const queryClient = new QueryClient()