Replacing Rainbowkit with Web3Modal #1465

mudrila · 2024-03-16T11:50:46Z

This PR contains following changes:

Replace RainbowKit with Web3Modal
Add HTTPS support for local dev server in order to overcome possible issues for local development
Implement trick to open web3 modal from 2nd attempt if 1st attempt fails (happens frequently both on local and deployed site)

Moving further, we'll have to update web3Modal version to v4.x+ together with other web3 libraries (viem, wagmi, etc)

Testing

Connect your wallet through different wallet providers (MetaMask, CoinBase, Injected Wallet, WalletConnect)
Try to create any type of Safe (better to test with Multisig and Azorius ERC-20/ERC-721). Make sure safe is properly created
Try to create proposal for that Safe(s). Make sure proposal properly created
Try to vote on that proposal. Make sure vote appears right after you voted, breakdown updated properly, etc.
Try to execute that proposal

netlify · 2024-03-16T11:51:06Z

✅ Deploy Preview for fractal-dev ready!

Name	Link
🔨 Latest commit	`f73c306`
🔍 Latest deploy log	https://app.netlify.com/sites/fractal-dev/deploys/65fc682349d1c40008842f1b
😎 Deploy Preview	https://deploy-preview-1465.app.dev.fractalframework.xyz
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

mudrila · 2024-03-16T12:06:37Z

src/components/ui/menus/AccountDisplay/MenuItems.tsx

+    } catch (e) {
+      console.error(e);
+      try {
+        open();


The problem of not opening Web3Modal from first attempt happens quite frequently. However, I haven't ever noticed that it doesn't work from 2nd attempt, and this fix works smoothly for me.

So prior to the NextJS removal update. I could not get useWeb3Modal to work properly within the header, while still calling createWeb3Modal else where in the app. The Header component seem to be getting mounted before the providers were getting set and that function is called. Since it seems to be 'working' now but flaky I wonder if there is something in how we mount our header components that still wonky

src/providers/NetworkConfig/testWallet.ts

src/providers/NetworkConfig/web3-modal.config.ts

src/providers/Providers.tsx

Da-Colon

Loading a DAO up (Azorius) Seems to be really slow. looking at the network tab, all the requests are going through walletconnect provider.

Can also you talk a little bit on why you needed to add mkcert plugin and HTTPS support?

Da-Colon · 2024-03-18T13:20:17Z

src/components/ui/menus/AccountDisplay/MenuItems.tsx

+    } catch (e) {
+      console.error(e);
+      try {
+        open();


So prior to the NextJS removal update. I could not get useWeb3Modal to work properly within the header, while still calling createWeb3Modal else where in the app. The Header component seem to be getting mounted before the providers were getting set and that function is called. Since it seems to be 'working' now but flaky I wonder if there is something in how we mount our header components that still wonky

src/providers/NetworkConfig/testWallet.ts

mudrila · 2024-03-18T16:14:30Z

Can also you talk a little bit on why you needed to add mkcert plugin and HTTPS support?

@Da-Colon I was experiencing issues while trying to connect wallet locally and found some GH discussion that was mentioning using HTTPS local dev server to overcome this problem. That, eventually, worked.

mudrila · 2024-03-18T16:15:13Z

So prior to the NextJS removal update. I could not get useWeb3Modal to work properly within the header, while still calling createWeb3Modal else where in the app. The Header component seem to be getting mounted before the providers were getting set and that function is called. Since it seems to be 'working' now but flaky I wonder if there is something in how we mount our header components that still wonky

No, that seems like somewhat known issue with web3modal v3 (the one we are using) and should be fixed with migration to v4

mudrila · 2024-03-18T17:01:04Z

Loading a DAO up (Azorius) Seems to be really slow. looking at the network tab, all the requests are going through walletconnect provider.

Damn, that's right. Our custom RPC node is not picked up. Which in a nutshell should be good, but certainly not at this stage 😄
I've tried to play with injecting publicClient but wasn't able to make it work. I'll try to do this in scope of #1444 and hopefully this will work there

src/components/ui/utils/ConnectWalletToast.tsx

src/providers/NetworkConfig/web3-modal.config.ts

vite.config.mts

…b3-modal

…tml, remove redundant wagmi config

…m install warnings

…useNetworkConfig, update usage of useWeb3Modal

…sion to v3

…viem-etc Upgrade wagmi, viem, web3modal

…b3-modal

adamgall

Just a couple of comments, but lookin good!

src/hooks/utils/useDisplayName.ts

src/hooks/DAO/loaders/useLoadDAONode.ts

adamgall

shipit

edit: not yet

tomstuart123 · 2024-03-21T12:36:51Z

**1) Coinbase Wallet + Brave **
Azorious

Try to create Azorious Safe = SUCCESS
Delegate vote = SUCCESS
Try to create proposal for that Safe(s). = SUCCESS
Try to vote on that proposal. Make sure vote appears right after you voted, breakdown updated properly, etc. = SUCCESS
Try to execute that proposal = SUCCESS

Multisig

Try to create Azorious Safe = SUCCESS
Try to create proposal for that Safe(s). = SUCCESS
Try to vote on that proposal. Make sure vote appears right after you voted, breakdown updated properly, etc. = SUCCESS
Try to execute that proposal = SUCCESS

**2) SafeUI +WC + Chrome **
Azorious

create azoriuos safe - SUCCESS - no issue
Delegate vote = PARTIAL SUCCESS - issue - delegate vote toaster didn't remove by itself
Try to create proposal for that Safe(s). = PARTIAL SUCCESS - issue - 'creating proposal' toaster didn't remove- Try to vote on that proposal. = PARTIAL SUCCESS - issue - 'casting vote' toaster didn't remove by itself
Try to execute that proposal = PARTIAL SUCCESS - issue - 'casting vote' toaster didn't remove by itself

Multisig

create a safe - PARTIAL SUCCESS - initally safe app said 'failed - untrusted transaction' then weirdly it went through got this link - https://app.safe.global/transactions/tx?id=multisig_0xA3F3D0e6C7471e156D146dde09D336aE2a6091C5_0x845eeb01cff0891edb9cbc306bfc6f6cb64c513033cd02c8b1f83ebcba96f1de&safe=sep:0xA3F3D0e6C7471e156D146dde09D336aE2a6091C5
create a proposal - failed twice - for changing name and adding a signer - https://app.safe.global/transactions/messages?safe=sep:0xA3F3D0e6C7471e156D146dde09D336aE2a6091C5

here's the safe with the issues - https://deploy-preview-1465.app.dev.fractalframework.xyz/daos/0xa719FcC542a59A6C52b4C482e562334bF1aF9828

sign transaction - it said success in fractal and safe app but no signature actually made to pass transatciont. https://app.safe.global/transactions/messages?safe=sep%3A0xA3F3D0e6C7471e156D146dde09D336aE2a6091C5 ? https://deploy-preview-1465.app.dev.fractalframework.xyz/daos/0x652A8159eCc60F63589FbE35FBDa0E77679BA70E/proposals/0x0f6d35d0da46b120f26aee9d853d198a21ae1d28ae7763dc26c10caf409f1119

**3) Metamask + Chrome **
Azorious

Try to create Azorious Safe =SUCCESS
Delegate vote (azorius) = SUCCESS
Try to create proposal for that Safe(s). = SUCCESSS
Try to vote on that proposal. Make sure vote appears right after you voted, breakdown updated properly, etc = SUCCESS
Try to execute that proposal = SUCCESS

Multisig

Try to create Azorious Safe = SUCCESS
Try to create proposal for that Safe(s). = SUCCESS
Try to vote on that proposal. Make sure vote appears right after you voted, breakdown updated properly, etc. = SUCCESS
Try to execute that proposal = SUCCESS

adamgall

Ah, found another thing that should be fixed up as part of the different behaviors of RainbowKit and Web3Modal.

src/pages/DAOController.tsx

WIP replacing Rainbowkit with Web3Modal

f17b678

mudrila added enhancement New feature or request maintenance Keep the lights on labels Mar 16, 2024

mudrila requested review from azadikoff, adamgall, tomstuart123 and Da-Colon March 16, 2024 11:50

mudrila self-assigned this Mar 16, 2024

mudrila added 2 commits March 16, 2024 12:53

Run HTTPS server in dev

05eae5a

Add trick to open web3Modal after first attempt failed

24c2ed2

mudrila marked this pull request as ready for review March 16, 2024 11:57

Prettier

19995f6

mudrila commented Mar 16, 2024

View reviewed changes

src/providers/NetworkConfig/testWallet.ts Outdated Show resolved Hide resolved

mudrila commented Mar 16, 2024

View reviewed changes

src/providers/NetworkConfig/web3-modal.config.ts Show resolved Hide resolved

mudrila commented Mar 16, 2024

View reviewed changes

src/providers/NetworkConfig/web3-modal.config.ts Outdated Show resolved Hide resolved

mudrila commented Mar 16, 2024

View reviewed changes

src/providers/Providers.tsx Show resolved Hide resolved

Da-Colon requested changes Mar 18, 2024

View reviewed changes

mudrila added 3 commits March 18, 2024 17:19

Remove testWallet

e1ab40b

Cleanup

9fd352f

Delete testWallet for real now lol

f166605

adamgall requested changes Mar 18, 2024

View reviewed changes

adamgall mentioned this pull request Mar 18, 2024

Upgrade project's wallet and ethereum libraries to latest versions #1444

Closed

mudrila added 2 commits March 18, 2024 21:19

Merge branch 'develop' into refactor/#1450-replace-rainbowkit-with-we…

a3176ef

…b3-modal

Remove HTTPS dev server support, pull web3modal metadata from index.h…

cc5ab80

…tml, remove redundant wagmi config

mudrila requested a review from adamgall March 18, 2024 20:30

mudrila added 2 commits March 18, 2024 22:32

Migrate from wagmi v1 -> wagmi v2, web3modal v3 -> v4, viem v1 -> v2

9e92b2a

Prettier

dacd439

mudrila mentioned this pull request Mar 18, 2024

Upgrade wagmi, viem, web3modal #1467

Merged

adamgall mentioned this pull request Mar 19, 2024

Replace RainbowKit with Web3Modal #1450

Closed

adamgall and others added 8 commits March 19, 2024 11:11

Give version identifiers to react dependencies

98e5d1e

Update i18next and react-i18next to more recent versions, to solve np…

53c0c26

…m install warnings

add typescript check plugin to fail build

b6b4cb7

Update Node.js version, update imports for Address, use chainId from …

aebdcb7

…useNetworkConfig, update usage of useWeb3Modal

Prettier

c87bb44

Fix useAvatar usage

0d85c6b

Bump TypeScript version in package.json, update package-lock file ver…

dae849e

…sion to v3

Merge pull request #1467 from decentdao/refactor/#1444-upgrade-wagmi-…

82ed41d

…viem-etc Upgrade wagmi, viem, web3modal

adamgall marked this pull request as ready for review March 20, 2024 15:52

Merge branch 'develop' into refactor/#1450-replace-rainbowkit-with-we…

8f91008

…b3-modal

adamgall reviewed Mar 20, 2024

View reviewed changes

src/hooks/utils/useDisplayName.ts Show resolved Hide resolved

src/hooks/DAO/loaders/useLoadDAONode.ts Show resolved Hide resolved

adamgall mentioned this pull request Mar 20, 2024

Enhancement/#1414 unconnected network switch #1476

Merged

mudrila requested a review from adamgall March 21, 2024 10:53

adamgall approved these changes Mar 21, 2024

View reviewed changes

adamgall requested changes Mar 21, 2024

View reviewed changes

src/pages/DAOController.tsx Outdated Show resolved Hide resolved

Refactor DAOController to not display InvalidChain

107446b

mudrila requested a review from adamgall March 21, 2024 15:31

Prettier

77ae6f4

tomstuart123 approved these changes Mar 21, 2024

View reviewed changes

tomstuart123 mentioned this pull request Mar 21, 2024

Safe Account WalletConnect - issue in creating, signing and executing Txs #1479

Closed

Remove unused translations

f73c306

adamgall approved these changes Mar 21, 2024

View reviewed changes

adamgall merged commit 7fed0c1 into develop Mar 21, 2024
6 of 7 checks passed

adamgall deleted the refactor/#1450-replace-rainbowkit-with-web3-modal branch March 21, 2024 17:08

adamgall mentioned this pull request Apr 5, 2024

Release/2024-04-08 Part 1: The Merge into prod #1521

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replacing Rainbowkit with Web3Modal #1465

Replacing Rainbowkit with Web3Modal #1465

mudrila commented Mar 16, 2024 •

edited

Loading

netlify bot commented Mar 16, 2024 •

edited

Loading

mudrila Mar 16, 2024

Da-Colon Mar 18, 2024

Da-Colon left a comment

Da-Colon Mar 18, 2024

mudrila commented Mar 18, 2024

mudrila commented Mar 18, 2024

mudrila commented Mar 18, 2024

adamgall left a comment

adamgall left a comment •

edited

Loading

tomstuart123 commented Mar 21, 2024

adamgall left a comment

Replacing Rainbowkit with Web3Modal #1465

Replacing Rainbowkit with Web3Modal #1465

Conversation

mudrila commented Mar 16, 2024 • edited Loading

Testing

netlify bot commented Mar 16, 2024 • edited Loading

✅ Deploy Preview for fractal-dev ready!

mudrila Mar 16, 2024

Choose a reason for hiding this comment

Da-Colon Mar 18, 2024

Choose a reason for hiding this comment

Da-Colon left a comment

Choose a reason for hiding this comment

Da-Colon Mar 18, 2024

Choose a reason for hiding this comment

mudrila commented Mar 18, 2024

mudrila commented Mar 18, 2024

mudrila commented Mar 18, 2024

adamgall left a comment

Choose a reason for hiding this comment

adamgall left a comment • edited Loading

Choose a reason for hiding this comment

tomstuart123 commented Mar 21, 2024

adamgall left a comment

Choose a reason for hiding this comment

mudrila commented Mar 16, 2024 •

edited

Loading

netlify bot commented Mar 16, 2024 •

edited

Loading

adamgall left a comment •

edited

Loading