[Feat] Integrate with reown appkit

[sirpy]

Notes to contributor

There is an existing PR which can be used as base: #600
To get started:

• Clone our repository if you have not already done so
• add git remote add <some label for remote> https://github.com/pbkompasz/GoodProtocolUI.git
• git fetch <some label for remote>
• git checkout feat-appkit

Acceptance Criteria

• Remove all usages of useActiveWeb3React and useActiveOnboard. Replace with appkit hooks where applicable.
• The following wallets should be shown prioritized:
• For walletconnect: New GoodWallet, Valora
• For socials: Google
• Make sure gooddapp works in minipay. If you're not sure how to test, please reach out in the scoutgame channel.
• For any custom connector needed (maybe for minipay) create this connector in a separate package 'goodsdks/gd-reown-connectors' on the goodsdks repo
  You can reference what we did before here: https://github.com/GoodDollar/GoodWeb3-Mono/blob/master/packages/sdk-v2/src/sdk/onboard/react.tsx

[sirpy]

@YanVictorSN

[YanVictorSN]

@sirpy Can you assign me?

[YanVictorSN]

hi @sirpy I have a few doubts about the best way to do this.

Should I only modify BlockNativeOnboard and connectors/index.ts with Reown, or do I need modify another modals?

What do you mean by a standalone package and where should I build it?

[L03TJ3]

@YanVictorSN

1. similar to the onboard module in sdk-v2 of the mono-repo you create a folder 'reown' and add the logic there.
2. its a bit more complex then just those two. but take a look at the following:

https://github.com/GoodDollar/GoodProtocolUI/blob/master/src/components/BlockNativeOnboard/index.tsx
https://github.com/GoodDollar/GoodProtocolUI/blob/master/src/connectors/index.ts

https://github.com/GoodDollar/GoodProtocolUI/blob/master/src/hooks/useActiveWeb3React.ts
https://github.com/GoodDollar/GoodProtocolUI/blob/master/src/hooks/useActiveOnboard.ts

The current onboard provider returned from the above hooks (eipProvider) is used here:
https://github.com/GoodDollar/GoodProtocolUI/blob/master/src/hooks/useWeb3.tsx

and passed down to two relevant contexts to enable staking and claiming in the dapp. (and some other stuff)

I would assume that most onboard hooks can be removed/replaced by the relevant reown logic.

End goal is to have a compatible web3provider in the useweb3 hook

[sirpy]

@YanVictorSN @L03TJ3
I think the steps are

1. create a provider that is a wrapper for reown initialization and setup in sdk-v2
2. replace onboardprovider in goodprotocolui with the reown providerhttps://github.com/GoodDollar/GoodProtocolUI/blob/master/src/index.tsx
3. modify useActiveWeb3React to get the webprovider from reown
   https://github.com/GoodDollar/GoodProtocolUI/blob/master/src/hooks/useActiveWeb3React.ts
4. make sure the web3provider type and such is compatible with web3contextprovider or create the necessary wrappers
   https://github.com/GoodDollar/GoodProtocolUI/blob/master/src/hooks/useWeb3.tsx

Let us know if you require more clarifications

[pbkompasz]

@sirpy Can I get assigned?

[L03TJ3]

@pbkompasz Hey, sorry for the delay, short OOO.

You can get assigned. Make sure to check-out the open PR for the initial steps already done.
#595

[L03TJ3]

@pbkompasz Hey, did you make any progress on this?