Merge pull request #1156 from showtime-xyz/feature/show2-770-rainbowkit

🌈 rainbowkit & wagmi integration
showtime-xyz · Jun 9, 2022 · 51cd6c7 · 51cd6c7
2 parents 78d3a4f + 68edae8
commit 51cd6c7
Show file tree

Hide file tree

Showing 45 changed files with 1,181 additions and 582 deletions.
diff --git a/apps/expo/.env.development b/apps/expo/.env.development
@@ -1,28 +1,29 @@
 STAGE=development
 NEXT_PUBLIC_CHAIN_ID=mumbai
-NEXT_PUBLIC_SCRIPTS_URL=https://testingservice-dot-showtimenft.wl.r.appspot.com
+NEXT_PUBLIC_SIGN_CHAIN_ID=80001
+NEXT_PUBLIC_INFURA_ID=45f2e4f4ce3f483b8472f5f77f12c50d
+
 NEXT_PUBLIC_BACKEND_URL=https://testingservice-dot-showtimenft.wl.r.appspot.com/api
 NEXT_PUBLIC_NOTIFICATIONS_URL=https://testing-dot-notificationservice-dot-showtimenft.wl.r.appspot.com/api
-SHOWTIME_FRONTEND_API_KEY_V2=test_1FdwohsbXLYvE6TRktHBMq3oA2ggtTMDyKlcYaHtjos0r43Z5B2MV1pM3xVWxLsuNQeBwSc0zhKwuii
-NEXT_PUBLIC_BICONOMY_KEY=dlARtlJSn.2e41a26b-5645-444b-b79c-a6da2f2a3a3d
+NEXT_API_URL=https://staging.showtime.xyz
+
+NEXT_PUBLIC_SIGNING_MESSAGE="Sign into Showtime with this wallet."
+NEXT_PUBLIC_SIGNING_MESSAGE_ADD_WALLET="Connect this wallet to Showtime."
+
 NEXT_PUBLIC_MINTING_CONTRACT=0x09F3a26302e1c45f0d78Be5D592f52b6fca43811
 NEXT_PUBLIC_MARKETPLACE_CONTRACT=0xB38a0Ed9d60CEa911E43DBbEC205cd3ddE0C51B6
-MAGIC_SECRET_KEY=sk_live_EEFB9119AF4522A3
+
 NEXT_PUBLIC_MAGIC_PUB_KEY=pk_live_27467091AA294283
-NEXT_PUBLIC_INFURA_ID=45f2e4f4ce3f483b8472f5f77f12c50d
-NEXT_PUBLIC_SIGNING_MESSAGE="Sign into Showtime with this wallet."
-NEXT_PUBLIC_SIGNING_MESSAGE_ADD_WALLET="Connect this wallet to Showtime."
-ENCRYPTION_SECRET=test_LehcUKlga3QvccixQU4OzDp8ClCWM89KHBpWpU6dV6Yd6TggNPHoyyH1yFP8RwOLhZgeJkzFeqEtmHn
-ENCRYPTION_SECRET_V2=test_EL8wyYc9mr99DImk5W3hKZXu7n89W7LaWNTgLYHi2iUieEUWdImWFlpK8Gr2RKH0VygAPmwWp8TS6OV
+NEXT_PUBLIC_BICONOMY_KEY=dlARtlJSn.2e41a26b-5645-444b-b79c-a6da2f2a3a3d
 NEXT_PUBLIC_FORTMATIC_PUB_KEY=pk_test_C8E57D81AA18C06D
-NEXT_PUBLIC_SIGNING_MESSAGE_ADD_TEZOS_WALLET="B   Tezos Signed Message: Connect this wallet to Showtime."
-SHOWTIME_FRONTEND_API_KEY=test_reCc9K7X2maxIBFjK8BHgQCRpGhnWQt9FYgI7RsTtKVCtvKUZgou9qBKGN7mPorOhZEuRg5dAr7rT2b
-NEXT_PUBLIC_SENTRY_CLIENT_ENVIRONMENT=local
-SENTRY_SERVER_ENVIRONMENT=local
-SENTRY_SERVER_RELEASE_ENVIRONMENT=local
-NEXT_PUBLIC_SENTRY_RELEASE_ENVIRONMENT=local
 NEXT_PUBLIC_RUDDERSTACK_WRITE_KEY=24xZi2jcoPBdiBSThcM5JB0pUyr
 GROWTHBOOK_FEATURES_ENDPOINT=https://cdn.growthbook.io/api/features/key_dev_3c625e15498775d4
+
 SENTRY_DSN=https://[email protected]/5860034
 SENTRY_AUTH_TOKEN=2ed32928e0f84f92a62686ad7dedc87e655d30c93c5a4f85b7ccdfa385d5e27f
-NEXT_PUBLIC_META_SINGLE_EDITION_MINTABLE_CREATOR=0x50C001A33Caa446c8b84C489F371F77754F41024
+NEXT_PUBLIC_SENTRY_CLIENT_ENVIRONMENT=local
+NEXT_PUBLIC_SENTRY_RELEASE_ENVIRONMENT=local
+SENTRY_SERVER_ENVIRONMENT=local
+SENTRY_SERVER_RELEASE_ENVIRONMENT=local
+
+NEXT_PUBLIC_META_SINGLE_EDITION_MINTABLE_CREATOR=0x50C001A33Caa446c8b84C489F371F77754F41024
diff --git a/apps/expo/.env.production b/apps/expo/.env.production
@@ -1,18 +1,29 @@
 STAGE=production
-NEXT_PUBLIC_MAGIC_PUB_KEY=pk_live_C9AD507711A5DA96
+NEXT_PUBLIC_CHAIN_ID=polygon
+NEXT_PUBLIC_SIGN_CHAIN_ID=137
 NEXT_PUBLIC_INFURA_ID=45f2e4f4ce3f483b8472f5f77f12c50d
+
 NEXT_PUBLIC_BACKEND_URL=https://showtimenft.wl.r.appspot.com/api
 NEXT_PUBLIC_NOTIFICATIONS_URL=https://notificationservice-dot-showtimenft.wl.r.appspot.com/api
 NEXT_API_URL=https://showtime.xyz
+
 NEXT_PUBLIC_SIGNING_MESSAGE="Sign into Showtime with this wallet."
 NEXT_PUBLIC_SIGNING_MESSAGE_ADD_WALLET="Connect this wallet to Showtime."
+
 NEXT_PUBLIC_MINTING_CONTRACT=0x8a13628dd5d600ca1e8bf9dbc685b735f615cb90
 NEXT_PUBLIC_MARKETPLACE_CONTRACT=0x022F3C027572FE1b321ba7a7844ab77aC4193650
-NEXT_PUBLIC_CHAIN_ID=polygon
+
+NEXT_PUBLIC_MAGIC_PUB_KEY=pk_live_C9AD507711A5DA96
 NEXT_PUBLIC_BICONOMY_KEY=E4Euu_02N.521013d4-b554-4954-b1c1-df4443131e74
-NEXT_PUBLIC_FORTMATIC_PUB_KEY=pk_live_A392C95635B2FA5C
+NEXT_PUBLIC_FORTMATIC_PUB_KEY=pk_live_A392C95635B2FA5Cx
 NEXT_PUBLIC_RUDDERSTACK_WRITE_KEY=24xZkZbv7FAs9nusGnNmRizeQA8
 GROWTHBOOK_FEATURES_ENDPOINT=https://cdn.growthbook.io/api/features/key_prod_959e161c4976f4a8
+
 SENTRY_DSN=https://[email protected]/5860034
 SENTRY_AUTH_TOKEN=2ed32928e0f84f92a62686ad7dedc87e655d30c93c5a4f85b7ccdfa385d5e27f
-NEXT_PUBLIC_META_SINGLE_EDITION_MINTABLE_CREATOR=0x50c00111657d69db152De26C57699668073b6684
+NEXT_PUBLIC_SENTRY_CLIENT_ENVIRONMENT=production
+NEXT_PUBLIC_SENTRY_RELEASE_ENVIRONMENT=production
+SENTRY_SERVER_ENVIRONMENT=production
+SENTRY_SERVER_RELEASE_ENVIRONMENT=production
+
+NEXT_PUBLIC_META_SINGLE_EDITION_MINTABLE_CREATOR=0x50c00111657d69db152De26C57699668073b6684
diff --git a/apps/expo/.env.staging b/apps/expo/.env.staging
@@ -1,17 +1,29 @@
 STAGE=staging
-NEXT_PUBLIC_MAGIC_PUB_KEY=pk_live_27467091AA294283
+NEXT_PUBLIC_CHAIN_ID=polygon
+NEXT_PUBLIC_SIGN_CHAIN_ID=80001
 NEXT_PUBLIC_INFURA_ID=45f2e4f4ce3f483b8472f5f77f12c50d
+
 NEXT_PUBLIC_BACKEND_URL=https://testingservice-dot-showtimenft.wl.r.appspot.com/api
 NEXT_PUBLIC_NOTIFICATIONS_URL=https://testing-dot-notificationservice-dot-showtimenft.wl.r.appspot.com/api
 NEXT_API_URL=https://staging.showtime.xyz
+
 NEXT_PUBLIC_SIGNING_MESSAGE="Sign into Showtime with this wallet."
 NEXT_PUBLIC_SIGNING_MESSAGE_ADD_WALLET="Connect this wallet to Showtime."
+
 NEXT_PUBLIC_MINTING_CONTRACT=0x8a13628dd5d600ca1e8bf9dbc685b735f615cb90
 NEXT_PUBLIC_MARKETPLACE_CONTRACT=0x022F3C027572FE1b321ba7a7844ab77aC4193650
-NEXT_PUBLIC_CHAIN_ID=polygon
+
+NEXT_PUBLIC_MAGIC_PUB_KEY=pk_live_27467091AA294283
 NEXT_PUBLIC_BICONOMY_KEY=E4Euu_02N.521013d4-b554-4954-b1c1-df4443131e74
 NEXT_PUBLIC_FORTMATIC_PUB_KEY=pk_test_C8E57D81AA18C06D
 NEXT_PUBLIC_RUDDERSTACK_WRITE_KEY=24xZi2jcoPBdiBSThcM5JB0pUyr
 GROWTHBOOK_FEATURES_ENDPOINT=https://cdn.growthbook.io/api/features/key_dev_3c625e15498775d4
+
 SENTRY_DSN=https://[email protected]/5860034
-SENTRY_AUTH_TOKEN=2ed32928e0f84f92a62686ad7dedc87e655d30c93c5a4f85b7ccdfa385d5e27f
+SENTRY_AUTH_TOKEN=2ed32928e0f84f92a62686ad7dedc87e655d30c93c5a4f85b7ccdfa385d5e27f
+NEXT_PUBLIC_SENTRY_CLIENT_ENVIRONMENT=staging
+NEXT_PUBLIC_SENTRY_RELEASE_ENVIRONMENT=staging
+SENTRY_SERVER_ENVIRONMENT=staging
+SENTRY_SERVER_RELEASE_ENVIRONMENT=staging
+
+NEXT_PUBLIC_META_SINGLE_EDITION_MINTABLE_CREATOR=0x50C001A33Caa446c8b84C489F371F77754F41024
diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -64,9 +64,9 @@
     "@react-navigation/stack": "^6.1.0",
     "@react-three/drei": "^9.5.3",
     "@react-three/fiber": "^8.0.12",
-    "@rudderstack/rudder-sdk-react-native": "^1.4.0",
+    "@rudderstack/rudder-sdk-react-native": "^1.4.1",
     "@sentry/react-native": "^3.3.0",
-    "@shopify/react-native-skia": "^0.1.123",
+    "@shopify/react-native-skia": "0.1.123",
     "@showtime-xyz/universal.accordion": "^0.0.7",
     "@showtime-xyz/universal.activity-indicator": "^0.0.6",
     "@showtime-xyz/universal.alert": "^0.0.7",

diff --git a/apps/next-react-native/package.json b/apps/next-react-native/package.json
@@ -22,6 +22,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",
@@ -83,6 +84,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
@@ -7,6 +7,8 @@ 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 "@rainbow-me/rainbowkit/styles.css";
 import { AppProps } from "next/app";
 import Head from "next/head";
 // Todo: move to inner-components.
@@ -16,6 +18,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 +77,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<methods.length;i++){var method=methods[i];rudderanalytics[method]=function(a){return function(){rudderanalytics.push([a].concat(Array.prototype.slice.call(arguments)))}}(method)}rudderanalytics.load("${RUDDERSTACK_WRITE_KEY}","${RUDDERSTACK_DATA_PLANE_URL}",{sendAdblockPage:!1,sendAdblockPageOptions:{integrations:{All:!1,Amplitude:!1}},logLevel:"ERROR"}),rudderanalytics.page();`;
 }
@@ -239,71 +263,75 @@ export default function App({ Component, pageProps, router }: AppProps) {
       </Head>
       <SafeAreaProvider>
         <ToastProvider>
-          <AlertProvider>
-            <SnackbarProvider>
-              <SWRProvider>
-                <Web3Provider>
-                  <AppContext.Provider value={injectedGlobalContext}>
-                    <AuthProvider>
-                      <UserProvider>
-                        <CSROnly>
-                          <BottomSheetModalProvider>
-                            <GrowthBookProvider growthbook={growthbook}>
-                              <FeedProvider>
-                                <NavigationProvider>
-                                  <MintProvider>
-                                    <View tw="bg-gray-100 dark:bg-black">
-                                      <Header
-                                        canGoBack={
-                                          router.pathname === "/search" ||
-                                          router.pathname.split("/").length -
-                                            1 >=
-                                            2
-                                        }
-                                      />
-
-                                      <View
-                                        tw="min-h-screen items-center"
-                                        // @ts-ignore
-                                        style={{ overflowX: "hidden" }}
-                                      >
-                                        <Component {...pageProps} />
-                                      </View>
-
-                                      <Footer />
-                                    </View>
-
-                                    {/* Modals */}
-                                    <CommentsScreen />
-                                    <TransferScreen />
-                                    <CreateScreen />
-                                    <DeleteScreen />
-                                    <ListScreen />
-                                    <UnlistScreen />
-                                    <DetailsScreen />
-                                    <BuyScreen />
-                                    <ActivitiesScreen />
-                                    <EditProfileScreen />
-                                    <FollowersScreen />
-                                    <FollowingScreen />
-                                    <DropScreen />
-                                    <ClaimScreen />
-                                    {/* Login should be the last so
-                                      it renders on top of others if needed */}
-                                    <LoginScreen />
-                                  </MintProvider>
-                                </NavigationProvider>
-                              </FeedProvider>
-                            </GrowthBookProvider>
-                          </BottomSheetModalProvider>
-                        </CSROnly>
-                      </UserProvider>
-                    </AuthProvider>
-                  </AppContext.Provider>
-                </Web3Provider>
-              </SWRProvider>
-            </SnackbarProvider>
-          </AlertProvider>
+          <WagmiConfig client={wagmiClient}>
+            <RainbowKitProvider chains={chains}>
+              <AlertProvider>
+                <SnackbarProvider>
+                  <SWRProvider>
+                    <Web3Provider>
+                      <AppContext.Provider value={injectedGlobalContext}>
+                        <AuthProvider>
+                          <UserProvider>
+                            <CSROnly>
+                              <BottomSheetModalProvider>
+                                <GrowthBookProvider growthbook={growthbook}>
+                                  <FeedProvider>
+                                    <NavigationProvider>
+                                      <MintProvider>
+                                        <View tw="bg-gray-100 dark:bg-black">
+                                          <Header
+                                            canGoBack={
+                                              router.pathname === "/search" ||
+                                              router.pathname.split("/")
+                                                .length -
+                                                1 >=
+                                                2
+                                            }
+                                          />
+
+                                          <View
+                                            tw="min-h-screen items-center"
+                                            // @ts-ignore
+                                            style={{ overflowX: "hidden" }}
+                                          >
+                                            <Component {...pageProps} />
+                                          </View>
+
+                                          <Footer />
+                                        </View>
+
+                                        {/* Modals */}
+                                        <CommentsScreen />
+                                        <TransferScreen />
+                                        <CreateScreen />
+                                        <DeleteScreen />
+                                        <ListScreen />
+                                        <UnlistScreen />
+                                        <DetailsScreen />
+                                        <BuyScreen />
+                                        <ActivitiesScreen />
+                                        <EditProfileScreen />
+                                        <FollowersScreen />
+                                        <FollowingScreen />
+                                        <DropScreen />
+                                        <ClaimScreen />
+                                        {/* Login should be the last so it renders on top of others if needed */}
+                                        <LoginScreen />
+                                      </MintProvider>
+                                    </NavigationProvider>
+                                  </FeedProvider>
+                                </GrowthBookProvider>
+                              </BottomSheetModalProvider>
+                            </CSROnly>
+                          </UserProvider>
+                        </AuthProvider>
+                      </AppContext.Provider>
+                    </Web3Provider>
+                  </SWRProvider>
+                </SnackbarProvider>
+              </AlertProvider>
+            </RainbowKitProvider>
+          </WagmiConfig>
         </ToastProvider>
       </SafeAreaProvider>
     </>

diff --git a/packages/app/components/connect-button.tsx b/packages/app/components/connect-button.tsx
@@ -0,0 +1,3 @@
+export const NetworkButton = () => {
+  return null;
+};