release

.github/workflows/build.yaml

@@ -8,6 +8,10 @@ on:
 env:
   PROJECT_ID: bright-meridian-316511
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -44,13 +48,13 @@ jobs:
           echo "::set-output name=tag::$(git rev-parse --short HEAD)"
           if [ "$REF" = "refs/heads/main" ]; then
               echo "::set-output name=app_env::prod"
-              echo "::set-output name=testnet_squid_api_url::https://subsquid.squids.live/subsquid-network-testnet/graphql"
-              echo "::set-output name=mainnet_squid_api_url::https://subsquid.squids.live/subsquid-network-mainnet/graphql"
+              echo "::set-output name=testnet_squid_api_url::https://subsquid.squids.live/subsquid-network-testnet:prod/api/graphql"
+              echo "::set-output name=mainnet_squid_api_url::https://subsquid.squids.live/subsquid-network-mainnet:prod/api/graphql"
               echo "::set-output name=enable_demo_features::false"
           else
               echo "::set-output name=app_env::dev"
-              echo "::set-output name=testnet_squid_api_url::https://subsquid.squids.live/subsquid-network-testnet/v/v5/graphql"
-              echo "::set-output name=mainnet_squid_api_url::https://subsquid.squids.live/subsquid-network-mainnet/v/v5/graphql"
+              echo "::set-output name=testnet_squid_api_url::https://subsquid.squids.live/subsquid-network-testnet:dev/api/graphql"
+              echo "::set-output name=mainnet_squid_api_url::https://subsquid.squids.live/subsquid-network-mainnet:dev/api/graphql"
               echo "::set-output name=enable_demo_features::true"
           fi
           if [ "$NETWORK" = "mainnet" ]; then

src/api/subsquid-network-squid/settings-graphql.ts

@@ -44,7 +44,7 @@ export function useNetworkSummary() {
           epoch: res.epoches.length ? res.epoches[0] : undefined,
         };
       },
-      refetchInterval: 6000, // a half of block time in l1
+      refetchInterval: 12_000, // block time in l1
     },
   );
 

src/hooks/useCountdown.ts

@@ -0,0 +1,10 @@
+import { relativeDateFormat } from '@i18n';
+
+import { useTicker } from './useTicker';
+
+export function useCountdown({ timestamp }: { timestamp?: Date | string | number | undefined }) {
+  const curTimestamp = useTicker(() => Date.now(), 1000);
+  const timeLeft = timestamp ? relativeDateFormat(curTimestamp, timestamp) : undefined;
+
+  return timeLeft;
+}

src/hooks/useTicker.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+
+export function useTicker<T>(ticker: () => T, ms: number = 1000) {
+  const [tickerValue, setTickerValue] = useState(ticker());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTickerValue(ticker());
+    }, ms);
+    return () => clearInterval(interval);
+  }, [ms, ticker]);
+
+  return tickerValue;
+}

src/i18n/dateFormat.ts

@@ -4,18 +4,18 @@ export function dateFormat(
   value: Date | string | number | undefined,
   tpl: 'dateTime' | 'date' | string = 'date',
 ) {
-  if (!value) return null;
+  if (!value) return undefined;
 
   if (tpl === 'dateTime') {
     tpl = 'dd.MM.yyyy HH:mm:ss';
   } else if (tpl === 'date') {
     tpl = 'dd.MM.yyyy';
   }
 
-  if (value.valueOf() == 0) return null;
+  if (value.valueOf() == 0) return undefined;
 
   const date = new Date(value);
-  if (!isValid(date)) return null;
+  if (!isValid(date)) return undefined;
 
   return format(new Date(value), tpl);
 }

src/layouts/NetworkLayout/BasicMenuItem.tsx

@@ -15,7 +15,7 @@ const Item = styled(MenuItem)(({ theme }) => ({
   transition: 'all ease-out 150ms',
   // paddingLeft: theme.spacing(1.5),
   // paddingRight: theme.spacing(1),
-  // borderRadius: '2px',
+  borderRadius: '4px',
   '& path': {
     transition: 'fill ease-out 150ms',
   },

src/layouts/NetworkLayout/UserMenu.tsx

@@ -12,7 +12,7 @@ import { LogoutMenuItem } from './LogoutMenuItem';
 
 export const UserMenuStyled = styled(Menu, {
   name: 'UserMenuStyled',
-})(() => ({
+})(({ theme }) => ({
   minWidth: '100%',
 }));
 
@@ -71,6 +71,10 @@ export function UserMenu() {
             sx: {
               overflow: 'visible',
               width: 192,
+              pl: 1,
+              pr: 1,
+              pt: 0.5,
+              pb: 0.5,
             },
           },
         }}

src/lib/formatters/formatters.ts

@@ -16,7 +16,7 @@ const formatter8 = new Intl.NumberFormat('en', {
 });
 
 export function numberWithCommasFormatter(val?: number | bigint | string) {
-  if (val === undefined) return '';
+  if (!val) return '0';
 
   return formatter8.format(typeof val === 'string' ? Number(val) : val);
 }

src/pages/AssetsPage/Assets.tsx

@@ -166,6 +166,13 @@ export function MyAssets() {
       background: theme.palette.secondary.main,
       tip: 'Tokens delegated to workers',
     };
+    const lockedPortal: TokenBalance = {
+      name: 'Locked in Portal',
+      value: BigNumber(0),
+      color: theme.palette.text.primary,
+      background: theme.palette.text.primary,
+      tip: '',
+    };
 
     sourcesQuery?.accounts.forEach(s => {
       if (s.type === AccountType.User) {
@@ -185,7 +192,7 @@ export function MyAssets() {
       });
     });
 
-    return [transferable, vesting, claimable, bonded, delegated];
+    return [transferable, vesting, claimable, bonded, delegated, lockedPortal];
   }, [sourcesQuery?.accounts, theme.palette]);
 
   const totalBalance = useMemo(() => {
@@ -274,6 +281,7 @@ export function MyAssets() {
               <Stack divider={<Divider flexItem />} spacing={1} flex={1}>
                 <TokenBalance balance={balances[3]} />
                 <TokenBalance balance={balances[4]} />
+                {/* <TokenBalance balance={balances[5]} /> */}
               </Stack>
             </Stack>
           </Grid>

src/pages/DashboardPage/Summary.tsx

@@ -1,6 +1,5 @@
 import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 
-import { relativeDateFormat } from '@i18n';
 import {
   bytesFormatter,
   numberWithCommasFormatter,
@@ -21,12 +20,12 @@ import {
 } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 import { AreaChart, Area, ResponsiveContainer, Tooltip, TooltipProps } from 'recharts';
-import { useDebounce } from 'use-debounce';
 
 import { useNetworkSummary } from '@api/subsquid-network-squid';
 import SquaredChip from '@components/Chip/SquaredChip';
 import { HelpTooltip } from '@components/HelpTooltip';
 import { Loader } from '@components/Loader';
+import { useCountdown } from '@hooks/useCountdown';
 import { useContracts } from '@network/useContracts';
 
 export function ColumnLabel({ children, color }: PropsWithChildren<{ color?: string }>) {
@@ -107,15 +106,24 @@ function OnlineInfo() {
   );
 }
 
+function CurrentEpochEstimation({ epochEnd }: { epochEnd: number }) {
+  const timeLeft = useCountdown({ timestamp: epochEnd });
+
+  return (
+    <Stack direction="row" spacing={1}>
+      <span>Ends in</span>
+      <SquaredChip
+        label={<Typography variant="subtitle1">~{timeLeft}</Typography>}
+        color="warning"
+      />
+    </Stack>
+  );
+}
+
 function CurrentEpoch() {
   const { data, isLoading } = useNetworkSummary();
 
   const [epochEnd, setEpochEnd] = useState<number>(Date.now());
-
-  const [curTime] = useDebounce(Date.now(), 1000);
-
-  const epochEndsIn = useMemo(() => relativeDateFormat(curTime, epochEnd), [curTime, epochEnd]);
-
   useEffect(() => {
     if (!data || !data.epoch) return;
 
@@ -131,15 +139,7 @@ function CurrentEpoch() {
       sx={{ height: 1 }}
       loading={isLoading}
       title={<SquaredChip label="Current epoch" color="primary" />}
-      action={
-        <Stack direction="row" spacing={1}>
-          <span>Ends in</span>
-          <SquaredChip
-            label={<Typography variant="subtitle1">~{epochEndsIn}</Typography>}
-            color="warning"
-          />
-        </Stack>
-      }
+      action={<CurrentEpochEstimation epochEnd={epochEnd} />}
     >
       <Typography variant="h1">{data?.epoch?.number || 0}</Typography>
     </SummarySection>
@@ -230,11 +230,15 @@ function AprChart({ data }: { data: { date: string; value: number }[] }) {
             // contentStyle={{ transition: 'all ease-out 5500ms' }}
             content={<AprTooltip />}
             animationDuration={0}
+            // animationEasing="ease-out"
             cursor={{
               stroke: theme.palette.text.secondary,
               strokeWidth: 2,
               strokeDasharray: 6,
             }}
+            cursorStyle={{
+              transition: 'all ease-out 300ms !important',
+            }}
             defaultIndex={Math.max(data.length - 2, 0)}
             active
             allowEscapeViewBox={{ x: true }}

src/pages/GatewaysPage/AddNewGateway.tsx

@@ -3,7 +3,7 @@ import React, { useMemo, useState } from 'react';
 import { peerIdToHex } from '@lib/network';
 import { Add } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
-import { Alert, SxProps } from '@mui/material';
+import { SxProps } from '@mui/material';
 import { useFormik } from 'formik';
 import toast from 'react-hot-toast';
 import { useClient } from 'wagmi';
@@ -117,7 +117,7 @@ export function AddGatewayDialog({
 
         onClose();
       } catch (e: unknown) {
-        toast.custom(<Alert color="error">{errorMessage(e)}</Alert>);
+        toast.error(errorMessage(e));
       }
     },
   });
@@ -160,7 +160,7 @@ export function AddGatewayDialog({
               showErrorOnlyOfTouched
               id="peerId"
               label={
-                <HelpTooltip title="Lorem ipsum dolor sit amet consectetur adipisicing elit">
+                <HelpTooltip title="A PeerID is a unique identifier that distinguishes one peer from another within the SQD Network">
                   <span>Peer ID</span>
                 </HelpTooltip>
               }