Feat: Integrate Reown AppKit; replace Web3 Onboard; add wallet priorities and Google socials #604

vortex-hue · 2025-09-08T12:36:03Z

Description

Summary: Complete migration from Web3 Onboard to Reown AppKit with prioritized wallet support, social login, and MiniPay compatibility.

Issue Fixed: #593 - Integrate with reown appkit

Motivation: The existing Web3 Onboard integration was becoming outdated and lacked the flexibility needed for prioritized wallet display and social authentication. Reown AppKit provides better wallet management, analytics, and modern React patterns that align with current best practices.

Context: This migration enables:

Prioritized wallet display (GoodWallet, Valora) in WalletConnect modal
Google social login integration
Better MiniPay support for mobile users
Modern React hooks and TypeScript support
Improved analytics and monitoring capabilities

How Has This Been Tested?

Local Development Testing:

yarn install - All dependencies installed successfully
yarn build - Project compiles without errors
ESLint checks pass - No linting errors
TypeScript compilation - All type errors resolved

Code Quality:

Removed all legacy @web3-onboard dependencies
Eliminated unused imports and dead code
Fixed TypeScript type mismatches
Resolved ESLint warnings

Checklist:

Prioritized wallet display (GoodWallet, Valora) in WalletConnect modal
Google social login integration
Better MiniPay support for mobile users
Improved analytics and monitoring capabilities
Removed all useActiveWeb3React and useActiveOnboard usages
Replaced with AppKit hooks where applicable
Clean build with no @web3-onboard dependencies

Description by Korbit AI

What change is being made?

Integrate Reown AppKit across the app, replace Web3 Onboard with AppKit-based wallet and network handling, and introduce wallet priorities and Google socials; update multiple components to consume AppKit hooks (account, network, label, etc.), and adjust explorer links and token network handling accordingly.

Why are these changes being made?

Converge to AppKit for consistent wallet/connect flows and network state, replacing the old Onboard integration; this simplifies state management, improves compatibility with new wallet providers, and enables wallet prioritization and Google social login support.

Is this description stale? Ask me to generate a new description by commenting /korbit-generate-pr-description

…ority (GoodWallet, Valora), Google socials, MiniPay labeling; migrate connect flows to AppKit

korbit-ai · 2025-09-08T12:36:08Z

Korbit doesn't automatically review large (3000+ lines changed) pull requests such as this one. If you want me to review anyway, use /korbit-review.

vortex-hue · 2025-09-08T19:47:12Z

Hi @L03TJ3 , can you have a look of my draft pr for this task at your earliest convenience, so I can know if am on the right track and what's remaining for me to do, thanks alot 🙂

…colUI into feat-appkit

L03TJ3 · 2025-10-03T09:39:06Z

package.json

        "@babel/runtime": "^7.18.9",
-        "@gooddollar/good-design": "^0.4.24",
-        "@gooddollar/goodprotocol": "2.0.34-beta.1",
+        "@gooddollar/good-design": "^0.4.21",


should be updated/merged with master to reflect latest changes

L03TJ3 · 2025-10-03T09:49:52Z

src/components/AccountDetails/Transaction.tsx

    return (
        <TransactionWrapper>
-            <TransactionState url={getExplorerLink(chainId, hash, 'transaction')} dataAttr="external_explorer">
+            <TransactionState url={getExplorerLink(+(chainId ?? 1), hash, 'transaction')} dataAttr="external_explorer">


Suggested change

<TransactionState url={getExplorerLink(+(chainId ?? 1), hash, 'transaction')} dataAttr="external_explorer">

<TransactionState url={getExplorerLink(+(chainId ?? 42220), hash, 'transaction')} dataAttr="external_explorer">

We default to celo, not ethereum mainnet

L03TJ3 · 2025-10-03T09:51:24Z

src/components/AccountDetails/index.tsx

-                                            {i18n._(t`Disconnect`)}
-                                        </WalletAction>
-                                    )}
+                                    {(walletInfo?.name || isMiniPay()) &&


is minipay should be variable, outside of render

L03TJ3 · 2025-10-03T10:03:46Z

src/components/AccountDetails/index.tsx

-    //eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
+
+    const { address } = useAppKitAccount()


create a wrapper hook, something like 'useConnectionInfo' that returns things like wallet-info/chainId/account

replace everywhere we use more then one appkit hook

L03TJ3 · 2025-10-03T10:05:47Z

src/components/BlockNativeOnboard/index.tsx

            text={buttonText}
            web3Action={noop}
-            supportedChains={[SupportedChains.CELO, SupportedChains.MAINNET, SupportedChains.FUSE, SupportedChains.XDC]}
+            supportedChains={[SupportedChains.CELO, SupportedChains.MAINNET, SupportedChains.FUSE]}


One merge with master has incorrect resolved conflicts.
How to resolve conflicts:

master branch changes are almost always leading.

when not sure, don't assume what should be resolution, ask the team please!

XDC is an added/new supported chain, and this should not be removed by your PR

L03TJ3 · 2025-10-03T10:14:29Z

src/components/NetworkModal/index.tsx

-    const { chainId, error, active } = useActiveWeb3React()
+    const { initialized } = useAppKitState()
+    const { chainId } = useAppKitNetwork()
+    // TODO


what is this?

L03TJ3 · 2025-10-03T10:15:17Z

src/components/StyledMenu/SubMenu.tsx

                return (
                    <View style={{ ...styles }}>
-                        <NavLink key={route} to={route} onPress={handleInternal}>
+                        <NavLink key={index} to={route} onPress={handleInternal}>


never use index as key

L03TJ3 · 2025-10-03T10:15:51Z

src/components/WalletModal/index.tsx


-    const { account, error } = useActiveWeb3React()
+    const { address } = useAppKitAccount()
+    // TODO


what is the todo?

L03TJ3 · 2025-10-03T10:24:18Z

src/constants/wallets.ts

@@ -0,0 +1,11 @@
+export const WalletLabels: Readonly<string[]> = [


have the different wallets been tested?
The main ones that should work are: minipay, goodwallet (using wallet-connect), valora.
metamask.

L03TJ3 · 2025-10-03T10:39:28Z

src/pages/gd/Swap/SwapCelo/UniSwap.tsx

-    )
+    }, [address, open])
+
+    const handleError = useCallback(async (e) => {


Can you explain this change?

L03TJ3 · 2025-10-03T10:42:40Z

Also, wallet-connect does not load when I run it from localhost. it works for you?

sourcery-ai

We failed to fetch the diff for pull request #604

You can try again by commenting this pull request with @sourcery-ai review, or contact us for help.

korbit-ai · 2025-10-03T19:36:22Z

Korbit doesn't automatically review large (3000+ lines changed) pull requests such as this one. If you want me to review anyway, use /korbit-review.

… refactor, useConnectionInfo, restore XDC, clean TODOs, fix keys and ESLint warnings

…eError, add wallet QA checklist

…Chat, AccountDetails, Web3ReactManager, Web3Network)

vortex-hue · 2025-10-03T22:29:29Z

Also, wallet-connect does not load when I run it from localhost. it works for you?

works well actually: https://www.loom.com/share/992e55bd5efc410aa76e3702737aad4b?sid=a14f2393-1071-40eb-90a7-1f9268ff41be

Resolved conflicts and API compatibility: - AppBar.tsx: Integrated with new AppKit hooks - NetworkModal/index.tsx: Combined AppKit with activeNetworksByFeature - ClaimBalance.tsx: Updated to use new SDK API - OldClaim.tsx: Kept AppKit connection handling - WalletBalance/index.tsx: Fixed chainId type conversion - All locale files: Accepted master's updated translations - yarn.lock: Regenerated with updated dependencies Note: New SDK version - useG no longer accepts chainId parameter

…into feat-appkit

L03TJ3 · 2025-11-18T15:37:10Z

src/components/AccountDetails/index.tsx


+    // walletInfo provided by useConnectionInfo
+
+    const miniPay = React.useMemo(() => isMiniPay(), [])


Don't see a need for useMemo, also, following style across the dapp, we import useMemo, not using from React namespace

L03TJ3 · 2025-11-18T15:48:31Z

src/components/AppBar.tsx


-    const { G$ } = useG$Balance(5, chainId)
-    const reserveEnabled = isFeatureActive('reserveEnabled', Number(chainId))
+    const { G$ } = useG$Balance(5, Number(chainId))


Your merge with master went wrong, this should not have any changes. master is the code that is expected

L03TJ3 · 2025-11-18T15:51:31Z

src/components/Liquidity/RemoveLiquidityReceiveDetails.tsx

                                    }/${currencyB === ETHER ? WETH[chainId].address : currencyId(currencyB)}`}
                                >
-                                    Receive W{Currency.getNativeCurrencySymbol(chainId)}
+                                    Receive W{Currency.getNativeCurrencySymbol(getSafeChainId(chainId))}


Could use assigning 'safeChainId' as const, and re-use that. no sense in repeating the same method throughout this component

L03TJ3 · 2025-11-18T15:52:03Z

src/components/NetworkModal/index.tsx

    const [toAddNetwork, setToAddNetwork] = useState<SupportedChains | undefined>()

-    const networkLabel: string | null = error ? null : (NETWORK_LABEL as any)[chainId]
+    const networkLabel: string | null = error ? null : (NETWORK_LABEL as any)[+(chainId ?? 1)]


default fallback should be 42220

L03TJ3 · 2025-11-18T15:57:47Z

src/components/WalletBalance/index.tsx

                borderBottomRightRadius={12}
            >
-                <WalletBalance balances={balances} chainId={chainId} />
+                <WalletBalance balances={balances} chainId={+(chainId ?? 1)} />


fallback default is 42220

L03TJ3 · 2025-11-18T16:00:36Z

src/components/Withdraw/index.tsx

                    dispatch(
                        addTransaction({
-                            chainId: chainId!,
+                            chainId: +(chainId ?? 1)!,


fallback 42220, everywhere

L03TJ3 · 2025-11-18T16:01:18Z

src/hooks/useConnectionInfo.ts

+}
+
+// Supported chain IDs for validation
+const SUPPORTED_CHAINS = [1, 122, 42220] // MAINNET, FUSE, CELO


Should be based on SupportedChains (import from web3sdk-v2)

L03TJ3 · 2025-11-18T16:03:04Z

src/hooks/useWeb3.tsx

                    // params[0].gasPrice = gasPriceSettings[chainId].maxFeePerGas
                    delete params[0].gasPrice
-                    params[0] = { ...params[0], ...gasPriceSettings[chainId] }
+                    params[0] = { ...params[0], ...gasSettings }


I am not sure how third-party provider handle nested/chain gasPriceSettings

for safety, please revert back to only passing down the current connected chain gas settings ...gasSettings[Number(chainId)]

L03TJ3 · 2025-11-18T16:04:04Z

src/pages/gd/Claim/Claim.tsx

-    XDC:
-        process.env.REACT_APP_GOODID_XDC_EXPLORER ??
-        `https://api.etherscan.io/v2/api?chainid=50&apikey=${process.env.REACT_APP_ETHERSCAN_KEY}&`,
+    XDC: process.env.REACT_APP_GOODID_XDC_EXPLORER ?? 'https://xdc.blocksscan.io/api?&',


Why was the explorer endpoint changed exactly?

L03TJ3 · 2025-11-18T16:06:39Z

src/pages/gd/Claim/OldClaim.tsx

-        }
-        return false
-    }, [connect, activeChainFeatures])
+    // const handleConnect = useCallback(async () => {


Why is this commented out and not fixed?

The user-flow is when clicking on the claim-button when not connected, it should trigger the connect flow. What happens now is that when I click, all the button say is 'connecting..' but I am not actually connecting

L03TJ3 · 2025-11-18T16:08:29Z

@vortex-hue What also needs to be fixed is the 'disconnect' flow when using wallet-connect.
there is from the dapp seemingly no way to disconnect a wallet-connect connected wallet

pbkompasz and others added 5 commits August 4, 2025 09:45

chore: remove onboard provider

9c50170

feat: add appkit provider

74e45da

chore: replace hooks

ee3abbe

chore: onboard -> appkit

e709dd2

feat(appkit): integrate Reown AppKit; remove Web3 Onboard; wallet pri…

95c730b

…ority (GoodWallet, Valora), Google socials, MiniPay labeling; migrate connect flows to AppKit

vortex-hue changed the title ~~Feat appkit~~ Feat: Integrate Reown AppKit; replace Web3 Onboard; add wallet priorities and Google socials Sep 8, 2025

Merge conflicts resolved and TypeScript errors fixed

e48cd04

vortex-hue added 2 commits September 22, 2025 17:23

fix: yarn lingui and revert back to last commit

d31a141

Merge branch 'feat-appkit' of https://github.com/vortex-hue/GoodProto…

e4a9d54

…colUI into feat-appkit

L03TJ3 requested changes Oct 3, 2025

View reviewed changes

Merge remote-tracking branch 'origin/master' into feat-appkit

125bb80

vortex-hue marked this pull request as ready for review October 3, 2025 19:36

sourcery-ai bot reviewed Oct 3, 2025

View reviewed changes

vortex-hue added 4 commits October 3, 2025 21:08

Address review: CELO default chain helper, explorer defaults, MiniPay…

35c9a1f

… refactor, useConnectionInfo, restore XDC, clean TODOs, fix keys and ESLint warnings

Refactor: useConnectionInfo rollout (partial), clarify SwapCelo handl…

aac96e6

…eError, add wallet QA checklist

refactor(appkit): rollout useConnectionInfo across components (Wallet…

1267495

…Chat, AccountDetails, Web3ReactManager, Web3Network)

fix: complete AppKit integration with security improvements

d1404cd

vortex-hue requested a review from L03TJ3 November 10, 2025 22:02

L03TJ3 and others added 3 commits November 17, 2025 16:07

Merge branch 'master' of https://github.com/GoodDollar/GoodProtocolUI …

e707763

…into feat-appkit

chore: lingui

fef0507

fix: remove walletConnect connector to resolve double modal issue

fea50b2

L03TJ3 requested changes Nov 18, 2025

View reviewed changes

L03TJ3 linked an issue Nov 21, 2025 that may be closed by this pull request

[Feat] Integrate with reown appkit #593

Open

4 tasks

	<TransactionState url={getExplorerLink(+(chainId ?? 1), hash, 'transaction')} dataAttr="external_explorer">
	<TransactionState url={getExplorerLink(+(chainId ?? 42220), hash, 'transaction')} dataAttr="external_explorer">

		@@ -0,0 +1,11 @@
		export const WalletLabels: Readonly<string[]> = [


		// walletInfo provided by useConnectionInfo

		const miniPay = React.useMemo(() => isMiniPay(), [])

Feat: Integrate Reown AppKit; replace Web3 Onboard; add wallet priorities and Google socials #604

Are you sure you want to change the base?

Feat: Integrate Reown AppKit; replace Web3 Onboard; add wallet priorities and Google socials #604

Uh oh!

Conversation

vortex-hue commented Sep 8, 2025 • edited by korbit-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How Has This Been Tested?

Checklist:

Description by Korbit AI

What change is being made?

Why are these changes being made?

Uh oh!

korbit-ai bot commented Sep 8, 2025

Uh oh!

vortex-hue commented Sep 8, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

L03TJ3 commented Oct 3, 2025

Uh oh!

sourcery-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

korbit-ai bot commented Oct 3, 2025

Uh oh!

vortex-hue commented Oct 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

L03TJ3 commented Nov 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vortex-hue commented Sep 8, 2025 •

edited by korbit-ai bot

Loading