Merge pull request #24 from TrustlessComputer/feat/storage-message

Feat/storage message
TrustlessComputer · Jan 15, 2024 · 67aeaa7 · 67aeaa7
2 parents 70b7f4e + 346544d
commit 67aeaa7
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 55 deletions.
diff --git a/public/landing/biteth.png b/public/landing/biteth.png
diff --git a/src/modules/Whitelist/leaderBoard/index.tsx b/src/modules/Whitelist/leaderBoard/index.tsx
@@ -16,7 +16,7 @@ import { getUrlAvatarTwitter } from '@/utils/twitter';
 import cs from 'clsx';
 import { useAppSelector } from '@/stores/hooks';
 import { commonSelector } from '@/stores/states/common/selector';
-import uniqueBy from '@popperjs/core/lib/utils/uniqueBy';
+import BigNumber from 'bignumber.js';
 
 const valueToClassName: any = {
   '10': 'boost_10',
@@ -34,7 +34,6 @@ const LeaderBoard = () => {
   const [data, setData] = useState<ILeaderBoardPoint[]>([]);
   const [isFetching, setIsFetching] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
-  const [count, setCount] = useState<string | undefined>(undefined);
   const needReload = useAppSelector(commonSelector).needReload;
 
   const hasIncrementedPageRef = useRef(false);
@@ -62,7 +61,6 @@ const LeaderBoard = () => {
       const { data: response, count } = await getTopLeaderBoards({
         ...refParams.current,
       });
-      setCount(count)
       if (isNew) {
         const { data: response2 } = await getTopLeaderBoards({
           page: 1,
@@ -161,6 +159,10 @@ const LeaderBoard = () => {
               alignItems={'center'}
               width={'100%'}
               justifyContent={'space-between'}
+              cursor="pointer"
+              onClick={() => {
+                window.open(`https://twitter.com/${data?.twitter_username}`)
+              }}
             >
               <Flex flex={1} gap={2} alignItems={'center'}>
                 <Avatar
@@ -170,7 +172,7 @@ const LeaderBoard = () => {
                   )}
                   address={''}
                   width={36}
-                  name={data?.twitter_username || ''}
+                  name={data?.twitter_name || data?.twitter_username || ''}
                 />
                 <Flex width={'100%'} gap={'0px'} direction={'column'}>
                   {data?.twitter_name && (
@@ -251,7 +253,7 @@ const LeaderBoard = () => {
               label={
                 <Flex direction="column" color="black" opacity={0.7}>
                   <p>Content Points are calculated based on the performance of your posts on X, including Views, Likes, Reposts, and Quotes.
-                    Note: To be qualified, you must tag: <strong>@bvmnetwork</strong></p>
+                    Note: To be qualified, you must tag: <br/><strong>@bvmnetwork</strong></p>
                 </Flex>
               }
             >
@@ -337,45 +339,60 @@ const LeaderBoard = () => {
       //     );
       //   },
       // },
-      // {
-      //   id: 'feature',
-      //   label: (
-      //     <Flex
-      //       style={{
-      //         justifyContent: 'center',
-      //         alignSelf: 'center',
-      //         width: '100%',
-      //         textTransform: 'uppercase'
-      //       }}
-      //     >
-      //       Gas Spent
-      //     </Flex>
-      //   ),
-      //   labelConfig,
-      //   config: {
-      //     borderBottom: 'none',
-      //     fontSize: '16px',
-      //     fontWeight: 500,
-      //     verticalAlign: 'middle',
-      //     letterSpacing: '-0.5px',
-      //   },
-      //   render(data: ILeaderBoardPoint) {
-      //     return (
-      //       <Flex
-      //         gap={3}
-      //         alignItems={'center'}
-      //         width={'100%'}
-      //         justifyContent={'center'}
-      //       >
-      //         <Flex alignItems={'center'} gap={2}>
-      //           <Text className={styles.title}>
-      //             {formatCurrency(data?.point_portfolio_inday, 0, 0)}
-      //           </Text>
-      //         </Flex>
-      //       </Flex>
-      //     );
-      //   },
-      // },
+      {
+        id: 'feature',
+        label: (
+          <Flex
+            style={{
+              justifyContent: 'center',
+              alignSelf: 'center',
+              width: '100%',
+              textTransform: 'uppercase',
+            }}
+            gap="3px"
+          >
+            <p style={{ textTransform:'uppercase' }}>Gas Spent</p>
+            <Tooltip
+              minW="220px"
+              bg="white"
+              boxShadow="rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;"
+              borderRadius="4px"
+              padding="8px"
+              label={
+                <Flex direction="column" color="black" opacity={0.7}>
+                  <p>Gas spent is calculated from total gas fees paid on Bitcoin, starting with the first payment to wallet verification on the BVM allowlist.</p>
+                </Flex>
+              }
+            >
+              <img className={styles.tooltipIcon} src={`${CDN_URL_ICONS}/info-circle.svg`}/>
+            </Tooltip>
+          </Flex>
+        ),
+        labelConfig,
+        config: {
+          borderBottom: 'none',
+          fontSize: '16px',
+          fontWeight: 500,
+          verticalAlign: 'middle',
+          letterSpacing: '-0.5px',
+        },
+        render(data: ILeaderBoardPoint) {
+          return (
+            <Flex
+              gap={3}
+              alignItems={'center'}
+              width={'100%'}
+              justifyContent={'center'}
+            >
+              <Flex alignItems={'center'} gap={2}>
+                <Text className={styles.title}>
+                  {formatCurrency(data?.gas_point, 0, 0)}
+                </Text>
+              </Flex>
+            </Flex>
+          );
+        },
+      },
       {
         id: 'point',
         label: (
@@ -408,7 +425,7 @@ const LeaderBoard = () => {
             >
               <Flex alignItems={'center'} gap={2}>
                 <Text className={styles.title}>
-                  {formatCurrency(data.point, 0, 0)}
+                  {formatCurrency(new BigNumber(data?.point || '0').plus(data?.gas_point || '0').toNumber(), 0, 0)}
                 </Text>
               </Flex>
             </Flex>

diff --git a/src/modules/landing/Componets/BitEth/index.tsx b/src/modules/landing/Componets/BitEth/index.tsx
@@ -19,12 +19,12 @@ export default function BitEth() {
     <div className={`${s.bitEth_inner} container`}>
       <div className={s.bitEth_content}>
         <Scale>
-          <Image className={s.thumb} src={'landing/biteth.svg'} alt={'biteth.svg'} width={250} height={80}
+          <Image className={s.thumb} quality={100} src={'/landing/biteth.png'} alt={'biteth.svg'} width={251} height={80}
                  loading={'eager'} />
         </Scale>
         <HeadingSection className={s.heading}>
           <Chars delay={.2}>
-            Minimal effort to migrate from Ethereum to Bitcoin.
+            <b>Minimal effort</b> to migrate from Ethereum to Bitcoin.
           </Chars>
         </HeadingSection>
         <ContentSection className={s.content}>

diff --git a/src/modules/landing/Componets/Chain/index.tsx b/src/modules/landing/Componets/Chain/index.tsx
@@ -140,7 +140,7 @@ export default function Chain() {
             <p className={s.chain_case}>Case studies</p>
             <HeadingSection className={s.chain_heading}>
               <Chars>
-                Say hello to the first EVM-compatible <b>Bitcoin L2 blockchains powered by BVM.</b>
+                Say hello to the first EVM-compatible <b>Bitcoin L2 blockchains</b> powered by BVM.
               </Chars>
             </HeadingSection>
             <Fade delay={0.6}>

diff --git a/src/modules/landing/Componets/Chain/styles.module.scss b/src/modules/landing/Componets/Chain/styles.module.scss
@@ -49,7 +49,7 @@
   }
 
   &_heading{
-    max-width: 820px;
+    max-width: 900px;
     margin-left: auto;
     margin-right: auto;
   }

diff --git a/src/modules/landing/Componets/HeadingTextV2/index.tsx b/src/modules/landing/Componets/HeadingTextV2/index.tsx
@@ -41,7 +41,7 @@ export default function HeadingTextV2({ headings, className, children }: IProp)
   useEffect(() => {
     if (!play) return;
     refTime.current = setTimeout(nextSlide, 500);
-    refLoop.current = setInterval(nextSlide, 3000);
+    refLoop.current = setInterval(nextSlide, 2000);
     return () => {
       clearInterval(refLoop.current);
       clearTimeout(refTime.current);

diff --git a/src/utils/storage/allowlist.storage.ts b/src/utils/storage/allowlist.storage.ts
@@ -1,5 +1,6 @@
 import storage from '@/utils/storage/local';
 import { WalletType } from '@/interfaces/wallet';
+import { compareString } from '@/utils/string';
 
 interface IStorageItem {
   address: string,
@@ -11,11 +12,15 @@ class AllowListStorage {
   private static STORAGE_KEY = 'ALLOW_LIST_STORAGE_0.0.1';
 
   public static getStorage = (): IStorageItem[] | undefined => {
-    const data = storage.get(this.STORAGE_KEY);
-    if (data) {
-      return JSON.parse(data as string) as IStorageItem[]
+    try {
+      const data = storage.get(this.STORAGE_KEY);
+      if (data) {
+        return JSON.parse(data as string) as IStorageItem[]
+      }
+      return undefined
+    } catch (e) {
+      return undefined
     }
-    return undefined
   };
   public static setStorage = (payload: IStorageItem) => {
     try {
@@ -24,7 +29,9 @@ class AllowListStorage {
         storage.set(this.STORAGE_KEY, JSON.stringify([payload]));
         return;
       }
-      data.push(payload)
+      if (!data.some(item => compareString(item.address, payload.address))) {
+        data.push(payload)
+      }
       storage.set(this.STORAGE_KEY, JSON.stringify(data));
     } catch (error) {
       console.log('setStorage error: ', error);