diff --git a/public/img/s2/bg-s2-kyc-h5.png b/public/img/s2/bg-s2-kyc-h5.png new file mode 100644 index 00000000..a59ed7de Binary files /dev/null and b/public/img/s2/bg-s2-kyc-h5.png differ diff --git a/src/components/Bridge/BridgeCompMobile.tsx b/src/components/Bridge/BridgeCompMobile.tsx deleted file mode 100644 index e4b657ee..00000000 --- a/src/components/Bridge/BridgeCompMobile.tsx +++ /dev/null @@ -1,440 +0,0 @@ -import { UseDisclosureReturn } from "@nextui-org/use-disclosure"; -import { Token } from "@/hooks/useTokenList"; -import { Avatar, Button, Input, Tooltip } from "@nextui-org/react"; -import { - Container, - SelectBox, - LoyaltyBoostTooltipContent, - LoyaltyBoostBox, - ContentForMNTDeposit, - EstimateArrivalTime, -} from "./Components"; -import fromList from "@/constants/fromChainList"; -import { NexusEstimateArrivalTimes } from "@/constants"; -import { Tooltip as ReactTooltip } from "react-tooltip"; -import { Switch, cn } from "@nextui-org/react"; -interface IProps { - actionBtnDisabled: boolean; - actionBtnTooltipForMantleDisabeld: boolean; - amount: string; - btnText: string; - errorInputMsg: string; - fromActive: number; - fromModal: UseDisclosureReturn; - handleAction: () => Promise; - isCheckWinner: boolean; - isConnected: boolean; - isFirstDeposit: boolean; - isMemeMysteryboxReward: boolean; - isMergeSelected: boolean; - isWhitelistWinner: boolean; - loading: boolean; - loyalPoints: number; - mergeSupported: boolean | undefined; - mergeTokenBooster: string; - minDepositValue: number; - mintable: boolean; - minted: boolean; - networkKey: string | undefined; - openConnectModal: (() => void) | undefined; - points: number; - showNoPointsTip: boolean; - tokenActive: number; - tokenFiltered: Token[]; - tokenModal: UseDisclosureReturn; - unsupportedChainWithConnector: string; - inputRef2: React.RefObject; - handleInputValue: (v: string) => void; - setIsMergeSelected: (v: boolean) => void; -} - -const BridgeCompMobile = (props: IProps) => { - const { - actionBtnDisabled, - actionBtnTooltipForMantleDisabeld, - amount, - btnText, - errorInputMsg, - fromActive, - fromModal, - handleAction, - isCheckWinner, - isConnected, - isFirstDeposit, - isMemeMysteryboxReward, - isMergeSelected, - isWhitelistWinner, - loading, - loyalPoints, - mergeSupported, - mergeTokenBooster, - minDepositValue, - mintable, - minted, - networkKey, - openConnectModal, - points, - showNoPointsTip, - tokenActive, - tokenFiltered, - tokenModal, - unsupportedChainWithConnector, - inputRef2, - handleInputValue, - setIsMergeSelected, - } = props; - return ( - - {/* */} -
- Deposit - - window.open("https://portal.zklink.io/withdraw", "_blank") - } - > - Withdraw - -
- -
- From -
fromModal.onOpen()} - > - - {fromList[fromActive].label} - -
-
-
-

Assets

-
tokenModal.onOpen()} - > - - {tokenFiltered[tokenActive]?.symbol} - -
-
- -
-
-
Amount
-
- Balance:{" "} - {tokenFiltered[tokenActive]?.formatedBalance} -
-
-
- -
-
-
-
- Nova Points - - - - - {loyalPoints > 0 && ( - -

- Thank you for your continued support of zkLink. As our - loyal user, we're delighted to offer you{" "} - {loyalPoints}{" "} - addtional Nova Points.{" "} -

- - Learn more. - - - } - > - Loyalty Boost - - )} -
-
- - {showNoPointsTip - ? 0 - : points < 0.01 && points > 0 - ? "< 0.01" - : points.toFixed(2)} - - {loyalPoints > 0 && ( -
- + {loyalPoints}{" "} -
- )} -
-
- - {networkKey && NexusEstimateArrivalTimes[networkKey] && ( -
- Estimated Time of Arrival - -
- )} - {/*
- Est.fee - 0.002 ETH -
*/} - {mergeSupported && ( - <> -
-
- Merge Token - - - All supported source tokens with the same entity from - different networks can be merged into a single merged - token. Holding or using merged token to engage with - supported dApps could receive higher multipliers.{" "} - - Learn more. - - - } - > - - -
- - - {isMergeSelected ? "" : "Merge"} - - - -
- {isMergeSelected && ( -
-
- {mergeTokenBooster} Booster -
-
- )} - - )} - - {isCheckWinner && ( -
-
- CoinList Participants' Rewards - - - - -
-
- - 1 Mystery Box - - -
-
- )} - - {isWhitelistWinner && ( -
-
- Coinlist Whitelist Users - - - - ( -

- Previous zkLink Coinlist whitelist users taking part in the - zkLink Aggregation Parade will receive 50 Nova Points, - Equivalent to depositing{" "} - - 1 ETH into the Nova Network for 9 days. - -

- )} - /> -
-
- - +50 Nova Points - - -
-
- )} - -
- {isConnected ? ( - - - {/* - - */} - - ) : ( - - )} - {unsupportedChainWithConnector && ( -

- {unsupportedChainWithConnector} -

- )} -
- {isFirstDeposit && showNoPointsTip && ( -
- -

- Should you wish to participate in the Aggregation Parade, the - minimum deposit value in a{" "} - single transaction should be{" "} - {minDepositValue} ETH or equivalence. To participate OKX - Cryptopedia, there is no minimum deposit value. -

-
- )} - - ); -}; - -export default BridgeCompMobile; diff --git a/src/components/Bridge/BridgeCompPc.tsx b/src/components/Bridge/BridgeCompPc.tsx index d338a6b7..2c9530b7 100644 --- a/src/components/Bridge/BridgeCompPc.tsx +++ b/src/components/Bridge/BridgeCompPc.tsx @@ -306,9 +306,9 @@ const BridgeCompPC = (props: IProps) => { }; return ( - + {/* */} -
+
{tabs.map((tab, index) => (
{ {tabActive === 0 && ( <> -
- From - fromModal.onOpen()} - > - - {fromList[fromActive].label} - - -
+
+
+ From + fromModal.onOpen()} + > + + {fromList[fromActive].label} + + +
+
Balance: {tokenFiltered[tokenActive]?.formatedBalance} diff --git a/src/components/Bridge/Components.tsx b/src/components/Bridge/Components.tsx index 126d9b43..c278706e 100644 --- a/src/components/Bridge/Components.tsx +++ b/src/components/Bridge/Components.tsx @@ -292,7 +292,6 @@ export const DefaultBtn = styled(Button)` .btn-text { text-align: center; font-family: Satoshi; - font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; diff --git a/src/components/Bridge/index.tsx b/src/components/Bridge/index.tsx index 084bad5d..68261512 100644 --- a/src/components/Bridge/index.tsx +++ b/src/components/Bridge/index.tsx @@ -42,7 +42,7 @@ import { SourceTokenInfo, useMergeToken } from "@/hooks/useMergeToken"; import useOldestFriendsStatus from "@/hooks/useOldestFriendsStatus"; import useNovaChadNftStatus from "@/hooks/useNovaChadNftStatus"; import BridgeCompPc from "./BridgeCompPc"; -import BridgeCompMobile from "./BridgeCompMobile"; + import { ModalSelectItem, AssetTypes, @@ -658,42 +658,7 @@ export default function Bridge(props: IBridgeComponentProps) { setIsMergeSelected, }} /> - {/* */} + {isFirstDeposit && address && txhashes[address]?.[0] && (
- + Open the Mystery box diff --git a/src/components/Dashboard/PointsRewardsTooltips.tsx b/src/components/Dashboard/PointsRewardsTooltips.tsx index df7c7a95..c2979c4a 100644 --- a/src/components/Dashboard/PointsRewardsTooltips.tsx +++ b/src/components/Dashboard/PointsRewardsTooltips.tsx @@ -14,9 +14,9 @@ export function getPointsRewardsTooltips(points: number) { 1000: "~167 days", }; return ( -

+ <> Equivalent to depositing 1 ETH into Nova for {pointsMap[Number(points)]}. -

+ ); } diff --git a/src/components/DashboardS2/DailyRoulette/InviteBoxModal.tsx b/src/components/DashboardS2/DailyRoulette/InviteBoxModal.tsx index 17e77955..78eedece 100644 --- a/src/components/DashboardS2/DailyRoulette/InviteBoxModal.tsx +++ b/src/components/DashboardS2/DailyRoulette/InviteBoxModal.tsx @@ -9,9 +9,7 @@ import { TRADEMARK_NFT_MARKET_URL, } from "@/constants"; import { config } from "@/constants/networks"; -import { useMintStatus } from "@/hooks/useMintStatus"; import useNovaNFT from "@/hooks/useNFT"; -import useNovaDrawNFT, { TrademarkMintParams } from "@/hooks/useNovaNFT"; import { formatBalance, sleep } from "@/utils"; import { eventBus } from "@/utils/event-bus"; import { @@ -24,7 +22,6 @@ import { ModalFooter, } from "@nextui-org/react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import toast from "react-hot-toast"; import styled from "styled-components"; import { useAccount, useBalance, useSwitchChain } from "wagmi"; @@ -102,7 +99,7 @@ const InviteBoxModal = () => { const [update, setUpdate] = useState(0); const { address, chainId } = useAccount(); - const { nft, loading: mintLoading, sendMintTx, fetchLoading } = useNovaNFT(); + const { nft, loading: mintLoading } = useNovaNFT(); const drawRef = useRef<{ start: (target: number) => void }>(); const [drawing, setDrawing] = useState(false); const [trademarkMintStatus, setTrademarkMintStatus] = useState< @@ -110,28 +107,7 @@ const InviteBoxModal = () => { >(); const [mintResult, setMintResult] = useState<{ name: string; img: string }>(); - const [trademarkMintParams, setTrademarkMintParams] = useState<{ - tokenId: number; - nonce: number; - signature: string; - expiry: number; - }>(); - - const { - trademarkNFT, - sendTrademarkMintTx, - sendOldestFriendsTrademarkMintTx, - sendEcoBoxMintTx, - lynksNFT, - isTrademarkApproved, - sendTrademarkApproveTx, - sendUpgradeSBTTx, - isApproving, - publicClient, - sendMysteryOpenMintTxV2, - } = useNovaDrawNFT(); - const { refreshBalanceId, updateRefreshBalanceId } = useMintStatus(); - const [failMessage, setFailMessage] = useState(""); + const [failMessage] = useState(""); const isInvaidChain = useMemo(() => { return chainId !== NOVA_CHAIN_ID; @@ -184,86 +160,33 @@ const InviteBoxModal = () => { return; } - if (novaBalance === 0) { - toast.error("Insuffcient gas for mint transaction."); - return; - } - - // 5 - 1 = 4, 5 means no prize. Draw again - if (!drawedNftId || drawedNftId === 5) { - setDrawing(true); - const res = await drawTrademarkNFT(address); - if (res && res.result) { - const { tokenId, nonce, signature, expiry } = res.result; - setTrademarkMintParams({ tokenId, nonce, signature, expiry }); - await drawRef?.current?.start(getDrawIndexWithPrizeTokenId(tokenId)); //do the draw animation; use index of image for active - // await sleep(2000); - if (tokenId === 5) { - // 5 means no prize - setUpdate((update) => update + 1); - // return; - } else if ([6, 7, 8, 9].includes(tokenId)) { - await sleep(2000); - setDrawedNftId(undefined); - //not actual nft. Just points. - setTrademarkMintStatus(MintStatus.Success); - setMintResult({ - name: TRADEMARK_TOKEN_ID_MAP[tokenId!], - img: - tokenId === 88 - ? lynksNFTImg! - : `/img/img-trademark-${tokenId}.png`, - }); - trademarkMintModal.onOpen(); - modalInstance.onClose(); - eventBus.emit("getInvite"); - } else { - setDrawedNftId(tokenId); - } - } - setUpdate((update) => update + 1); - return; // draw first and then mint as step2. - } - let mintParams = { ...trademarkMintParams }; - - try { - //TODO call contract - trademarkMintModal.onOpen(); - setTrademarkMintStatus(MintStatus.Minting); - if (!trademarkMintParams) { - const res = await drawTrademarkNFT(address); - if (res && res.result) { - const { tokenId, nonce, signature, expiry } = res.result; - setTrademarkMintParams({ tokenId, nonce, signature, expiry }); - mintParams = { tokenId, nonce, signature, expiry }; - } + setDrawing(true); + const res = await drawTrademarkNFT(address); + if (res && res.result) { + const { tokenId } = res.result; + await drawRef?.current?.start(getDrawIndexWithPrizeTokenId(tokenId)); //do the draw animation; use index of image for active + // await sleep(2000); + if (tokenId === 5) { + // 5 means no prize + setUpdate((update) => update + 1); + // return; + } else if ([6, 7, 8, 9].includes(tokenId)) { + await sleep(2000); + setDrawedNftId(undefined); + //not actual nft. Just points. + setTrademarkMintStatus(MintStatus.Success); + setMintResult({ + name: TRADEMARK_TOKEN_ID_MAP[tokenId!], + img: + tokenId === 88 ? lynksNFTImg! : `/img/img-trademark-${tokenId}.png`, + }); + trademarkMintModal.onOpen(); + modalInstance.onClose(); + eventBus.emit("getInvite"); + } else { + setDrawedNftId(tokenId); } - await sendTrademarkMintTx(mintParams as TrademarkMintParams); - setTrademarkMintStatus(MintStatus.Success); - setMintResult({ - name: TRADEMARK_TOKEN_ID_MAP[mintParams.tokenId!], - img: - mintParams.tokenId === 88 - ? lynksNFTImg! - : `/img/img-trademark-${mintParams.tokenId}.png`, - }); - updateRefreshBalanceId(); - } catch (e: any) { - console.error(e); - setTrademarkMintStatus(MintStatus.Failed); - if (e.message) { - if (e.message.includes("rejected the request")) { - setFailMessage("User rejected the request"); - } else { - setFailMessage(e.message); - } - } - } finally { - setDrawing(false); - setDrawedNftId(undefined); - modalInstance.onClose(); } - setUpdate((update) => update + 1); }, [ address, @@ -273,11 +196,8 @@ const InviteBoxModal = () => { lynksNFTImg, novaBalance, remainDrawCount, - sendTrademarkMintTx, switchChain, trademarkMintModal, - trademarkMintParams, - updateRefreshBalanceId, ]); const mintPointsTips = useMemo(() => { @@ -297,7 +217,7 @@ const InviteBoxModal = () => { getRemainDrawCount(address).then((res) => { console.log("remain draw count: ", res); const { remainNumber, tokenId } = res.result; - tokenId && setDrawedNftId(Number(tokenId)); + // tokenId && setDrawedNftId(Number(tokenId)); setRemainDrawCount(remainNumber); }); } @@ -312,19 +232,13 @@ const InviteBoxModal = () => { - {trademarkMintStatus === MintStatus.Minting && !isApproving && ( - Minting - )} - {trademarkMintStatus === MintStatus.Minting && isApproving && ( - Approving - )} {trademarkMintStatus === MintStatus.Success && ( Congratulations )} @@ -345,13 +259,6 @@ const InviteBoxModal = () => {

Please sign the transaction in your wallet.

- {isApproving && ( -

- If you receive a warning about approving all your NFTs, - please don't panic. The Lynks contract requires approval - to burn your trademark NFTs in order to mint Lynks. -

- )}
)} {trademarkMintStatus === MintStatus.Failed && ( @@ -434,13 +341,13 @@ const InviteBoxModal = () => { isOpen={modalInstance.isOpen} onOpenChange={modalInstance.onOpenChange} > - + {(onClose) => ( <> Open Your Invite Box - +
{
- {isInvaidChain && "Switch To Nova Network To Draw"} - {!isInvaidChain && - (!drawedNftId || drawedNftId === 5 || drawing) && ( -
- - Draw ({remainDrawCount}) -
- )} - {!isInvaidChain && - !!drawedNftId && - drawedNftId !== 5 && - !drawing && - "Mint"} + {isInvaidChain ? ( + "Switch To Nova Network To Draw" + ) : ( +
+ + Draw ({remainDrawCount}) +
+ )} } > -
Determined by the consecutive days
+
+ Determined by the consecutive days +
- +
+ +
-
+
{dailyData.map((item, index) => ( ))}
+ +
+ +
); } diff --git a/src/components/DashboardS2/Tabs/AllocatedPoints.tsx b/src/components/DashboardS2/Tabs/AllocatedPoints.tsx new file mode 100644 index 00000000..17094ade --- /dev/null +++ b/src/components/DashboardS2/Tabs/AllocatedPoints.tsx @@ -0,0 +1,192 @@ +import { NovaCategoryPoints } from "@/api"; +import { NovaPointsListItem } from "@/pages/DashboardS2/index2"; +import { formatNumberWithUnit } from "@/utils"; +import { Tooltip } from "@nextui-org/react"; +import { useMemo } from "react"; +import styled from "styled-components"; + +const AllocatedBox = styled.div` + border-radius: 16px; + filter: blur(0.125px); + border: 2px solid transparent; + background-clip: padding-box, border-box; + background-origin: padding-box, border-box; + background-image: linear-gradient(to right, #282828, #000000), + linear-gradient( + 175deg, + #fb2450 1%, + #fbc82e 5%, + #6eee3f, + #5889f3, + #5095f1, + #b10af4 + ); + + .label { + color: var(--Neutral-2, rgba(251, 251, 251, 0.6)); + font-family: Satoshi; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; + } + + .value { + text-align: right; + font-family: Satoshi; + font-size: 24px; + font-style: normal; + font-weight: 900; + line-height: normal; + background: linear-gradient(180deg, #fff 0%, #bababa 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .line { + margin: 12px auto; + width: 100%; + height: 1px; + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(251, 251, 251, 0.6) 51.5%, + rgba(255, 255, 255, 0) 100% + ); + } +`; + +interface IProps { + novaCategoryTotalPoints?: NovaCategoryPoints; + holdingPoints?: NovaPointsListItem; + tabActive?: { + category: string; + name: string; + iconURL: string; + }; +} + +export default function AllocatedPoints({ + novaCategoryTotalPoints, + holdingPoints, + tabActive, +}: IProps) { + const categoryPointsTooltips = useMemo(() => { + const arr = [ + { + label: "By Interaction", + value: formatNumberWithUnit(novaCategoryTotalPoints?.ecoPoints || 0), + }, + { + label: "By Referral", + value: formatNumberWithUnit( + novaCategoryTotalPoints?.referralPoints || 0 + ), + }, + ]; + if (novaCategoryTotalPoints?.otherPoints) { + arr.push({ + label: "By Other Activities", + value: formatNumberWithUnit(novaCategoryTotalPoints?.otherPoints || 0), + }); + } + return arr; + }, [novaCategoryTotalPoints]); + + const holdingPointsTooltips = useMemo(() => { + const arr = [ + { + label: "By Interaction", + value: formatNumberWithUnit(holdingPoints?.userEcoPoints || 0), + }, + { + label: "By Referral", + value: formatNumberWithUnit(holdingPoints?.userReferralPoints || 0), + }, + ]; + + if (tabActive?.category === "holding") { + arr.push({ + label: "By Other Activities", + value: formatNumberWithUnit(holdingPoints?.userOtherPoints || 0), + }); + } + + return arr; + }, [holdingPoints, tabActive]); + + return ( + +
+ Total Sector Allocated Points + +
+ Sector Allocated Points +
+ {categoryPointsTooltips.map((item, index) => ( +
+ + {item.label} + + + {item.value} + +
+ ))} +
+ } + > + + {formatNumberWithUnit( + (novaCategoryTotalPoints?.ecoPoints || 0) + + (novaCategoryTotalPoints?.referralPoints || 0) + + (novaCategoryTotalPoints?.otherPoints || 0) + )} + + +
+
+
+ Your Sector Points + +
+ Your Sector Points +
+ {holdingPointsTooltips.map((item, index) => ( +
+ + {item.label} + + + {item.value} + +
+ ))} +
+ } + > + + {formatNumberWithUnit(holdingPoints?.userTotalPoints || 0)} + + +
+ + ); +} diff --git a/src/components/DashboardS2/Tabs/Assets.tsx b/src/components/DashboardS2/Tabs/Assets.tsx index c911a783..d048691d 100644 --- a/src/components/DashboardS2/Tabs/Assets.tsx +++ b/src/components/DashboardS2/Tabs/Assets.tsx @@ -26,6 +26,7 @@ import { SearchIcon } from "@/components/SearchIcon"; import BridgeComponent from "@/components/Bridge"; import { NovaPointsListItem } from "@/pages/DashboardS2/index2"; import SectorHeader from "./SectorHeader"; +import AllocatedPoints from "./AllocatedPoints"; const Container = styled.div` .holding-title { @@ -92,7 +93,6 @@ const List = styled.div` } .list-content-item { - padding: 16px 28px; color: var(--Neutral-1, #fff); font-family: Satoshi; font-size: 14px; @@ -154,6 +154,7 @@ const List = styled.div` } .col-line { + min-width: 1px; width: 1px; height: 44px; opacity: 0.3; @@ -453,184 +454,231 @@ export default function Assets(props: IAssetsTableProps) { totalTvl={currentTvl} /> - -
-
Token
-
Points Booster
-
Nova TVL
-
Your Holding
-
- - } - onClear={() => { - setSearchValue(""); - }} - onValueChange={setSearchValue} - /> +
+ + } + onClear={() => { + setSearchValue(""); + }} + onValueChange={setSearchValue} + /> +
+ +
+ +
+
Token
+
Points Booster
+
Nova TVL
+
Your Holding
+
+ + } + onClear={() => { + setSearchValue(""); + }} + onValueChange={setSearchValue} + /> +
-
-
- {filterTableList.map((item, index) => ( -
-
- {item?.iconURL && ( - - )} -
-
{item?.symbol}
- {item?.isNova && ( -
Merged Token
+
+ {filterTableList.map((item, index) => ( +
+
+ {item?.iconURL && ( + )} +
+
{item?.symbol}
+ {item?.isNova && ( +
Merged Token
+ )} +
-
-
-
- - {item?.multipliers && Array.isArray(item.multipliers) - ? findClosestMultiplier(item?.multipliers) - : 0} - x Boost - -
-
- -
- {item.symbol === "ZKL" ? ( - "-" - ) : ( - <> - {formatNumberWithUnit(item?.totalAmount)} - - ({formatNumberWithUnit(item?.totalTvl, "$")}) - - - )} -
-
- -
- {" "} - {formatNumberWithUnit(item?.amount)} -
-
- -
- Action: - {item.symbol === "ZKL" ? ( - - - - Buy Now - - - - -
{ - window.open( - "https://novaswap.fi/#/swap", - "_blank" - ); - }} - > - Buy from Novaswap - -
- - - -
{ - window.open( - "https://izumi.finance/trade/swap?chainId=810180", - "_blank" - ); - }} - > - Buy from izumi - -
- - - - ) : item?.isNova ? ( - - - - Participate +
+
+ + {item?.multipliers && Array.isArray(item.multipliers) + ? findClosestMultiplier(item?.multipliers) + : 0} + x Boost + +
+
+ +
+ {item.symbol === "ZKL" ? ( + "-" + ) : ( + <> + {formatNumberWithUnit(item?.totalAmount)} + + ({formatNumberWithUnit(item?.totalTvl, "$")}) - - + )} +
+
+ +
+ {" "} + {formatNumberWithUnit(item?.amount)} +
+
+ +
+ Action: + {item.symbol === "ZKL" ? ( + + + + Buy Now + + + + +
{ + window.open( + "https://novaswap.fi/#/swap", + "_blank" + ); + }} + > + Buy from Novaswap + +
+ + + +
{ + window.open( + "https://izumi.finance/trade/swap?chainId=810180", + "_blank" + ); + }} + > + Buy from izumi + +
+ + + + ) : item?.isNova ? ( + + + + Participate + + + + +
{ + console.log("item: ", item); + handleBridgeMore(item?.symbol); + }} + > + Bridge Now + +
+ + + +
{ + window.open( + "https://zklink.io/merge", + "_blank" + ); + }} + > + Merge Now + +
+ + + + ) : ( + { + console.log("item: ", item); + handleBridgeMore(item?.symbol); }} > - -
{ - console.log("item: ", item); - handleBridgeMore(item?.symbol); - }} - > - Bridge Now - -
- - - -
{ - window.open("https://zklink.io/merge", "_blank"); - }} - > - Merge Now - -
- - - - ) : ( - { - console.log("item: ", item); - handleBridgeMore(item?.symbol); - }} - > - Bridge Now - - )} + Bridge Now + + )} +
-
- ))} -
- + ))} +
+ +
+ +
+ +
{data.details.map((detail, index) => (
-
+
Booster
{detail.booster}
-
+
Description
{detail.description} @@ -500,55 +503,59 @@ const EcoDApp = (props: {
-
Action
- {detail.actionLinks ? ( - - -
-
- {detail.action} +
+
Action
+ {detail.actionLinks ? ( + + +
+
+ {detail.action} +
+
- + + + {detail.actionLinks.map((link, index) => ( + handleLink(link)} + > + {link} + + ))} + + + ) : ( +
+
+ handleLink(detail.actionLink || data.link) + } + > + {detail.action}
- - - {detail.actionLinks.map((link, index) => ( - handleLink(link)} - > - {link} - - ))} - - - ) : ( -
-
handleLink(detail.actionLink || data.link)} - > - {detail.action} +
- -
- )} + )} +
))} @@ -1260,42 +1267,54 @@ export default function EcoDApps({ tvlCategoryMilestone={tvlCategoryMilestone} /> - -
-
Protocol
-
-
Points Booster
-
Rewards
-
Allocated Points
-
-
- Roulette - - - +
+ +
+
Protocol
+
+
Points Booster
+
Rewards
+
+ Allocated Points +
+
+
+ Roulette + + + +
+
-
-
-
- {ecoDAppsList.map((item, index) => ( - - ))} -
- +
+ {ecoDAppsList.map((item, index) => ( + + ))} +
+ +
+ +
+ +
- +
@@ -1312,14 +1331,14 @@ export default function EcoDApps({
-

+

You are about to access a third-party website. Please do your own research (DYOR) and avoid engaging in unfamiliar activities. Please note that zkLink and its affiliates are not liable for any losses, damages, or other consequences arising from your use of third-party websites.

-
+
+
diff --git a/src/components/DashboardS2/Tabs/PortfolioComponents/SbtNFT.tsx b/src/components/DashboardS2/Tabs/PortfolioComponents/SbtNFT.tsx index 50d43472..0518a623 100644 --- a/src/components/DashboardS2/Tabs/PortfolioComponents/SbtNFT.tsx +++ b/src/components/DashboardS2/Tabs/PortfolioComponents/SbtNFT.tsx @@ -12,8 +12,6 @@ export const NftContainer = styled.div` border-radius: 24px; border: 2px solid #635f5f; background: var(--Background, #000811); - height: 180px; - display: flex; padding: 14px 16px; align-items: center; justify-content: space-between; @@ -119,7 +117,7 @@ export default function SbtNFT() { }, [mintModal, nft, fetchLoading]); return ( - +
diff --git a/src/components/DashboardS2/Tabs/PortfolioComponents/TrademarkNFT.tsx b/src/components/DashboardS2/Tabs/PortfolioComponents/TrademarkNFT.tsx index 5478e4dd..269d6e15 100644 --- a/src/components/DashboardS2/Tabs/PortfolioComponents/TrademarkNFT.tsx +++ b/src/components/DashboardS2/Tabs/PortfolioComponents/TrademarkNFT.tsx @@ -19,9 +19,8 @@ const Item = styled.div` border: 2px solid #635f5f; background: #151923; margin-bottom: 18px; - height: 80px; padding: 16px 20px; - & > img { + .icon { width: 56px; height: 56px; flex-shrink: 0; @@ -76,6 +75,18 @@ const Item = styled.div` -webkit-text-fill-color: transparent; } } + + .row-line { + width: 100%; + height: 1px; + opacity: 0.3; + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(251, 251, 251, 0.6) 51.5%, + rgba(255, 255, 255, 0) 100% + ); + } `; const ALL_NFTS = [ @@ -117,18 +128,28 @@ export default function TrademarkNFT() { return ( {nftData.map((item, index) => ( - - {item.name} -
-

- {item.name} ({item.balance}) -

-

- You can earn {item.name} by participating in the daily roulette or - purchasing from OKX -

+ +
+ {item.name} + +
+

+ {item.name} ({item.balance}) +

+

+ You can earn {item.name} by participating in the daily roulette + or purchasing from OKX +

+
-
+ +
+ +
Action: -
-
- Your Nova Points +
+
+ Your Nova Points
-
+
{epochList[epochActive]?.time && ( {epochList[epochActive].time} @@ -527,104 +525,106 @@ export default function Portfolio({
-
- {novaPointsList.map((item, index) => ( - -

{item.name}

- {/*
*/} - - {epochActive === 0 && ( -
- <> -
- Sector in {epochList[epochActive].name} -
- -
- +
+
+ {novaPointsList.map((item, index) => ( + +

{item.name}

+ {/*
*/} + + {epochActive === 0 && ( +
+ <> +
+ Sector in {epochList[epochActive].name} +
+ +
+ +
+ )} + +
+ Your Sector Points in {epochList[epochActive].name}
- )} - -
- Your Sector Points in {epochList[epochActive].name} +
- -
- } - > -

- {formatNumberWithUnit(item.userTotalPoints)} -

- -
- -
- - ))} +

+ {formatNumberWithUnit(item.userTotalPoints)} +

+ +
+ +
+ + ))} +
-
- Your Project Points -
+
+ Your Project Points +
{`Hide Points < 0.1`}
- -
- {projectPointsList.map((item, index) => ( -
-
- {item?.iconURL && ( - - )} -
-
- Your Nova NFTs +
+ Your Nova NFTs
-
- - +
+
+ + +
+ ); diff --git a/src/components/DashboardS2/Tabs/SectorHeader.tsx b/src/components/DashboardS2/Tabs/SectorHeader.tsx index 0e66a575..e14a4cdd 100644 --- a/src/components/DashboardS2/Tabs/SectorHeader.tsx +++ b/src/components/DashboardS2/Tabs/SectorHeader.tsx @@ -1,65 +1,11 @@ import { NovaCategoryPoints, TvlCategoryMilestone } from "@/api"; import { NovaPointsListItem } from "@/pages/DashboardS2/index2"; -import { formatNumberWithUnit, formatToThounds } from "@/utils"; +import { formatToThounds } from "@/utils"; import { Tooltip } from "@nextui-org/react"; import { useEffect, useMemo, useState } from "react"; import styled from "styled-components"; import MilestoneProgress from "../MilestoneProgress"; - -const AllocatedBox = styled.div` - padding: 16px 28px; - min-width: 419px; - border-radius: 16px; - filter: blur(0.125px); - border: 2px solid transparent; - background-clip: padding-box, border-box; - background-origin: padding-box, border-box; - background-image: linear-gradient(to right, #282828, #000000), - linear-gradient( - 175deg, - #fb2450 1%, - #fbc82e 5%, - #6eee3f, - #5889f3, - #5095f1, - #b10af4 - ); - - .label { - color: var(--Neutral-2, rgba(251, 251, 251, 0.6)); - text-align: center; - font-family: Satoshi; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: normal; - } - - .value { - text-align: right; - font-family: Satoshi; - font-size: 24px; - font-style: normal; - font-weight: 900; - line-height: normal; - background: linear-gradient(180deg, #fff 0%, #bababa 100%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - - .line { - margin: 12px auto; - width: 100%; - height: 1px; - background: linear-gradient( - 90deg, - rgba(255, 255, 255, 0) 0%, - rgba(251, 251, 251, 0.6) 51.5%, - rgba(255, 255, 255, 0) 100% - ); - } -`; +import AllocatedPoints from "./AllocatedPoints"; const MilestoneBox = styled.div` color: rgba(251, 251, 251, 0.6); @@ -231,50 +177,6 @@ export default function SectorHeader({ } }, [milestoneProgressList]); - const categoryPointsTooltips = useMemo(() => { - const arr = [ - { - label: "By Interaction", - value: formatNumberWithUnit(novaCategoryTotalPoints?.ecoPoints || 0), - }, - { - label: "By Referral", - value: formatNumberWithUnit( - novaCategoryTotalPoints?.referralPoints || 0 - ), - }, - ]; - if (novaCategoryTotalPoints?.otherPoints) { - arr.push({ - label: "By Other Activities", - value: formatNumberWithUnit(novaCategoryTotalPoints?.otherPoints || 0), - }); - } - return arr; - }, [novaCategoryTotalPoints]); - - const holdingPointsTooltips = useMemo(() => { - const arr = [ - { - label: "By Interaction", - value: formatNumberWithUnit(holdingPoints?.userEcoPoints || 0), - }, - { - label: "By Referral", - value: formatNumberWithUnit(holdingPoints?.userReferralPoints || 0), - }, - ]; - - if (tabActive?.category === "holding") { - arr.push({ - label: "By Other Activities", - value: formatNumberWithUnit(holdingPoints?.userOtherPoints || 0), - }); - } - - return arr; - }, [holdingPoints, tabActive]); - useEffect(() => { if (!tabActive) return; console.log("tabActive", tabActive); @@ -331,9 +233,9 @@ export default function SectorHeader({ return ( <> -
+
-
+
{formatToThounds(currentAllocationZKL)} $ZKL{" "} +
(Up to {formatToThounds(maxZKL)} $ZKL)
{!isNoProgress ? ( @@ -369,77 +272,13 @@ export default function SectorHeader({ "" )}
- -
- Total Sector Allocated Points - -
- Sector Allocated Points -
- {categoryPointsTooltips.map((item, index) => ( -
- - {item.label} - - - {item.value} - -
- ))} -
- } - > - - {formatNumberWithUnit( - (novaCategoryTotalPoints?.ecoPoints || 0) + - (novaCategoryTotalPoints?.referralPoints || 0) + - (novaCategoryTotalPoints?.otherPoints || 0) - )} - - -
-
-
- Your Sector Points - -
- Your Sector Points -
- {holdingPointsTooltips.map((item, index) => ( -
- - {item.label} - - - {item.value} - -
- ))} -
- } - > - - {formatNumberWithUnit(holdingPoints?.userTotalPoints || 0)} - - -
- +
+ +
@@ -457,7 +296,7 @@ export default function SectorHeader({ : "TVL: "} ${formatToThounds(currentTvl)}
-
+
{isMaxProgress ? ( Max ) : ( diff --git a/src/components/DashboardS2/ZKLClaimAd.tsx b/src/components/DashboardS2/ZKLClaimAd.tsx index 4e27d2d4..caef4cc4 100644 --- a/src/components/DashboardS2/ZKLClaimAd.tsx +++ b/src/components/DashboardS2/ZKLClaimAd.tsx @@ -106,7 +106,7 @@ export default function ZKLClaimAd() { return (
diff --git a/src/components/DrawAnimation/index.tsx b/src/components/DrawAnimation/index.tsx index d6393f75..276a66c3 100644 --- a/src/components/DrawAnimation/index.tsx +++ b/src/components/DrawAnimation/index.tsx @@ -50,7 +50,7 @@ const S2PointsCard = styled.div` min-width: 381px; width: 381px; height: 381px; - display: block; + /* display: block; */ } .img-bg { @@ -62,6 +62,9 @@ const S2PointsCard = styled.div` /* height: 120px; */ height: auto; background: #151923; + @media screen and (max-width: 768px) { + padding: 12px; + } } .item-name { width: 100%; @@ -163,7 +166,6 @@ const LotteryAnimation = React.forwardRef((props, ref) => { />
Image 1 diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 5c315dc1..93075d01 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -451,7 +451,6 @@ export default function Header() { className="max-w-[150px] md:max-w-[145.431px] h-auto" src="/img/NOVA.svg" /> - {/* zk.Link */} {/* @@ -684,9 +683,10 @@ export default function Header() { {/* */} - + + {showAccount(address, 2, 4)} + + {showAccount(address)} @@ -787,13 +787,13 @@ export default function Header() { - + - About + Governance diff --git a/src/components/NovaNetworkTVL/index.tsx b/src/components/NovaNetworkTVL/index.tsx index 032d1cfd..abcae5c9 100644 --- a/src/components/NovaNetworkTVL/index.tsx +++ b/src/components/NovaNetworkTVL/index.tsx @@ -1,6 +1,20 @@ import { GradientBox } from "@/styles/common"; import TotalTvlCard from "../TotalTvlCard"; import SocialMedia from "../SocialMedia"; +import styled from "styled-components"; + +const DescText = styled.div` + margin: 0 auto 46px; + text-align: center; + width: 352px; + color: var(--Neutral-2, rgba(251, 251, 251, 0.6)); + text-align: center; + font-family: Satoshi; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 160%; /* 22.4px */ +`; export default function NovaNetworkTVL({ name = "zkLink Nova Network TVL", @@ -8,7 +22,7 @@ export default function NovaNetworkTVL({ name?: string; }) { return ( -
+
{name} @@ -17,6 +31,10 @@ export default function NovaNetworkTVL({
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore . +
diff --git a/src/components/ReferralModal.tsx b/src/components/ReferralModal.tsx index 89198849..2a830285 100644 --- a/src/components/ReferralModal.tsx +++ b/src/components/ReferralModal.tsx @@ -100,7 +100,7 @@ const ReferralModal = () => { return ( <> - + + Be sure to follow us here - - - - - - - - - - - - - - - + + ); } diff --git a/src/components/ThirdPartyBridge.tsx b/src/components/ThirdPartyBridge.tsx index b3c950e6..315951a1 100644 --- a/src/components/ThirdPartyBridge.tsx +++ b/src/components/ThirdPartyBridge.tsx @@ -6,7 +6,6 @@ import { DefaultBtn, Line } from "./Bridge/Components"; const Title = styled.div` color: var(--Neutral-1, #fff); font-family: Satoshi; - font-size: 24px; font-style: normal; font-weight: 900; line-height: normal; @@ -16,6 +15,14 @@ const ListCard = styled.a` border-radius: 16px; border: 2.205px solid #635f5f; background: #151923; + .desc { + @media screen and (max-width: 768px) { + max-width: 100px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } `; const ColLine = styled.div` @@ -95,16 +102,18 @@ export default function ThridPartyBridge() { return (
- Earn Extra Nova Points by deposit from third-party bridges! + + Earn Extra Nova Points by deposit from third-party bridges! + {bridges.map((bridge, index) => ( -
+
{bridge.name} {bridge.name}
-
+
{bridge.desc}
@@ -124,7 +133,9 @@ export default function ThridPartyBridge() {
{bridge.points && ( - {bridge.points} + + {bridge.points} + )} diff --git a/src/components/TotalTvlCard.tsx b/src/components/TotalTvlCard.tsx index 3717f59b..e45244a1 100644 --- a/src/components/TotalTvlCard.tsx +++ b/src/components/TotalTvlCard.tsx @@ -17,6 +17,12 @@ const TvlBox = styled.div` background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; + + @media screen and (max-width: 768px) { + font-size: 46px; + width: 32px; + height: 50px; + } } `; @@ -55,18 +61,16 @@ export default function TotalTvlCard() { }, []); return ( - + $ {tvlArr.map((item, index) => ( {item} diff --git a/src/pages/About/index2.tsx b/src/pages/About/index2.tsx index 0ea47bd5..306cb754 100644 --- a/src/pages/About/index2.tsx +++ b/src/pages/About/index2.tsx @@ -19,15 +19,13 @@ const Title = styled.h1` color: #fff; text-align: center; font-family: Satoshi; - font-size: 56px; font-style: normal; font-weight: 900; - line-height: 70px; /* 125% */ + line-height: normal; letter-spacing: -0.168px; `; const CardBox = styled.div` - padding: 24px 30px; border-radius: 24px; border: 2px solid #635f5f; background: #151923; @@ -113,6 +111,17 @@ const CardBox = styled.div` } } } + + @media screen and (max-width: 768px) { + .card-title { + font-size: 16px; + line-height: 1.2; + } + .paragraph { + font-size: 14px; + line-height: 26px; + } + } `; const Underline = styled.div` @@ -157,7 +166,7 @@ const CollapseCard = ({ return ( @@ -391,19 +400,23 @@ export default function About() { ]; return ( - - About zkLink Nova Aggregation Parade + +
+ + About zkLink Nova Aggregation Parade + -
- {list.map((item, index) => ( - - ))} +
+ {list.map((item, index) => ( + + ))} +
diff --git a/src/pages/AggregationParade/SoftKYC.tsx b/src/pages/AggregationParade/SoftKYC.tsx index 4e9b04f2..c57f55cf 100644 --- a/src/pages/AggregationParade/SoftKYC.tsx +++ b/src/pages/AggregationParade/SoftKYC.tsx @@ -65,14 +65,12 @@ const Container = styled.div` background-size: cover; background-position: top; @media (max-width: 768px) { - background: linear-gradient( - 0deg, - rgba(102, 154, 255, 0.56) 0%, - rgba(12, 14, 17, 0.56) 100% - ); + background-image: url("/img/s2/bg-s2-kyc-h5.png"); + .carBox { width: 100%; flex-direction: column; + gap: 10px; height: auto; padding: 1.5rem; .input-wrap { @@ -630,8 +628,8 @@ export default function SoftKYC() { {isLoading && }
{/* Title */} -
-
+
+
You're Almost There @@ -685,7 +683,7 @@ export default function SoftKYC() { />
{ navigate("/bridge"); }} @@ -796,7 +794,7 @@ export default function SoftKYC() { { verifyDepositModal.onOpen(); diff --git a/src/pages/Bridge/index.tsx b/src/pages/Bridge/index.tsx index 7b2c774a..c420b545 100644 --- a/src/pages/Bridge/index.tsx +++ b/src/pages/Bridge/index.tsx @@ -15,7 +15,6 @@ export const Container = styled.div` position: relative; padding-top: 100px; width: 100%; - min-width: 1440px; min-height: 1498px; background-image: url("/img/s2/bg-s2-bridge.jpg"); background-repeat: no-repeat; @@ -43,7 +42,6 @@ const Link = styled.span` const Title = styled.h1` font-family: Satoshi; - font-size: 44.103px; font-style: normal; font-weight: 900; line-height: normal; @@ -66,7 +64,6 @@ const SubTitle = styled.p` const Title2 = styled.h2` color: var(--Neutral-2, rgba(251, 251, 251, 0.6)); font-family: Satoshi; - font-size: 32px; font-style: normal; font-weight: 700; line-height: 46px; /* 143.75% */ @@ -114,7 +111,7 @@ export default function Bridge() { const NftIntroduction = () => ( -

+

Nova NFT Introduction

@@ -149,7 +146,7 @@ export default function Bridge() { const SeasonTwo = () => ( -

+

Aggregation Parade Season II

@@ -177,27 +174,33 @@ export default function Bridge() { ); return ( - -
-
- zk.Link Nova - + +
+
+ + zk.Link Nova + + The Industry's Leading L3 Aggregating Fragmented Liquidity Across Ethereum - + Bridge to zkLink Nova to Earn Nova Points & $ZKL + +
+ +
-
+
-
+
diff --git a/src/pages/DashboardS2/index2.tsx b/src/pages/DashboardS2/index2.tsx index 03e8c9b9..ed093b6b 100644 --- a/src/pages/DashboardS2/index2.tsx +++ b/src/pages/DashboardS2/index2.tsx @@ -25,10 +25,10 @@ import Portfolio from "@/components/DashboardS2/Tabs/Protfolio"; import DailyRoulette from "@/components/DashboardS2/DailyRoulette"; import { Tooltip } from "@nextui-org/react"; import { epochList } from "@/constants/epoch"; -import PremiusAd from "@/components/DashboardS2/PremiusAd"; import ZKLClaimAd from "@/components/DashboardS2/ZKLClaimAd"; import MysteryBoxIII from "@/components/Dashboard/MysteryBoxIII"; -import GoogleRecaptcha from "@/components/GoogleRecaptcha"; +import { GradientBox } from "@/styles/common"; + export type TotalTvlItem = { symbol: string; tokenAddress: string; @@ -55,77 +55,11 @@ const Container = styled.div` background: url("/img/bg-s2-dashboard.jpg") no-repeat; background-size: 100%; background-position: center top; -`; - -const CardBox = styled.div` - padding: 23px 32px; - /* background: #000811; */ - border-radius: 24px; - border: 2px solid transparent; - background-clip: padding-box, border-box; - background-origin: padding-box, border-box; - background-image: linear-gradient(to bottom, #000000, #282828), - linear-gradient( - 175deg, - #fb2450 1%, - #fbc82e, - #6eee3f, - #5889f3, - #5095f1, - #b10af4 - ); - .rewards { - color: #fff; - font-family: Satoshi; - font-size: 19.033px; - font-style: normal; - font-weight: 900; - line-height: 110%; /* 20.936px */ - } - .rewards-line { - margin: 12px 0 18px; - width: 438.813px; - height: 1.057px; - background: linear-gradient( - 90deg, - rgba(255, 255, 255, 0) 0%, - rgba(251, 251, 251, 0.6) 51.5%, - rgba(255, 255, 255, 0) 100% - ); - } - .prize { - color: #fff; - font-family: Satoshi; - font-size: 46.525px; - font-style: normal; - font-weight: 900; - line-height: 110%; /* 51.177px */ - } - .zkl { - text-align: right; - font-family: Satoshi; - font-size: 109.968px; - font-style: normal; - font-weight: 900; - line-height: 110%; /* 120.964px */ - background: linear-gradient(180deg, #fff 0%, #bababa 100%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - .zkl-num { - text-align: center; - font-family: Satoshi; - font-size: 160.289px; - font-style: normal; - font-weight: 900; - line-height: normal; - letter-spacing: 16px; - background: linear-gradient(180deg, #fff 0%, #bababa 100%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; + @media only screen and (max-width: 768px) { + max-width: 100%; + padding-left: 16px; + padding-right: 16px; } `; @@ -190,6 +124,39 @@ const CardBox2 = styled.div` } `; +const PrizePoolBoxH5 = styled(GradientBox)` + color: var(--Neutral-1, #fff); + font-family: Satoshi; + font-style: normal; + font-weight: 900; + line-height: 110%; /* 22px */ + + .num { + margin-top: 12px; + margin-bottom: 32px; + text-align: center; + font-family: Satoshi; + font-size: 46.085px; + font-style: normal; + font-weight: 900; + line-height: normal; + background: linear-gradient(180deg, #fff 0%, #bababa 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +`; + +const Line = styled.div` + height: 1px; + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(251, 251, 251, 0.6) 51.5%, + rgba(255, 255, 255, 0) 100% + ); +`; + const TabsCard = styled.div` .tab-item { /* margin-bottom: -24px; */ @@ -597,14 +564,54 @@ export default function Dashboard() { getCategoryZKLFunc(); }, [address, season]); + const allSupportedPoints = [ + { + name: "Nova Points", + iconURL: "/img/icon-rewards-nova.svg", + }, + { + name: "Linea LXP-L", + iconURL: "/img/icon-rewards-linea.svg", + }, + { + name: "Eigenlayer Points", + iconURL: "/img/icon-rewards-eigenlayer.svg", + }, + { + name: "Puffer Points", + iconURL: "/img/icon-rewards-puffer.svg", + }, + { + name: "Renzo Points", + iconURL: "/img/icon-rewards-renzo.svg", + }, + { + name: "Eigenpie Points", + iconURL: "/img/icon-rewards-eigenpie.svg", + }, + { + name: "KelpDAO Miles", + iconURL: "/img/icon-rewards-kelp.svg", + }, + { + name: "Allspark Points", + iconURL: "/img/icon-rewards-allspark.svg", + }, + { + name: "L.Points", + iconURL: "/img/icon-rewards-layerbank.svg", + }, + ]; + return ( -
+
{/* */}
-
+ +
@@ -618,7 +625,7 @@ export default function Dashboard() { Total Prize Pool
-
+
The 30 million $ZKL will be distributed over at least Three Epochs. @@ -654,44 +661,7 @@ export default function Dashboard() {
All Supported Points
- {[ - { - name: "Nova Points", - iconURL: "/img/icon-rewards-nova.svg", - }, - { - name: "Linea LXP-L", - iconURL: "/img/icon-rewards-linea.svg", - }, - { - name: "Eigenlayer Points", - iconURL: "/img/icon-rewards-eigenlayer.svg", - }, - { - name: "Puffer Points", - iconURL: "/img/icon-rewards-puffer.svg", - }, - { - name: "Renzo Points", - iconURL: "/img/icon-rewards-renzo.svg", - }, - { - name: "Eigenpie Points", - iconURL: "/img/icon-rewards-eigenpie.svg", - }, - { - name: "KelpDAO Miles", - iconURL: "/img/icon-rewards-kelp.svg", - }, - { - name: "Allspark Points", - iconURL: "/img/icon-rewards-allspark.svg", - }, - { - name: "L.Points", - iconURL: "/img/icon-rewards-layerbank.svg", - }, - ].map((item, index) => ( + {allSupportedPoints.map((item, index) => (
+
+ +
+ Prize Pool + $ZKL +
+
30,000,000
+
+ Rewards gathered so far from there companies +
+ +
+ {allSupportedPoints.map((item, index) => ( + + + + ))} +
+ +
+
-
+
{tabs2.map((tab, index) => (
setTabs2Active(index)} @@ -754,7 +749,7 @@ export default function Dashboard() { } 24px 24px`, }} > -
+
{tabs2Active === 0 && ( {isLoading && } - {/* Title */} - -
- - Welcome To zkLink Nova - -
-
-

- The ONLY Aggregated L3 with added yield for -

-
-
- -
-
ETH
-
Stablecoins
-
LSTs
-
LRTs
-
L2 Native Assets
-
- -
-

- Bridge to earn Mega Yield and $ZKL on zkLink Nova -

- - - {/* Form: Invite code */} - - -

- Enter Your Invite Code -

-

- To participate in the campaign +

+ {/* Title */} + +
+ + Welcome To zkLink Nova + +
+
+

+ The ONLY Aggregated L3 with added yield for +

+
+
+ +
+
ETH
+
Stablecoins
+
LSTs
+
LRTs
+
L2 Native Assets
+
+ +
+

+ Bridge to earn Mega Yield and $ZKL on zkLink Nova

-
- {separator}} - value={otp} - placeholder={placeholder} - inputType={inputType} - renderInput={(props) => } - shouldAutoFocus - /> -
+ {/* Form: Invite code */} + + +

+ Enter Your Invite Code +

+

+ To participate in the campaign +

+ + +
+ {separator}} + value={otp} + placeholder={placeholder} + inputType={inputType} + renderInput={(props) => } + shouldAutoFocus + /> +
-
- Join our{" "} - - Discord - {" "} - or search{" "} - - #zkLinkNovaAggParade - {" "} - on twitter for invite code -
+
+ Join our{" "} + + Discord + {" "} + or search{" "} + + #zkLinkNovaAggParade + {" "} + on twitter for invite code +
-
- - - Submit - -
- +
+ + + Submit + +
+ +
diff --git a/src/pages/Leaderboard/index.tsx b/src/pages/Leaderboard/index.tsx index 7cf57208..1fddb035 100644 --- a/src/pages/Leaderboard/index.tsx +++ b/src/pages/Leaderboard/index.tsx @@ -27,7 +27,6 @@ const Container = styled.div` const Title = styled.div` font-family: Satoshi; - font-size: 48px; font-style: normal; font-weight: 900; line-height: normal; @@ -232,6 +231,10 @@ const ContentBox = styled.div` ); cursor: pointer; white-space: nowrap; + @media screen and (max-width: 768px) { + padding-left: 20px; + padding-right: 20px; + } &.active { position: relative; @@ -330,7 +333,6 @@ const ContentBox = styled.div` .tab-content { position: relative; - min-width: 1240px; z-index: 2; .th-item { @@ -340,6 +342,7 @@ const ContentBox = styled.div` font-style: normal; font-weight: 500; line-height: normal; + white-space: nowrap; } .item-rank { @@ -384,7 +387,6 @@ const ContentBox = styled.div` &.item-rank { color: var(--Neutral-1, #fff); font-family: Satoshi; - font-size: 32px; font-style: normal; font-weight: 900; line-height: normal; @@ -392,14 +394,12 @@ const ContentBox = styled.div` &.item-user { color: var(--Neutral-1, #fff); font-family: Satoshi; - font-size: 24px; font-style: normal; font-weight: 900; line-height: normal; } &.item-points { font-family: Satoshi; - font-size: 26px; font-style: normal; font-weight: 700; line-height: normal; @@ -414,6 +414,32 @@ const ContentBox = styled.div` -webkit-text-fill-color: transparent; } } + + @media screen and (max-width: 768px) { + /* .tr-item { + max-width: 800px; + } */ + .item-rank { + width: 100px; + } + .item-user { + padding: 0 15px; + width: 200px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .item-points { + /* margin-right: 24px; */ + padding: 0 15px; + width: 150px; + text-align: right; + } + .self-tag { + padding: 4px 8px; + font-size: 12px; + } + } } } `; @@ -429,6 +455,7 @@ const RowLine = styled.div` ); `; const ColLine = styled.div` + min-width: 1px; width: 1px; /* opacity: 0.3; */ background: linear-gradient( @@ -532,16 +559,18 @@ export default function Leaderboard() { return ( -
+
-
+
Leaderboard
- Points Leaderboard - + + Points Leaderboard + + The leaderboard is organized by sectors. In Season II, Nova Points will measure users' contributions to each sector. These points will determine the distribution of $ZKL rewards from each sector's @@ -549,8 +578,8 @@ export default function Leaderboard() {
- - + +
- -
-
+ +
+
{tabs.map((tab, index) => (
))}
- + Invite To Earn More @@ -642,53 +671,92 @@ export default function Leaderboard() { } 24px 24px`, }} > -
-
- Rank - User - - {tabs[tabActive].name} Points - -
- - - - {selfData && ( - -
- - {selfData.rank || "-"} - -
- - - {selfData.username} - You - - - - {formatNumberWithUnit(selfData.totalPoints)} - - - )} - - {categoryList.map((item, index) => ( -
- {item.rank} - - {item.username} - - - {formatNumberWithUnit(item.totalPoints)} +
+
+
+ Rank + User + + {tabs[tabActive].name} Points
- ))} + + + + {selfData && ( + +
+ + {selfData.rank || "-"} + +
+ + + {selfData.username} + You + + + + {formatNumberWithUnit(selfData.totalPoints)} + + + )} + + {categoryList.map((item, index) => ( +
+ + {item.rank} + + + + {item.username} + + + + {formatNumberWithUnit(item.totalPoints)} + +
+ ))} +
+ + + + Invite To Earn More + + + + {invite?.code} + + + + window.open( + `https://twitter.com/intent/tweet?text=${getTweetShareTextForMysteryBox( + invite?.code ?? "" + )}`, + "_blank" + ) + } + /> +
diff --git a/src/utils/index.ts b/src/utils/index.ts index 22bef894..8bf5e034 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -48,9 +48,9 @@ export async function postData(url = "", data = {}) { * @param acc * @returns */ -export const showAccount = (acc: any) => { +export const showAccount = (acc: any, start = 6, end = 4) => { if (!acc) return; - return `${acc.substr(0, 6)}...${acc.substr(-4)}`; + return `${acc.substr(0, start)}...${acc.substr(-end)}`; }; export type Deferrable = { [K in keyof T]: T[K] | Promise; diff --git a/vite.config.ts b/vite.config.ts index 80419bc0..9bc30499 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -47,8 +47,8 @@ export default defineConfig({ port: 3001, proxy: { "/app-api": { - // target: "https://goerli.app.zklink.io", - target: "https://app-api.zklink.io", + target: "https://goerli.app.zklink.io", + // target: "https://app-api.zklink.io", changeOrigin: true, rewrite: (path) => path.replace(/^\/app-api/, ""), },