Merge pull request #84 from TrustlessComputer/feat/airdrop-naka

Feat/airdrop naka
TrustlessComputer · Jan 19, 2024 · dab52ef · dab52ef
2 parents 41171af + 1180d96
commit dab52ef
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 83 deletions.
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -3,12 +3,7 @@ const MAX_DECIMAL = 6;
 const NATIVE_ETH_ADDRESS = '0x0000000000000000000000000000000000000000';
 const METAMASK_DOWNLOAD_PAGE = 'https://metamask.io/download/';
 
-export {
-  MIN_DECIMAL,
-  MAX_DECIMAL,
-  NATIVE_ETH_ADDRESS,
-  METAMASK_DOWNLOAD_PAGE
-};
+export { MIN_DECIMAL, MAX_DECIMAL, NATIVE_ETH_ADDRESS, METAMASK_DOWNLOAD_PAGE };
 
 export const ALLOWED_ATTRIBUTES = {
   '*': ['style'],

diff --git a/src/modules/Whitelist/index.tsx b/src/modules/Whitelist/index.tsx
@@ -74,7 +74,7 @@ const Whitelist = () => {
             <TabList mb="32px" overflow="hidden">
               <Tab>Start here</Tab>
               <Tab>Airdrop 1</Tab>
-              <Tab>Ecosystem</Tab>
+              <Tab>Explore the ecosystem</Tab>
             </TabList>
             <TabPanels w="100%">
               <TabPanel>

diff --git a/src/modules/Whitelist/stepAirdrop/Step/index.tsx b/src/modules/Whitelist/stepAirdrop/Step/index.tsx
@@ -78,9 +78,7 @@ export default function ItemCommunity({
                 <div
                   className={s.itemCommunity__desc}
                   dangerouslySetInnerHTML={{
-                    __html: sanitizeHtml(content?.desc as string, {
-                      allowedAttributes: ALLOWED_ATTRIBUTES,
-                    }),
+                    __html: content?.desc,
                   }}
                 />
               )}

diff --git a/src/modules/Whitelist/stepAirdrop/Step/styles.module.scss b/src/modules/Whitelist/stepAirdrop/Step/styles.module.scss
@@ -38,12 +38,12 @@
     line-height: 26px;
   }
   &__desc {
-    color: #000;
+    color: #484643;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 26px;
-    opacity: 0.7;
+    // opacity: 0.7;
     span {
       font-weight: 700;
     }

diff --git a/src/modules/Whitelist/stepAirdrop/index.tsx b/src/modules/Whitelist/stepAirdrop/index.tsx
@@ -8,6 +8,7 @@ import s from './styles.module.scss';
 import { getRaffleJoin, joinRaffle } from '@/services/player-share';
 import styles from '@/modules/Whitelist/leaderBoard/styles.module.scss';
 import { CDN_URL_ICONS } from '@/config';
+import { LearnMore } from '@/modules/Whitelist/stepsEco';
 
 const StepsAirdrop = () => {
   const token = AuthenStorage.getAuthenKey();
@@ -27,7 +28,7 @@ const StepsAirdrop = () => {
 
   const handleShareTw = async () => {
     window.open(
-      `https://twitter.com/BVMnetwork`,
+      `https://twitter.com/BVMnetwork/status/1748299995898691711`,
       '_blank',
     );
 
@@ -46,9 +47,10 @@ const StepsAirdrop = () => {
       {
         title: 'Timechain',
         desc: `Like and repost to enter a raffle for a Timechain (Inscription ID: 39554) - the first long-form generative art collection on Ordinals.
+          ${LearnMore('https://twitter.com/punk3700/status/1623708934107430913')}
         `,
         actionText: 'Like and repost',
-        image: "time-chain.svg",
+        image: "time-chain2.svg",
         actionHandle: handleShareTw,
         isActive: !!token,
         right: {
@@ -81,8 +83,44 @@ const StepsAirdrop = () => {
         airdropType: AirdropType.NEW
       },
       {
-        title: '2023 users',
-        desc: `Thanks for supporting our 2023 'testnet'. In 2024 mainnet, an airdrop awaits users of BVM products like Generative, Perceptrons, GM, Alpha, and all TC users.<br/>
+        title: 'Generative users',
+        desc: `Proportional to key holding.<br/>
+          Snapshot on Jan 16, 2024. Claimable on Jan 24, 2024.
+       `,
+        actionText: 'Claim',
+        image: "time-chain2.svg",
+        actionHandle: handleClaimRetrospective,
+        isActive: true,
+        isDisable: true,
+        right: {
+          title: '',
+          desc: '',
+        },
+        expiredTime: '2024-01-24 03:00:00',
+        showExpireTime: false,
+        airdropType: AirdropType.RETROSPECTIVE
+      },
+      {
+        title: 'Perceptrons holders',
+        desc: `Proportional to the number of Perceptrons you hold.<br/>
+          Snapshot on Jan 16, 2024. Claimable on Jan 24, 2024.
+       `,
+        actionText: 'Claim',
+        image: "perceptron_thumb_03.jpg",
+        actionHandle: handleClaimRetrospective,
+        isActive: true,
+        isDisable: true,
+        right: {
+          title: '',
+          desc: '',
+        },
+        expiredTime: '2024-01-24 03:00:00',
+        showExpireTime: false,
+        airdropType: AirdropType.RETROSPECTIVE
+      },
+      {
+        title: 'GM holders',
+        desc: `Proportionally based on GM balance - min holding: 1 $GM<br/>
           Snapshot on Jan 16, 2024. Claimable on Jan 24, 2024.
        `,
         actionText: 'Claim',
@@ -98,6 +136,24 @@ const StepsAirdrop = () => {
         showExpireTime: false,
         airdropType: AirdropType.RETROSPECTIVE
       },
+      {
+        title: 'Alpha users',
+        desc: `Proportionally based on Airdrop Points - min Airdrop Points: 100,000<br/>
+          Snapshot on Jan 16, 2024. Claimable on Jan 24, 2024.
+       `,
+        actionText: 'Claim',
+        image: "alpha.svg",
+        actionHandle: handleClaimRetrospective,
+        isActive: true,
+        isDisable: true,
+        right: {
+          title: '',
+          desc: '',
+        },
+        expiredTime: '2024-01-24 03:00:00',
+        showExpireTime: false,
+        airdropType: AirdropType.RETROSPECTIVE
+      },
     ];
   }, [token, needReload, raffleCode]);
 

diff --git a/src/modules/Whitelist/stepsEco/Step/index.tsx b/src/modules/Whitelist/stepsEco/Step/index.tsx
@@ -61,9 +61,7 @@ export default function ItemCommunity({
                 <div
                   className={s.itemCommunity__desc}
                   dangerouslySetInnerHTML={{
-                    __html: sanitizeHtml(content?.desc as string, {
-                      allowedAttributes: ALLOWED_ATTRIBUTES,
-                    }),
+                    __html: content?.desc,
                   }}
                 />
               )}
@@ -107,13 +105,7 @@ export default function ItemCommunity({
             <Flex direction="column">
               <div className={s.itemCommunity__point}>
                 {content?.right.title}
-                {
-                  content?.right.tooltip && (
-                    <>
-                      {content?.right.tooltip}
-                    </>
-                  )
-                }
+                {content?.right.tooltip && <>{content?.right.tooltip}</>}
               </div>
               {!!content?.desc && (
                 <div className={s.itemCommunity__pointNote}>

diff --git a/src/modules/Whitelist/stepsEco/Step/styles.module.scss b/src/modules/Whitelist/stepsEco/Step/styles.module.scss
@@ -29,12 +29,12 @@
     line-height: 26px;
   }
   &__desc {
-    color: #000;
+    color: #484643;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 26px;
-    opacity: 0.7;
+    // opacity: 0.7;
     span {
       font-weight: 700;
     }

diff --git a/src/modules/Whitelist/stepsEco/index.tsx b/src/modules/Whitelist/stepsEco/index.tsx
@@ -7,6 +7,15 @@ import VerifyBVMModal from './VerifyBVMModal';
 import styles from '@/modules/Whitelist/leaderBoard/styles.module.scss';
 import { CDN_URL_ICONS } from '@/config';
 
+export const LearnMore = (href: string) => {
+  return `<a href='${href}' style="color: #FA4E0E" target="_blank">
+      <div style="display: flex; flex-direction: row; align-items: center; gap: 4px;">
+        <p>Learn more</p>
+        <img style="width: 16px; height: 16px;" src="https://storage.googleapis.com/tc-cdn-prod/nbc/icons/bvm-icons/arrow-right.svg" />
+      </div>
+    </a>`;
+};
+
 const StepsEco = () => {
   const token = AuthenStorage.getAuthenKey();
   const [showSyncBVM, setShowSyncBVM] = useState(false);
@@ -21,60 +30,26 @@ const StepsEco = () => {
 
   const DATA_COMMUNITY = useMemo<IItemCommunity[]>(() => {
     return [
-      {
-        project: 'NakaChain',
-        title: 'Share the word about NakaChain',
-        desc: `Follow naka_chain, Post on X and tag @Naka_chain to climb the ranks.
-        <a href='https://nakachain.xyz/' style='color: #FA4E0E' target='_blank'>Learn more ></a>
-        `,
-        actionText: 'Post',
-        image: 'ic-naka.svg',
-        actionHandle: handleShareTw,
-        isActive: !!token,
-        right: {
-          title: '+1000 PTS',
-          desc: '',
-        },
-      },
-      {
-        project: 'NakaChain',
-        title: 'Swap and Add Liquidity on Naka Genesis',
-        desc: `The higher the volume you make the more airdrop points you will get.
-          <a href='https://nakachain.xyz/' style='color: #FA4E0E' target='_blank'>Learn more ></a>
-        `,
-        actionText: 'Connect',
-        image: 'ic-naka.svg',
-        actionHandle: () => {
-          setShowSyncBVM(true);
-        },
-        isActive: !!token,
-        right: {
-          title: '+1 PTS',
-          desc: 'per 25000 SAT',
-        },
-      },
-      {
-        project: 'Bitcoin Arcade',
-        title: 'Play Satoshi\'s Gambit',
-        desc: `Experience the first 3D fully on-chain game on Bitcoin. Play, have fun, and earn more points.
-          <a href='https://bitcoinarcade.xyz/' style='color: #FA4E0E' target='_blank'>Learn more ></a>
-        `,
-        actionText: 'Play',
-        image: 'bitcoin-arcade.svg',
-        actionHandle: () => {
-          window.open('https://bitcoinarcade.xyz/');
-        },
-        isActive: !!token,
-        right: {
-          title: '+100 PTS',
-          desc: 'per match',
-        },
-      },
+      // {
+      //   project: 'NakaChain',
+      //   title: 'Share the word about NakaChain',
+      //   desc: `Follow naka_chain, Post on X and tag @Naka_chain to climb the ranks.
+      //   <a href='https://nakachain.xyz/' style='color: #FA4E0E' target='_blank'>Learn more</a>
+      //   `,
+      //   actionText: 'Post',
+      //   image: 'ic-naka.svg',
+      //   actionHandle: handleShareTw,
+      //   isActive: !!token,
+      //   right: {
+      //     title: '+1000 PTS',
+      //     desc: '',
+      //   },
+      // },
       {
         project: 'Alpha',
         title: 'Crypto Bull Run',
         desc: `Run to get fit in reality, engage online in a Web3 environment, and raise funds for charity all at once!
-          <a href='https://alpha.wtf/' style='color: #FA4E0E' target='_blank'>Learn more ></a>
+          ${LearnMore('https://alpha.wtf/')}
         `,
         actionText: 'Run',
         image: 'alpha.svg',
@@ -94,9 +69,7 @@ const StepsEco = () => {
               padding="8px"
               label={
                 <Flex direction="column" color="black" opacity={0.7}>
-                  <p>
-                    Max 5,000 pts per day
-                  </p>
+                  <p>Max 5,000 pts per day</p>
                 </Flex>
               }
             >
@@ -105,7 +78,41 @@ const StepsEco = () => {
                 src={`${CDN_URL_ICONS}/info-circle.svg`}
               />
             </Tooltip>
-          )
+          ),
+        },
+      },
+      {
+        project: 'NakaChain',
+        title: 'Swap and Add Liquidity on Naka Genesis',
+        desc: `The higher the volume you make the more airdrop points you will get. ${LearnMore(
+          'https://nakachain.xyz/',
+        )}`,
+        actionText: 'Connect',
+        image: 'ic-naka.svg',
+        actionHandle: () => {
+          setShowSyncBVM(true);
+        },
+        isActive: !!token,
+        right: {
+          title: '+1 PTS',
+          desc: 'per 25000 SAT',
+        },
+      },
+      {
+        project: 'Bitcoin Arcade',
+        title: "Play Satoshi's Gambit",
+        desc: `Experience the first 3D fully on-chain game on Bitcoin. Play, have fun, and earn more points.${LearnMore(
+          'https://bitcoinarcade.xyz/',
+        )}`,
+        actionText: 'Play',
+        image: 'bitcoin-arcade.svg',
+        actionHandle: () => {
+          window.open('https://bitcoinarcade.xyz/');
+        },
+        isActive: !!token,
+        right: {
+          title: '+100 PTS',
+          desc: 'per match',
         },
       },
     ];

diff --git a/src/modules/Whitelist/styles.module.scss b/src/modules/Whitelist/styles.module.scss
@@ -95,7 +95,7 @@
           text-align: left;
 
           @include w-max(720px) {
-            font-size: 20px;
+            font-size: 15px;
           }
 
           &:active {