updates for frontend wallet connection

frontend/jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
     '^src/(.*)$': ['<rootDir>/src/$1'],
   },
   transformIgnorePatterns: [
-    'node_modules/(?!(axios|get-starknet)/)', // Ignore transforming node_modules
+    'node_modules/(?!(axios|starknetkit)/)', // Ignore transforming node_modules
   ],
 
   testEnvironment: 'jsdom', // Use node as the test environment

frontend/package.json

@@ -10,14 +10,14 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
     "dotenv": "^16.4.5",
-    "get-starknet": "^3.3.3",
     "lucide-react": "^0.454.0",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.5",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
     "react-scripts": "^5.0.1",
     "react-toastify": "^10.0.6",
+    "starknetkit": "2.6.1",
     "web-vitals": "^2.1.4",
     "zustand": "^5.0.1"
   },

frontend/src/services/contract.js

@@ -1,24 +1,27 @@
-import { connect } from 'get-starknet';
+import { connect } from 'starknetkit';
 import { getDeployContractData } from '../utils/constants';
 import { axiosInstance } from '../utils/axios';
 import { notify, ToastWithLink } from '../components/layout/notifier/Notifier';
 
 export async function deployContract(walletId) {
   try {
     // Connect to Starknet wallet
-    const starknet = await connect();
-    if (!starknet.isConnected) {
+    const { wallet } = await connect({
+      modalMode: 'alwaysAsk',
+    });
+
+    if (!wallet.isConnected) {
       throw new Error('Wallet not connected');
     }
 
     // Prepare the deploy contract transaction object
     const deployContractTransaction = getDeployContractData(walletId);
 
     // Execute the deployment transaction
-    // const result = await starknet.account.execute([deployContractTransaction]);
-    const result = await starknet.account.deployContract(deployContractTransaction);
+    // const result = await wallet.account.execute([deployContractTransaction]);
+    const result = await wallet.account.deployContract(deployContractTransaction);
     console.log('Contract deployed successfully:', result);
-    await starknet.account.waitForTransaction(result.transaction_hash);
+    await wallet.account.waitForTransaction(result.transaction_hash);
     return {
       transactionHash: result.transaction_hash,
       contractAddress: result.contract_address,

frontend/src/services/transaction.js

@@ -1,4 +1,4 @@
-import { connect } from 'get-starknet';
+import { connect } from 'starknetkit';
 import { CallData } from 'starknet';
 import { erc20abi } from '../abis/erc20';
 import { abi } from '../abis/abi';
@@ -8,8 +8,11 @@ import { notify, ToastWithLink } from '../components/layout/notifier/Notifier';
 
 export async function sendTransaction(loopLiquidityData, contractAddress) {
   try {
-    const starknet = await connect();
-    if (!starknet.isConnected) {
+    const { wallet } = await connect({
+      modalMode: 'alwaysAsk',
+    });
+
+    if (!wallet.isConnected) {
       throw new Error('Wallet not connected');
     }
 
@@ -32,7 +35,7 @@ export async function sendTransaction(loopLiquidityData, contractAddress) {
       calldata: compiled,
     };
     console.log(depositTransaction);
-    let result = await starknet.account.execute([approveTransaction, depositTransaction]);
+    let result = await wallet.account.execute([approveTransaction, depositTransaction]);
 
     console.log('Resp: ');
     console.log(result);
@@ -55,11 +58,13 @@ export async function sendTransaction(loopLiquidityData, contractAddress) {
 }
 /* eslint-disable-next-line no-unused-vars */
 async function waitForTransaction(txHash) {
-  const starknet = await connect();
+  const { wallet } = await connect({
+    modalMode: 'alwaysAsk',
+  });
   let receipt = null;
   while (receipt === null) {
     try {
-      receipt = await starknet.provider.getTransactionReceipt(txHash);
+      receipt = await wallet.provider.getTransactionReceipt(txHash);
     } catch (error) {
       console.log('Waiting for transaction to be accepted...');
       await new Promise((resolve) => setTimeout(resolve, 5000)); // Wait for 5 seconds before trying again
@@ -72,9 +77,11 @@ export async function closePosition(transactionData) {
   const callData = new CallData(abi);
   const compiled = callData.compile('close_position', transactionData);
   console.log(compiled);
-  const starknet = await connect();
+  const { wallet } = await connect({
+    modalMode: 'alwaysAsk',
+  });
   console.log(transactionData.contract_address);
-  let result = await starknet.account.execute([
+  let result = await wallet.account.execute([
     { contractAddress: transactionData.contract_address, entrypoint: 'close_position', calldata: compiled },
   ]);
   notify(

frontend/src/services/wallet.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { connect } from 'get-starknet';
+import { connect } from 'starknetkit';
 import { ETH_ADDRESS, STRK_ADDRESS, USDC_ADDRESS } from '../utils/constants';
 import { ReactComponent as ETH } from 'assets/icons/ethereum.svg';
 import { ReactComponent as USDC } from 'assets/icons/borrow_usdc.svg';
@@ -15,12 +15,15 @@ export const checkForCRMToken = async (walletAddress) => {
   }
 
   try {
-    const starknet = await connect();
-    if (!starknet.isConnected) {
+    const { wallet } = await connect({
+      modalMode: 'alwaysAsk',
+    });
+
+    if (!wallet.isConnected) {
       throw new Error('Wallet not connected');
     }
 
-    const response = await starknet.provider.callContract({
+    const response = await wallet.provider.callContract({
       contractAddress: CRM_TOKEN_ADDRESS,
       entrypoint: 'balanceOf',
       calldata: [walletAddress],
@@ -44,21 +47,20 @@ export const connectWallet = async () => {
   try {
     console.log('Attempting to connect to wallet...');
 
-    const starknet = await connect({
-      include: ['argentX', 'braavos'],
+    const { wallet } = await connect({
       modalMode: 'alwaysAsk',
       modalTheme: 'light',
     });
 
-    if (!starknet) {
-      console.error('No StarkNet object found');
+    if (!wallet) {
+      console.error('No wallet object found');
       throw new Error('Failed to connect to wallet');
     }
 
-    await starknet.enable();
+    await wallet.enable();
 
-    if (starknet.isConnected) {
-      const address = starknet.selectedAddress;
+    if (wallet.isConnected) {
+      const address = wallet.selectedAddress;
       console.log('Wallet successfully connected. Address:', address);
       return address;
     } else {
@@ -76,15 +78,17 @@ export function logout() {
 
 export async function getTokenBalances(walletAddress) {
   try {
-    const starknet = await connect();
-    if (!starknet.isConnected) {
+    const { wallet } = await connect({
+      modalMode: 'alwaysAsk',
+    });
+    if (!wallet.isConnected) {
       throw new Error('Wallet not connected');
     }
 
     const tokenBalances = {
-      ETH: await getTokenBalance(starknet, walletAddress, ETH_ADDRESS),
-      USDC: await getTokenBalance(starknet, walletAddress, USDC_ADDRESS),
-      STRK: await getTokenBalance(starknet, walletAddress, STRK_ADDRESS),
+      ETH: await getTokenBalance(wallet, walletAddress, ETH_ADDRESS),
+      USDC: await getTokenBalance(wallet, walletAddress, USDC_ADDRESS),
+      STRK: await getTokenBalance(wallet, walletAddress, STRK_ADDRESS),
     };
 
     return tokenBalances;
@@ -94,9 +98,9 @@ export async function getTokenBalances(walletAddress) {
   }
 }
 
-async function getTokenBalance(starknet, walletAddress, tokenAddress) {
+async function getTokenBalance(wallet, walletAddress, tokenAddress) {
   try {
-    const response = await starknet.provider.callContract({
+    const response = await wallet.provider.callContract({
       contractAddress: tokenAddress,
       entrypoint: 'balanceOf',
       calldata: [walletAddress],

frontend/test/services/contract.test.js

@@ -1,9 +1,19 @@
-import { connect } from 'get-starknet';
+import { connect } from 'starknetkit';
 import { axiosInstance } from '../../src/utils/axios';
 import { deployContract, checkAndDeployContract } from '../../src/services/contract';
 import { getDeployContractData } from '../../src/utils/constants';
 
-jest.mock('get-starknet');
+jest.mock('starknetkit', () => ({
+  connect: jest.fn(),
+}));
+jest.mock(
+  'starknetkit/injected',
+  () => ({
+    InjectedConnector: jest.fn(),
+  }),
+  { virtual: true }
+);
+
 jest.mock('../../src/utils/axios');
 jest.mock('../../src/utils/constants');
 
@@ -24,24 +34,27 @@ describe('Contract Deployment Tests', () => {
     it('should successfully deploy contract', async () => {
       jest.setTimeout(10000);
       const mockStarknet = {
-        isConnected: true,
-        account: {
-          deployContract: jest.fn().mockResolvedValue({
-            transaction_hash: mockTransactionHash,
-            contract_address: mockContractAddress,
-          }),
-          waitForTransaction: jest.fn().mockResolvedValue(true),
+        wallet: {
+          isConnected: true,
+          account: {
+            deployContract: jest.fn().mockResolvedValue({
+              transaction_hash: mockTransactionHash,
+              contract_address: mockContractAddress,
+            }),
+            waitForTransaction: jest.fn().mockResolvedValue(true),
+          },
+          enable: jest.fn(),
         },
       };
       connect.mockResolvedValue(mockStarknet);
 
       const result = await deployContract(mockWalletId);
 
       expect(connect).toHaveBeenCalled();
-      expect(mockStarknet.account.deployContract).toHaveBeenCalledWith({
+      expect(mockStarknet.wallet.account.deployContract).toHaveBeenCalledWith({
         contractData: 'mockContractData',
       });
-      expect(mockStarknet.account.waitForTransaction).toHaveBeenCalledWith(mockTransactionHash);
+      expect(mockStarknet.wallet.account.waitForTransaction).toHaveBeenCalledWith(mockTransactionHash);
 
       expect(result).toEqual({
         transactionHash: mockTransactionHash,
@@ -51,7 +64,10 @@ describe('Contract Deployment Tests', () => {
 
     it('should throw error if wallet is not connected', async () => {
       const mockStarknet = {
-        isConnected: false,
+        wallet: {
+          isConnected: false,
+          enable: jest.fn(),
+        },
       };
       connect.mockResolvedValue(mockStarknet);
 
@@ -73,13 +89,16 @@ describe('Contract Deployment Tests', () => {
       });
 
       const mockStarknet = {
-        isConnected: true,
-        account: {
-          deployContract: jest.fn().mockResolvedValue({
-            transaction_hash: mockTransactionHash,
-            contract_address: mockContractAddress,
-          }),
-          waitForTransaction: jest.fn().mockResolvedValue(true),
+        wallet: {
+          isConnected: true,
+          account: {
+            deployContract: jest.fn().mockResolvedValue({
+              transaction_hash: mockTransactionHash,
+              contract_address: mockContractAddress,
+            }),
+            waitForTransaction: jest.fn().mockResolvedValue(true),
+          },
+          enable: jest.fn(),
         },
       };
       connect.mockResolvedValue(mockStarknet);
@@ -90,7 +109,7 @@ describe('Contract Deployment Tests', () => {
 
       expect(axiosInstance.get).toHaveBeenCalledWith(`/api/check-user?wallet_id=${mockWalletId}`);
       expect(connect).toHaveBeenCalled();
-      expect(mockStarknet.account.deployContract).toHaveBeenCalledWith({
+      expect(mockStarknet.wallet.account.deployContract).toHaveBeenCalledWith({
         contractData: 'mockContractData',
       });
       expect(axiosInstance.post).toHaveBeenCalledWith(`/api/update-user-contract`, {
@@ -128,13 +147,16 @@ describe('Contract Deployment Tests', () => {
       });
 
       const mockStarknet = {
-        isConnected: true,
-        account: {
-          deployContract: jest.fn().mockResolvedValue({
-            transaction_hash: mockTransactionHash,
-            contract_address: mockContractAddress,
-          }),
-          waitForTransaction: jest.fn().mockResolvedValue(true),
+        wallet: {
+          isConnected: true,
+          account: {
+            deployContract: jest.fn().mockResolvedValue({
+              transaction_hash: mockTransactionHash,
+              contract_address: mockContractAddress,
+            }),
+            waitForTransaction: jest.fn().mockResolvedValue(true),
+          },
+          enable: jest.fn(),
         },
       };
       connect.mockResolvedValue(mockStarknet);