From ae708fa58c6a05ca13b93e2a8bbc030f02f71ab8 Mon Sep 17 00:00:00 2001 From: Enes Ozturk Date: Thu, 2 Jun 2022 14:44:01 +0300 Subject: [PATCH 01/35] feat: add coinbase wallet sdk to web3modal configs --- apps/next-react-native/package.json | 1 + packages/app/lib/web3-modal.web.ts | 26 +++++++++----------------- 2 files changed, 10 insertions(+), 17 deletions(-) diff --git a/apps/next-react-native/package.json b/apps/next-react-native/package.json index 49cc3450f8..aa8afc9ea0 100644 --- a/apps/next-react-native/package.json +++ b/apps/next-react-native/package.json @@ -15,6 +15,7 @@ "@badrap/bar-of-progress": "^0.1.2", "@biconomy/mexa": "2.0.24", "@builder.io/partytown": "^0.5.2", + "@coinbase/wallet-sdk": "^3.2.0", "@google/model-viewer": "^1.9.2", "@growthbook/growthbook-react": "^0.7.0", "@hapi/iron": "^6.0.0", diff --git a/packages/app/lib/web3-modal.web.ts b/packages/app/lib/web3-modal.web.ts index 70afff1001..3067ea75f4 100644 --- a/packages/app/lib/web3-modal.web.ts +++ b/packages/app/lib/web3-modal.web.ts @@ -1,3 +1,4 @@ +import CoinbaseWalletSDK from "@coinbase/wallet-sdk"; import Fortmatic from "fortmatic"; import { Magic } from "app/lib/magic"; @@ -11,7 +12,6 @@ const getWeb3Modal = async ({ withMagic = false } = {}) => { const WalletConnectProvider = (await import("@walletconnect/web3-provider")) .default; - const WalletLink = (await import("walletlink")).WalletLink; const Web3Modal = (await import("web3modal")).default; web3ModalCached = new Web3Modal({ @@ -33,24 +33,16 @@ const getWeb3Modal = async ({ withMagic = false } = {}) => { key: process.env.NEXT_PUBLIC_FORTMATIC_PUB_KEY, }, }, - "custom-walletlink": { - display: { - logo: "/coinbase.svg", - name: "Coinbase", - description: "Use the Coinbase Wallet app on your mobile device", - }, + coinbasewallet: { + package: CoinbaseWalletSDK, options: { appName: "Showtime", - networkUrl: `https://mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`, - chainId: process.env.NEXT_PUBLIC_CHAINID, - }, - package: WalletLink, - connector: async (_, options) => { - const { appName, networkUrl, chainId } = options; - const walletLink = new WalletLink({ appName }); - const provider = walletLink.makeWeb3Provider(networkUrl, chainId); - await provider.enable(); - return provider; + infuraId: process.env.NEXT_PUBLIC_INFURA_ID, + rpc: `https://polygon-${ + process.env.NEXT_PUBLIC_CHAIN_ID === "mumbai" ? "mumbai" : "mainnet" + }.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`, + chainId: 137, + darkMode: false, }, }, ...(withMagic From f00d93d28e523a270a2d07c7f7d793c4046790ee Mon Sep 17 00:00:00 2001 From: Enes Ozturk Date: Fri, 3 Jun 2022 13:31:30 +0300 Subject: [PATCH 02/35] feat: add wagmi and rainbow setup --- apps/next-react-native/package.json | 2 + apps/next-react-native/src/pages/_app.tsx | 157 +++++++++++++--------- 2 files changed, 94 insertions(+), 65 deletions(-) diff --git a/apps/next-react-native/package.json b/apps/next-react-native/package.json index aa8afc9ea0..85977a4726 100644 --- a/apps/next-react-native/package.json +++ b/apps/next-react-native/package.json @@ -23,6 +23,7 @@ "@magic-sdk/admin": "^1.3.2", "@next/bundle-analyzer": "^12.0.4", "@radix-ui/react-popover": "^0.1.6", + "@rainbow-me/rainbowkit": "^0.2.2", "@react-native-menu/menu": "^0.5.2", "@react-three/drei": "^9.5.3", "@react-three/fiber": "^8.0.12", @@ -84,6 +85,7 @@ "sortablejs": "^1.14.0", "sotez": "^10.0.0", "swr": "2.0.0-beta.1", + "wagmi": "^0.4.6", "walletlink": "^2.2.8", "web3modal": "^1.9.7" }, diff --git a/apps/next-react-native/src/pages/_app.tsx b/apps/next-react-native/src/pages/_app.tsx index 926b436846..a9f3df8db8 100644 --- a/apps/next-react-native/src/pages/_app.tsx +++ b/apps/next-react-native/src/pages/_app.tsx @@ -7,6 +7,7 @@ import { Platform, useColorScheme as useDeviceColorScheme } from "react-native"; import { BottomSheetModalProvider } from "@gorhom/bottom-sheet"; import { GrowthBook, GrowthBookProvider } from "@growthbook/growthbook-react"; +import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit"; import { AppProps } from "next/app"; import Head from "next/head"; // Todo: move to inner-components. @@ -16,6 +17,9 @@ import type { Revalidator, RevalidatorOptions } from "swr"; import { SWRConfig } from "swr"; import type { PublicConfiguration } from "swr/dist/types"; import { useAppColorScheme, useDeviceContext } from "twrnc"; +import { chain, configureChains, createClient, WagmiConfig } from "wagmi"; +import { alchemyProvider } from "wagmi/providers/alchemy"; +import { publicProvider } from "wagmi/providers/public"; import { AlertProvider } from "@showtime-xyz/universal.alert"; // import { enableFreeze } from 'react-native-screens' @@ -72,6 +76,25 @@ Sentry.init({ const RUDDERSTACK_WRITE_KEY = process.env.NEXT_PUBLIC_RUDDERSTACK_WRITE_KEY; const RUDDERSTACK_DATA_PLANE_URL = `https://tryshowtimjtc.dataplane.rudderstack.com`; +const { chains, provider } = configureChains( + [chain.polygon], + [ + alchemyProvider({ alchemyId: process.env.NEXT_PUBLIC_ALCHEMY_ID }), + publicProvider(), + ] +); + +const { connectors } = getDefaultWallets({ + appName: "Showtime", + chains, +}); + +const wagmiClient = createClient({ + autoConnect: true, + connectors, + provider, +}); + function renderEmptyAnalyticsSnippet() { return `rudderanalytics=window.rudderanalytics=[];for(var methods=["load","page","track","identify","alias","group","ready","reset","getAnonymousId","setAnonymousId"],i=0;i - - - - - - - - - - - - - - -
= - 2 - } - /> - - - - - -