Merge pull request #260 from gnoswap-labs/GSW-681-integrate-position-…

…info-data-on-add-position faet: [GSW-681] Integrate position info data on Add Position
gnoswap-labs · Dec 15, 2023 · 146980d · 146980d
2 parents d13c1d6 + 3fc7889
commit 146980d
Show file tree

Hide file tree

Showing 11 changed files with 250 additions and 106 deletions.
diff --git a/packages/web/src/components/common/double-token-logo/DoubleTokenLogo.styles.ts b/packages/web/src/components/common/double-token-logo/DoubleTokenLogo.styles.ts
@@ -0,0 +1,53 @@
+import { fonts } from "@constants/font.constant";
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
+
+export interface DoubleTokenLogoStyleProps {
+  size?: string | number;
+  overlap?: string | number;
+  fontSize?: number;
+}
+
+export const DoubleTokenLogoWrapper = styled.div<DoubleTokenLogoStyleProps>`
+  ${mixins.flexbox("row", "center", "center")};
+  img {
+    width: ${({ size }) => {
+      if (size) return typeof size === "number" ? `${size}px` : size;
+      return "36px";
+    }};
+    height: ${({ size }) => {
+      if (size) return typeof size === "number" ? `${size}px` : size;
+      return "36px";
+    }};
+    border-radius: 50%;
+  }
+  .right-logo {
+    margin-left: ${({ overlap }) => {
+      if (overlap)
+        return typeof overlap === "number" ? `-${overlap}px` : `-${overlap}`;
+      return "-6px";
+    }};
+  }
+  .missing-logo {
+    ${mixins.flexbox("row", "center", "center")};
+    width: ${({ size }) => {
+      if (size) return typeof size === "number" ? `${size}px` : size;
+      return "36px";
+    }};
+    height: ${({ size }) => {
+      if (size) return typeof size === "number" ? `${size}px` : size;
+      return "36px";
+    }};
+    border-radius: 50%;
+    color: ${({ theme }) => theme.color.text02};
+    background-color: ${({ theme }) => theme.color.border02};
+    ${fonts.p6}
+    font-size: ${({ fontSize }) => `${fontSize}px`};
+    line-height: 1.1em;
+    ${media.mobile} {
+      font-size: 8px;
+      line-height: 10px;
+    }
+  }
+`;
diff --git a/packages/web/src/components/common/double-token-logo/DoubleTokenLogo.tsx b/packages/web/src/components/common/double-token-logo/DoubleTokenLogo.tsx
@@ -0,0 +1,22 @@
+import { TokenModel } from "@models/token/token-model";
+import { DoubleTokenLogoWrapper } from "./DoubleTokenLogo.styles";
+import TokenLogo from "../token-logo/TokenLogo";
+
+interface DoubleTokenLogoProps {
+  left: TokenModel;
+  right: TokenModel;
+  size?: string | number;
+  overlap?: string | number;
+  fontSize?: number;
+}
+
+const DoubleTokenLogo = ({ left, right, size, overlap, fontSize }: DoubleTokenLogoProps) => {
+  return (
+    <DoubleTokenLogoWrapper overlap={overlap} size={size} fontSize={fontSize}>
+      <TokenLogo token={left} />
+      <TokenLogo className="right-logo" token={right} />
+    </DoubleTokenLogoWrapper>
+  );
+};
+
+export default DoubleTokenLogo;
diff --git a/packages/web/src/components/common/pool-graph/PoolGraph.tsx b/packages/web/src/components/common/pool-graph/PoolGraph.tsx
@@ -9,6 +9,7 @@ import { tickToPriceStr } from "@utils/swap-utils";
 import { makeDisplayTokenAmount } from "@utils/token-utils";
 import FloatingTooltip from "../tooltip/FloatingTooltip";
 import { FloatingPosition } from "@hooks/common/use-floating-tooltip";
+import TokenLogo from "../token-logo/TokenLogo";
 
 export interface PoolGraphProps {
   tokenA: TokenModel;
@@ -376,7 +377,7 @@ const PoolGraphBinTooptip: React.FC<PoolGraphBinTooptipProps> = ({
       <div className="content">
         <div className="row">
           <span className="token">
-            <img className="logo" src={tooltipInfo.tokenA.logoURI} alt="logo" />
+            <TokenLogo token={tooltipInfo.tokenA} className="logo" />
             <span>{tooltipInfo.tokenA.symbol}</span>
           </span>
           <span className="amount">
@@ -386,7 +387,7 @@ const PoolGraphBinTooptip: React.FC<PoolGraphBinTooptipProps> = ({
         </div>
         <div className="row">
           <span className="token">
-            <img className="logo" src={tooltipInfo.tokenB.logoURI} alt="logo" />
+            <TokenLogo token={tooltipInfo.tokenB} className="logo" />
             <span>{tooltipInfo.tokenB.symbol}</span>
           </span>
           <span className="amount">

diff --git a/packages/web/src/components/common/token-logo/TokenLogo.tsx b/packages/web/src/components/common/token-logo/TokenLogo.tsx
@@ -0,0 +1,15 @@
+import { TokenModel } from "@models/token/token-model";
+import React from "react";
+
+export interface TokenLogoProps {
+  className?: string;
+  token: TokenModel;
+}
+
+const TokenLogo: React.FC<TokenLogoProps> = ({ className, token }) => {
+  return token?.logoURI ?
+    <img className={"token-logo " + className} src={token.logoURI} alt="token logo" /> :
+    <div className={"missing-logo " + className} >{token.symbol.slice(0, 3)}</div>;
+};
+
+export default TokenLogo;
diff --git a/packages/web/src/components/earn/incentivized-pool-card/IncentivizedPoolCard.tsx b/packages/web/src/components/earn/incentivized-pool-card/IncentivizedPoolCard.tsx
@@ -1,5 +1,4 @@
 import Badge, { BADGE_TYPE } from "@components/common/badge/Badge";
-import DoubleLogo from "@components/common/double-logo/DoubleLogo";
 import { POOL_CONTENT_TITLE } from "@containers/incentivized-pool-card-list-container/IncentivizedPoolCardListContainer";
 import {
   PoolCardWrapper,
@@ -9,6 +8,7 @@ import { PoolCardInfo } from "@models/pool/info/pool-card-info";
 import { useMemo } from "react";
 import { SwapFeeTierInfoMap } from "@constants/option.constant";
 import PoolGraph from "@components/common/pool-graph/PoolGraph";
+import DoubleTokenLogo from "@components/common/double-token-logo/DoubleTokenLogo";
 
 export interface IncentivizedPoolCardProps {
   pool: PoolCardInfo;
@@ -34,9 +34,9 @@ const IncentivizedPoolCard: React.FC<IncentivizedPoolCardProps> = ({
           <div className="pool-container">
             <div className="title-container">
               <div className="box-header">
-                <DoubleLogo
-                  left={pool.tokenA.logoURI}
-                  right={pool.tokenB.logoURI}
+                <DoubleTokenLogo
+                  left={pool.tokenA}
+                  right={pool.tokenB}
                 />
                 <span>{pairName}</span>
               </div>
@@ -45,10 +45,11 @@ const IncentivizedPoolCard: React.FC<IncentivizedPoolCardProps> = ({
                   type={BADGE_TYPE.DARK_DEFAULT}
                   text={<>
                     Incentivized
-                    <DoubleLogo
+                    <DoubleTokenLogo
                       size={16}
-                      left={pool.tokenA.logoURI}
-                      right={pool.tokenB.logoURI}
+                      left={pool.tokenA}
+                      right={pool.tokenB}
+                      fontSize={6}
                     />
                   </>}
                 />

diff --git a/packages/web/src/components/earn/pool-info/PoolInfo.tsx b/packages/web/src/components/earn/pool-info/PoolInfo.tsx
@@ -8,6 +8,8 @@ import { PoolInfoWrapper, TableColumn } from "./PoolInfo.styles";
 import { PoolListInfo } from "@models/pool/info/pool-list-info";
 import { SwapFeeTierInfoMap } from "@constants/option.constant";
 import PoolGraph from "@components/common/pool-graph/PoolGraph";
+import TokenLogo from "@components/common/token-logo/TokenLogo";
+import DoubleTokenLogo from "@components/common/double-token-logo/DoubleTokenLogo";
 
 interface PoolInfoProps {
   pool: PoolListInfo;
@@ -35,9 +37,9 @@ const PoolInfo: React.FC<PoolInfoProps> = ({ pool, routeItem, themeKey }) => {
       return <>-</>;
     }
     if (rewards.length === 1) {
-      return <img src={rewards[0].token.logoURI} className="icon-reward" alt="icon reward" />;
+      return <TokenLogo token={rewards[0].token} />;
     }
-    return <DoubleLogo left={rewards[0].token.logoURI} right={rewards[1].token.logoURI} size={20} />;
+    return <DoubleTokenLogo left={rewards[0].token} right={rewards[1].token} size={20} />;
   }, [rewards]);
 
   const resolvedBins = useMemo(() => {
@@ -58,9 +60,9 @@ const PoolInfo: React.FC<PoolInfoProps> = ({ pool, routeItem, themeKey }) => {
       onClick={() => routeItem(poolId)}
     >
       <TableColumn className="left" tdWidth={POOL_TD_WIDTH[0]}>
-        <DoubleLogo
-          left={tokenA.logoURI}
-          right={tokenB.logoURI}
+        <DoubleTokenLogo
+          left={tokenA}
+          right={tokenB}
           size={20}
         />
         <span className="symbol-pair">{`${tokenA.symbol}/${tokenB.symbol}`}</span>

diff --git a/packages/web/src/components/stake/one-click-staking/OneClickStaking.tsx b/packages/web/src/components/stake/one-click-staking/OneClickStaking.tsx
@@ -3,106 +3,114 @@ import DoubleLogo from "@components/common/double-logo/DoubleLogo";
 import IconStrokeArrowRight from "@components/common/icons/IconStrokeArrowRight";
 import { useAtom } from "jotai";
 import { SwapState } from "@states/index";
+import DoubleTokenLogo from "@components/common/double-token-logo/DoubleTokenLogo";
+import { PositionModel } from "@models/position/position-model";
+import { useMemo } from "react";
+import { toNumberFormat } from "@utils/number-utils";
 interface Props {
+  stakedPositions: PositionModel[];
+  unstakedPositions: PositionModel[];
   handleClickGotoStaking: () => void;
 }
 
-const tempDATA = [
-  {
-    label: "Total APR",
-    value: 108.85,
-  },
-  {
-    label: "Fee APR",
-    value: 108.85,
-  },
-  {
-    label: "Staking APR",
-    value: 108.85,
-  },
-];
+const OneClickStaking: React.FC<Props> = ({
+  stakedPositions,
+  unstakedPositions,
+  handleClickGotoStaking
+}) => {
+  const [swapValue] = useAtom(SwapState.swap);
+  const { tokenA = null, tokenB = null } = swapValue;
 
-const UNSTAKE_DATA = [
-  {
-    label: "ID #14450",
-    value: 65541.51,
-  },
-  {
-    label: "ID #14450",
-    value: 65541.51,
-  },
-  {
-    label: "ID #14450",
-    value: 65541.51,
-  },
-];
+  const isStakedPositions = useMemo(() => {
+    return stakedPositions.length > 0;
+  }, [stakedPositions]);
+
+  const isUnstakedPositions = useMemo(() => {
+    return unstakedPositions.length > 0;
+  }, [unstakedPositions]);
+
+  if (!tokenA || !tokenB) {
+    return <></>;
+  }
 
-const OneClickStaking: React.FC<Props> = ({ handleClickGotoStaking }) => {
-  const [swapValue] = useAtom(SwapState.swap);
-  const { tokenA = null, tokenB = null} = swapValue;
-
   return (
     <OneClickStakingWrapper>
       <div className="one-click-info">
-        {tempDATA.map((item, index) => {
-          return (
-            <div key={index}>
-              <div className="label">{item.label}</div>
-              <div className="value">{item.value}%</div>
-            </div>
-          );
-        })}
+        <div>
+          <div className="label">Total APR</div>
+          <div className="value">-</div>
+        </div>
+        <div>
+          <div className="label">Fee APR</div>
+          <div className="value">-</div>
+        </div>
+        <div>
+          <div className="label">Staking APR</div>
+          <div className="value">-</div>
+        </div>
         <div>
           <div className="label">Rewards</div>
           <div className="value">
-          <DoubleLogo
-            left={tokenA?.logoURI || ""}
-            right={tokenB?.logoURI || ""}
-            size={24}
-          />
+            <DoubleLogo
+              left={tokenA?.logoURI || ""}
+              right={tokenB?.logoURI || ""}
+              size={24}
+            />
           </div>
         </div>
       </div>
-      <Divider />
-      <div className="unstake-info">
-        <div className="title">
-          <div className="label">My Unstaked Positions</div>
-          <div className="value" onClick={handleClickGotoStaking}>
-            Go to Staking <IconStrokeArrowRight />
-          </div>
-        </div>
-        {UNSTAKE_DATA.map((item, index) => (
-          <div className="content" key={index}>
-            <div className="label">
-              <DoubleLogo
-                left={tokenA?.logoURI || ""}
-                right={tokenB?.logoURI || ""}
-                size={24}
-              />
-              {item.label}
+      {(isStakedPositions || isUnstakedPositions) && <Divider />}
+      {isUnstakedPositions && (
+        <div className="unstake-info">
+          <div className="title">
+            <div className="label">My Unstaked Positions</div>
+            <div className="value" onClick={handleClickGotoStaking}>
+              Go to Staking <IconStrokeArrowRight />
             </div>
-            <div className="value">${item.value.toLocaleString()}</div>
           </div>
-        ))}
-      </div>
-      <div className="stake-info">
-        <div className="title">
-          <div className="label">My Staked Positions</div>
-        </div>
-        {UNSTAKE_DATA.map((item, index) => (
-          <div className="content" key={index}>
-            <div className="label">
-              <DoubleLogo
-                left={tokenA?.logoURI || ""}
-                right={tokenB?.logoURI || ""}
-                size={24}
-              />
-              {item.label}
+          {unstakedPositions.map((item, index) => (
+            <div className="content" key={index}>
+              <div className="label">
+                <DoubleTokenLogo
+                  left={tokenA}
+                  right={tokenB}
+                  size={24}
+                  fontSize={8}
+                />
+                #{item.id}
+              </div>
+              <div className="value">${toNumberFormat(item.positionUsdValue)}</div>
             </div>
-            <div className="value">${item.value.toLocaleString()}</div>
+          ))}
+        </div>
+      )}
+
+      {isStakedPositions && (
+        <div className="stake-info">
+          <div className="title">
+            <div className="label">My Staked Positions</div>
+            {!isUnstakedPositions && (
+              <div className="value" onClick={handleClickGotoStaking}>
+                Go to Staking <IconStrokeArrowRight />
+              </div>
+            )}
           </div>
-        ))}
-      </div>
+          {stakedPositions.map((item, index) => (
+            <div className="content" key={index}>
+              <div className="label">
+                <DoubleTokenLogo
+                  left={tokenA}
+                  right={tokenB}
+                  size={24}
+                  fontSize={8}
+                />
+                #{item.id}
+              </div>
+              <div className="value">${toNumberFormat(item.positionUsdValue)}</div>
+            </div>
+          ))}
+        </div>
+      )}
     </OneClickStakingWrapper>
   );
 };