From 5bf36527c23846f48a99f82800bba969ffb9ad3a Mon Sep 17 00:00:00 2001 From: BenRey Date: Thu, 10 Oct 2024 10:55:41 +0200 Subject: [PATCH] feat: update font styles and improve event handling in store --- front/index.html | 4 +- front/package-lock.json | 6 +-- front/src/index.css | 2 + front/src/store/store.ts | 114 ++++++++++++++++++++++----------------- 4 files changed, 72 insertions(+), 54 deletions(-) diff --git a/front/index.html b/front/index.html index a8022e9..3cfe028 100644 --- a/front/index.html +++ b/front/index.html @@ -6,8 +6,10 @@ + + Massa Tips diff --git a/front/package-lock.json b/front/package-lock.json index 27235e9..bf041dd 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -1671,9 +1671,9 @@ } }, "node_modules/@massalabs/massa-web3": { - "version": "5.0.0-next.20241003202212", - "resolved": "https://registry.npmjs.org/@massalabs/massa-web3/-/massa-web3-5.0.0-next.20241003202212.tgz", - "integrity": "sha512-/xcQQ0BlylzOeGYZUagWcBDuI4EuZ36GuAeZXEdLpVWdGQDyOHgOQxB4NEEIF5+lthFHQ3SdSqVpwVNaZq4O2w==", + "version": "5.0.0-next.20241008103931", + "resolved": "https://registry.npmjs.org/@massalabs/massa-web3/-/massa-web3-5.0.0-next.20241008103931.tgz", + "integrity": "sha512-hCkyJr1GSrekV19tNoOqXeyZJWOj1560T+FvWRVxrZ7P4Ap6+sPfvdex6xRfMAsw8SWV593/Hcq7QfTJ35O9+g==", "dependencies": { "@noble/ed25519": "^1.7.3", "@noble/hashes": "^1.2.0", diff --git a/front/src/index.css b/front/src/index.css index 395c0fe..42b2550 100644 --- 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 index b2fe025..f7fc453 100644 --- 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' }; +}