implemented starkentkit

ametel01 · Jan 5, 2024 · 0a4b4b3 · 0a4b4b3
1 parent 44a0ed3
commit 0a4b4b3
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 32 deletions.
diff --git a/packages/testnet/frontend/global.d.ts b/packages/testnet/frontend/global.d.ts
@@ -1,3 +1,3 @@
 export interface ProcessEnv {
-  ALCHEMY_API_KEY: string
+  ALCHEMY_API_KEY: string;
 }
diff --git a/packages/testnet/frontend/src/components/auth/ArgentMobileWallet.tsx b/packages/testnet/frontend/src/components/auth/ArgentMobileWallet.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const ArgentMobileWalletIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="32" height="32" rx="8" fill="#FF875B" />
+    <path
+      d="M18.316 8H13.684C13.5292 8 13.4052 8.1272 13.4018 8.28531C13.3082 12.7296 11.0323 16.9477 7.11513 19.9355C6.99077 20.0303 6.96243 20.2085 7.05335 20.3369L9.76349 24.1654C9.85569 24.2957 10.0353 24.3251 10.1618 24.2294C12.6111 22.3734 14.5812 20.1345 16 17.6529C17.4187 20.1345 19.389 22.3734 21.8383 24.2294C21.9646 24.3251 22.1443 24.2957 22.2366 24.1654L24.9467 20.3369C25.0375 20.2085 25.0092 20.0303 24.885 19.9355C20.9676 16.9477 18.6918 12.7296 18.5983 8.28531C18.5949 8.1272 18.4708 8 18.316 8Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default ArgentMobileWalletIcon;
diff --git a/packages/testnet/frontend/src/components/auth/ArgentWebWallet.tsx b/packages/testnet/frontend/src/components/auth/ArgentWebWallet.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ArgentWebWalletIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 18 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd" // In JSX, use camelCase for attributes like fillRule and clipRule
+      clipRule="evenodd"
+      d="M1.5 0.4375C0.982233 0.4375 0.5625 0.857233 0.5625 1.375V12C0.5625 12.4144 0.72712 12.8118 1.02015 13.1049C1.31317 13.3979 1.7106 13.5625 2.125 13.5625H15.875C16.2894 13.5625 16.6868 13.3979 16.9799 13.1049C17.2729 12.8118 17.4375 12.4144 17.4375 12V1.375C17.4375 0.857233 17.0178 0.4375 16.5 0.4375H1.5ZM2.4375 3.50616V11.6875H15.5625V3.50616L9.63349 8.94108C9.27507 9.26964 8.72493 9.26964 8.36651 8.94108L2.4375 3.50616ZM14.0899 2.3125H3.91013L9 6.97822L14.0899 2.3125Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default ArgentWebWalletIcon;
diff --git a/packages/testnet/frontend/src/components/auth/ConnectWallet.tsx b/packages/testnet/frontend/src/components/auth/ConnectWallet.tsx
@@ -5,7 +5,11 @@ import Modal from '@mui/material/Modal';
 import CloseIcon from '@mui/icons-material/Close';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/system';
-import { useConnect, type Connector } from '@starknet-react/core';
+import { useConnect } from '@starknet-react/core';
+import argenWallet from '../../assets/uiIcons/argent.png';
+import braavosWallet from '../../assets/uiIcons/braavos.svg';
+import ArgentMobileWalletIcon from './ArgentMobileWallet';
+import ArgentWebWalletIcon from './ArgentWebWallet';
 
 const StyledBox = styled(Box)({
   fontWeight: 600,
@@ -22,7 +26,7 @@ const StyledBox = styled(Box)({
   // display: "grid",
   display: 'flex',
   flexDirection: 'column',
-  width: '30%',
+  width: '32%',
 });
 
 const HeaderDiv = styled('div')({
@@ -58,10 +62,6 @@ const StyledLi = styled('li')({
   margin: '8px',
 });
 
-const ConnectorIcon = styled('img')({
-  width: '20px',
-});
-
 const ConnectorText = styled('span')({
   flexGrow: 1,
   textAlign: 'center',
@@ -107,6 +107,21 @@ const WalletButton = styled(Button)({
   },
 });
 
+const getConnectorIcon = (connectorId: string) => {
+  switch (connectorId) {
+    case 'braavos':
+      return braavosWallet;
+    case 'argentX':
+      return argenWallet;
+    case 'argentWebWallet':
+      return <ArgentWebWalletIcon />; // Assuming you use the same icon for argentWebWallet
+    case 'argentMobile':
+      return <ArgentMobileWalletIcon />; // This is a React component
+    default:
+      return null; // Default case if the connectorId doesn't match any known ids
+  }
+};
+
 export default function ConnectWallet() {
   const [open, setOpen] = React.useState(false);
   const toggleModal = () => {
@@ -117,9 +132,13 @@ export default function ConnectWallet() {
   };
   const { connect, connectors } = useConnect();
 
-  const handleConnect = (connector: Connector) => {
-    connect({ connector });
-  };
+  React.useEffect(() => {
+    console.log('Connectors updated:', connectors);
+
+    connectors.forEach((connector) => {
+      console.log(`${connector.id} icon:`, connector.icon.dark);
+    });
+  }, [connectors]);
 
   return (
     <>
@@ -141,19 +160,32 @@ export default function ConnectWallet() {
             <CloseStyledIcon onClick={handleClose} />
           </HeaderDiv>
           <StyledUl>
-            {connectors.map((connector) => (
-              <StyledLi key={connector.id}>
-                <WalletButton
-                  size="large"
-                  onClick={() => {
-                    handleConnect(connector);
-                  }}
-                >
-                  <ConnectorIcon src={connector.icon.dark} alt="argent" />
-                  <ConnectorText>{connector.name}</ConnectorText>
-                </WalletButton>
-              </StyledLi>
-            ))}
+            {connectors && connectors.length > 0 ? (
+              connectors.map((connector) => {
+                const ConnectorIcon = getConnectorIcon(connector.id);
+                return (
+                  <StyledLi key={connector.id}>
+                    <WalletButton
+                      size="large"
+                      onClick={() => connect({ connector })}
+                    >
+                      {typeof ConnectorIcon === 'string' ? (
+                        <img
+                          src={ConnectorIcon}
+                          alt={connector.id}
+                          style={{ width: '20px' }}
+                        />
+                      ) : (
+                        ConnectorIcon // This is the case where the icon is a React component
+                      )}
+                      <ConnectorText>{connector.id}</ConnectorText>
+                    </WalletButton>
+                  </StyledLi>
+                );
+              })
+            ) : (
+              <div>No connectors available</div>
+            )}
           </StyledUl>
           <DisclaimerText>
             By connecting your wallet, you acknowledge and accept all risks and

diff --git a/packages/testnet/frontend/src/components/provider/index.tsx b/packages/testnet/frontend/src/components/provider/index.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import { sepolia } from '@starknet-react/chains';
-import {
-  StarknetConfig,
-  argent,
-  braavos,
-  jsonRpcProvider,
-} from '@starknet-react/core';
+import { StarknetConfig, jsonRpcProvider } from '@starknet-react/core';
+import { InjectedConnector } from 'starknetkit/injected';
+import { ArgentMobileConnector } from 'starknetkit/argentMobile';
+import { WebWalletConnector } from 'starknetkit/webwallet';
 
 const RPC_URL = import.meta.env.VITE_INFURA_RPC;
 
@@ -21,7 +19,12 @@ export function StarknetProvider({ children }: { children: React.ReactNode }) {
   const chains = [sepolia];
   const provider = jsonRpcProvider({ rpc });
 
-  const connectors = [argent(), braavos()];
+  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(),
+  ];
 
   return (
     <StarknetConfig

diff --git a/packages/testnet/frontend/tsconfig.json b/packages/testnet/frontend/tsconfig.json
@@ -9,8 +9,8 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,