feat: optimize asset selection and schedule management with useMemo a…

…nd useEffect
massalabs · Oct 15, 2024 · b73dbe2 · b73dbe2
1 parent 81dee4a
commit b73dbe2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/front/src/components/SelectAsset.tsx b/front/src/components/SelectAsset.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { Asset } from '@massalabs/react-ui-kit/src/lib/token/models/AssetModel';
 import { AssetSelector } from '@massalabs/react-ui-kit/src/lib/token/AssetSelector';
 import useSchedule from '../hooks/useSchedule';
@@ -13,10 +13,18 @@ export default function SelectAsset({
   disabled: boolean;
 }): JSX.Element {
   const { tokens: supportedTokens, mas } = useTokenStore.getState();
-  const tokens = isVesting ? [mas] : supportedTokens;
+  const tokens = useMemo(
+    () => (isVesting ? [mas] : supportedTokens),
+    [isVesting, mas, supportedTokens],
+  );
   const [selectedAsset, setSelectedAsset] = useState<Asset>(tokens[0]);
   const { setScheduleInfo } = useSchedule();
 
+  useEffect(() => {
+    if (tokens.length === 0) return;
+    setScheduleInfo('asset', tokens[0]);
+  }, [setScheduleInfo, tokens]);
+
   function onAssetChange(asset: Asset) {
     setSelectedAsset(asset);
     setScheduleInfo('asset', asset);

diff --git a/front/src/store/store.ts b/front/src/store/store.ts
@@ -23,15 +23,10 @@ async function initTokens() {
 }
 
 async function initSchedules(connectedAccount: Provider) {
-  const { tokens } = useTokenStore.getState();
-  const { setSchedulerAddress, getBySpender, scheduleInfo, setScheduleInfo } =
-    useSchedulerStore.getState();
+  const { setSchedulerAddress, getBySpender } = useSchedulerStore.getState();
   const { network } = useNetworkStore.getState();
   setSchedulerAddress(schedulerAddress[network]);
 
-  scheduleInfo.asset = tokens[0];
-  setScheduleInfo('asset', tokens[0]);
-
   await getBySpender(connectedAccount.address);
 }