feat: add starknet react

TERITORI · Jan 9, 2025 · 446e97e · 446e97e
1 parent 7812a68
commit 446e97e
Show file tree

Hide file tree

Showing 10 changed files with 531 additions and 63 deletions.
diff --git a/cairo/patch.md b/cairo/patch.md
@@ -0,0 +1,5 @@
+node_modules/starknet/package.json
+
+"browser": "dist/index.global.js",
+=> 
+"browser": "dist/index.js",
diff --git a/package.json b/package.json
@@ -72,6 +72,8 @@
     "@react-navigation/native-stack": "^6.7.0",
     "@reduxjs/toolkit": "^1.8.3",
     "@solana/web3.js": "^1.87.6",
+    "@starknet-react/chains": "^3.1.1",
+    "@starknet-react/core": "^3.6.3",
     "@tanstack/react-query": "^4.12.0",
     "@types/crypto-js": "^4.2.2",
     "@types/leaflet": "^1.9.12",
@@ -177,6 +179,7 @@
     "redux-persist": "^6.0.0",
     "redux-persist-electron-storage": "^2.1.0",
     "rxjs": "^7.8.1",
+    "starknet": "^6.11.0",
     "stream-browserify": "^3.0.0",
     "text-encoding-polyfill": "^0.6.7",
     "tsx": "^4.7.0",

diff --git a/packages/components/navigation/getNormalModeScreens.tsx b/packages/components/navigation/getNormalModeScreens.tsx
@@ -4,6 +4,7 @@ import { getPlatformScreens } from "./platformSpecific";
 import { getNav } from "./util";
 
 import { BurnCapitalScreen } from "@/screens/BurnCapital/BurnCapitalScreen";
+import { CairoPOCScreen } from "@/screens/CairoPOC/CairoPOCScreen";
 import { ComingSoonScreen } from "@/screens/ComingSoon/ComingSoon";
 import { CoreDAOScreen } from "@/screens/CoreDAO/CoreDAOScreen";
 import { DAppStoreScreen } from "@/screens/DAppStore/DAppStoreScreen";
@@ -550,6 +551,11 @@ export const getNormalModeScreens = ({
         component={RakkiScreen}
         options={{ header: () => null, title: screenTitle("Rakki") }}
       />
+      <Nav.Screen
+        name="CairoPOC"
+        component={CairoPOCScreen}
+        options={{ header: () => null, title: screenTitle("Cairo POC") }}
+      />
       {getPlatformScreens(screenTitle)}
     </>
   );

diff --git a/packages/context/StarknetProvider.tsx b/packages/context/StarknetProvider.tsx
@@ -0,0 +1,33 @@
+"use client";
+import { sepolia, mainnet } from "@starknet-react/chains";
+import {
+  StarknetConfig,
+  publicProvider,
+  argent,
+  braavos,
+  useInjectedConnectors,
+  voyager,
+} from "@starknet-react/core";
+import React from "react";
+
+export function StarknetProvider({ children }: { children: React.ReactNode }) {
+  const { connectors } = useInjectedConnectors({
+    // Show these connectors if the user has no connector installed.
+    recommended: [argent(), braavos()],
+    // Hide recommended connectors if the user has any connector installed.
+    includeRecommended: "onlyIfNoConnectors",
+    // Randomize the order of the connectors.
+    order: "random",
+  });
+
+  return (
+    <StarknetConfig
+      chains={[mainnet, sepolia]}
+      provider={publicProvider()}
+      connectors={connectors}
+      explorer={voyager}
+    >
+      {children}
+    </StarknetConfig>
+  );
+}
diff --git a/packages/dapp-root/Root.tsx b/packages/dapp-root/Root.tsx
@@ -47,6 +47,7 @@ import { setSelectedWalletId } from "@/store/slices/settings";
 import { persistor, store, useAppDispatch } from "@/store/store";
 import { isElectron } from "@/utils/isElectron";
 import { getLinking } from "@/utils/navigation";
+import { StarknetProvider } from "@/context/StarknetProvider";
 
 if (!globalThis.Buffer) {
   globalThis.Buffer = require("buffer").Buffer;
@@ -103,43 +104,45 @@ const App: React.FC<{ config: AppConfig }> = ({ config }) => {
               <QueryClientProvider client={queryClient}>
                 <FormProvider<DefaultForm> {...methods}>
                   <MetaMaskProvider>
-                    <AppNavigationContainer>
-                      <SafeAreaProvider>
-                        <FeedbacksContextProvider>
-                          <DropdownsProvider>
-                            <WalletsProvider>
-                              <WalletSyncer />
-                              <DappStoreApps />
-                              <MultisigDeauth />
-                              <WalletControlContextProvider>
-                                <SearchBarContextProvider>
-                                  <TransactionModalsProvider>
-                                    <TNSContextProvider>
-                                      <TNSMetaDataListContextProvider>
-                                        <MenuProvider>
-                                          <MessageContextProvider>
-                                            <MediaPlayerContextProvider>
-                                              <StatusBar
-                                                style={
-                                                  Platform.OS === "android"
-                                                    ? "light"
-                                                    : "inverted"
-                                                }
-                                              />
-                                              <Navigator />
-                                            </MediaPlayerContextProvider>
-                                          </MessageContextProvider>
-                                        </MenuProvider>
-                                      </TNSMetaDataListContextProvider>
-                                    </TNSContextProvider>
-                                  </TransactionModalsProvider>
-                                </SearchBarContextProvider>
-                              </WalletControlContextProvider>
-                            </WalletsProvider>
-                          </DropdownsProvider>
-                        </FeedbacksContextProvider>
-                      </SafeAreaProvider>
-                    </AppNavigationContainer>
+                    <StarknetProvider>
+                      <AppNavigationContainer>
+                        <SafeAreaProvider>
+                          <FeedbacksContextProvider>
+                            <DropdownsProvider>
+                              <WalletsProvider>
+                                <WalletSyncer />
+                                <DappStoreApps />
+                                <MultisigDeauth />
+                                <WalletControlContextProvider>
+                                  <SearchBarContextProvider>
+                                    <TransactionModalsProvider>
+                                      <TNSContextProvider>
+                                        <TNSMetaDataListContextProvider>
+                                          <MenuProvider>
+                                            <MessageContextProvider>
+                                              <MediaPlayerContextProvider>
+                                                <StatusBar
+                                                  style={
+                                                    Platform.OS === "android"
+                                                      ? "light"
+                                                      : "inverted"
+                                                  }
+                                                />
+                                                <Navigator />
+                                              </MediaPlayerContextProvider>
+                                            </MessageContextProvider>
+                                          </MenuProvider>
+                                        </TNSMetaDataListContextProvider>
+                                      </TNSContextProvider>
+                                    </TransactionModalsProvider>
+                                  </SearchBarContextProvider>
+                                </WalletControlContextProvider>
+                              </WalletsProvider>
+                            </DropdownsProvider>
+                          </FeedbacksContextProvider>
+                        </SafeAreaProvider>
+                      </AppNavigationContainer>
+                    </StarknetProvider>
                   </MetaMaskProvider>
                 </FormProvider>
               </QueryClientProvider>

diff --git a/packages/screens/CairoPOC/CairoPOCScreen.tsx b/packages/screens/CairoPOC/CairoPOCScreen.tsx
@@ -0,0 +1,36 @@
+import { ScreenContainer } from "@/components/ScreenContainer";
+import { PrimaryButton } from "@/components/buttons/PrimaryButton";
+import { useCairoTodos } from "./useCairoTodos";
+import { TertiaryBox } from "@/components/boxes/TertiaryBox";
+import { BrandText } from "@/components/BrandText";
+import { Todo } from "./types";
+
+export const CairoPOCScreen = () => {
+  const { data: todos, isLoading } = useCairoTodos();
+
+  return (
+    <ScreenContainer>
+      <PrimaryButton text="Add Todo" />
+
+      {todos?.map((todo: Todo, idx) => {
+        return (
+          <TertiaryBox key={idx} style={{ marginTop: 12 }}>
+            <BrandText
+              style={[
+                { fontSize: 16, paddingHorizontal: 16, paddingVertical: 4 },
+                todo.isDone && {
+                  textDecorationLine: "line-through",
+                  textDecorationStyle: "solid",
+                  color: "#666",
+                  fontStyle: "italic",
+                },
+              ]}
+            >
+              {todo.title}
+            </BrandText>
+          </TertiaryBox>
+        );
+      })}
+    </ScreenContainer>
+  );
+};
diff --git a/packages/screens/CairoPOC/types.ts b/packages/screens/CairoPOC/types.ts
@@ -0,0 +1,4 @@
+export type Todo = {
+  title: string;
+  isDone?: boolean;
+};
diff --git a/packages/screens/CairoPOC/useCairoTodos.ts b/packages/screens/CairoPOC/useCairoTodos.ts
@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
+export const useCairoTodos = () => {
+  return useQuery(["useCairoTodos"], async () => {
+    return [
+      { title: "task1", isDone: false },
+      { title: "task2", isDone: false },
+      { title: "task3", isDone: true },
+    ];
+  });
+};
diff --git a/packages/utils/navigation.ts b/packages/utils/navigation.ts
@@ -167,6 +167,8 @@ export type RootStackParamList = {
   MiniGroupActions: { conversationId: string };
   BurnCapital: { network?: string };
   Rakki: undefined;
+
+  CairoPOC: undefined;
 };
 
 export type AppNavigationProp = NativeStackNavigationProp<RootStackParamList>;
@@ -340,6 +342,8 @@ const getNavConfig: (homeScreen: keyof RootStackParamList) => NavConfig = (
       MiniGroupActions: "mini-group-actions",
       BurnCapital: "burn-capital",
       Rakki: "rakki",
+
+      CairoPOC: "cairo-poc",
     },
   };
   if (homeScreen === "Home") {