Feat: support more wallets using reown

[YanVictorSN]

Description

• Implement reown for web
• Upgrade and refactor code to use latest wagmi
• Create wrappers to handle Native and React platforms.

Closes #227

Description by Korbit AI

What change is being made?

Integrate support for additional wallets using the Reown AppKit within the app.

Why are these changes being made?

These changes enable the app to support a wider range of cryptocurrency wallets via the Reown library, improving compatibility and user experience. The refactor simplifies wallet connection logic by leveraging the Reown AppKit and Wagmi Adapter, while streamlining existing code to enhance maintainability.

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

[sourcery-ai]

Hey @YanVictorSN - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider using a consistent naming convention for platform-specific components (e.g., ConnectWalletMenu.native.tsx and ConnectWalletMenu.web.tsx).
• It looks like you're conditionally rendering different app entrypoints based on the platform, consider using a single entrypoint and platform-specific modules instead.

Here's what I looked at during the review

• 🟡 General issues: 2 issues found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[korbit-ai]

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Fix Detected
	Complex Provider Nesting ▹ view
	Unconfigured Global QueryClient Instance ▹ view	✅
	Missing Real-time Allowance Updates ▹ view

Files scanned

​

File Path	Reviewed
packages/app/src/AppWrapper.ts	✅
packages/app/src/config.ts	✅
packages/app/src/components/Header/ConnectWalletMenuWrapper.ts	✅
packages/app/src/utils/superFluidInstance.tsx	✅
packages/app/src/components/Header/ConnectWalletMenu.web.tsx	✅
packages/app/src/hooks/useIsStewardVerified.ts	✅
packages/app/src/pages/WalletProfilePage.tsx	✅
packages/app/web/main.tsx	✅
packages/app/src/hooks/useGetTokenBalance.ts	✅
packages/app/src/hooks/useEthers.ts	✅
packages/app/src/hooks/useContractCalls/useDeleteFlow.ts	✅
packages/app/src/components/StewardsList/StewardsListItem.tsx	✅
packages/app/src/hooks/useContractCalls/useSupportSingleBatch.ts	✅
packages/app/src/hooks/useContractCalls/useSupportSingleTransferAndCall.ts	✅
packages/app/src/hooks/useContractCalls/useSupportFlow.ts	✅
packages/app/src/hooks/useContractCalls/useSupportSingleWithSwap.ts	✅
packages/app/src/hooks/useContractCalls/useSupportFlowWithSwap.ts	✅
packages/app/src/components/TransactionList/SupportTransactionListItem.tsx	✅
packages/app/src/hooks/useSwapRoute.tsx	✅
packages/app/src/hooks/useApproveSwapTokenCallback.ts	✅
packages/app/src/components/Header/Header.tsx	✅
packages/app/src/App.web.tsx	✅
packages/app/src/App.tsx	✅
packages/app/src/components/Header/ConnectWalletMenu.tsx	✅
packages/app/src/components/Header/ConnectedAccountDisplay.tsx	✅
packages/app/src/components/DonateComponent.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Need a new review? Comment /korbit-review on this PR and I'll review your latest changes.

Korbit Guide: Usage and Customization

Interacting with Korbit

• You can manually ask Korbit to review your PR using the /korbit-review command in a comment at the root of your PR.
• You can ask Korbit to generate a new PR description using the /korbit-generate-pr-description command in any comment on your PR.
• Too many Korbit comments? I can resolve all my comment threads if you use the /korbit-resolve command in any comment on your PR.
• Chat with Korbit on issues we post by tagging @korbit-ai in your reply.
• Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.

Customizing Korbit

• Check out our docs on how you can make Korbit work best for you and your team.
• Customize Korbit for your organization through the Korbit Console.

Feedback and Support

• Tell us what you think of Korbit
• Schedule a call with our team
• Email us @ [email protected]

[sirpy]

1. There are still multiple un addressed comments from the previous review
2. The connectwalletmenu.native should be adapted to reown native
3. There are multiple code repetition between app and app.native do we really require two different files for native and web? if so extract mutual code

[sirpy]

1. merge latest changes from master
2. you need to commit yarn.lock changes

[YanVictorSN]

1. merge latest changes from master
2. you need to commit yarn.lock changes

@sirpy What do you mean by point 1? Can you explain, please?

2- I committed the package.json. Do you need the yarn.lock file too?

[sirpy]

1. in your local branch do git merge master, ie take the latest updates from our master branch
2. yes yarn.lock is always required, make sure it doesnt have any changes besides the packages you changed. as you can see the build/preview fails because yarn.lock is not up to date

[sirpy]

@YanVictorSN please fix the typescript error in useNetFlow

Error: src/hooks/useNetFlowRate.ts(22,12): error TS2322: Type 'string' is not assignable to type '`0x${string}`'.
Error: src/hooks/useNetFlowRate.ts(22,19): error TS2322: Type 'string' is not assignable to type '`0x${string}`'.

[YanVictorSN]

@sirpy done

[sirpy]

@YanVictorSN good job. check out ubi.gd/GoodBuilders
I've also tagged you in a similar issue on GoodProtocolUI repo

[YanVictorSN]

@sirpy Thank you! I'll check that.