Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,15 @@
"@dicebear/core": "^9.2.2",
"@headlessui/react": "^1.7.19",
"@headlessui/tailwindcss": "^0.2.1",
"@reown/appkit": "^1.6.0",
"@reown/appkit-adapter-wagmi": "^1.6.0",
"@safe-global/safe-apps-sdk": "^9.1.0",
"@sentry/nextjs": "^8.39.0",
"@squirrel-labs/peanut-sdk": "^0.5.11",
"@tanstack/react-query": "^5.61.0",
"@tanstack/react-query": "5.8.4",
"@typeform/embed-react": "^3.20.0",
"@vercel/analytics": "^1.4.1",
"@wagmi/core": "^2.14.6",
"@web3modal/wagmi": "^5.1.11",
"@wagmi/core": "2.14.3",
"auto-text-size": "^0.2.3",
"autoprefixer": "^10.4.20",
"axios": "^1.7.7",
Expand All @@ -62,10 +63,12 @@
"tailwind-scrollbar": "^3.1.0",
"uuid": "^10.0.0",
"validator": "^13.12.0",
"viem": "^2.21.48",
"wagmi": "2.8.6"
"viem": "2.7.9",
"wagmi": "2.14.3"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.4.2",
"@types/jest": "^29.5.12",
"@types/multicoin-address-validator": "^0.5.3",
"@types/node": "20.4.2",
"@types/react": "^18.3.12",
Expand All @@ -74,18 +77,16 @@
"@types/react-lottie": "^1.2.10",
"@types/uuid": "^9.0.8",
"@types/validator": "^13.12.2",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"knip": "^5.37.1",
"postcss": "^8.4.49",
"postcss-import": "^16.1.0",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.5.14",
"tailwindcss": "^3.4.15",
"typescript": "^5.6.3",
"@testing-library/jest-dom": "^6.4.2",
"@types/jest": "^29.5.12",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"ts-jest": "^29.1.2"
"ts-jest": "^29.1.2",
"typescript": "^5.6.3"
},
"jest": {
"preset": "ts-jest",
Expand Down
7,817 changes: 2,016 additions & 5,801 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/components/Cashout/Components/Initial.view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import TokenAmountInput from '@/components/Global/TokenAmountInput'
import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'
import ValidatedInput from '@/components/Global/ValidatedInput'
import { useAccount } from 'wagmi'
import { useWeb3Modal } from '@web3modal/wagmi/react'
import { useAppKit } from '@reown/appkit/react'
import { useState, useContext, useEffect, useMemo } from 'react'
import * as _consts from '../Cashout.consts'
import * as context from '@/context'
Expand Down Expand Up @@ -71,7 +71,7 @@ export const InitialCashoutView = ({
const { prepareCreateLinkWrapper } = useCreateLink()

const { isConnected } = useAccount()
const { open } = useWeb3Modal()
const { open } = useAppKit()

const handleConnectWallet = async () => {
open()
Expand Down
4 changes: 2 additions & 2 deletions src/components/Claim/Link/Initial.view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import * as _consts from '../Claim.consts'
import { useContext, useEffect, useState, useMemo } from 'react'
import Icon from '@/components/Global/Icon'
import { useAccount } from 'wagmi'
import { useWeb3Modal } from '@web3modal/wagmi/react'
import { useAppKit } from '@reown/appkit/react'
import useClaimLink from '../useClaimLink'
import * as context from '@/context'
import Loading from '@/components/Global/Loading'
Expand Down Expand Up @@ -84,7 +84,7 @@ export const InitialClaimLinkView = ({
supportedSquidChainsAndTokens,
} = useContext(context.tokenSelectorContext)
const { claimLink } = useClaimLink()
const { open } = useWeb3Modal()
const { open } = useAppKit()
const { isConnected, address } = useAccount()
const { user } = useAuth()

Expand Down
4 changes: 2 additions & 2 deletions src/components/Create/Link/Input.view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import TokenAmountInput from '@/components/Global/TokenAmountInput'
import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'
import { useAccount } from 'wagmi'
import { useWeb3Modal } from '@web3modal/wagmi/react'
import { useAppKit } from '@reown/appkit/react'
import { useState, useContext, useEffect, useMemo } from 'react'
import { useCreateLink } from '../useCreateLink'

Expand Down Expand Up @@ -69,7 +69,7 @@ export const CreateLinkInputView = ({
)

const { isConnected, address } = useAccount()
const { open } = useWeb3Modal()
const { open } = useAppKit()

const handleConnectWallet = async () => {
open()
Expand Down
3 changes: 1 addition & 2 deletions src/components/Global/AddressInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,13 @@ const AddressInput = ({ placeholder = 'Enter a valid address', value, onUpdate,
const resolvedAddress = await resolveFromEnsName(recipient.toLowerCase())
return !!resolvedAddress
} else {
return isAddress(recipient, { strict: false })
return isAddress(recipient)
}
} catch (error) {
console.error('Error while validating recipient input field:', error)
return false
}
}

return (
<ValidatedInput
placeholder={placeholder}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Global/GeneralRecipientInput/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const GeneralRecipientInput = ({
}
} else {
type = 'address'
isValid = isAddress(trimmedInput, { strict: false })
isValid = isAddress(trimmedInput)
if (!isValid) errorMessage.current = 'Invalid Ethereum address'
}
recipientType.current = type
Expand Down
11 changes: 6 additions & 5 deletions src/components/Global/Header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import Link from 'next/link'

import { PEANUTMAN_LOGO, HAMBURGER_LOTTIE } from '@/assets'
import { shortenAddress } from '@/utils'
import { useWeb3Modal } from '@web3modal/wagmi/react'
import { useAppKit } from '@reown/appkit/react'

import { useAccount } from 'wagmi'
import { useRouter } from 'next/navigation'
import { breakpoints, emToPx } from '@/styles/theme'
Expand Down Expand Up @@ -221,7 +222,7 @@ const ToolsDropdown = () => {
}

const MenuLinks = () => {
const { open: web3modalOpen } = useWeb3Modal()
const { open: walletModal } = useAppKit()
const { address, isConnected } = useAccount()

return (
Expand Down Expand Up @@ -258,7 +259,7 @@ const MenuLinks = () => {
<NavItemBox>
<button
onClick={() => {
web3modalOpen()
walletModal()
}}
className="flex h-full w-full items-center justify-start px-8 py-2 uppercase sm:hidden sm:w-max sm:justify-center lg:px-4 xl:px-8"
>
Expand All @@ -274,7 +275,7 @@ const MenuLinks = () => {
}

const SocialLinks = () => {
const { open: web3modalOpen } = useWeb3Modal()
const { open: walletModal } = useAppKit()
const { address, isConnected } = useAccount()

return (
Expand All @@ -285,7 +286,7 @@ const SocialLinks = () => {
<button
className="btn btn-large text-nowrap bg-white px-2"
onClick={() => {
web3modalOpen()
walletModal()
}}
>
{isConnected ? shortenAddress(address ?? '') : 'Connect'}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Global/TokenSelector/TokenSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { IUserBalance, IToken } from '@/interfaces'

import { TokenSelectorProps } from './TokenSelector.consts'
import { useAccount } from 'wagmi'
import { useWeb3Modal } from '@web3modal/wagmi/react'
import { useAppKit } from '@reown/appkit/react'
import { useWalletType } from '@/hooks/useWalletType'
import Icon from '../Icon'
import { CrispButton } from '@/components/CrispChat'
Expand Down Expand Up @@ -186,7 +186,7 @@ const TokenSelector = ({
supportedSquidChainsAndTokens,
} = useContext(context.tokenSelectorContext)
const { isConnected } = useAccount()
const { open } = useWeb3Modal()
const { open } = useAppKit()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Add error handling for wallet connection
The open() call in TokenSelector.tsx lacks error handling. While most usages of open() in the codebase are direct calls, there is a precedent in Request/Pay/Views/Initial.view.tsx that uses .finally(). Consider adding error handling using .catch() to handle potential wallet connection failures gracefully and provide feedback to users.

Example locations needing attention:

  • src/components/Global/TokenSelector/TokenSelector.tsx:189 - Add .catch() handler for the open() call
🔗 Analysis chain

Open wallet flow
Using “open()” to trigger the wallet connection from reown-appkit is straightforward. Ensure appropriate error handling or fallback in case the wallet configuration fails.


Let me gather more information about error handling around these open() calls.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Checking if 'open()' calls are handled with try/catch or appropriate error boundaries
rg 'open\(' -A 5

Length of output: 10560


Script:

#!/bin/bash
# Check for try-catch blocks or error handling around open() calls
ast-grep --pattern 'try {
  $$$
  open()
  $$$
}'

# Also check for .catch() or .finally() usage with open()
rg 'open\(\).*\.(catch|finally)'

Length of output: 167

const { safeInfo, walletType } = useWalletType()

const selectedChainTokens = useMemo(() => {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Profile/Components/SkeletonPage.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import { Divider } from '@chakra-ui/react'
import * as assets from '@/assets'
import { useWeb3Modal } from '@web3modal/wagmi/react'
import { useAppKit } from '@reown/appkit/react'
import { useAccount } from 'wagmi'
import { errors } from 'ethers'
import Loading from '@/components/Global/Loading'
Expand All @@ -28,7 +28,7 @@ export const ProfileSkeleton = ({
}
isLoading: boolean
}) => {
const { open } = useWeb3Modal()
const { open } = useAppKit()
const { address } = useAccount()
const [userState, setUserState] = useState<'login' | 'register'>('login')

Expand Down
4 changes: 2 additions & 2 deletions src/components/Refund/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ import Select from '../Global/Select'
import { useState, useMemo, useContext } from 'react'
import { useCreateLink } from '../Create/useCreateLink'
import { waitForTransactionReceipt } from 'wagmi/actions'
import { useWeb3Modal } from '@web3modal/wagmi/react'
import { useAppKit } from '@reown/appkit/react'

export const Refund = () => {
const { isConnected, chain: currentChain } = useAccount()
const { sendTransactionAsync } = useSendTransaction()
const config = useConfig()
const { open } = useWeb3Modal()
const { open } = useAppKit()

const [errorState, setErrorState] = useState<{
showError: boolean
Expand Down
4 changes: 2 additions & 2 deletions src/components/Request/Pay/Views/Initial.view.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as _consts from '../Pay.consts'
import { useAccount, useSwitchChain } from 'wagmi'
import { useWeb3Modal } from '@web3modal/wagmi/react'
import { useAppKit } from '@reown/appkit/react'
import { useContext, useEffect, useState, useMemo } from 'react'
import * as context from '@/context'
import Loading from '@/components/Global/Loading'
Expand Down Expand Up @@ -70,7 +70,7 @@ export const InitialView = ({
const { sendTransactions, checkUserHasEnoughBalance } = useCreateLink()
const { isConnected, address, chain: currentChain } = useAccount()
const { switchChainAsync } = useSwitchChain()
const { open } = useWeb3Modal()
const { open } = useAppKit()
const { setLoadingState, loadingState, isLoading } = useContext(context.loadingStateContext)
const {
selectedTokenData,
Expand Down
105 changes: 60 additions & 45 deletions src/config/wagmi.config.tsx
Original file line number Diff line number Diff line change
@@ -1,79 +1,94 @@
'use client'

import * as consts from '@/constants'

import { createWeb3Modal } from '@web3modal/wagmi/react'

import { WagmiProvider, createConfig, http } from 'wagmi'
import { createAppKit } from '@reown/appkit/react'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { CreateConnectorFn, WagmiProvider, http } from 'wagmi'
import { coinbaseWallet, injected, safe, walletConnect } from 'wagmi/connectors'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createClient } from 'viem'
import { authConnector } from '@web3modal/wagmi'

// 0. Setup queryClient
const queryClient = new QueryClient()

// 1. Get projectId at https://cloud.walletconnect.com
// 1. Get projectId at https://cloud.reown.com
const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID ?? ''

// 2. Create wagmiConfig
const metadata = {
name: 'Peanut Protocol',
description: 'Peanut protocol - send crypto with links',
url: 'https://peanut.to', // origin must match your domain & subdomain
url: process.env.NEXT_PUBLIC_BASE_URL || 'https://peanut.to', // origin must match your domain & subdomain
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥🔥🔥🔥

icons: [''],
}

const config = createConfig({
chains: consts.chains,
connectors: [
safe({
allowedDomains: [/app.safe.global$/, /.*\.blockscout\.com$/, /^(.*\.)?intersend\.io$/],
shimDisconnect: true,
}),
walletConnect({
projectId,
metadata,
showQrModal: false,
}),
coinbaseWallet({
appName: 'Peanut Protocol',
}),
injected({ shimDisconnect: true }),
// // @ts-ignore
// authConnector({
// chains: consts.chains,
// options: {
// projectId,
// },
// email: false,
// // socials: ['google', 'github', 'apple', 'email', 'discord', 'facebook']
// }),
],
client({ chain }) {
return createClient({ chain, transport: http() })
},
// 3. Create transports for each chain
const transports = Object.fromEntries(consts.chains.map((chain) => [chain.id, http(chain.rpcUrls.default.http[0])]))
Comment on lines +24 to +25
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add error handling for RPC URL configuration

Consider adding validation and error handling for RPC URLs to prevent runtime issues with invalid configurations.

-const transports = Object.fromEntries(consts.chains.map((chain) => [chain.id, http(chain.rpcUrls.default.http[0])]))
+const transports = Object.fromEntries(
+  consts.chains.map((chain) => {
+    const rpcUrl = chain.rpcUrls.default.http[0]
+    if (!rpcUrl) {
+      throw new Error(`No RPC URL configured for chain ${chain.id}`)
+    }
+    return [chain.id, http(rpcUrl)]
+  })
+)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// 3. Create transports for each chain
const transports = Object.fromEntries(consts.chains.map((chain) => [chain.id, http(chain.rpcUrls.default.http[0])]))
// 3. Create transports for each chain
const transports = Object.fromEntries(
consts.chains.map((chain) => {
const rpcUrl = chain.rpcUrls.default.http[0]
if (!rpcUrl) {
throw new Error(`No RPC URL configured for chain ${chain.id}`)
}
return [chain.id, http(rpcUrl)]
})
)


// 4. Create connectors
const connectors: CreateConnectorFn[] = [
injected({ shimDisconnect: true }),
safe({
allowedDomains: [/app.safe.global$/, /.*\.blockscout\.com$/, /^(.*\.)?intersend\.io$/],
shimDisconnect: true,
}),
walletConnect({
projectId,
metadata,
showQrModal: false,
}),
coinbaseWallet({
appName: metadata.name,
appLogoUrl: metadata.icons[0],
}),
]

// 5. Create WagmiAdapter with required properties
const wagmiAdapter = new WagmiAdapter({
networks: consts.chains,
projectId,
transports,
connectors,
ssr: true,
})

// 3. Create modal (you have to run pnpm build for changes to take effect)
createWeb3Modal({
wagmiConfig: config,
// 6. Create AppKit
createAppKit({
adapters: [wagmiAdapter],
networks: consts.chains,
metadata,
projectId,
enableAnalytics: true, // Optional - defaults to your Cloud configuration
features: {
analytics: true,
email: false,
socials: false,
onramp: true,
},
Comment on lines +55 to +65
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Potential duplication in createAppKit calls
You initialize createAppKit at lines 55-65 and again at lines 72-87. If the intention is to override or reinit after certain logic, confirm it’s necessary, as repeated initialization might cause confusion or re-initialization overhead.

- createAppKit({
-   adapters: [wagmiAdapter],
-   ...
- })
-
+// Consider removing the duplicate call if not strictly needed.

Committable suggestion skipped: line range outside the PR's diff.

themeVariables: {
'--w3m-border-radius-master': '0px',
// '--w3m-accent': 'white',
'--w3m-color-mix': 'white',
},
enableOnramp: true,
})

console.log('Created Web3modal')
createAppKit({
adapters: [wagmiAdapter],
networks: consts.chains,
metadata,
projectId,
features: {
analytics: true,
email: false,
socials: false,
onramp: true,
},
themeVariables: {
'--w3m-border-radius-master': '0px',
'--w3m-color-mix': 'white',
},
})

export function ContextProvider({ children }: { children: React.ReactNode }) {
return (
<WagmiProvider config={config}>
<WagmiProvider config={wagmiAdapter.wagmiConfig}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</WagmiProvider>
)
Expand Down
Loading