Merge pull request #567 from alleslabs/fix/attach-funds-in-code-snippet

fix: attached funds (to main)

Author: tansawit

CHANGELOG.md

@@ -113,6 +113,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#567](https://github.com/alleslabs/celatone-frontend/pull/567) Fix attached funds in code snippet
 - [#539](https://github.com/alleslabs/celatone-frontend/pull/539) Fix JSON schema upload text
 - [#527](https://github.com/alleslabs/celatone-frontend/pull/527) Fix ellipsis explorer link
 - [#526](https://github.com/alleslabs/celatone-frontend/pull/526) Fix missing Tx proposal type

src/lib/pages/execute/components/JsonExecute.tsx

@@ -97,8 +97,6 @@ export const JsonExecute = ({
   const isValidAssetsJsonStr =
     !errors.assetsJsonStr && jsonValidate(assetsJsonStr) === null;
 
-  const assetsSelectString = JSON.stringify(assetsSelect);
-
   const enableExecute = useMemo(() => {
     const generalCheck = !!(
       msg.trim().length &&
@@ -123,6 +121,14 @@ export const JsonExecute = ({
     isValidAssetsJsonStr,
   ]);
 
+  const assetsSelectString = JSON.stringify(assetsSelect);
+
+  const funds = useMemo(
+    () => getAttachFunds(attachFundsOption, assetsJsonStr, assetsSelect),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [assetsJsonStr, assetsSelectString, attachFundsOption, getAttachFunds]
+  );
+
   // ------------------------------------------//
   // -----------------REACT QUERY--------------//
   // ------------------------------------------//
@@ -148,11 +154,6 @@ export const JsonExecute = ({
   // ------------------------------------------//
 
   const proceed = useCallback(async () => {
-    const funds = getAttachFunds(
-      attachFundsOption,
-      assetsJsonStr,
-      assetsSelect
-    );
     trackActionWithFunds(
       AmpEvent.ACTION_EXECUTE,
       funds.length,
@@ -180,10 +181,8 @@ export const JsonExecute = ({
     fee,
     contractAddress,
     msg,
-    getAttachFunds,
+    funds,
     trackActionWithFunds,
-    assetsJsonStr,
-    assetsSelect,
     addActivity,
     broadcast,
   ]);
@@ -216,7 +215,7 @@ export const JsonExecute = ({
         sender: address as HumanAddr,
         contract: contractAddress as ContractAddr,
         msg: Buffer.from(msg),
-        funds: getAttachFunds(attachFundsOption, assetsJsonStr, assetsSelect),
+        funds,
       });
 
       const timeoutId = setTimeout(() => {
@@ -225,17 +224,7 @@ export const JsonExecute = ({
       return () => clearTimeout(timeoutId);
     }
     return () => {};
-  }, [
-    address,
-    contractAddress,
-    enableExecute,
-    msg,
-    assetsJsonStr,
-    assetsSelectString,
-    getAttachFunds,
-    attachFundsOption,
-    assetsSelect,
-  ]);
+  }, [address, contractAddress, enableExecute, funds, msg]);
 
   useEffect(() => {
     const keydownHandler = (e: KeyboardEvent) => {
@@ -282,6 +271,7 @@ export const JsonExecute = ({
             type="execute"
             contractAddress={contractAddress}
             message={msg}
+            funds={funds}
           />
         </Flex>
         <Flex direction="row" align="center" gap={2}>

src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx

@@ -121,8 +121,6 @@ export const ExecuteBox = ({
   const isValidAssetsJsonStr =
     !attachFundErrors.assetsJsonStr && jsonValidate(assetsJsonStr) === null;
 
-  const assetsSelectString = JSON.stringify(assetsSelect);
-
   const enableExecute = useMemo(() => {
     const generalCheck = Boolean(
       msg.trim().length &&
@@ -151,6 +149,14 @@ export const ExecuteBox = ({
     isValidAssetsJsonStr,
   ]);
 
+  const assetsSelectString = JSON.stringify(assetsSelect);
+
+  const funds = useMemo(
+    () => getAttachFunds(attachFundsOption, assetsJsonStr, assetsSelect),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [assetsJsonStr, assetsSelectString, attachFundsOption, getAttachFunds]
+  );
+
   // ------------------------------------------//
   // -----------------REACT QUERY--------------//
   // ------------------------------------------//
@@ -184,11 +190,6 @@ export const ExecuteBox = ({
   );
 
   const proceed = useCallback(async () => {
-    const funds = getAttachFunds(
-      attachFundsOption,
-      assetsJsonStr,
-      assetsSelect
-    );
     trackActionWithFunds(
       AmpEvent.ACTION_EXECUTE,
       funds.length,
@@ -211,15 +212,13 @@ export const ExecuteBox = ({
       broadcast(stream);
     }
   }, [
-    attachFundsOption,
     executeTx,
     fee,
     contractAddress,
     msg,
-    getAttachFunds,
     trackActionWithFunds,
-    assetsJsonStr,
-    assetsSelect,
+    funds,
+    attachFundsOption,
     addActivity,
     broadcast,
   ]);
@@ -259,7 +258,7 @@ export const ExecuteBox = ({
         sender: address as HumanAddr,
         contract: contractAddress as ContractAddr,
         msg: Buffer.from(msg),
-        funds: getAttachFunds(attachFundsOption, assetsJsonStr, assetsSelect),
+        funds,
       });
 
       const timeoutId = setTimeout(() => {
@@ -273,17 +272,7 @@ export const ExecuteBox = ({
     setFee(undefined);
 
     return () => {};
-  }, [
-    address,
-    contractAddress,
-    enableExecute,
-    msg,
-    assetsJsonStr,
-    assetsSelectString,
-    getAttachFunds,
-    attachFundsOption,
-    assetsSelect,
-  ]);
+  }, [address, contractAddress, enableExecute, msg, funds]);
 
   return (
     <AccordionItem className={`execute_msg_${msgSchema.schema.required?.[0]}`}>
@@ -344,6 +333,7 @@ export const ExecuteBox = ({
                 type="execute"
                 contractAddress={contractAddress}
                 message={msg}
+                funds={funds}
               />
             </Flex>
           </GridItem>