From 2b2af582db7f352f1f5b7a8ee659e0860fe7e12c Mon Sep 17 00:00:00 2001
From: camewell <130561684+camewell071@users.noreply.github.com>
Date: Wed, 31 Jan 2024 09:44:38 +0700
Subject: [PATCH] chore: update ui

---
 package.json                                  |  1 +
 .../activities/components/NakaCountDown.tsx   |  6 ++---
 .../components/TradeNakaWinnersPopup.tsx      | 25 ++++++++++++-------
 src/modules/PublicSale/activities/index.tsx   |  7 +++---
 yarn.lock                                     | 12 +++++++++
 5 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 327afd114..f1b98166a 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "react-final-form": "^6.5.9",
     "react-google-recaptcha-v3": "^1.10.1",
     "react-hot-toast": "^2.4.1",
+    "react-jazzicon": "^1.0.4",
     "react-modal-video": "^2.0.1",
     "react-player": "^2.14.1",
     "react-qr-code": "^2.0.12",
diff --git a/src/modules/PublicSale/activities/components/NakaCountDown.tsx b/src/modules/PublicSale/activities/components/NakaCountDown.tsx
index cf94c9b79..148102757 100644
--- a/src/modules/PublicSale/activities/components/NakaCountDown.tsx
+++ b/src/modules/PublicSale/activities/components/NakaCountDown.tsx
@@ -28,13 +28,13 @@ const NakaCountDown = React.memo(() => {
       {!!bestPNL?.winner ? (
         <Flex className={styles.item}>
           <Text className={styles.item_title}>
-            Top PNL
+            Top 1 PNL
           </Text>
           <Text className={styles.item_name} cursor="pointer" _hover={{ textDecoration: bestPNL?.winner?.twitter_username ? 'underline' : 'unset' }} onClick={() => {
             if (!bestPNL?.winner?.twitter_username) return;
             window.open(`https://twitter.com/${bestPNL?.winner?.twitter_username}`, '_blank');
           }}>
-            {formatString(bestPNL?.winner?.twitter_name || bestPNL?.winner?.address , 6)} <span>+{formatCurrency(bestPNL?.winner?.realized_pnl || '0', 0, 5, 'TC', false)} BTC</span>
+            {formatString(bestPNL?.winner?.twitter_name || bestPNL?.winner?.address , 6)} <span>+{formatCurrency(bestPNL?.winner?.realized_pnl || '0', 0, 5)} BTC</span>
           </Text>
         </Flex>
       ) : (
@@ -49,7 +49,7 @@ const NakaCountDown = React.memo(() => {
       )}
       <Flex className={styles.item}>
         <Text className={styles.item_title}>
-          Rewards
+          Reward
         </Text>
         <Flex className={styles.item_reward}>
           ${bestPNL.reward}
diff --git a/src/modules/PublicSale/activities/components/TradeNakaWinnersPopup.tsx b/src/modules/PublicSale/activities/components/TradeNakaWinnersPopup.tsx
index 0e0521084..7cddc0aee 100644
--- a/src/modules/PublicSale/activities/components/TradeNakaWinnersPopup.tsx
+++ b/src/modules/PublicSale/activities/components/TradeNakaWinnersPopup.tsx
@@ -15,6 +15,7 @@ import { useAppSelector } from '@/stores/hooks';
 import { coinPricesSelector } from '@/stores/states/common/selector';
 import { Coin } from '@/stores/states/common/types';
 import BigNumber from 'bignumber.js';
+import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
 
 interface IProps extends IBaseModalProps {
 }
@@ -47,6 +48,7 @@ const TradeNakaWinnersPopup = ({ isShow, onHide }: IProps) => {
         config,
         label: <Text>USER</Text>,
         render(row: TopWinner) {
+          const name = row?.twitter_name || row?.twitter_username;
           return (
             <Flex
               alignItems="center"
@@ -58,15 +60,20 @@ const TradeNakaWinnersPopup = ({ isShow, onHide }: IProps) => {
               }}
               maxW="170px"
             >
-              <Avatar
-                url={getUrlAvatarTwitter(
-                  row?.twitter_avatar as string,
-                  'normal',
-                )}
-                address={''}
-                width={40}
-                name={row?.twitter_name || row?.twitter_username || row?.address || ''}
-              />
+              {!!name ? (
+                <Avatar
+                  url={getUrlAvatarTwitter(
+                    row?.twitter_avatar as string,
+                    'normal',
+                  )}
+                  address={''}
+                  width={40}
+                  name={name || ''}
+                />
+              ) : (
+                <Jazzicon diameter={40} seed={jsNumberForAddress(row?.address || "")} />
+              )}
+
               <Text className={cs(styles.modalContent__userName)}>{row?.twitter_username ? formatName(row?.twitter_username || '-', 17) : (row?.address || '').slice(0, 8)}</Text>
             </Flex>
           );
diff --git a/src/modules/PublicSale/activities/index.tsx b/src/modules/PublicSale/activities/index.tsx
index f98a7771d..c0b052b00 100644
--- a/src/modules/PublicSale/activities/index.tsx
+++ b/src/modules/PublicSale/activities/index.tsx
@@ -69,15 +69,16 @@ Good luck and have fun!
             link: 'https://nakachain.xyz/app',
           },
           {
-            title: 'View winners',
+            title: 'Winners',
             type: 'action',
             onPress: () => {
               onOpenNakaWinners()
             }
           },
         ],
-        desc: 'Experience on-chain BRC-20 perpetual trading with Naka Chain - the Bitcoin L2 for BRC-20 DeFi powered by BVM' +
-          '<br/>For the first time, you can go long and short on BRC-20 tokens on a decentralized platform',
+        desc: 'NakaChain is a low-cost and lightning-fast Bitcoin Layer 2 blockchain designed for DeFi apps, enabling the payment of gas fees in Bitcoin. It’s powered by BVM with these modules: Bitcoin for security, Polygon for data availability, and Optimism for execution.' +
+          '<br/><br/>On the second day of awesomeness, challenge yourself to dominate the market by trading futures on BRC-20 tokens\' prices. The top gainer will be rewarded every hour.' +
+          '<br/><br/>Total rewards: <span style="color: #FA4E0E">$3,000</span>',
       },
       {
         key: 2,
diff --git a/yarn.lock b/yarn.lock
index 26b3005b9..108fc0f1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6455,6 +6455,11 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+mersenne-twister@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mersenne-twister/-/mersenne-twister-1.1.0.tgz#f916618ee43d7179efcf641bec4531eb9670978a"
+  integrity sha512-mUYWsMKNrm4lfygPkL3OfGzOPTR2DBlTkBNHM//F6hGp8cLThY897crAlk3/Jo17LEOOjQUrNAx6DvgO77QJkA==
+
 micro-ftch@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/micro-ftch/-/micro-ftch-0.3.1.tgz#6cb83388de4c1f279a034fb0cf96dfc050853c5f"
@@ -7161,6 +7166,13 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-jazzicon@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-jazzicon/-/react-jazzicon-1.0.4.tgz#31e5f6908e042786ba93a9093b852dea1870e7a0"
+  integrity sha512-/3kWv5vtAhI18GBFoqjpxRTtL+EImuB73PAC02r/zJQ6E+PAUmoBx8edYvTCIYHwS01uFf6N3elTDqSrVPwg4w==
+  dependencies:
+    mersenne-twister "^1.1.0"
+
 react-modal-video@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-modal-video/-/react-modal-video-2.0.1.tgz#ede12736b306316d33d969cd9a8c826c49e23354"