Transfer from starknet to starknet-kit

frontend/package.json

@@ -1,62 +1,61 @@
 {
-  "name": "frontend",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@popperjs/core": "^2.11.8",
-    "@tanstack/react-query": "^5.59.16",
-    "@tanstack/react-query-devtools": "^5.60.5",
-    "@testing-library/react": "^13.4.0",
-    "@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",
-    "web-vitals": "^2.1.4",
-    "zustand": "^5.0.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "jest",
-    "lint": "eslint .",
-    "format": "prettier --check .",
-    "eject": "react-scripts eject"
-  },
-  "proxy": "http://localhost:8000",
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@babel/preset-env": "^7.26.0",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@tanstack/eslint-plugin-query": "^5.60.1",
-    "@testing-library/jest-dom": "^6.6.2",
-    "@types/jest": "^29.5.14",
-    "babel-jest": "^29.7.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "globals": "^15.11.0",
-    "jest": "^27.5.1",
-    "prettier": "^3.3.3",
-    "starknet": "^6.11.0"
-  }
+    "name": "frontend",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@popperjs/core": "^2.11.8",
+        "@tanstack/react-query": "^5.59.16",
+        "@tanstack/react-query-devtools": "^5.60.5",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.7.7",
+        "dotenv": "^16.4.5",
+        "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",
+        "starknet": "^6.11.0",
+        "starknetkit": "^2.6.1",
+        "web-vitals": "^2.1.4",
+        "zustand": "^5.0.1"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "jest",
+        "lint": "eslint .",
+        "format": "prettier --check .",
+        "eject": "react-scripts eject"
+    },
+    "proxy": "http://localhost:8000",
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@babel/preset-env": "^7.26.0",
+        "@tanstack/eslint-plugin-query": "^5.60.1",
+        "@testing-library/jest-dom": "^6.6.2",
+        "@types/jest": "^29.5.14",
+        "babel-jest": "^29.7.0",
+        "eslint": "^8.57.1",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-config-react-app": "^7.0.1",
+        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "globals": "^15.11.0",
+        "jest": "^27.5.1",
+        "prettier": "^3.3.3"
+    }
 }

frontend/src/services/contract.js

@@ -1,24 +1,39 @@
-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) {
+    console.log('Connecting to StarkNet wallet...');
+
+    const starknet = await connect({
+      include: ['argentX', 'braavos'],
+      modalMode: "neverAsk",
+      modalTheme: "light"
+    });
+
+
+    if (!starknet ) {
       throw new Error('Wallet not connected');
     }
 
-    // Prepare the deploy contract transaction object
+    console.log('Wallet connected:');
+
+
     const deployContractTransaction = getDeployContractData(walletId);
+    if (!deployContractTransaction) {
+      throw new Error('Failed to retrieve contract deployment data');
+    }
 
-    // Execute the deployment transaction
-    // const result = await starknet.account.execute([deployContractTransaction]);
+    console.log('Deploying contract...');
     const result = await starknet.account.deployContract(deployContractTransaction);
     console.log('Contract deployed successfully:', result);
+
+
     await starknet.account.waitForTransaction(result.transaction_hash);
+    console.log('Transaction confirmed:', result.transaction_hash);
+
     return {
       transactionHash: result.transaction_hash,
       contractAddress: result.contract_address,
@@ -32,9 +47,12 @@ export async function deployContract(walletId) {
 export async function checkAndDeployContract(walletId) {
   try {
     console.log('Checking if contract is deployed for wallet ID:', walletId);
+
+
     const response = await axiosInstance.get(`/api/check-user?wallet_id=${walletId}`);
     console.log('Backend response:', response.data);
 
+
     if (!response.data.is_contract_deployed) {
       console.log('Contract not deployed. Deploying...');
       const result = await deployContract(walletId);
@@ -43,7 +61,7 @@ export async function checkAndDeployContract(walletId) {
       notify(ToastWithLink("Contract Deployed Successfully", `https://starkscan.co/tx/${result.transactionHash}`, "Transaction ID"), "success")
       console.log('Contract address:', contractAddress);
 
-      // Update the backend with transaction hash and wallet ID
+
       await axiosInstance.post(`/api/update-user-contract`, {
         wallet_id: walletId,
         contract_address: contractAddress,
@@ -54,5 +72,6 @@ export async function checkAndDeployContract(walletId) {
     }
   } catch (error) {
     console.error('Error checking contract status:', error);
+    throw error;
   }
 }

frontend/src/services/transaction.js

@@ -1,43 +1,54 @@
-import { connect } from 'get-starknet';
+import { connect } from 'starknetkit';
 import { CallData } from 'starknet';
 import { erc20abi } from '../abis/erc20';
 import { abi } from '../abis/abi';
 import { axiosInstance } from '../utils/axios';
 import {checkAndDeployContract} from './contract';
 import { notify, ToastWithLink } from '../components/layout/notifier/Notifier';
 
+
 export async function sendTransaction(loopLiquidityData, contractAddress) {
   try {
-    const starknet = await connect();
+    const starknet = await connect({
+      include: ['argentX', 'braavos'],
+      modalMode: "canAsk",
+      modalTheme: "light"
+    });
+
     if (!starknet.isConnected) {
       throw new Error('Wallet not connected');
     }
 
     if (!loopLiquidityData.pool_key || !loopLiquidityData.deposit_data) {
       throw new Error('Missing or invalid loop_liquidity_data fields');
     }
-    console.log(loopLiquidityData);
+
+
     let approveCalldata = new CallData(erc20abi);
     const approveTransaction = {
       contractAddress: loopLiquidityData.deposit_data.token,
       entrypoint: 'approve',
       calldata: approveCalldata.compile('approve', [contractAddress, loopLiquidityData.deposit_data.amount]),
     };
-    console.log(loopLiquidityData)
+
+    console.log(loopLiquidityData);
+
+    // Use CallData for loop_liquidity transaction
     const callData = new CallData(abi);
     const compiled = callData.compile('loop_liquidity', loopLiquidityData);
     const depositTransaction = {
       contractAddress: contractAddress,
       entrypoint: 'loop_liquidity',
       calldata: compiled,
     };
+
     console.log(depositTransaction);
     let result = await starknet.account.execute([approveTransaction, depositTransaction]);
 
     console.log('Resp: ');
     console.log(result);
-    notify(ToastWithLink("Transaction successfully sent", `https://starkscan.co/tx/${result.transaction_hash}`, "Transaction ID"), "success")
-
+    notify(ToastWithLink("Transaction successfully sent", `https://starkscan.co/tx/${result.transaction_hash}`, "Transaction ID"), "success");
+    
     return {
       loopTransaction: result.transaction_hash,
     };
@@ -46,16 +57,20 @@ export async function sendTransaction(loopLiquidityData, contractAddress) {
     throw error;
   }
 }
-/* eslint-disable-next-line no-unused-vars */
-async function waitForTransaction(txHash) {
-  const starknet = await connect();
+
+export async function waitForTransaction(txHash) {
+  const starknet = await connect({
+    include: ['argentX', 'braavos'],
+    modalMode: "canAsk",
+    modalTheme: "light"
+  });
   let receipt = null;
   while (receipt === null) {
     try {
       receipt = await starknet.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
+      await new Promise((resolve) => setTimeout(resolve, 5000));
     }
   }
   console.log('Transaction accepted:', receipt);
@@ -64,31 +79,45 @@ async function waitForTransaction(txHash) {
 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 starknet = await connect({
+    include: ['argentX', 'braavos'],
+    modalMode: "canAsk",
+    modalTheme: "light"
+  });
   console.log(transactionData.contract_address);
   let result = await starknet.account.execute([
-    { contractAddress: transactionData.contract_address, entrypoint: 'close_position', calldata: compiled },
+    {
+      contractAddress: transactionData.contract_address,
+      entrypoint: 'close_position',
+      calldata: compiled
+    },
   ]);
-  notify(ToastWithLink("Close position successfully sent", `https://starkscan.co/tx/${result.transaction_hash}`, "Transaction ID"), "success")
-
+  notify(ToastWithLink("Close position successfully sent", `https://starkscan.co/tx/${result.transaction_hash}`, "Transaction ID"), "success");
 }
 
-export const handleTransaction = async (connectedWalletId, formData, setTokenAmount, setLoading, setSuccessful) => {
-
+export const handleTransaction = async (
+  connectedWalletId,
+  formData,
+  setError,
+  setTokenAmount,
+  setLoading,
+  setSuccessful
+) => {
   setLoading(true);
-  try{
+  setError('');
+  try {
     await checkAndDeployContract(connectedWalletId);
   } catch (error) {
     console.error('Error deploying contract:', error);
-    notify('Error deploying contract. Please try again.', 'error')
-    setSuccessful(false)
+    setError('Error deploying contract. Please try again.');
+    setSuccessful(false);
     setLoading(false);
     return;
   }
+
   try {
     const response = await axiosInstance.post(`/api/create-position`, formData);
-
     const transactionData = response.data;
     await sendTransaction(transactionData, transactionData.contract_address);
     console.log('Transaction executed successfully');
@@ -97,15 +126,13 @@ export const handleTransaction = async (connectedWalletId, formData, setTokenAmo
       params: { position_id: transactionData.position_id },
     });
 
-    openPositionResponse == openPositionResponse
-
-    // Reset form data
+    openPositionResponse == openPositionResponse;
     setTokenAmount('');
   } catch (err) {
     console.error('Failed to create position:', err);
-    notify(`Error sending transaction: ${err}`, 'error')
-    setSuccessful(false)
+    setError('Failed to create position. Please try again.');
+    setSuccessful(false);
   } finally {
     setLoading(false);
   }
-};
+};