Add top 100 spice user modal

apps/evm/lingui.config.js → apps/bob-pay/lingui.config.ts

@@ -1,6 +1,7 @@
-/** @type {import('@lingui/conf').LinguiConfig} */
-module.exports = {
-  locales: ['en', 'zh'],
+import { LinguiConfig } from '@lingui/conf';
+
+const config = {
+  locales: ['en', 'zh'] as const,
   sourceLocale: 'en',
   fallbackLocales: {
     default: 'en'
@@ -11,4 +12,6 @@ module.exports = {
       include: ['src/']
     }
   ]
-};
+} as const satisfies LinguiConfig;
+
+export default config;

apps/bob-pay/lingui.config.js → apps/evm/lingui.config.ts

@@ -1,5 +1,6 @@
-/** @type {import('@lingui/conf').LinguiConfig} */
-module.exports = {
+import { LinguiConfig } from '@lingui/conf';
+
+const config = {
   locales: ['en', 'zh'],
   sourceLocale: 'en',
   fallbackLocales: {
@@ -11,4 +12,6 @@ module.exports = {
       include: ['src/']
     }
   ]
-};
+} as const satisfies LinguiConfig;
+
+export default config;

apps/evm/package.json

@@ -42,6 +42,7 @@
     "date-fns": "catalog:",
     "graphql-request": "catalog:",
     "lottie-react": "^2.4.0",
+    "react-calendly": "^4.3.1",
     "negotiator": "catalog:",
     "next": "catalog:",
     "react": "catalog:",

apps/evm/src/app/[lang]/(bridge)/components/BridgeStatus/TimeStep.tsx

@@ -2,13 +2,15 @@
 import { Trans } from '@lingui/macro';
 import { formatDistanceToNow, isFuture } from 'date-fns';
 import { ReactNode, useMemo } from 'react';
+import { useParams } from 'next/navigation';
 
 import { BridgeTransaction } from '../../hooks';
 
 import { StyledTimePill } from './BridgeStatus.style';
 import { BridgeStep } from './BridgeStep';
 
 import { BridgeSteps } from '@/types';
+import { getLocale } from '@/utils';
 
 const TimeLabel = ({ label }: { label: ReactNode }) => (
   <StyledTimePill size='xs'>
@@ -28,6 +30,8 @@
 type TimeStepProps = Props & InheritAttrs;
 
 const TimeStep = ({ step, data, currentStep }: TimeStepProps): JSX.Element => {
+  const { lang } = useParams();
+
   const timeLabel = useMemo(() => {
     // should only show step if it is not a complete step
     const showTime =
@@ -44,8 +48,13 @@
       return step === 'challenge-period' ? <Trans>7 days</Trans> : <Trans>2 hours</Trans>;
     }
 
-    return <Trans>{formatDistanceToNow(data.statusEndDate)} remaining</Trans>;
+    return (
+      <Trans>
+        {formatDistanceToNow(data.statusEndDate, { locale: getLocale(lang as Parameters<typeof getLocale>[0]) })}{' '}
+        remaining
+      </Trans>
+    );
   }, [step, currentStep, data.statusEndDate]);
 
   return (
     <Flex alignItems='center' flex={1} justifyContent='space-between'>

apps/evm/src/app/[lang]/(bridge)/components/TransactionList/TransactionDetails.tsx

@@ -3,11 +3,13 @@ import { Currency, CurrencyAmount } from '@gobob/currency';
 import { ArrowLongRight, Flex, FlexProps, P, UnstyledButton } from '@gobob/ui';
 import { Trans } from '@lingui/macro';
 import { formatDistanceToNow } from 'date-fns';
+import { useParams } from 'next/navigation';
 
 import { StyledDetailsButton, StyledExpandIcon } from './TransactionList.style';
 
 import { Chain } from '@/components';
 import { TransactionDirection } from '@/types';
+import { getLocale } from '@/utils';
 
 type Props = {
   direction: TransactionDirection;
@@ -35,6 +37,7 @@ const TransactionDetails = ({
   onExpand,
   ...props
 }: TransactionDetailsProps): JSX.Element => {
+  const { lang } = useParams();
   const directionLabel = direction === TransactionDirection.L1_TO_L2 ? <Trans>Deposit</Trans> : <Trans>Withdraw</Trans>;
 
   const isExpandable = !!onExpand;
@@ -46,7 +49,7 @@ const TransactionDetails = ({
           {directionLabel}
         </P>
         <P color='grey-50' size='xs' weight='semibold'>
-          <Trans>{formatDistanceToNow(date)} ago</Trans>
+          <Trans>{formatDistanceToNow(date, { locale: getLocale(lang as Parameters<typeof getLocale>[0]) })} ago</Trans>
         </P>
       </Flex>
       <StyledDetailsButton elementType={onExpand ? UnstyledButton : undefined} {...{ onPress: onExpand }}>

apps/evm/src/app/[lang]/apps/components/VotingDashboard/UserVotingInfo.tsx

@@ -1,51 +1,65 @@
 import { Card, Dd, Divider, Dl, DlGroup, Dt, Flex, P, Skeleton, SolidClock, Span, Tooltip } from '@gobob/ui';
 import { formatDistanceToNow } from 'date-fns';
 import { Trans } from '@lingui/macro';
+import { useParams } from 'next/navigation';
 
 import { SpiceChip } from '../SpiceChip';
 
 import { LoginButton, SignUpButton } from '@/components';
+import { getLocale } from '@/utils';
 
 type Props = { isAuthenticated?: boolean; roundEndsAt?: string; votesRemaining?: number };
 
 type UserVotingInfoProps = Props;
 
-const UserVotingInfo = ({ isAuthenticated, roundEndsAt, votesRemaining }: UserVotingInfoProps): JSX.Element => (
-  <Card borderColor='grey-300' direction='row' gap='md' padding={isAuthenticated ? 'xl' : 'lg'}>
-    <>
-      {isAuthenticated ? (
-        <Dl>
-          <DlGroup alignItems='center'>
-            <Dt color='light' size='lg'>
-              <Trans>Votes Left:</Trans>
-            </Dt>
-            <Dd>
-              <SpiceChip hideTooltip isLit amount={votesRemaining || 0} />
-            </Dd>
-          </DlGroup>
-        </Dl>
-      ) : (
-        <Flex alignItems='center' gap='md'>
-          <LoginButton color='primary' size='s'>
-            <Trans>Log in</Trans>
-          </LoginButton>
-          <Span color='grey-50' size='s'>
-            <Trans>or</Trans>
-          </Span>
-          <SignUpButton color='primary' size='s' variant='ghost'>
-            <Trans>Create Account</Trans>
-          </SignUpButton>
-        </Flex>
-      )}
-      <Divider orientation='vertical' />
-      <Tooltip label={<Trans>Time left until voting round ends</Trans>}>
-        <Flex alignItems='center' gap='s'>
-          <SolidClock color='grey-200' size='s' />
-          {roundEndsAt ? <P>{formatDistanceToNow(roundEndsAt)}</P> : <Skeleton width='4xl' />}
-        </Flex>
-      </Tooltip>
-    </>
-  </Card>
-);
+const UserVotingInfo = ({ isAuthenticated, roundEndsAt, votesRemaining }: UserVotingInfoProps): JSX.Element => {
+  const { lang } = useParams();
+
+  return (
+    <Card borderColor='grey-300' direction='row' gap='md' padding={isAuthenticated ? 'xl' : 'lg'}>
+      <>
+        {isAuthenticated ? (
+          <Dl>
+            <DlGroup alignItems='center'>
+              <Dt color='light' size='lg'>
+                <Trans>Votes Left:</Trans>
+              </Dt>
+              <Dd>
+                <SpiceChip hideTooltip isLit amount={votesRemaining || 0} />
+              </Dd>
+            </DlGroup>
+          </Dl>
+        ) : (
+          <Flex alignItems='center' gap='md'>
+            <LoginButton color='primary' size='s'>
+              <Trans>Log in</Trans>
+            </LoginButton>
+            <Span color='grey-50' size='s'>
+              <Trans>or</Trans>
+            </Span>
+            <SignUpButton color='primary' size='s' variant='ghost'>
+              <Trans>Create Account</Trans>
+            </SignUpButton>
+          </Flex>
+        )}
+        <Divider orientation='vertical' />
+        <Tooltip label={<Trans>Time left until voting round ends</Trans>}>
+          <Flex alignItems='center' gap='s'>
+            <SolidClock color='grey-200' size='s' />
+            {roundEndsAt ? (
+              <P>
+                {formatDistanceToNow(roundEndsAt, {
+                  locale: getLocale(lang as Parameters<typeof getLocale>[0])
+                })}
+              </P>
+            ) : (
+              <Skeleton width='4xl' />
+            )}
+          </Flex>
+        </Tooltip>
+      </>
+    </Card>
+  );
+};
 
 export { UserVotingInfo };

apps/evm/src/app/[lang]/apps/hooks/useVote.tsx

@@ -1,5 +1,4 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useAccount } from 'wagmi';
 
 import { useGetUser } from '@/hooks';
 import { appsKeys, fusionKeys } from '@/lib/react-query';
@@ -9,10 +8,8 @@ const useVote = () => {
   const queryClient = useQueryClient();
   const { data: user } = useGetUser();
 
-  const { address } = useAccount();
-
   return useMutation({
-    mutationKey: appsKeys.vote(address),
+    mutationKey: appsKeys.vote(user?.username),
     mutationFn: async ({ isRetract, refCode }: { refCode: string; isRetract: boolean }) => {
       if (isRetract) {
         return apiClient.retractVote(refCode);

apps/evm/src/app/[lang]/fusion/Fusion.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { Card, Flex, H1, H2, Link, P } from '@gobob/ui';
-import { t, Trans } from '@lingui/macro';
+import { useIsClient, useLocalStorage, useSessionStorage } from 'usehooks-ts';
+import { Trans, t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import x from '@public/assets/x.png';
 import { useCallback, useEffect, useId, useState } from 'react';
-import { useLocalStorage, useSessionStorage } from 'usehooks-ts';
 import { useAccount } from 'wagmi';
 
 import { useGetApps } from '../apps/hooks';
@@ -30,10 +30,11 @@ import {
   StyledMain,
   StyledStrategiesWrapper
 } from './Fusion.style';
-import { useGetQuests } from './hooks';
+import { useDismissTopUserModal, useGetQuests } from './hooks';
+import { TopUserModal } from './components/TopUserModal';
 
 import { Geoblock } from '@/components';
-import { isClient, LocalStorageKey } from '@/constants';
+import { LocalStorageKey } from '@/constants';
 import { useGetUser } from '@/hooks';
 import { SessionStorageKey } from '@/types';
 
@@ -43,9 +44,20 @@ const Fusion = () => {
   const { data: user } = useGetUser();
   const { data: apps } = useGetApps();
   const { data: quests } = useGetQuests();
+  const { mutate: dismissTopUserModal } = useDismissTopUserModal();
+  const isClient = useIsClient();
 
   const questsSectionId = useId();
 
+  const [showTopUserModal, setShowTopUserModal] = useLocalStorage(LocalStorageKey.SHOW_TOP_USER_MODAL, true, {
+    initializeWithValue: isClient
+  });
+
+  const onCloseModal = (shouldDismissTopUserModal: boolean) => {
+    setShowTopUserModal(false);
+    if (shouldDismissTopUserModal) dismissTopUserModal();
+  };
+
   const [scrollQuests, setScrollQuests] = useSessionStorage(SessionStorageKey.SCROLL_QUESTS, false, {
     initializeWithValue: isClient
   });
@@ -79,6 +91,7 @@ const Fusion = () => {
 
   const isAuthenticated = Boolean(user && address);
   const hasPastHarvest = user?.leaderboardRank && user.leaderboardRank.total_points > 0;
+  const shouldDisplayTopUserModal = user?.notices.showIsFusionTopUser && showTopUserModal;
 
   return (
     <Geoblock>
@@ -138,7 +151,9 @@ const Fusion = () => {
           <CommunityVoting />
           <Leaderboard />
           {user ? (
-            hasPastHarvest ? (
+            shouldDisplayTopUserModal ? (
+              <TopUserModal isOpen={shouldDisplayTopUserModal} onClose={onCloseModal} />
+            ) : hasPastHarvest ? (
               <WelcomeBackModal
                 isOpen={!isHideFusionWelcomeBackModal && isAuthenticated}
                 user={user}

apps/evm/src/app/[lang]/fusion/components/CommunityVoting/CommunityVoting.tsx

@@ -3,18 +3,21 @@ import { formatDistanceToNow } from 'date-fns';
 import { useTheme } from 'styled-components';
 import { Trans } from '@lingui/macro';
 import { useIsClient } from 'usehooks-ts';
+import { useParams } from 'next/navigation';
 
 import { StyledCard, StyledOpacityOverlay, StyledSpice } from './CommunityVoting.style';
 
 import { useGetVotingApps } from '@/app/[lang]/apps/hooks';
 import { RoutesPath } from '@/constants';
+import { getLocale } from '@/utils';
 
 type CommunityVotingProps = object;
 
 const CommunityVoting = ({}: CommunityVotingProps) => {
   const theme = useTheme();
   const isClient = useIsClient();
   const isMobile = useMediaQuery(theme.breakpoints.down('s'));
+  const { lang } = useParams();
   const { data: votingAppsData } = useGetVotingApps();
 
   return (
@@ -34,7 +37,12 @@ const CommunityVoting = ({}: CommunityVotingProps) => {
       >
         {votingAppsData?.roundEndsAt ? (
           <Chip startAdornment={<SolidClock size='s' />}>
-            <Trans>{formatDistanceToNow(votingAppsData.roundEndsAt)} until voting round ends</Trans>
+            <Trans>
+              {formatDistanceToNow(votingAppsData.roundEndsAt, {
+                locale: getLocale(lang as Parameters<typeof getLocale>[0])
+              })}{' '}
+              until voting round ends
+            </Trans>
           </Chip>
         ) : (
           <Skeleton height='3xl' width='9xl' />

apps/evm/src/app/[lang]/fusion/components/LotterySections/LotteryModal/LotteryModal.tsx

@@ -17,12 +17,11 @@ import {
   useLocale
 } from '@gobob/ui';
 import { Plural, Trans } from '@lingui/macro';
-import { formatDistanceToNow } from 'date-fns';
 import { useParams } from 'next/navigation';
 
-import { ROUND_END_TIME } from '../constants';
 import { Ticket } from '../icons';
 import confettiAnimationData from '../lotties/confettie.json';
+import { useTimeToNextDraw } from '../hooks';
 
 import { StyledButton, StyledLottie, StyledPoints } from './LotteryModal.style';
 
@@ -50,6 +49,7 @@ const LotteryModal = ({
   const { lang } = useParams();
   const { locale } = useLocale();
   const { data: user } = useGetUser();
+  const { data: timeToNextDraw } = useTimeToNextDraw(lang as Parameters<typeof useTimeToNextDraw>[0]);
   const {
     data: lotteryRollData,
     isIdle,
@@ -67,7 +67,7 @@ const LotteryModal = ({
         <ModalBody padding='2xl'>
           <Flex alignItems='center' direction='column' gap='5xl'>
             <Chip background='grey-500' borderColor='grey-200' startAdornment={<SolidClock size='s' />}>
-              <Trans>new tickets drop in {formatDistanceToNow(ROUND_END_TIME)}</Trans>
+              <Trans>new tickets drop in {timeToNextDraw}</Trans>
             </Chip>
             <H3 align='center' size='2xl'>
               <Trans>
@@ -160,7 +160,7 @@ const LotteryModal = ({
       <ModalBody padding='2xl'>
         <Flex alignItems='center' direction='column' gap='5xl'>
           <Chip background='grey-500' borderColor='grey-200' startAdornment={<SolidClock size='s' />}>
-            <Trans>new tickets drop in {formatDistanceToNow(ROUND_END_TIME)}</Trans>
+            <Trans>new tickets drop in {timeToNextDraw}</Trans>
           </Chip>
           <H3 align='center' size='2xl'>
             {getHeaderText()}