chore(release): 1.9.0 (#1761)

* feature(proof-of-backing): add proof of backing page (#1737) * feat: add header and nav menu * refactor: list of token backed and their addresses * feat: add desktop view table * feat: add mobile view cards Refactor token backed address constants to be ready for quantum * feat: add table bottom border radius Add margin bottom to table and card * refactor: throw undefined during error Update border color of more dropdown link * feat: use numeric format for thousand separator * fix: break words on mobile net supply * chore: add try catch to getAllToken * chore: remove grid-rows * feat: add quantum backing address For dETH, dBTC, dUSDC, dUSDT * feat: add dEUROC Display quantum back address in table and card * feat: display net supply even when token is not burnt Check if token isDAT and non-LPS to follow same logic in tokens/id page Update backing page UI to include info * chore: top align net supply * chore: add link to token detail page * chore: left-align net supply table header * fix: navigating to cake backed address Add text color to token and net supply on hover * fix(dex): dirty fix poolpair link on mobile (#1760) fix: dirty fix poolpair link on mobile TODO: refactor
DeFiCh · Mar 17, 2023 · 4557a81 · 4557a81
1 parent e4d7658
commit 4557a81
Show file tree

Hide file tree

Showing 8 changed files with 574 additions and 47 deletions.
diff --git a/src/constants/TokenBackedAddress.ts b/src/constants/TokenBackedAddress.ts
@@ -0,0 +1,123 @@
+interface BackedAddress {
+  [key: string]: {
+    cake: {
+      link: string;
+      address: string;
+    };
+    quantum?: {
+      link: string;
+      address: string;
+    };
+  };
+}
+
+export const TOKEN_BACKED_ADDRESS: BackedAddress = {
+  BTC: {
+    cake: {
+      link: "https://www.blockchain.com/btc/address/38pZuWUti3vSQuvuFYs8Lwbyje8cmaGhrT",
+      address: "38pZuWUti3vSQuvuFYs8Lwbyje8cmaGhrT",
+    },
+    quantum: {
+      link: "https://etherscan.io/address/0x11901fd641f3a2d3a986d6745a2ff1d5fea988eb",
+      address: "0x11901fd641f3a2d3a986d6745a2ff1d5fea988eb",
+    },
+  },
+  ETH: {
+    cake: {
+      link: "https://etherscan.io/address/0x94fa70d079d76279e1815ce403e9b985bccc82ac",
+      address: "0x94fa70d079d76279e1815ce403e9b985bccc82ac",
+    },
+    quantum: {
+      link: "https://etherscan.io/address/0x11901fd641f3a2d3a986d6745a2ff1d5fea988eb",
+      address: "0x11901fd641f3a2d3a986d6745a2ff1d5fea988eb",
+    },
+  },
+  USDT: {
+    cake: {
+      link: "https://etherscan.io/address/0x94fa70d079d76279e1815ce403e9b985bccc82ac",
+      address: "0x94fa70d079d76279e1815ce403e9b985bccc82ac",
+    },
+    quantum: {
+      link: "https://etherscan.io/address/0x11901fd641f3a2d3a986d6745a2ff1d5fea988eb",
+      address: "0x11901fd641f3a2d3a986d6745a2ff1d5fea988eb",
+    },
+  },
+  USDC: {
+    cake: {
+      link: "https://etherscan.io/address/0x94fa70d079d76279e1815ce403e9b985bccc82ac",
+      address: "0x94fa70d079d76279e1815ce403e9b985bccc82ac",
+    },
+    quantum: {
+      link: "https://etherscan.io/address/0x11901fd641f3a2d3a986d6745a2ff1d5fea988eb",
+      address: "0x11901fd641f3a2d3a986d6745a2ff1d5fea988eb",
+    },
+  },
+  EUROC: {
+    cake: {
+      link: "https://etherscan.io/address/0x94fa70d079d76279e1815ce403e9b985bccc82ac",
+      address: "0x94fa70d079d76279e1815ce403e9b985bccc82ac",
+    },
+    quantum: {
+      link: "https://etherscan.io/address/0x11901fd641f3a2d3a986d6745a2ff1d5fea988eb",
+      address: "0x11901fd641f3a2d3a986d6745a2ff1d5fea988eb",
+    },
+  },
+  LTC: {
+    cake: {
+      link: "https://live.blockcypher.com/ltc/address/MLYQxJfnUfVqRwfYXjDJfmLbyA77hqzSXE",
+      address: "MLYQxJfnUfVqRwfYXjDJfmLbyA77hqzSXE",
+    },
+  },
+  BCH: {
+    cake: {
+      link: "https://www.blockchain.com/bch/address/38wFczGqaaGLRub2U7CWeWkMuPDwhMVMRf",
+      address: "38wFczGqaaGLRub2U7CWeWkMuPDwhMVMRf",
+    },
+  },
+  DOGE: {
+    cake: {
+      link: "https://dogechain.info/address/D7jrXDgPYck8jL9eYvRrc7Ze8n2e2Loyba",
+      address: "D7jrXDgPYck8jL9eYvRrc7Ze8n2e2Loyba",
+    },
+  },
+};
+
+interface TokenBacked {
+  name: string;
+  symbol: string;
+}
+
+export const TOKEN_BACKED: TokenBacked[] = [
+  {
+    name: "dBTC",
+    symbol: "BTC",
+  },
+  {
+    name: "dETH",
+    symbol: "ETH",
+  },
+  {
+    name: "dUSDT",
+    symbol: "USDT",
+  },
+  {
+    name: "dUSDC",
+    symbol: "USDC",
+  },
+  {
+    name: "dEUROC",
+    symbol: "EUROC",
+  },
+  {
+    name: "dLTC",
+    symbol: "LTC",
+  },
+  {
+    name: "dBCH",
+    symbol: "BCH",
+  },
+  {
+    name: "dDOGE",
+    symbol: "DOGE",
+  },
+];
diff --git a/src/layouts/components/Header.tsx b/src/layouts/components/Header.tsx
@@ -522,7 +522,7 @@ const DropDownLink = React.forwardRef<HTMLAnchorElement, DropDownLinkProps>(
           href={item.link}
           onClick={close}
           className={classNames(
-            "px-6 py-3.5 cursor-pointer text-sm border-gray-200 hover:text-primary-500 dark:hover:text-dark-50",
+            "px-6 py-3.5 cursor-pointer text-sm border-gray-200 dark:border-dark-gray-300 border-b-[0.5px] hover:text-primary-500 dark:hover:text-dark-50",
             {
               "dark:text-dark-50 text-primary-500": routerPathName.includes(
                 item.rootPathName
@@ -548,6 +548,11 @@ const dropDownLinks = [
     link: "/tokens",
     rootPathName: "tokens",
   },
+  {
+    name: "Proof of Backing",
+    link: "/proof-of-backing",
+    rootPathName: "proof-of-backing",
+  },
 ];
 
 let drawerMenuItemLinks = [
@@ -595,4 +600,9 @@ let drawerMenuItemLinks = [
     pathname: "/tokens",
     testId: "Tokens",
   },
+  {
+    text: "Proof of Backing",
+    pathname: "/proof-of-backing",
+    testId: "/proof-of-backing",
+  },
 ];
diff --git a/src/pages/dex/_components/PoolPairsCards.tsx b/src/pages/dex/_components/PoolPairsCards.tsx
@@ -127,7 +127,10 @@ export function PoolPairsCard({
         path={`/dex/${
           poolPair.displaySymbol.includes("DUSD") ||
           poolPair.displaySymbol.includes("dUSDT") ||
-          poolPair.displaySymbol.includes("dUSDC")
+          poolPair.displaySymbol.includes("dUSDC") ||
+          poolPair.displaySymbol.includes("dBTC") ||
+          poolPair.displaySymbol.includes("dETH") ||
+          poolPair.displaySymbol.includes("dEUROC")
             ? poolPair.displaySymbol
             : poolPair.tokenA.displaySymbol
         }`}

diff --git a/src/pages/proof-of-backing/_components/BackingCard.tsx b/src/pages/proof-of-backing/_components/BackingCard.tsx
@@ -0,0 +1,137 @@
+import { Link } from "@components/commons/link/Link";
+import { InfoHoverPopover } from "@components/commons/popover/InfoHoverPopover";
+import { getAssetIcon } from "@components/icons/assets/tokens";
+import classNames from "classnames";
+import { TOKEN_BACKED_ADDRESS } from "constants/TokenBackedAddress";
+import React, { useState } from "react";
+import {
+  MdOutlineKeyboardArrowUp,
+  MdOutlineKeyboardArrowDown,
+} from "react-icons/md";
+import { NumericFormat } from "react-number-format";
+import { TokenWithBacking } from "../index.page";
+
+export function BackingCard({
+  token,
+}: {
+  token: TokenWithBacking;
+}): JSX.Element {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const Icon = getAssetIcon(token.symbol);
+  const backedAddress = TOKEN_BACKED_ADDRESS[token.symbol];
+
+  return (
+    <div className="border-gray-300 dark:border-dark-gray-300 border-[0.5px] rounded-xl px-4 py-[18px] mb-2">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <Icon width={28} height={28} />
+          <span className="pl-2 font-semibold text-gray-900 dark:text-dark-gray-900">
+            {token.displaySymbol}
+          </span>
+        </div>
+        <div className="flex gap-x-2">
+          <Link href={{ pathname: `/tokens/${token.displaySymbol}` }}>
+            <a className="contents">
+              <div
+                className={classNames(
+                  "border-[0.5px] border-primary-300 rounded text-primary-500 dark:bg-gray-900 dark:border-dark-primary-300 dark:text-dark-primary-500 px-1.5 py-1 text-sm h-min"
+                )}
+              >
+                VIEW
+              </div>
+            </a>
+          </Link>
+          <div
+            className="text-primary-500 cursor-pointer dark:bg-gray-900 dark:text-dark-primary-500 border-[0.5px] border-primary-300 dark:border-dark-primary-300 rounded h-min"
+            onClick={() => setIsExpanded(!isExpanded)}
+            data-testid="OnChainGovernance.CardView.Toggle"
+          >
+            {!isExpanded ? (
+              <MdOutlineKeyboardArrowDown size={28} />
+            ) : (
+              <MdOutlineKeyboardArrowUp size={28} />
+            )}
+          </div>
+        </div>
+      </div>
+      {isExpanded && (
+        <div className="mt-[18px]">
+          <div className="py-1.5 flex items-start justify-between">
+            <div className="flex items-center text-sm text-gray-500 dark:text-dark-gray-500 w-2/4">
+              Net Supply
+              <InfoHoverPopover
+                className="ml-1"
+                description="Net supply is the circulating number of tokens minus the burned tokens."
+              />
+            </div>
+            <div
+              className={classNames(
+                "text-sm text-gray-900 w-2/4 text-end break-words",
+                {
+                  "dark:text-dark-gray-900": token.netSupply !== undefined,
+                  "dark:text-dark-gray-500": token.netSupply === undefined,
+                }
+              )}
+            >
+              {token.netSupply === undefined ? (
+                "N/A"
+              ) : (
+                <NumericFormat
+                  displayType="text"
+                  thousandSeparator
+                  value={token.netSupply}
+                  suffix={` ${token.displaySymbol}`}
+                />
+              )}
+            </div>
+          </div>
+          <div className="pt-[8px] pb-1 flex items-center text-xs font-medium text-gray-500 dark:text-dark-gray-500 w-2/4">
+            Backing Address
+            <InfoHoverPopover
+              className="ml-1"
+              description="Addresses that hold the backing collaterals for the circulating supply of dTokens"
+            />
+          </div>
+          <div className="py-1.5 flex justify-between">
+            <div className="text-sm text-gray-500 dark:text-dark-gray-500 w-2/4">
+              Cake
+            </div>
+            {backedAddress.cake !== undefined ? (
+              <a
+                href={backedAddress.cake.link}
+                className="text-sm text-blue-500 w-2/4 break-words text-end"
+              >
+                {backedAddress.cake.address}
+              </a>
+            ) : (
+              <div className="text-sm text-gray-900 dark:text-dark-gray-500 w-2/4 break-words text-end">
+                N/A
+              </div>
+            )}
+          </div>
+          <div className="py-1.5 flex items-start justify-between">
+            <div className="flex items-center text-sm text-gray-500 dark:text-dark-gray-500 w-2/4">
+              Quantum
+              <InfoHoverPopover
+                className="ml-1"
+                description="This excludes initial liquidity supplied and will only display collaterals for minting."
+              />
+            </div>
+            {backedAddress.quantum !== undefined ? (
+              <a
+                href={backedAddress.quantum.link}
+                className="text-sm text-blue-500 w-2/4 break-words text-end"
+              >
+                {backedAddress.quantum.address}
+              </a>
+            ) : (
+              <div className="text-sm text-gray-900 dark:text-dark-gray-500 w-2/4 break-words text-end">
+                N/A
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}