Merge pull request #353 from zkLinkProtocol/feat/mobile-ui

Feat/mobile UI
zkLinkProtocol · Aug 8, 2024 · 4789df1 · 4789df1
2 parents 330ada9 + d61a473
commit 4789df1
Show file tree

Hide file tree

Showing 33 changed files with 1,275 additions and 1,581 deletions.
diff --git a/public/img/s2/bg-s2-kyc-h5.png b/public/img/s2/bg-s2-kyc-h5.png
diff --git a/src/components/Bridge/BridgeCompMobile.tsx b/src/components/Bridge/BridgeCompMobile.tsx
diff --git a/src/components/Bridge/BridgeCompPc.tsx b/src/components/Bridge/BridgeCompPc.tsx
@@ -306,9 +306,9 @@ const BridgeCompPC = (props: IProps) => {
   };
 
   return (
-    <Container className="hidden md:block">
+    <Container>
       {/* <ContainerCover /> */}
-      <div className="tabs flex items-end justify-between gap-[16px]">
+      <div className="tabs flex items-end justify-between gap-[16px] overflow-x-auto overflow-y-hidden">
         {tabs.map((tab, index) => (
           <div
             className={`tab-item flex items-center justify-center gap-[16px] ${
@@ -342,24 +342,26 @@ const BridgeCompPC = (props: IProps) => {
           {tabActive === 0 && (
             <>
               <SelectBox className="px-6 py-6 md:px-6">
-                <div className="flex items-center gap-4">
-                  <span className="label">From</span>
-                  <GradientBox
-                    className="px-[16px] py-2 rounded-[100px] flex items-center gap-2 cursor-pointer"
-                    onClick={() => fromModal.onOpen()}
-                  >
-                    <img
-                      src={fromList[fromActive].icon}
-                      className="w-6 h-6 rounded-full"
-                    />
-                    <span>{fromList[fromActive].label}</span>
-                    <img
-                      src="/img/icon-arrow-down.svg"
-                      alt=""
-                      className={fromModal.isOpen ? "rotate-180" : ""}
-                    />
-                  </GradientBox>
-                  <div className="ml-auto flex items-center">
+                <div className="flex flex-col md:flex-row gap-[16px]">
+                  <div className="flex items-center gap-4">
+                    <span className="label">From</span>
+                    <GradientBox
+                      className="px-[16px] py-2 rounded-[100px] flex items-center gap-2 cursor-pointer"
+                      onClick={() => fromModal.onOpen()}
+                    >
+                      <img
+                        src={fromList[fromActive].icon}
+                        className="w-6 h-6 rounded-full"
+                      />
+                      <span>{fromList[fromActive].label}</span>
+                      <img
+                        src="/img/icon-arrow-down.svg"
+                        alt=""
+                        className={fromModal.isOpen ? "rotate-180" : ""}
+                      />
+                    </GradientBox>
+                  </div>
+                  <div className="md:ml-auto flex items-center">
                     <span className="label mr-2">Balance: </span>
                     <span className="balance">
                       {tokenFiltered[tokenActive]?.formatedBalance}

diff --git 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
@@ -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,
         }}
       />
-      {/* <BridgeCompMobile
-        {...{
-          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,
-        }}
-      /> */}
+
       {isFirstDeposit && address && txhashes[address]?.[0] && (
         <div>
           <Link

diff --git a/src/components/Dashboard/MysteryBoxIII.tsx b/src/components/Dashboard/MysteryBoxIII.tsx
@@ -294,7 +294,7 @@ export default function MysteryBoxIII() {
         isOpen={drawModal.isOpen}
         onOpenChange={drawModal.onOpenChange}
       >
-        <ModalContent className="mt-[2rem] py-4 md:px-4 h-[100vh] overflow-auto md:h-auto">
+        <ModalContent className="mt-[2rem] py-4 px-4 h-[100vh] overflow-auto h-auto">
           <ModalHeader className="px-0 pt-0 flex flex-col text-xl font-normal">
             Open the Mystery box
           </ModalHeader>

diff --git 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 (
-    <p>
+    <>
       Equivalent to depositing 1 ETH into Nova for {pointsMap[Number(points)]}.
-    </p>
+    </>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,9 +14,9 @@ export function getPointsRewardsTooltips(points: number) { @@
 : "~167 days",
       };
       return (
-        <p>
+        <>
           Equivalent to depositing 1 ETH into Nova for {pointsMap[Number(points)]}.
-        </p>
+        </>
       );
     }
@@ Expand Down @@