Merge pull request #410 from alleslabs/fix/attach-fund-precision

fix: remove hardcode precision in attach funds

CHANGELOG.md

@@ -111,6 +111,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#410](https://github.com/alleslabs/celatone-frontend/pull/410) Remove hardcode precision in attach funds dropdown selection and get assets from API, delete microfy and demicrofy function, remove useChainRecordAsset
 - [#434](https://github.com/alleslabs/celatone-frontend/pull/434) Fix stepper item bg color
 - [#429](https://github.com/alleslabs/celatone-frontend/pull/429) Fix duration formatter, type and add migrate tab to balancer pool
 - [#427](https://github.com/alleslabs/celatone-frontend/pull/427) Fix upload access endpoint, Public project searchbar bug, account tx bug

README.md

@@ -17,6 +17,9 @@ The Celatone frontend uses the following technologies:
 
 1. [Node.js](https://nodejs.org/en/) (version >= 16) or using node version manager [nvm](https://github.com/nvm-sh/nvm#intro) (recommended, installation guide for nvm [here](https://collabnix.com/how-to-install-and-configure-nvm-on-mac-os/)).
 2. [`Yarn`](https://yarnpkg.com/getting-started/install) installed.
+```bash
+npm install -g yarn
+```
 
 ### Develop
 

src/lib/app-provider/hooks/index.ts

@@ -8,8 +8,6 @@ export * from "./useMediaQuery";
 export * from "./useNetworkChange";
 export * from "./useRestrictedInput";
 export * from "./useSelectChain";
-export * from "./useTokensInfo";
-export * from "./useChainRecordAsset";
 export * from "./useBaseApiRoute";
 export * from "./useRPCEndpoint";
 export * from "./useConfig";

src/lib/app-provider/hooks/useAttachFunds.ts

@@ -0,0 +1,40 @@
+import type { Coin } from "@cosmjs/stargate";
+import { useCallback } from "react";
+
+import { AttachFundsType } from "lib/components/fund/types";
+import { useAssetInfos } from "lib/services/assetService";
+import { fabricateFunds, sortDenoms } from "lib/utils";
+
+export const useAttachFunds = () => {
+  const { assetInfos } = useAssetInfos();
+
+  return useCallback(
+    (
+      attachFundsOption: AttachFundsType,
+      assetsJsonStr: string,
+      assetsSelect: Coin[]
+    ) => {
+      const assetsSelectWithPrecision = assetsSelect.map((coin) => {
+        return {
+          ...coin,
+          precision: assetInfos?.[coin.denom]?.precision,
+        };
+      });
+
+      switch (attachFundsOption) {
+        case AttachFundsType.ATTACH_FUNDS_SELECT:
+          return fabricateFunds(assetsSelectWithPrecision);
+        case AttachFundsType.ATTACH_FUNDS_JSON:
+          try {
+            return sortDenoms(JSON.parse(assetsJsonStr));
+          } catch {
+            return [];
+          }
+        default:
+          return [];
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(assetInfos)]
+  );
+};

src/lib/app-provider/hooks/useBaseApiRoute.ts

@@ -11,6 +11,7 @@ export const useBaseApiRoute = (
     | "codes"
     | "accounts"
     | "rest"
+    | "native_tokens"
     | "cosmwasm"
 ): string => {
   const {
@@ -42,6 +43,8 @@ export const useBaseApiRoute = (
       return `${api}/accounts/${chain}/${currentChainId}`;
     case "rest":
       return `${api}/rest/${chain}/${currentChainId}`;
+    case "native_tokens":
+      return `${api}/native-assets/${chain}/${currentChainId}`;
     case "cosmwasm":
       return `${api}/cosmwasm/${chain}/${currentChainId}`;
     default:

src/lib/components/EstimatedFeeRender.tsx

@@ -1,7 +1,7 @@
 import { Spinner } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
 
-import { useChainRecordAsset } from "lib/app-provider";
+import { useAssetInfos } from "lib/services/assetService";
 import { formatBalanceWithDenom } from "lib/utils";
 
 export const EstimatedFeeRender = ({
@@ -11,8 +11,8 @@ export const EstimatedFeeRender = ({
   estimatedFee: StdFee | undefined;
   loading: boolean;
 }) => {
-  const getAssetInfo = useChainRecordAsset();
-  if (loading) {
+  const { assetInfos, isLoading } = useAssetInfos();
+  if (loading || isLoading) {
     return (
       <>
         <Spinner size="sm" mx={1} /> Estimating ...
@@ -23,7 +23,8 @@ export const EstimatedFeeRender = ({
 
   if (!coin) return <>--</>;
 
-  const chainAssetInfo = getAssetInfo(coin.denom);
+  const chainAssetInfo = assetInfos?.[coin.denom];
+
   return (
     <>
       {formatBalanceWithDenom({

src/lib/components/fund/selectFund.tsx

@@ -4,8 +4,8 @@ import { useMemo } from "react";
 import type { Control, UseFormSetValue } from "react-hook-form";
 import { useFieldArray } from "react-hook-form";
 
-import { useNativeTokensInfo } from "lib/app-provider";
 import { AssetInput, ControllerInput } from "lib/components/forms";
+import { useAssetInfoList } from "lib/services/assetService";
 
 import { ASSETS_SELECT } from "./data";
 import type { AttachFundsState } from "./types";
@@ -15,12 +15,16 @@ interface SelectFundProps {
   setValue: UseFormSetValue<AttachFundsState>;
   assetsSelect: Coin[];
 }
+
+/**
+ * @remarks amount in assetsSelect is an amount before multiplying precision, the multiplication will be done before sending transaction
+ */
 export const SelectFund = ({
   control,
   setValue,
   assetsSelect,
 }: SelectFundProps) => {
-  const nativeTokensInfo = useNativeTokensInfo();
+  const { data: assetInfos = [] } = useAssetInfoList();
   const { fields, append, remove } = useFieldArray({
     control,
     name: ASSETS_SELECT,
@@ -30,12 +34,12 @@ export const SelectFund = ({
 
   const assetOptions = useMemo(
     () =>
-      nativeTokensInfo.map((asset) => ({
+      assetInfos.map((asset) => ({
         label: asset.symbol,
-        value: asset.base,
-        disabled: selectedAssets.includes(asset.base),
+        value: asset.id,
+        disabled: selectedAssets.includes(asset.id),
       })),
-    [nativeTokensInfo, selectedAssets]
+    [assetInfos, selectedAssets]
   );
 
   const rules = {
@@ -72,6 +76,7 @@ export const SelectFund = ({
       <Button
         variant="outline-primary"
         mt={8}
+        mb={5}
         mx="auto"
         onClick={() => append({ denom: "", amount: "" })}
         disabled={assetOptions.length === selectedAssets.length}

src/lib/data/constant.ts

@@ -21,8 +21,6 @@ export const DEFAULT_LIST: LVPair[] = [
 
 export const DEFAULT_ADDRESS = "default-address";
 
-export const MICRO = 1_000_000;
-
 export const typeUrlDict = {
   [MsgType.STORE_CODE]: "/cosmwasm.wasm.v1.MsgStoreCode",
   [MsgType.INSTANTIATE]: "/cosmwasm.wasm.v1.MsgInstantiateContract",

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

@@ -10,6 +10,7 @@ import {
   useCurrentChain,
   useMobile,
 } from "lib/app-provider";
+import { useAttachFunds } from "lib/app-provider/hooks/useAttachFunds";
 import { useSimulateFeeQuery } from "lib/app-provider/queries";
 import { ContractCmdButton } from "lib/components/ContractCmdButton";
 import { CopyButton } from "lib/components/copy";
@@ -32,12 +33,7 @@ import { AmpEvent, AmpTrack, AmpTrackAction } from "lib/services/amplitude";
 import type { Activity } from "lib/stores/contract";
 import type { ComposedMsg, ContractAddr, HumanAddr } from "lib/types";
 import { MsgType } from "lib/types";
-import {
-  composeMsg,
-  getAttachFunds,
-  jsonPrettify,
-  jsonValidate,
-} from "lib/utils";
+import { composeMsg, jsonPrettify, jsonValidate } from "lib/utils";
 
 const CodeSnippet = dynamic(() => import("lib/components/modal/CodeSnippet"), {
   ssr: false,
@@ -67,6 +63,7 @@ export const ExecuteArea = ({
   const executeTx = useExecuteContractTx();
   const { broadcast } = useTxBroadcast();
   const { addActivity } = useContractStore();
+  const getAttachFunds = useAttachFunds();
   const [fee, setFee] = useState<StdFee>();
   const [msg, setMsg] = useState(initialMsg);
 
@@ -142,13 +139,12 @@ export const ExecuteArea = ({
     },
   });
 
-  const funds = getAttachFunds({
-    attachFundsOption,
-    assetsJsonStr,
-    assetsSelect,
-  });
-
   const proceed = useCallback(async () => {
+    const funds = getAttachFunds(
+      attachFundsOption,
+      assetsJsonStr,
+      assetsSelect
+    );
     AmpTrackAction(AmpEvent.ACTION_EXECUTE, funds.length, attachFundsOption);
     const stream = await executeTx({
       onTxSucceed: (userKey: string, activity: Activity) => {
@@ -166,12 +162,14 @@ export const ExecuteArea = ({
       broadcast(stream);
     }
   }, [
-    funds,
+    attachFundsOption,
     executeTx,
     fee,
     contractAddress,
     msg,
-    attachFundsOption,
+    getAttachFunds,
+    assetsJsonStr,
+    assetsSelect,
     addActivity,
     broadcast,
   ]);
@@ -185,7 +183,7 @@ export const ExecuteArea = ({
         sender: address as HumanAddr,
         contract: contractAddress as ContractAddr,
         msg: Buffer.from(msg),
-        funds,
+        funds: getAttachFunds(attachFundsOption, assetsJsonStr, assetsSelect),
       });
 
       const timeoutId = setTimeout(() => {
@@ -199,9 +197,11 @@ export const ExecuteArea = ({
     contractAddress,
     enableExecute,
     msg,
-    funds,
     assetsJsonStr,
     assetsSelectString,
+    getAttachFunds,
+    attachFundsOption,
+    assetsSelect,
   ]);
 
   useEffect(() => {

src/lib/pages/instantiate/instantiate.tsx

@@ -16,6 +16,7 @@ import {
   useCurrentChain,
   useBaseApiRoute,
 } from "lib/app-provider";
+import { useAttachFunds } from "lib/app-provider/hooks/useAttachFunds";
 import { AssignMe } from "lib/components/AssignMe";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
@@ -40,13 +41,7 @@ import {
 import { getCodeIdInfo } from "lib/services/code";
 import type { ComposedMsg, HumanAddr } from "lib/types";
 import { AccessConfigPermission, MsgType } from "lib/types";
-import {
-  composeMsg,
-  getAttachFunds,
-  jsonPrettify,
-  jsonValidate,
-  libDecode,
-} from "lib/utils";
+import { composeMsg, jsonPrettify, jsonValidate, libDecode } from "lib/utils";
 
 import { Footer } from "./component";
 import type { InstantiateRedoMsg } from "./types";
@@ -81,6 +76,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   const fabricateFee = useFabricateFee();
   const { broadcast } = useTxBroadcast();
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
+  const getAttachFunds = useAttachFunds();
 
   // ------------------------------------------//
   // ------------------STATES------------------//
@@ -123,6 +119,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
   });
   const { assetsSelect, assetsJsonStr, attachFundsOption } = watchAssets();
 
+  const funds = getAttachFunds(attachFundsOption, assetsJsonStr, assetsSelect);
   const enableInstantiate = useMemo(
     () =>
       !!address &&
@@ -132,12 +129,6 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
     [address, codeId.length, initMsg, status.state]
   );
 
-  const funds = getAttachFunds({
-    attachFundsOption,
-    assetsJsonStr,
-    assetsSelect,
-  });
-
   const { isFetching: isSimulating } = useSimulateFeeQuery({
     enabled: composedTxMsg.length > 0,
     messages: composedTxMsg,
@@ -205,16 +196,16 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
       broadcast(stream);
     }
   }, [
-    adminAddress,
+    funds,
     attachFundsOption,
-    broadcast,
+    postInstantiateTx,
     codeId,
-    estimatedFee,
-    funds,
     initMsg,
     label,
+    adminAddress,
+    estimatedFee,
     onComplete,
-    postInstantiateTx,
+    broadcast,
   ]);
 
   // ------------------------------------------//