feat: update font styles and improve event handling in store

massalabs · Oct 10, 2024 · 5bf3652 · 5bf3652
1 parent 3cda9dd
commit 5bf3652
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 54 deletions.
diff --git a/front/index.html b/front/index.html
@@ -6,8 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
       rel="stylesheet"
     />
     <title>Massa Tips</title>

diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/src/index.css b/front/src/index.css
@@ -4,6 +4,8 @@
   font-weight: 400;
   font-style: normal;
   font-synthesis: none;
+  font-family: 'Inter', sans-serif;
+  font-optical-sizing: auto;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

diff --git a/front/src/store/store.ts b/front/src/store/store.ts
@@ -1,36 +1,35 @@
-import { formatAmount, toast, useAccountStore } from '@massalabs/react-ui-kit';
-import { useTokenStore } from './token';
-import { useSchedulerStore } from './scheduler';
-import { EventPoller, Provider } from '@massalabs/massa-web3';
+import { EventPoller, Provider, SCEvent } from '@massalabs/massa-web3';
 import { schedulerAddress } from '../const/contracts';
 import { Schedule } from '../serializable/Schedule';
+import { supportedTokens } from '../const/assets';
+import { truncateAddress } from '@/utils/address';
+import { useAccountStore, formatAmount, toast } from '@massalabs/react-ui-kit';
+import { useSchedulerStore } from './scheduler';
+import { useTokenStore } from './token';
 
 export async function initApp() {
   const { connectedAccount } = useAccountStore.getState();
-  if (!connectedAccount) {
-    return;
-  }
-  initTokens();
-  initSchedules(connectedAccount);
-  initPollEvent(connectedAccount);
+  if (!connectedAccount) return;
+
+  await Promise.all([
+    initTokens(),
+    initSchedules(connectedAccount),
+    initPollEvent(connectedAccount),
+  ]);
 }
 
-export async function initTokens() {
+async function initTokens() {
   const { refreshBalances } = useTokenStore.getState();
-  refreshBalances();
+  await refreshBalances();
 }
 
-export const initSchedules = async (connectedAccount: Provider) => {
-  useSchedulerStore
-    .getState()
-    // Todo fix chain id never initialized in ui-kit
-    .setSchedulerAddress(schedulerAddress);
-  useSchedulerStore.getState().getBySpender(connectedAccount.address);
-};
-
-// Todo - For now this will poll every transfer. We need to filter by spender
-// Except if we want to showcase all transfers and make nice animation on each transfer
-export const initPollEvent = async (connectedAccount: Provider) => {
+async function initSchedules(connectedAccount: Provider) {
+  const { setSchedulerAddress, getBySpender } = useSchedulerStore.getState();
+  setSchedulerAddress(schedulerAddress);
+  await getBySpender(connectedAccount.address);
+}
+
+async function initPollEvent(connectedAccount: Provider) {
   const {
     getBySpender,
     address: schedulerAddress,
@@ -40,38 +39,53 @@ export const initPollEvent = async (connectedAccount: Provider) => {
 
   if (eventPollerStop) eventPollerStop();
 
-  const { refreshBalances } = useTokenStore.getState();
   const { lastSlot } = await connectedAccount.getNodeStatus();
 
   const { stopPolling } = EventPoller.start(
     connectedAccount,
-    {
-      smartContractAddress: schedulerAddress,
-      start: lastSlot,
-    },
-    (data) => {
-      getBySpender(connectedAccount.address).then((schedules: Schedule[]) => {
-        if (schedules?.length) {
-          for (const event of data) {
-            const match = event.data?.match(/Transfer:([^]+)/);
-            if (match) {
-              const info = event.data.split(',');
-              const id = info[0].split(':')[1];
-              const schedule = schedules.find((s) => s.id === BigInt(id));
-              if (schedule) {
-                toast.success(
-                  `Transfer: ${schedule.recipient} received  ${
-                    formatAmount(schedule.amount).preview
-                  } MAS`,
-                );
-                refreshBalances();
-              }
-            }
-          }
-        }
-      });
+    { smartContractAddress: schedulerAddress, start: lastSlot },
+    async (data) => {
+      const schedules = await getBySpender(connectedAccount.address);
+      if (!schedules?.length) return;
+
+      handleTransferEvents(data, schedules);
     },
   );
 
   setEventPollerStop(stopPolling);
-};
+}
+
+function handleTransferEvents(data: SCEvent[], schedules: Schedule[]) {
+  const { refreshBalances } = useTokenStore.getState();
+
+  for (const event of data) {
+    const match = event.data?.match(/Transfer:([^]+)/);
+    if (!match) continue;
+
+    const [id] = event.data.split(',');
+    const scheduleId = id.split(':')[1];
+    const schedule = schedules.find((s) => s.id === BigInt(scheduleId));
+
+    if (schedule) {
+      const { decimals, symbol } = getTokenInfo(schedule.tokenAddress);
+      const formattedAmount = formatAmount(schedule.amount, decimals).preview;
+
+      toast.success(
+        `Transfer: ${truncateAddress(
+          schedule.recipient,
+        )} received ${formattedAmount} ${symbol}`,
+      );
+
+      refreshBalances();
+    }
+  }
+}
+
+function getTokenInfo(tokenAddress: string | null) {
+  if (!tokenAddress) return { decimals: 9, symbol: 'MAS' };
+
+  const token = supportedTokens.find((t) => t.address === tokenAddress);
+  return token
+    ? { decimals: token.decimals, symbol: token.symbol }
+    : { decimals: 9, symbol: 'MAS' };
+}