🌈 rainbowkit & wagmi integration #1156

enesozturk · 2022-06-03T10:57:19Z

Why

We want to use Rainbow Kit for login on the web instead of Magic.

How

After some discussion with the Rainbow team and some fixes, it's now working as expected. For this transition, I needed to totally refactor useWalletLogin because with the wagmi.sh, we get connection data with different hooks and that trigger different effects to handle login, log out, network change, etc.

Additionally, I needed to add the wrong network button to the header because if the user doesn't realize they logged in with mainnet or something else, they won't be able to Mint, Buy, etc. When they press the Wrong Network button, they will need to select Poly gon and resign again, the button will disappear.

Test Plan

These changes should be well tested and I would appreciate if you help me and test these scenarios:

Login with the following wallets with Polygon Network
- Rainbow, MetaMask, Coinbase
Try Minting
Login with the following wallets with Ethereum Network
- Rainbow, MetaMask, Coinbase
You'll see the Wrong Network button on the header. Press it, Select Polygon
If you are logged with Rainbow or Coinbase, you'll get a notification on the mobile app. Confirm it.

Questions

On mobile, due to restrictions, we cannot use the buying feature. That is why I didn't add a check for mobile in useBuyNft hook when I refactor it with Wagmi hooks. Should I consider it? @intergalacticspacehighway

Additional Notes

Currently login business logic looks pretty messy including this one. It's hard to follow data, handle effects, etc. My previous PR was including some refactor. I'll handle them later to keep this PR smaller.

linear · 2022-06-03T10:57:22Z

SHOW2-770 RainbowKit

We are experiencing a lot of issues with bare WalletConnect, especially on mobile web (even if this is working very well sometimes)

Let's try RainbowKit

vercel · 2022-06-03T10:57:22Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
showtime	✅ Ready (Inspect)	Visit Preview	Jun 9, 2022 at 7:43AM (UTC)

axeldelafosse

It's not deploying because the yarn.lock file is not in a good state. Not sure what's happening -- can't try the PR previews

axeldelafosse · 2022-06-03T12:25:49Z

packages/app/components/connect-button.tsx

@@ -0,0 +1,96 @@
+import { ConnectButton as RainbotConnectButton } from "@rainbow-me/rainbowkit";
+
+import { Button, View } from "design-system";


Even if this is working I think it's best to import individual packages from @showtime-xyz/universal.

Fixed ✅ Realized that we don't use universal for buttons (@showtime-xyz/universal.button) in the project. Does it have any special case?

Oh I just fetched new commits, thats ok 👍🏽

axeldelafosse · 2022-06-03T12:26:13Z

packages/app/components/connect-button.tsx

+
+export const ConnectButton = ({ handleSubmitWallet }: ConnectButtonProps) => {
+  return (
+    <RainbotConnectButton.Custom>


Typo RainbotConnectButton

intergalacticspacehighway · 2022-06-03T13:46:06Z

packages/app/lib/web3-modal.web.ts

-          name: "Coinbase",
-          description: "Use the Coinbase Wallet app on your mobile device",
-        },
+      coinbasewallet: {


do we still need web3 modal?

Yeah, I removed it ✅

intergalacticspacehighway · 2022-06-03T13:47:51Z

packages/app/providers/web3-provider.tsx

@@ -2,12 +2,13 @@ import { useEffect, useMemo, useState } from "react";
 import { Platform } from "react-native";

 import { Web3Provider as EthersWeb3Provider } from "@ethersproject/providers";
+import "@rainbow-me/rainbowkit/styles.css";


i think we should keep this import in _app.tsx, or might crash on native, no?

intergalacticspacehighway · 2022-06-03T13:48:46Z

packages/app/providers/web3-provider.tsx

-          const provider = await web3Modal.connect();
-          const ethersProvider = new EthersWeb3Provider(provider);
-          setWeb3(ethersProvider);
+    if (Platform.OS !== "web") {


i think magic wallet was on web and native both, right? Do we need this condition?

Here I needed to refactor all providers for web and mobile usage because on mobile we use wallet connect and on the web we use Wagmi. This comment might be invalid.

Here is what I did; To use wagmi on same providers, I created provider wrappers for the web (web3-provider.web.tsx, auth-provider.web.tsx). And passed some props to the Web3Provider and AuthProvider. Because I didn't want to add the wagmi and rainbow packages to the mobile repo and wrap the mobile app with their providers.

Can you check them and give some feedback guys? @intergalacticspacehighway @axeldelafosse @alantoa

intergalacticspacehighway · 2022-06-06T07:42:44Z

packages/app/hooks/auth/use-wallet.ts

+const useWallet = () => {
+  const address = useMemo(async () => {
+    const web3Modal = await getWeb3Modal();
+    const web3 = new ethers.providers.Web3Provider(await web3Modal.connect());


i think here we should use useWeb3 hook as we already have the web3 provider so no need to recreate it I guess. We can delete the getWeb3modal from native as well

But on mobile, don't we use getWeb3Modal to get this info as well?

no, actually it was not being used before. I think we added that file so import won't break on native. We always called getWeb3Modal under Platform.OS web check (exception is buying NFT which was not implemented on native)

I see, there is web3-modal.native.ts file and I though that method uses this on native. I tried not to break something, I might use unnecessary implementations, thanks to mention 👍🏽

intergalacticspacehighway · 2022-06-06T07:46:59Z

if we're on dev then we can switch to polygon testnet instead of polygon. There's an env NEXT_PUBLIC_CHAIN_ID which we can use.

intergalacticspacehighway · 2022-06-06T07:47:53Z

i think we might have to discuss UI regarding this!

Oh yes, exactly! I was about to share it but forgot then. I'll share on the design channel how to continue on it. @intergalacticspacehighway

intergalacticspacehighway · 2022-06-06T08:14:19Z

packages/app/hooks/auth/use-wallet.web.ts

+    address: wagmiData?.address,
+    connected,
+    signed,
+    loggedIn,


is there a reason we need loggedIn and connected both? Logged in might be a bit confusing as if it's a showtime user login or a wallet login.

connected is just used the indicate that if the wallet connection is done and the loggedIn is used to indicate if the user logged in and have storage data (apart from wallet connection). I needed to use both separately to handle set web3 object and handle logins log outs while configure the effects in use-wallet-login.ts

okay, but loggedIn is derived from connected so they'll always be same, right?

Oh I see, I get it now, yes, here is the thing; loggedIn is triggered when the connected change, I needed to catch that to trigger something at once. This is because I used that way. Yeah that doesn't looks good approach, I try to refactor it.

intergalacticspacehighway · 2022-06-06T08:47:59Z

Great work @enesozturk 👏

We might need to refactor or move some stuff for a better abstraction.
e.g. there are 4 hooks useWallet, useSignerAndProvider, useSignTypedData and useWeb3 and there's some duplication in useSignedTypedData and useWallet. useSignerAndProvider handles biconomy but is poorly named (my fault!).

I think we can have a single hook useWallet abstracted on top of pure wallet connect on native and wagmi on web. This hook can export APIs to handle signing, network change, user address, connected etc.

We can bring this up after merging this PR. I have some ideas on this. Will open a discussion or just do a PR ❇️

enesozturk · 2022-06-06T09:09:57Z

@intergalacticspacehighway yeah looks like there are more hooks than needed. You also added useSignTypedData with your last work, I didn't realize that tbh. We would better to get together and refactor some of them I think, that will fix all. Thanks for review!

enesozturk · 2022-06-07T23:57:16Z

Today we got an issue with @intergalacticspacehighway; while switching the network on MetaMask, Wagmi disconnects us. We thought it was related to wagmi.sh but looks like it's not.
Here is the issue I opened and the response: wevm/wagmi#563 (comment)

Additionally, I tested drop NFT on both staging and production environments and here is the results;

Rainbow Drop NFT Tests - Production

Rainbow Wallet
- Switch Network ✅
  - If I’m in the wrong network, after pressing Switch Chain on the alert message, I see the confirmation dialog on the Rainbow app, then when I retry, it’s ok ✅
  - Additional note here; Rainbow app should be open state on mobile
- Drop NFT ✅
Coinbase Wallet
- Switch Network ✅
  - If I’m in the wrong network, after pressing Switch Network on the alert message, I see the confirmation dialog on the Coinbase app, then retry, and it’s ok. ✅
  - Additional note here; Coinbase app should be opened state on mobile
- Drop NFT ✅
MetaMask
- Getting this error when sign with mainnet => message: "from_address 0xf5B035287c1465F29C7e08FbB5c3b8a4975Bf831' does not belong to the authenticated user
- Did these changes affected in prod? @fontanierh

Rainbow Drop NFT Tests - Staging (Test APIs)

Rainbow Wallet
- Switch Network 💥
  - I connected with Polygon (not Mumbai), when I try to drop NFT, the switch chain alert opened, pressed but on the Rainbow app, no confirmation modal showed, probably the reason is Polygon Mumbai credentials don't exist on the Rainbow app, and no way to do it as we do on MetaMask. I think this will not be a problem for production.
Coinbase Wallet
- Switch Network ✅
- Drop NFT ✅
MetaMask
- Switch Network ✅
- Drop NFT ✅

Also needed to update env keys because they were not consistent, there were some keys which are not included in all of them.

intergalacticspacehighway · 2022-06-08T06:45:53Z

@enesozturk LGTM ❇️ . can you look why CI stuff is failing?

enesozturk · 2022-06-08T07:08:17Z

@enesozturk LGTM ❇️ . can you look why CI stuff is failing?

@intergalacticspacehighway Yeah I'm not sure, taking a look the logs now 👍🏽

github-actions · 2022-06-08T07:57:23Z

PR Preview - Storybook

This pull request preview deployment is now available.

✅ Preview: exp+io.showtime.storybook://expo-development-client/?url=https://u.expo.dev/e77d5b68-bb27-45da-aa5c-96c1fdbf6706&channel-name=pr-1156

Comment ID: 1149588261

enesozturk requested a review from alantoa June 3, 2022 10:57

enesozturk requested review from axeldelafosse and intergalacticspacehighway as code owners June 3, 2022 10:57

vercel bot had a problem deploying to Preview June 3, 2022 12:16 Failure

axeldelafosse reviewed Jun 3, 2022

View reviewed changes

intergalacticspacehighway reviewed Jun 3, 2022

View reviewed changes

vercel bot had a problem deploying to Preview June 4, 2022 15:45 Failure

vercel bot had a problem deploying to Preview June 4, 2022 16:00 Failure

vercel bot had a problem deploying to Preview June 4, 2022 16:05 Failure

enesozturk force-pushed the feature/show2-770-rainbowkit branch from 9731cf6 to 7fa087d Compare June 4, 2022 16:22

vercel bot had a problem deploying to Preview June 4, 2022 16:26 Failure

intergalacticspacehighway reviewed Jun 6, 2022

View reviewed changes

vercel bot had a problem deploying to Preview June 6, 2022 17:19 Failure

vercel bot had a problem deploying to Preview June 6, 2022 17:55 Failure

vercel bot had a problem deploying to Preview June 6, 2022 19:14 Failure

vercel bot had a problem deploying to Preview June 8, 2022 00:07 Failure

vercel bot deployed to Preview June 8, 2022 07:57 View deployment

enesozturk added 24 commits June 9, 2022 10:20

refactor: separate providers for web and mobile

7bdf7c6

refactor: update wrong network button, add alert icon

a2a8909

chore: conditional rendering for wrong network button

d7b6526

refactor: update rainbow button naming

21e47a3

refactor: update wagmi hook name and separate usae per platform

1609fe8

refactor: update wallet hook usage

3d93140

chore: remove web3modal methods for web, update yarn lock

014f83e

chore: use universal package

a633057

chore: use universal system for button

63a0c5a

chore: update yarn lock

ae4cf03

fix: linter errors

74a4c76

refactor: update hooks

1e66e49

chore: comment switch network button

e1abf43

chore: update yarn lock

faac38c

chore: disable loading state on wallet connect

e1ad32f

refactor: update current user address hook and usage

11082ad

refactor: update hooks

29c652f

refactor: update env keys, remove unused ones

f9cda46

chore: update package json and yarn lock

fdbc875

fix: expected chain access and parsing

1dbce5f

chore: update yarn lock

b5f34c2

chore: restore create drop button

6677d1c

chore: upgrade rudderstack

aed9ebb

chore: remove extra package

a47478b

enesozturk force-pushed the feature/show2-770-rainbowkit branch from 8a9e4f9 to a47478b Compare June 9, 2022 07:23

vercel bot had a problem deploying to Preview June 9, 2022 07:23 Failure

chore: staging state and rudderstack

68edae8

vercel bot deployed to Preview June 9, 2022 07:43 View deployment

enesozturk merged commit 51cd6c7 into staging Jun 9, 2022

enesozturk deleted the feature/show2-770-rainbowkit branch June 9, 2022 08:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🌈 rainbowkit & wagmi integration #1156

🌈 rainbowkit & wagmi integration #1156

enesozturk commented Jun 3, 2022

linear bot commented Jun 3, 2022

vercel bot commented Jun 3, 2022 •

edited

Loading

axeldelafosse left a comment

axeldelafosse Jun 3, 2022

enesozturk Jun 4, 2022

enesozturk Jun 4, 2022

axeldelafosse Jun 3, 2022

intergalacticspacehighway Jun 3, 2022

enesozturk Jun 4, 2022

intergalacticspacehighway Jun 3, 2022

enesozturk Jun 4, 2022

intergalacticspacehighway Jun 3, 2022

enesozturk Jun 4, 2022

intergalacticspacehighway Jun 6, 2022 •

edited

Loading

enesozturk Jun 6, 2022

intergalacticspacehighway Jun 6, 2022

enesozturk Jun 6, 2022

intergalacticspacehighway commented Jun 6, 2022

intergalacticspacehighway commented Jun 6, 2022 •

edited by enesozturk

Loading

intergalacticspacehighway Jun 6, 2022

enesozturk Jun 6, 2022

intergalacticspacehighway Jun 6, 2022

enesozturk Jun 6, 2022

intergalacticspacehighway commented Jun 6, 2022

enesozturk commented Jun 6, 2022 •

edited

Loading

enesozturk commented Jun 7, 2022 •

edited

Loading

intergalacticspacehighway commented Jun 8, 2022

enesozturk commented Jun 8, 2022

github-actions bot commented Jun 8, 2022 •

edited

Loading

		@@ -0,0 +1,96 @@
		import { ConnectButton as RainbotConnectButton } from "@rainbow-me/rainbowkit";

		import { Button, View } from "design-system";

🌈 rainbowkit & wagmi integration #1156

🌈 rainbowkit & wagmi integration #1156

Conversation

enesozturk commented Jun 3, 2022

Why

How

Test Plan

Questions

Additional Notes

linear bot commented Jun 3, 2022

vercel bot commented Jun 3, 2022 • edited Loading

axeldelafosse left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

intergalacticspacehighway Jun 6, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

intergalacticspacehighway commented Jun 6, 2022

intergalacticspacehighway commented Jun 6, 2022 • edited by enesozturk Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

intergalacticspacehighway commented Jun 6, 2022

enesozturk commented Jun 6, 2022 • edited Loading

enesozturk commented Jun 7, 2022 • edited Loading

Rainbow Drop NFT Tests - Production

Rainbow Drop NFT Tests - Staging (Test APIs)

intergalacticspacehighway commented Jun 8, 2022

enesozturk commented Jun 8, 2022

github-actions bot commented Jun 8, 2022 • edited Loading

PR Preview - Storybook

vercel bot commented Jun 3, 2022 •

edited

Loading

intergalacticspacehighway Jun 6, 2022 •

edited

Loading

intergalacticspacehighway commented Jun 6, 2022 •

edited by enesozturk

Loading

enesozturk commented Jun 6, 2022 •

edited

Loading

enesozturk commented Jun 7, 2022 •

edited

Loading

github-actions bot commented Jun 8, 2022 •

edited

Loading