Metadata UI (#415)

* feat: added metadata ui * feat: update * feat: update * fix: tx prompts
AFK-AlignedFamKernel · Jan 4, 2025 · 0b7ccf1 · 0b7ccf1
1 parent 792c490
commit 0b7ccf1
Show file tree

Hide file tree

Showing 8 changed files with 398 additions and 155 deletions.
diff --git a/apps/pwa/package.json b/apps/pwa/package.json
@@ -52,9 +52,9 @@
     "react-transition-group": "^4.4.5",
     "react-use-websocket": "^4.8.1",
     "starknet": "6.9.0",
-    "starknetkit-next": "npm:starknetkit@2.3.3",
+    "starknetkit-next": "npm:starknetkit@^2.6.1",
     "viem": "~2.21.2",
-    "wagmi": "^2.12.8",
+    "wagmi": "^2.13.4",
     "zod": "^3.23.8",
     "zustand": "^4.5.2",
     "afk_react_sdk": "workspace:*",

diff --git a/packages/afk_sdk/src/usePlacePixel.ts b/packages/afk_sdk/src/usePlacePixel.ts
@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import { Account, num, RPC } from 'starknet';
+import { Account, AccountInterface, num, RPC } from 'starknet';
 
 // Detect Telegram context
 const isTelegramContext = () =>
@@ -41,10 +41,12 @@ interface ExecuteContractActionResult {
 export const executeContractAction = async ({
   account,
   callProps,
+  wallet,
   options = {},
 }: {
-  account: any;
-  callProps: ContractCallProps;
+  account: AccountInterface;
+  callProps: any;
+  wallet: any;
   options: ExecuteContractActionOptions;
 }): Promise<ExecuteContractActionResult> => {
   const { version = 3, argentTMA } = options;
@@ -54,16 +56,9 @@ export const executeContractAction = async ({
     ? ContractActionContextType.Telegram
     : ContractActionContextType.Expo;
 
-  // Prepare the call for execution
-  const myCall = {
-    contractAddress: callProps.contractAddress,
-    entrypoint: callProps.method,
-    calldata: callProps.calldata,
-  };
-
   try {
     // Estimate fees (same for both contexts)
-    const estimatedFee = await account.estimateInvokeFee([myCall], { version });
+    const estimatedFee = await account.estimateInvokeFee([callProps], { version });
 
     // Apply fee multiplier (default to 1.5x if not specified)
     const feeMultiplier = callProps.feeMultiplier || 1.5;
@@ -91,10 +86,21 @@ export const executeContractAction = async ({
             version,
             maxFee,
           };
-
-    // Execute the transaction using account.execute()
-    const { transaction_hash } = await account.execute(myCall, transactionOptions);
-
+    // Execute the transaction using account.execute() or invoke with wallet since we using sessions
+    const { transaction_hash } = wallet
+      ? await wallet.request({
+          type: 'wallet_addInvokeTransaction',
+          params: {
+            calls: [
+              {
+                calldata: callProps.calldata,
+                contract_address: callProps.contractAddress,
+                entry_point: callProps.entrypoint,
+              },
+            ],
+          },
+        })
+      : await account.execute([callProps], transactionOptions);
     // Wait for transaction receipt
     let receipt;
     if (contextType === ContractActionContextType.Telegram) {
@@ -111,6 +117,7 @@ export const executeContractAction = async ({
       receipt,
     };
   } catch (error) {
+    console.log(error, 'err');
     return Promise.reject(error);
   }
 };

diff --git a/packages/pixel_ui/package.json b/packages/pixel_ui/package.json
@@ -19,7 +19,7 @@
     "starknet": "^6.9.0",
     "@argent/x-sessions": "^6.7.4",
     "@argent/x-shared": "^1.32.1",
-    "starknetkit-next": "npm:starknetkit@2.3.3",
+    "starknetkit-next": "npm:starknetkit@^2.6.1",
     "common": "workspace:*",
     "afk_react_sdk": "workspace:*",
     "afk_sdk": "workspace:*"
@@ -58,4 +58,4 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^3.2.5"
   }
-}
+}
diff --git a/packages/pixel_ui/src/App.tsx b/packages/pixel_ui/src/App.tsx
@@ -73,16 +73,17 @@ function App({ contractAddress, usernameAddress, nftCanvasAddress }: IApp) {
   //--> Connect Argent
   useConnectArgent()
 
-  const { 
-    connectWallet, 
+  const {
+    connectWallet,
     startSession,
     account,
+    wallet,
     address,
     queryAddress,
     setConnected,
     isSessionable,
     disconnectWallet,
-    usingSessionKeys 
+    usingSessionKeys
   } = useWalletStore()
 
 
@@ -159,7 +160,7 @@ function App({ contractAddress, usernameAddress, nftCanvasAddress }: IApp) {
         }
         setHost(response.data.host);
         setEndTimestamp(response.data.endTime);
-      } catch(e) {
+      } catch (e) {
         console.error(e);
       }
     };
@@ -496,7 +497,8 @@ function App({ contractAddress, usernameAddress, nftCanvasAddress }: IApp) {
         setFactionPixelsData(factionPixelsResponse.data);
       } catch (e) {
         console.error(e);
-      }}
+      }
+    }
     fetchFactionPixelsEndpoint();
   }, [queryAddress]);
 
@@ -516,9 +518,9 @@ function App({ contractAddress, usernameAddress, nftCanvasAddress }: IApp) {
 
     try {
       let pixelInfo = await fetchWrapper(
-        `get-pixel-info&position=${x+y*canvasConfig.canvas.width}`
+        `get-pixel-info&position=${x + y * canvasConfig.canvas.width}`
       );
-      console.log("pixelInfo data",pixelInfo)
+      console.log("pixelInfo data", pixelInfo)
     } catch (e) {
       console.error(e);
     }
@@ -603,7 +605,8 @@ function App({ contractAddress, usernameAddress, nftCanvasAddress }: IApp) {
         setChainFaction(chainFactionResponse.data[0]);
       } catch (e) {
         console.error(e);
-      }}
+      }
+    }
     async function fetchUserFactions() {
       try {
         let userFactionsResponse = await fetchWrapper(
@@ -699,6 +702,7 @@ function App({ contractAddress, usernameAddress, nftCanvasAddress }: IApp) {
           colorPixel={colorPixel}
           address={address}
           account={account}
+          wallet={wallet}
           artPeaceContract={artPeaceContract}
           colors={colors}
           canvasRef={canvasRef}
@@ -746,10 +750,10 @@ function App({ contractAddress, usernameAddress, nftCanvasAddress }: IApp) {
         />
         {(!isMobile || activeTab === tabs[0]) && (
           <div className='App__logo--mobile_container'>
-          <img src={logoUrl} alt='logo' className='App__logo--mobile' />
-          <a href="/"> 
-            <h5>AFK</h5>
-         </a>
+            <img src={logoUrl} alt='logo' className='App__logo--mobile' />
+            <a href="/">
+              <h5>AFK</h5>
+            </a>
           </div>
         )}
         <div
@@ -765,6 +769,7 @@ function App({ contractAddress, usernameAddress, nftCanvasAddress }: IApp) {
             address={address}
             queryAddress={queryAddress}
             account={account}
+            wallet={wallet}
             chain={chain}
             clearAll={clearAll}
             setConnected={setConnected}
@@ -858,7 +863,7 @@ function App({ contractAddress, usernameAddress, nftCanvasAddress }: IApp) {
             isSessionable={isSessionable}
             disconnectWallet={disconnectWallet}
             estimateInvokeFee={estimateInvokeFee}
-        
+
           />
         </div>
         <div className='App__footer'>
@@ -894,7 +899,8 @@ function App({ contractAddress, usernameAddress, nftCanvasAddress }: IApp) {
                 isMobile={isMobile}
                 clearAll={clearAll}
                 account={account}
-
+                wallet={wallet}
+
               />
             )}
             {isFooterSplit && !footerExpanded && (