Argent mobile connector fix (#424)

* start fix script and others stuff and redeploy * new contract * contrazt deploy and ui * try fix ui argent connection mobile * fix import * upgrade package starknetkit * issue error tsconfig in mobile * moduleRes bundler * use next import with nnpm: * dupliacte to delete * fix: argent mobile wallet --------- Co-authored-by: MSGhais <[email protected]>
AFK-AlignedFamKernel · Jan 8, 2025 · cb08eaf · cb08eaf
1 parent d1cf90b
commit cb08eaf
Show file tree

Hide file tree

Showing 29 changed files with 259 additions and 288 deletions.
diff --git a/apps/mobile/metro.config.js b/apps/mobile/metro.config.js
@@ -1,29 +1,39 @@
-// // Learn more https://docs.expo.io/guides/customizing-metro
-// metro.config.js
-
-// const { getDefaultConfig } = require('metro-config');
-// const path = require("path");
-// Learn more https://docs.expo.io/guides/customizing-metro
-const { getDefaultConfig } = require('expo/metro-config');
+const {getDefaultConfig} = require('expo/metro-config');
 const path = require('path');
 
-// Find the workspace root, this can be replaced with `find-yarn-workspace-root`
 const workspaceRoot = path.resolve(__dirname, '../..');
 const projectRoot = __dirname;
 
 const config = getDefaultConfig(projectRoot);
 
-// 1. Watch all files within the monorepo
 config.watchFolders = [workspaceRoot];
-// 2. Let Metro know where to resolve packages, and in what order
 config.resolver.nodeModulesPaths = [
   path.resolve(projectRoot, 'node_modules'),
-  path.resolve(workspaceRoot, 'node_modules')
+  path.resolve(workspaceRoot, 'node_modules'),
 ];
-// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
 config.resolver.disableHierarchicalLookup = true;
 
-// Add this configuration for WSL
+config.resolver = {
+  ...config.resolver,
+  resolveRequest: (context, moduleName, platform) => {
+    // Handle the starknetkit specific case
+    if (moduleName.startsWith('starknetkit/')) {
+      try {
+        const path = require.resolve(moduleName);
+        return {
+          filePath: path,
+          type: 'sourceFile',
+        };
+      } catch (e) {
+        // Fall back to default resolution
+        return context.resolveRequest(context, moduleName, platform);
+      }
+    }
+    // Default resolution for all other modules
+    return context.resolveRequest(context, moduleName, platform);
+  },
+};
+
 config.watchFolders = [workspaceRoot];
 config.server = {
   ...config.server,
@@ -32,106 +42,3 @@ config.server = {
 };
 
 module.exports = config;
-
-// module.exports = (async () => {
-//   const {
-//     resolver: { sourceExts, assetExts }
-//   } = await getDefaultConfig();
-
-//   return {
-//     transformer: {
-//       getTransformOptions: async () => ({
-//         transform: {
-//           experimentalImportSupport: false,
-//           inlineRequires: false,
-//         },
-//       }),
-//     },
-//     resolver: {
-//       assetExts: [...assetExts, 'svg', 'png', 'jpg', 'gif', 'ttf'],
-//       sourceExts: [...sourceExts, 'js', 'jsx', 'ts', 'tsx'],  // Ensure js is listed
-//     },
-//   };
-// })();
-
-
-// module.exports = (async () => {
-//   const {
-//     resolver: { sourceExts, assetExts }
-//   } = await getDefaultConfig();
-
-//   return {
-//     transformer: {
-//       getTransformOptions: async () => ({
-//         transform: {
-//           experimentalImportSupport: false,
-//           inlineRequires: true,
-//         },
-//       }),
-//     },
-//     resolver: {
-//       assetExts: assetExts.filter(ext => ext),
-//       sourceExts: [...sourceExts, 'svg','ttf'],
-//       extraNodeModules: new Proxy({}, {
-//         get: (target, name) => {
-//           return path.join(process.cwd(), `node_modules/${name}`);
-//         },
-//       }),
-//     },
-//   };
-// })();
-
-
-
-// const { getDefaultConfig } = require("expo/metro-config");
-// const path = require("path");
-
-// // Find the workspace root, this can be replaced with `find-yarn-workspace-root`
-// const workspaceRoot = path.resolve(__dirname, "../..");
-// const projectRoot = __dirname;
-
-// const config = getDefaultConfig(projectRoot);
-
-// // 1. Watch all files within the monorepo
-// config.watchFolders = [workspaceRoot];
-// // 2. Let Metro know where to resolve packages, and in what order
-// config.resolver.nodeModulesPaths = [
-//   path.resolve(projectRoot, "node_modules"),
-//   path.resolve(workspaceRoot, "node_modules"),
-// ];
-// // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
-// config.resolver.disableHierarchicalLookup = true;
-
-// module.exports = config;
-
-// TEST
-// const path = require('path');
-
-// module.exports = {
-//   ...config,
-//   watchFolders: [
-//     path.resolve(__dirname, '../../node_modules'),
-//   ],
-//   resolver: {
-
-//     extraNodeModules: new Proxy({}, {
-//       get: (target, name) => path.join(process.cwd(), `node_modules/${name}`),
-//     }),
-//   },
-// };
-
-// const {assetExts} = getDefaultConfig();
-// module.exports = {
-//   // ...config,
-//   watchFolders: [
-//     path.resolve(__dirname, '../../node_modules'),
-//   ],
-//   resolver: {
-//     // assetExts: assetExts.filter(ext => ext),
-//     // sourceExts: [...sourceExts, 'svg','ttf'],
-//     // sourceExts: ["png","jpg", 'svg','ttf'],
-//     extraNodeModules: new Proxy({}, {
-//       get: (target, name) => path.join(process.cwd(), `node_modules/${name}`),
-//     }),
-//   },
-// };
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -59,11 +59,10 @@
     "@reown/appkit-auth-wagmi-react-native": "~1.0.1",
     "@reown/appkit-siwe-react-native": "~1.0.1",
     "@reown/appkit-wagmi-react-native": "~1.0.1",
+    "@scure/bip39": "^1.5.0",
     "@starknet-react/chains": "^3.1.0",
     "@starknet-react/core": "^3.5.0",
     "@starknet-react/kakarot": "^3.0.9",
-    "@starknet-wc/core": "0.0.4",
-    "@starknet-wc/react": "0.0.4",
     "@stripe/stripe-react-native": "0.38.6",
     "@tanstack/react-query": "^5.40.0",
     "@tanstack/react-query-persist-client": "5.40.0",
@@ -131,12 +130,11 @@
     "react-native-webview": "~13.6.4",
     "react-native-webview-crypto": "^0.0.25",
     "starknet": "6.11.0",
-    "starknetkit": "^1.1.9",
+    "starknetkit": "^2.6.1",
     "text-encoding": "^0.7.0",
     "viem": "2.x",
     "wagmi": "^2.12.8",
-    "zustand": "^4.5.2",
-    "@scure/bip39": "^1.5.0"
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/apps/mobile/src/app/StarknetProvider.tsx b/apps/mobile/src/app/StarknetProvider.tsx
@@ -8,14 +8,21 @@ import {
   voyager,
 } from '@starknet-react/core';
 import {kakarotConnectors} from '@starknet-react/kakarot';
-import {ConnectorProvider as StarknetWCProvider} from '@starknet-wc/react';
+// import {ConnectorProvider as StarknetWCProvider} from '@starknet-wc/react';
 import {Platform} from 'react-native';
+// import { ArgentMobileConnector, isInArgentMobileAppBrowser } from "starknetkit/argentMobile"
+// import { InjectedConnector } from "starknetkit/injected"
+// import { WebWalletConnector } from "starknetkit/webwallet"
 
 import {NETWORK_NAME} from '../constants/env';
 import {RpcProviderProvider} from '../context/RpcProvider';
-import {WalletQRModal} from '../modules/WalletQRModal';
+// import {WalletQRModal} from '../modules/WalletQRModal';
 import {providers} from '../services/provider';
 
+import {ArgentMobileConnector, isInArgentMobileAppBrowser} from 'starknetkit/argentMobile';
+import {InjectedConnector} from 'starknetkit/injected';
+import {WebWalletConnector} from 'starknetkit/webwallet';
+
 export const StarknetReactProvider: React.FC<React.PropsWithChildren> = ({children}) => {
   const chain = {
     SN_MAIN: mainnet,
@@ -31,6 +38,36 @@ export const StarknetReactProvider: React.FC<React.PropsWithChildren> = ({childr
       ? [argent(), braavos(), ...kakarotConnectors(providerRpc)]
       : [argent(), braavos()];
 
+  const chains = [mainnet, sepolia];
+  // const connectors = [
+  //   new InjectedConnector({ options: { id: "braavos", name: "Braavos" }}),
+  //   new InjectedConnector({ options: { id: "argentX", name: "Argent X" }}),
+  //   new WebWalletConnector({ url: "https://web.argent.xyz" }),
+  //   new ArgentMobileConnector(),
+  // ]
+
+  const connectors = isInArgentMobileAppBrowser()
+    ? [
+        ArgentMobileConnector.init({
+          options: {
+            dappName: 'AFK Dapp',
+            projectId: process.env.EXPO_PUBLIC_WC_ID ?? 'example-project-id',
+          },
+          inAppBrowserOptions: {},
+        }),
+      ]
+    : [
+        new InjectedConnector({options: {id: 'braavos', name: 'Braavos'}}),
+        new InjectedConnector({options: {id: 'argentX', name: 'Argent X'}}),
+        new WebWalletConnector({url: 'https://web.argent.xyz'}),
+        ArgentMobileConnector.init({
+          options: {
+            dappName: 'AFK Dapp',
+            projectId: process.env.EXPO_PUBLIC_WC_ID ?? 'example-project-id',
+          },
+        }),
+      ];
+
   const {connectors: injected} = useInjectedConnectors({
     recommended,
     includeRecommended: 'always',
@@ -45,7 +82,8 @@ export const StarknetReactProvider: React.FC<React.PropsWithChildren> = ({childr
         chains={[chain]}
         provider={providers}
         autoConnect
-        connectors={[...(Platform.OS === 'web' ? injected : [])]}
+        connectors={connectors}
+        // connectors={[...(Platform.OS === 'web' ? injected : [])]}
         explorer={voyager}
       >
         {children}
@@ -56,8 +94,8 @@ export const StarknetReactProvider: React.FC<React.PropsWithChildren> = ({childr
 
 export const StarknetProvider: React.FC<React.PropsWithChildren> = ({children}) => {
   return (
-    <StarknetWCProvider modal={WalletQRModal}>
-      <StarknetReactProvider>{children}</StarknetReactProvider>
-    </StarknetWCProvider>
+    // <StarknetWCProvider modal={WalletQRModal}>
+    <StarknetReactProvider>{children}</StarknetReactProvider>
+    // </StarknetWCProvider>
   );
 };
diff --git a/apps/mobile/src/modules/TokenCreatedModal/styles.ts b/apps/mobile/src/modules/TokenCreatedModal/styles.ts
@@ -22,7 +22,6 @@ export default ThemedStyleSheet((theme) => ({
   icon: {
     color: theme.colors.primary,
   },
-
   cardHeader: {
     flexDirection: 'row',
     justifyContent: 'space-between',

diff --git a/apps/mobile/src/modules/WalletModal/index.tsx b/apps/mobile/src/modules/WalletModal/index.tsx
@@ -78,9 +78,8 @@ export const WalletModal: React.FC<WalletModalProps> = ({hide}) => {
         })}
       </View>
 
-      <View style={styles.connectors}>
+      {/* <View style={styles.connectors}>
         <Text>EVM</Text>
-        {/* <ConnectWalletScreen /> */}
         <Pressable
           style={styles.connector}
           onPress={() => {
@@ -90,7 +89,7 @@ export const WalletModal: React.FC<WalletModalProps> = ({hide}) => {
         >
           <Text>Connect EVM</Text>
         </Pressable>
-      </View>
+      </View> */}
 
       <Button variant="default" onPress={hide}>
         Cancel