From 638365a35810a26f9d819a8c36ed495df77f5cbf Mon Sep 17 00:00:00 2001
From: Austin Quinn <sdkay@sdkay.pw>
Date: Wed, 1 Feb 2023 15:25:14 -0600
Subject: [PATCH 1/2] Mobile optimization

---
 src/components/Leaderboard.jsx                |  6 +-
 src/components/LeaderboardRowMore.jsx         | 10 +--
 src/components/LeaderboardTableHeader.jsx     |  8 ++-
 .../LeaderboardTableHeaderSortable.jsx        |  6 +-
 src/components/LeaderboardTableRow.jsx        |  2 +-
 src/components/NFT.jsx                        | 72 +++++++++++++------
 src/components/NFTs.jsx                       |  2 +-
 7 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/src/components/Leaderboard.jsx b/src/components/Leaderboard.jsx
index 8257d5d..5fb3f08 100644
--- a/src/components/Leaderboard.jsx
+++ b/src/components/Leaderboard.jsx
@@ -44,11 +44,11 @@ export default function Leaderboard() {
   }
 
   return (
-    <div className="flex items-center justify-center flex-col">
-      <div className="md:w-[80rem]">
+    <div className="flex flex-col items-center justify-center">
+      <div className="w-full md:w-[80rem] md:p-0 p-2">
         <Loading isLoading={isLoading} />
         <Header refetch={refetch} />
-        <div className="flex justify-between">
+        <div className="flex items-center justify-between">
           <Filter setOption={setOption} resetRange={resetRange} />
           <Search
             owner={owner}
diff --git a/src/components/LeaderboardRowMore.jsx b/src/components/LeaderboardRowMore.jsx
index 58359f8..9ed1a60 100644
--- a/src/components/LeaderboardRowMore.jsx
+++ b/src/components/LeaderboardRowMore.jsx
@@ -35,10 +35,10 @@ export default function LeaderboardRowMore({ nft, setTxHash }) {
   return (
     <>
       <Menu>
-        <MenuButton as={Button} style={{ backgroundColor: "black" }}>
+        <MenuButton as={Button} style={{ backgroundColor: "black", zIndex: 0 }}>
           <MoreOutlined rotate={90} />
         </MenuButton>
-        <MenuList style={{ backgroundColor: "black" }}>
+        <MenuList style={{ backgroundColor: "black", zIndex: 1 }}>
           <MenuItem style={MENU_ITEM_STYLE} onClick={onOpenMoveDeposit}>
             <div className={`flex items-center justify-center gap-4`}>
               <MailOutlined />
@@ -69,11 +69,7 @@ export default function LeaderboardRowMore({ nft, setTxHash }) {
         <Liquidate nft={nft} onClose={onCloseLiquidate} setTxHash={setTxHash} />
       </Popup>
       <Popup isOpen={isOpenMoveDeposit} onClose={onCloseMoveDeposit}>
-        <Move
-          nft={nft}
-          onClose={onCloseMoveDeposit}
-          setTxHash={setTxHash}
-        />
+        <Move nft={nft} onClose={onCloseMoveDeposit} setTxHash={setTxHash} />
       </Popup>
       <Popup isOpen={isOpenSnipe} onClose={onCloseSnipe}>
         <Snipe nft={nft} onClose={onCloseSnipe} setTxHash={setTxHash} />
diff --git a/src/components/LeaderboardTableHeader.jsx b/src/components/LeaderboardTableHeader.jsx
index 37f79a0..9bbc67d 100644
--- a/src/components/LeaderboardTableHeader.jsx
+++ b/src/components/LeaderboardTableHeader.jsx
@@ -7,11 +7,17 @@ export default function LeaderboardTableHeader({ sortBy, setSortBy }) {
       <th>rank</th>
       <SortableHeader header="xp" sortBy={sortBy} setSortBy={setSortBy} />
       <th>value</th>
-      <SortableHeader header="deposit" sortBy={sortBy} setSortBy={setSortBy} />
+      <SortableHeader
+        header="deposit"
+        sortBy={sortBy}
+        setSortBy={setSortBy}
+        extraClasses={"hidden md:table-cell"}
+      />
       <SortableHeader
         header="withdrawn"
         sortBy={sortBy}
         setSortBy={setSortBy}
+        extraClasses={"hidden md:table-cell"}
       />
       <th className="hidden md:table-cell">Deposit Ratio</th>
       <th>Address</th>
diff --git a/src/components/LeaderboardTableHeaderSortable.jsx b/src/components/LeaderboardTableHeaderSortable.jsx
index 72580f9..81077ba 100644
--- a/src/components/LeaderboardTableHeaderSortable.jsx
+++ b/src/components/LeaderboardTableHeaderSortable.jsx
@@ -3,15 +3,17 @@ import {
   CaretUpOutlined,
   SwapOutlined,
 } from "@ant-design/icons";
+import cn from "classnames";
 
 export default function LeaderboardTableHeaderSortable({
   header,
   sortBy,
   setSortBy,
+  extraClasses,
 }) {
   return (
-    <th>
-      <div className="flex items-center justify-center gap-1">
+    <th className={cn(extraClasses ? extraClasses : "")}>
+      <div className={"flex items-center justify-center gap-1"}>
         <div>{header}</div>
         <SwapOutlined
           rotate={90}
diff --git a/src/components/LeaderboardTableRow.jsx b/src/components/LeaderboardTableRow.jsx
index 619817f..5d18ea0 100644
--- a/src/components/LeaderboardTableRow.jsx
+++ b/src/components/LeaderboardTableRow.jsx
@@ -32,7 +32,7 @@ export default function LeaderboardTableRow({
     <>
       {nft && (
         <tr
-          className="leaderboard-row"
+          className="transition-all leaderboard-row hover:scale-[1.01] text-sm md:text-base"
           style={{
             border: `1px solid ${
               status === STATUS.LIQUIDATABLE ? COLORS.Red : "#3A403C"
diff --git a/src/components/NFT.jsx b/src/components/NFT.jsx
index db85a65..141e558 100644
--- a/src/components/NFT.jsx
+++ b/src/components/NFT.jsx
@@ -159,28 +159,42 @@ export default function NFT({ tokenId }) {
           ${status === STATUS.LIQUIDATABLE && "shadow-lg shadow-[#800101]"}`}
         >
           <LoadingInplace isLoading={isLoadingTx || isFetching} />
-          <div className="flex gap-4 justify-between w-full">
-            <div className="md:w-[8rem]">
-              <div className="w-[107px]">
-                <img src={image} alt="" />
+          <div className="flex flex-col justify-between w-full gap-4 md:flex-row">
+            <div className="flex flex-row gap-4 md:w-full">
+              <div className="md:w-[8rem]">
+                <div className="w-[107px]">
+                  <img src={image} alt="" />
+                </div>
+              </div>
+              <div className="w-full">
+                <NftStats nft={nft} />
+                {nft.isActive && (
+                  <div className="mt-2">
+                    <Button
+                      borderColor="#463D81"
+                      bgColor="#0F0D1B"
+                      onClick={onOpenSync}
+                      isDisabled={isFetching || isFetchingTx}
+                    >
+                      Sync
+                    </Button>
+                  </div>
+                )}
               </div>
             </div>
-            <div className="w-full">
-              <NftStats nft={nft} />
-              {nft.isActive && (
-                <div className="mt-2">
-                  <Button
-                    borderColor="#463D81"
-                    bgColor="#0F0D1B"
-                    onClick={onOpenSync}
-                    isDisabled={isFetching || isFetchingTx}
-                  >
-                    Sync
-                  </Button>
+            <div className="flex flex-row w-full gap-8 md:w-min">
+              <Performance nft={nft} />
+              <div className="block w-full md:w-[0px] md:hidden">
+                <Label>Deposit Ratio</Label>
+                <div className="mt-3">
+                  <ProgressBar
+                    percent={parseInt(
+                      (nft.deposit / (nft.deposit + nft.withdrawn)) * 100
+                    )}
+                  />
                 </div>
-              )}
+              </div>
             </div>
-            <Performance nft={nft} />
           </div>
           <div className="hidden md:block md:w-full">
             <Label>Deposit Ratio</Label>
@@ -192,12 +206,12 @@ export default function NFT({ tokenId }) {
               />
             </div>
           </div>
-          <div className="flex gap-4 mt-4 md:mt-0">
+          <div className="flex justify-between gap-4 mt-4 md:justify-start md:mt-0">
             <div className="flex flex-col gap-2">
               <div className="flex flex-col gap-2 ">
                 <Label>Minted DYAD</Label>
                 <div className="md:flex">
-                  <div className="md:mr-2 mb-2 md:mb-0">
+                  <div className="mb-2 md:mr-2 md:mb-0">
                     {round((nft.deposit + nft.withdrawn) / 10 ** 18, 2)}
                   </div>
                   <Button
@@ -221,9 +235,9 @@ export default function NFT({ tokenId }) {
             </div>
             <div className="flex flex-col gap-2 ml-4 ">
               <Label>Deposited DYAD</Label>
-              <div className="flex flex-col gap-2">
+              <div className="flex flex-row gap-2 md:flex-col">
                 <div className="md:flex md:gap-2">
-                  <div className="md:mr-2 mb-2 md:mb-0">
+                  <div className="mb-2 md:mr-2 md:mb-0">
                     {Math.round((nft.deposit / 10 ** 18) * 100) / 100}
                   </div>
                   <div className="flex gap-2">
@@ -246,10 +260,22 @@ export default function NFT({ tokenId }) {
                     >
                       Withdraw
                     </Button>
+                    {isClaimable && nft.isActive && (
+                      <div className="flex md:hidden animate-claimPulse">
+                        <Button
+                          onClick={onOpenClaim}
+                          isDisabled={
+                            isFetching || isFetchingTx || isSafetyModeActivated
+                          }
+                        >
+                          Claim
+                        </Button>
+                      </div>
+                    )}
                   </div>
                 </div>
                 {isClaimable && nft.isActive && (
-                  <div className="flex gap-2 animate-claimPulse">
+                  <div className="hidden md:flex animate-claimPulse">
                     <Button
                       onClick={onOpenClaim}
                       isDisabled={
diff --git a/src/components/NFTs.jsx b/src/components/NFTs.jsx
index 250cae0..8c5376e 100644
--- a/src/components/NFTs.jsx
+++ b/src/components/NFTs.jsx
@@ -11,7 +11,7 @@ export default function NFTs() {
   return (
     <>
       {tokenIds.length > 0 ? (
-        <div>
+        <div className="w-full p-6 md:p-0 md:w-max">
           <div className="mb-2">Your dNFTs</div>
           <div className="flex flex-col gap-4">
             {tokenIds.map((tokenId) => {

From e6adc7fbfbad8f1fb83d05465670ddb3e3f1a878 Mon Sep 17 00:00:00 2001
From: Austin Quinn <sdkay@sdkay.pw>
Date: Wed, 1 Feb 2023 15:35:55 -0600
Subject: [PATCH 2/2] Claim mobile location fix

---
 src/components/NFT.jsx | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/components/NFT.jsx b/src/components/NFT.jsx
index 141e558..0f95b0b 100644
--- a/src/components/NFT.jsx
+++ b/src/components/NFT.jsx
@@ -235,7 +235,7 @@ export default function NFT({ tokenId }) {
             </div>
             <div className="flex flex-col gap-2 ml-4 ">
               <Label>Deposited DYAD</Label>
-              <div className="flex flex-row gap-2 md:flex-col">
+              <div className="flex flex-col gap-2">
                 <div className="md:flex md:gap-2">
                   <div className="mb-2 md:mr-2 md:mb-0">
                     {Math.round((nft.deposit / 10 ** 18) * 100) / 100}
@@ -260,22 +260,10 @@ export default function NFT({ tokenId }) {
                     >
                       Withdraw
                     </Button>
-                    {isClaimable && nft.isActive && (
-                      <div className="flex md:hidden animate-claimPulse">
-                        <Button
-                          onClick={onOpenClaim}
-                          isDisabled={
-                            isFetching || isFetchingTx || isSafetyModeActivated
-                          }
-                        >
-                          Claim
-                        </Button>
-                      </div>
-                    )}
                   </div>
                 </div>
                 {isClaimable && nft.isActive && (
-                  <div className="hidden md:flex animate-claimPulse">
+                  <div className="flex animate-claimPulse">
                     <Button
                       onClick={onOpenClaim}
                       isDisabled={