feat(ui): gem earn animation

src/components/elements/styled.ts

@@ -11,7 +11,7 @@ interface TypographyProps {
 export const DynamicTypography = styled(({ variant = 'span', children, ...props }: TypographyProps & CSSProperties) =>
     createElement(variant, props, children)
 )`
-    font-family: ${({ theme }) => theme.typography.fontFamily};
+    font-family: ${({ theme, variant }) => (variant === 'span' ? 'inherit' : theme.typography.fontFamily)};
     font-size: ${({ theme, variant }) => (variant === 'span' ? 'inherit' : theme.typography[variant].fontSize)};
     line-height: ${({ theme, variant }) => theme.typography[variant].lineHeight};
     letter-spacing: ${({ theme, variant }) => theme.typography[variant].letterSpacing};

src/containers/Airdrop/AirdropGiftTracker/AirdropGiftTracker.tsx

@@ -1,24 +1,33 @@
 import { useAirdropStore } from '@app/store/useAirdropStore';
-import { Title, Wrapper, TitleWrapper } from './styles';
+import { Title, Wrapper, TitleWrapper, EarningsAnimationWrapper } from './styles';
 import LoggedOut from './sections/LoggedOut/LoggedOut';
 import LoggedIn from './sections/LoggedIn/LoggedIn';
 import { useAirdropSyncState } from '@app/hooks/airdrop/useAirdropSyncState';
 import { useAppConfigStore } from '@app/store/useAppConfigStore';
 import { useTranslation } from 'react-i18next';
 import InfoTooltip from './components/InfoTooltip/InfoTooltip';
+import EarningsAnimation from '@app/containers/Airdrop/AirdropGiftTracker/components/Earnings/EarningsAnimation.tsx';
+import { AnimatePresence } from 'framer-motion';
+import { useBlockchainVisualisationStore } from '@app/store/useBlockchainVisualisationStore.ts';
 
 export default function AirdropGiftTracker() {
     useAirdropSyncState();
     const { t } = useTranslation(['airdrop'], { useSuspense: false });
-    const airdrop_ui_enabled = useAppConfigStore((s) => s.airdrop_ui_enabled);
     const { airdropTokens } = useAirdropStore();
+    const airdrop_ui_enabled = useAppConfigStore((s) => s.airdrop_ui_enabled);
+    const earnings = useBlockchainVisualisationStore((s) => s.earnings);
 
     if (!airdrop_ui_enabled) return null;
 
     const isLoggedIn = !!airdropTokens;
 
     return (
-        <Wrapper>
+        <Wrapper layout>
+            <EarningsAnimationWrapper>
+                <AnimatePresence mode="wait">
+                    {earnings && <EarningsAnimation gemValue={earnings * 25} />}
+                </AnimatePresence>
+            </EarningsAnimationWrapper>
             <TitleWrapper>
                 <Title>{t('airdropGame')}</Title>
                 <InfoTooltip title={t('topTooltipTitle')} text={t('topTooltipText')} />

src/containers/Airdrop/AirdropGiftTracker/components/Earnings/EarningsAnimation.styles.ts

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import { m } from 'framer-motion';
+
+export const Wrapper = styled(m.div)`
+    width: 316px;
+    position: relative;
+    background: #14ae32;
+    z-index: 1;
+`;
+export const Circle = styled(m.div)`
+    position: absolute;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 100%;
+`;
+
+export const ContentWrapper = styled(m.div)`
+    opacity: 1;
+    z-index: 5;
+    display: flex;
+    padding: 20px 0;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 209px;
+    width: 100%;
+    p {
+        font-weight: 500;
+    }
+`;
+
+export const GemAmount = styled.div`
+    display: flex;
+    font-family:
+        Druk LCG,
+        sans-serif;
+    color: #000;
+    text-align: center;
+    font-size: 76px;
+    font-weight: 700;
+    justify-content: center;
+    gap: 6px;
+    align-items: center;
+    img {
+        display: flex;
+        height: 60px;
+    }
+`;

src/containers/Airdrop/AirdropGiftTracker/components/Earnings/EarningsAnimation.tsx

@@ -0,0 +1,75 @@
+import { Circle, ContentWrapper, GemAmount, Wrapper } from './EarningsAnimation.styles.ts';
+import { Transition, Variants } from 'framer-motion';
+import gemImage from '@app/assets/images/gem.png';
+import { Typography } from '@app/components/elements/Typography.tsx';
+import { Stack } from '@app/components/elements/Stack.tsx';
+
+import formatBalance from '@app/utils/formatBalance.ts';
+const circles = [82, 144, 210, 272, 316];
+
+const transition: Transition = {
+    duration: 2,
+    delay: 0.2,
+    ease: 'linear',
+    staggerChildren: 0.01,
+};
+
+const variants: Variants = {
+    initial: ({ current }) => ({
+        x: 158 - current / 2,
+        y: 104 - current / 2,
+        width: current,
+        height: current,
+        opacity: 0,
+    }),
+    animate: ({ i, next }) => ({
+        width: next,
+        height: next,
+        x: 158 - next / 2,
+        y: 104 - next / 2,
+        opacity: i === 4 ? 0 : 1,
+    }),
+};
+
+export default function EarningsAnimation({ gemValue }: { gemValue: number }) {
+    const formatted = formatBalance(gemValue || 0, 2);
+    return (
+        <Wrapper
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0, transition: { delay: 2 } }}
+            transition={{ duration: 0.2 }}
+            style={{
+                height: 208,
+            }}
+        >
+            <ContentWrapper>
+                <div />
+                <Stack direction="column" alignItems="center">
+                    <GemAmount>
+                        <img src={gemImage} alt="gem" />
+                        <Typography>{formatted}</Typography>
+                    </GemAmount>
+
+                    <Typography variant="p">Bonus Gems earned</Typography>
+                </Stack>
+                <Typography variant="p">Keep mining to earn more rewards!</Typography>
+            </ContentWrapper>
+            {circles.map((current, i) => {
+                const nextIndex = i < 4 ? i + 1 : 0;
+                const next = circles[nextIndex];
+                return (
+                    <Circle
+                        key={current + i}
+                        transition={transition}
+                        style={{ zIndex: i }}
+                        variants={variants}
+                        initial="initial"
+                        animate="animate"
+                        custom={{ i, current, next }}
+                    />
+                );
+            })}
+        </Wrapper>
+    );
+}

src/containers/Airdrop/AirdropGiftTracker/sections/LoggedIn/LoggedIn.tsx

@@ -17,17 +17,6 @@ export default function LoggedIn() {
         setGems(userPoints?.base.gems || userDetails?.user?.rank?.gems || 0);
     }, [userPoints?.base.gems, userDetails?.user?.rank?.gems]);
 
-    // const handleShowFlare = () => {
-    //     if (flareAnimationType) {
-    //         setFlareAnimationType();
-    //         return;
-    //     }
-    //
-    //     //setFlareAnimationType('GoalComplete');
-    //     setFlareAnimationType('FriendAccepted');
-    //     //setFlareAnimationType('BonusGems');
-    // };
-
     const bonusTier = useMemo(
         () =>
             bonusTiers

src/containers/Airdrop/AirdropGiftTracker/styles.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import { m } from 'framer-motion';
 
-export const Wrapper = styled('div')`
+export const Wrapper = styled(m.div)`
     display: flex;
     flex-direction: column;
     gap: 10px;
@@ -10,9 +11,10 @@ export const Wrapper = styled('div')`
 
     border-radius: 10px;
     background: #fff;
-    box-shadow: 0px 4px 45px 0px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 4px 45px 0 rgba(0, 0, 0, 0.08);
 
     position: relative;
+    height: auto;
 `;
 
 export const TitleWrapper = styled('div')`
@@ -27,3 +29,14 @@ export const Title = styled('div')`
     font-size: 12px;
     font-weight: 500;
 `;
+
+export const EarningsAnimationWrapper = styled.div`
+    height: 208px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    border-radius: 10px;
+    z-index: 1;
+`;

src/containers/SideBar/styles.ts

@@ -1,9 +1,7 @@
 import styled from 'styled-components';
 import { sidebarWidth } from '../../theme/styles';
 import cardBg from '../../assets/images/card.png';
-import gem from '../../assets/images/gem-sml.png';
 
-import { LinearProgress } from '@app/components/elements/LinearProgress.tsx';
 import { m } from 'framer-motion';
 
 // SideBar
@@ -47,41 +45,6 @@ export const Handle = styled(m.div)`
     display: flex;
 `;
 
-// Milestones
-export const ProgressBox = styled(m.div)`
-    background-color: ${({ theme }) => theme.palette.background.paper};
-    padding: 3px;
-    border-radius: 10px;
-    width: 100%;
-    border: 1px solid ${({ theme }) => theme.palette.divider};
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1px;
-    position: relative;
-`;
-
-export const StyledLinearProgress = styled(LinearProgress)`
-    background-color: transparent;
-    padding: 3px;
-    border-radius: 10px;
-    flex-grow: 1;
-`;
-
-export const GemBox = styled(m.div)`
-    background-image: url(${gem});
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 8px;
-    width: 14px;
-    height: 14px;
-    position: relative;
-    right: 1px;
-    border-radius: 50%;
-    border: 1px solid #d3d3d3;
-`;
-
 export const Scroll = styled(m.div)`
     display: flex;
     flex-direction: column;

src/store/useWalletStore.ts

@@ -39,7 +39,7 @@ export const useWalletStore = create<WalletStoreState>()((set) => ({
                 ...tari_wallet_details.wallet_balance,
                 tari_address_base58: tari_wallet_details.tari_address_base58,
                 tari_address_emoji: tari_wallet_details.tari_address_emoji,
-                balance: tari_wallet_details.wallet_balance ? newBalance : null,
+                balance: tari_wallet_details?.wallet_balance ? newBalance : null,
             });
         } catch (error) {
             console.error('Could not get tari wallet details: ', error);

src/theme/GlobalStyle.ts

@@ -135,6 +135,14 @@ export const GlobalStyle = createGlobalStyle`
         font-display: fallback;
     }
 
+    @font-face {
+        font-family: "Druk LCG";
+        src: url("/assets/fonts/Druk/DrukLCG-Bold.ttf") format("truetype");
+        font-weight: 700;
+        font-style: normal;
+        font-display: fallback;
+    }
+
     @font-face {
         font-family: "Druk";
         src: url("/assets/fonts/Druk/DrukWideLCG-Bold.ttf") format("truetype");

src/utils/formatBalance.ts

@@ -1,7 +1,7 @@
 import { formatNumber } from '@app/utils/formatNumber.ts';
 
-export default function formatBalance(value: number) {
+export default function formatBalance(value: number, maxDigitsArg = 3) {
     const balance = value / 1_000_000;
     const maxDigits = balance > 1_000_000 ? 2 : 3;
-    return formatNumber(balance, maxDigits);
+    return formatNumber(balance, maxDigitsArg || maxDigits);
 }