chore: use starknetkit for wallet connection (#53)

Update frontend to use starknetkit for a more robust connect modal.

frontend/package.json

@@ -26,6 +26,7 @@
     "react-hook-form": "^7.49.0",
     "react-router-dom": "^6.11.0",
     "starknet": "^5.10.0",
+    "starknetkit": "^1.0.22",
     "ua-parser-js": "^1.0.35",
     "zod": "^3.22.4",
     "zustand": "^4.3.8"

frontend/src/components/Web3Provider/index.tsx

@@ -1,5 +1,8 @@
 import { sepolia } from '@starknet-react/chains'
-import { argent, braavos, publicProvider, StarknetConfig, starkscan, useInjectedConnectors } from '@starknet-react/core'
+import { publicProvider, StarknetConfig, starkscan } from '@starknet-react/core'
+import { ArgentMobileConnector } from 'starknetkit/argentMobile'
+import { InjectedConnector } from 'starknetkit/injected'
+import { WebWalletConnector } from 'starknetkit/webwallet'
 
 // STARKNET
 
@@ -8,11 +11,12 @@ interface StarknetProviderProps {
 }
 
 export function StarknetProvider({ children }: StarknetProviderProps) {
-  const { connectors } = useInjectedConnectors({
-    recommended: [argent(), braavos()],
-    includeRecommended: 'onlyIfNoConnectors',
-    order: 'random',
-  })
+  const connectors = [
+    new InjectedConnector({ options: { id: 'argentX', name: 'Argent' } }),
+    new InjectedConnector({ options: { id: 'braavos', name: 'Braavos' } }),
+    new WebWalletConnector({ url: 'https://web.argent.xyz' }),
+    new ArgentMobileConnector(),
+  ]
 
   return (
     <StarknetConfig

frontend/src/connections/index.ts

@@ -1,18 +1,24 @@
-import { InjectedConnector } from '@starknet-react/core'
 import ARGENT_X_ICON from 'src/assets/argent-x.svg'
+import ARGENTMOBILE_ICON from 'src/assets/argentmobile.svg'
 import BRAAVOS_ICON from 'src/assets/braavos.svg'
+import WEBWALLET_ICON from 'src/assets/webwallet.svg'
 import { isMobile } from 'src/utils/userAgent'
+import { ArgentMobileConnector } from 'starknetkit/argentMobile'
+import { InjectedConnector } from 'starknetkit/injected'
+import { WebWalletConnector } from 'starknetkit/webwallet'
 
 import { getShouldAdvertiseArgentX, getShouldAdvertiseBraavos } from './utils'
 
 enum ConnectionType {
   ARGENT_X = 'ARGENT_X',
   BRAAVOS = 'BRAAVOS',
+  WEBWALLET = 'WEBWALLET',
+  ARGENTMOBILE = 'ARGENTMOBILE',
 }
 
 export interface L2Connection {
   getName(): string
-  connector: InjectedConnector
+  connector: InjectedConnector | ArgentMobileConnector | WebWalletConnector
   type: ConnectionType
   getIcon?(): string
   shouldDisplay(): boolean
@@ -61,8 +67,32 @@ const braavosWalletConnection: L2Connection = {
   },
 }
 
+// WEB WALLET
+
+const webWallet = new WebWalletConnector({ url: 'https://web.argent.xyz' })
+
+const webWalletConnection: L2Connection = {
+  getName: () => 'Web Wallet',
+  connector: webWallet,
+  type: ConnectionType.WEBWALLET,
+  getIcon: () => WEBWALLET_ICON,
+  shouldDisplay: () => true,
+}
+
+// ARGENT MOBILE
+
+const argentMobile = new ArgentMobileConnector()
+
+const argentMobileConnection: L2Connection = {
+  getName: () => 'Argent (mobile)',
+  connector: argentMobile,
+  type: ConnectionType.ARGENTMOBILE,
+  getIcon: () => ARGENTMOBILE_ICON,
+  shouldDisplay: () => true,
+}
+
 // GETTERS
 
 export function getL2Connections() {
-  return [argentXWalletConnection, braavosWalletConnection]
+  return [argentXWalletConnection, braavosWalletConnection, webWalletConnection, argentMobileConnection]
 }

frontend/tsconfig.json

@@ -22,13 +22,13 @@
     "noImplicitThis": true,
     "noImplicitReturns": true,
     "useUnknownInCatchVariables": false,
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "downlevelIteration": true,
     "allowSyntheticDefaultImports": true,
     "jsx": "preserve",
-    "module": "commonjs",
+    "module": "ES2015",
     "rootDir": ".",
     "baseUrl": ".",
     "declaration": true