Merge pull request #208 from gnoswap-labs/GSW-323-create-pool

[GSW-323] feat: Create Pool
gnoswap-labs · Oct 13, 2023 · f1a4ca2 · f1a4ca2
2 parents feb8dfd + c3d1919
commit f1a4ca2
Show file tree

Hide file tree

Showing 57 changed files with 1,039 additions and 775 deletions.
diff --git a/packages/web/.storybook/main.js b/packages/web/.storybook/main.js
@@ -21,6 +21,9 @@ module.exports = {
       },
     });
     return merge(config, {
+      experiments: {
+        topLevelAwait: true,
+      },
       resolve: {
         plugins: [new TsconfigPathsPlugin()],
       },

diff --git a/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.stories.tsx b/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.stories.tsx
@@ -17,31 +17,33 @@ const Template: ComponentStory<typeof EnterAmounts> = args => (
 );
 
 const token = {
-  path: "1",
-  name: "HEX",
-  symbol: "HEX",
-  logoURI:
-    "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+  "chainId": "test3",
+  "address": "0x111111111117dC0aa78b770fA6A738034120C302",
+  "path": "gno.land/r/demo/1inch",
+  "name": "1inch",
+  "symbol": "1INCH",
+  "decimals": 6,
+  "logoURI": "https://assets.coingecko.com/coins/images/13469/thumb/1inch-token.png?1608803028",
+  "priceId": "1inch",
+  "createdAt": "1999-01-01T00:00:01Z"
 };
 
 export const Default = Template.bind({});
 Default.args = {
-  token0Input: {
+  tokenAInput: {
     token: token,
     amount: "121",
     usdValue: "$0.00",
     balance: "0",
     changeAmount: action("changeAmount"),
-    changeBalance: action("changeBalance"),
   },
-  token1Input: {
+  tokenBInput: {
     token: token,
     amount: "121",
     usdValue: "$0.00",
     balance: "0",
     changeAmount: action("changeAmount"),
-    changeBalance: action("changeBalance"),
   },
-  changeToken0: action("changeToken0"),
-  changeToken1: action("changeToken1"),
+  changeTokenA: action("changeTokenA"),
+  changeTokenB: action("changeTokenB"),
 };
diff --git a/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.tsx b/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.tsx
@@ -3,26 +3,26 @@ import IconAdd from "../icons/IconAdd";
 import { LiquidityEnterAmountsWrapper } from "./LiquidityEnterAmounts.styles";
 import TokenAmountInput from "../token-amount-input/TokenAmountInput";
 import { TokenAmountInputModel } from "@hooks/token/use-token-amount-input";
-import { TokenInfo } from "@models/token/token-info";
+import { TokenModel } from "@models/token/token-model";
 
 interface LiquidityEnterAmountsProps {
-  token0Input: TokenAmountInputModel;
-  token1Input: TokenAmountInputModel;
-  changeToken0: (token: TokenInfo) => void;
-  changeToken1: (token: TokenInfo) => void;
+  tokenAInput: TokenAmountInputModel;
+  tokenBInput: TokenAmountInputModel;
+  changeTokenA: (token: TokenModel) => void;
+  changeTokenB: (token: TokenModel) => void;
 }
 
 const LiquidityEnterAmounts: React.FC<LiquidityEnterAmountsProps> = ({
-  token0Input,
-  token1Input,
-  changeToken0,
-  changeToken1,
+  tokenAInput,
+  tokenBInput,
+  changeTokenA,
+  changeTokenB,
 }) => {
 
   return (
     <LiquidityEnterAmountsWrapper>
-      <TokenAmountInput changeToken={changeToken0} {...token0Input} />
-      <TokenAmountInput changeToken={changeToken1} {...token1Input} />
+      <TokenAmountInput changeToken={changeTokenA} {...tokenAInput} />
+      <TokenAmountInput changeToken={changeTokenB} {...tokenBInput} />
       <div className="arrow">
         <div className="shape">
           <IconAdd className="add-icon" />

diff --git a/packages/web/src/components/common/modal/Modal.styles.ts b/packages/web/src/components/common/modal/Modal.styles.ts
@@ -24,6 +24,7 @@ export const ModalWrapper = styled.div<ModalStyleProps>`
   }};
   padding: 24px;
   ${mixins.positionCenter()};
+  position: fixed;
   z-index: ${Z_INDEX.modal};
   background-color: ${({ theme }) => theme.color.background06};
   border: 1px solid ${({ theme }) => theme.color.border02};

diff --git a/packages/web/src/components/common/pool-graph/PoolGraph.stories.tsx b/packages/web/src/components/common/pool-graph/PoolGraph.stories.tsx
@@ -1,4 +1,3 @@
-import { DUMMY_POOL_TICKS } from "@containers/earn-add-liquidity-container/earn-add-liquidity-dummy";
 import PoolGraph, { type PoolGraphProps } from "./PoolGraph";
 import { Meta, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
@@ -10,12 +9,9 @@ export default {
 
 export const Default: StoryObj<PoolGraphProps> = {
   args: {
-    ticks: DUMMY_POOL_TICKS,
-    currentTick: DUMMY_POOL_TICKS[20],
+    ticks: [],
     width: 400,
     height: 200,
-    minTick: DUMMY_POOL_TICKS[10],
-    maxTick: DUMMY_POOL_TICKS[30],
     onChangeMinTick: action("onChangeMinTick"),
     onChangeMaxTick: action("onChangeMaxTick"),
   },

diff --git a/packages/web/src/components/common/select-fee-tier/SelectFeeTier.stories.tsx b/packages/web/src/components/common/select-fee-tier/SelectFeeTier.stories.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import SelectFeeTier from "./SelectFeeTier";
 import { action } from "@storybook/addon-actions";
-import { DUMMY_FEE_TIERS } from "@containers/earn-add-liquidity-container/earn-add-liquidity-dummy";
 
 export default {
   title: "common/AddLiquidity/SelectFeeTier",
@@ -15,7 +14,6 @@ const Template: ComponentStory<typeof SelectFeeTier> = args => (
 
 export const Default = Template.bind({});
 Default.args = {
-  feeTiers: DUMMY_FEE_TIERS,
-  feeRate: "0.01",
+  feeTiers: [],
   selectFeeTier: action("selectFeeTier"),
 };
diff --git a/packages/web/src/components/common/select-fee-tier/SelectFeeTier.tsx b/packages/web/src/components/common/select-fee-tier/SelectFeeTier.tsx
@@ -1,65 +1,77 @@
 import React, { useCallback, useMemo } from "react";
 import { SelectFeeTierItemWrapper, SelectFeeTierWrapper } from "./SelectFeeTier.styles";
-import { AddLiquidityFeeTier } from "@containers/earn-add-liquidity-container/EarnAddLiquidityContainer";
-import { FEE_RATE_OPTION } from "@constants/option.constant";
+import { SwapFeeTierInfoMap, SwapFeeTierType } from "@constants/option.constant";
+import { PoolModel } from "@models/pool/pool-model";
+import BigNumber from "bignumber.js";
 
 interface SelectFeeTierProps {
-  feeTiers: AddLiquidityFeeTier[];
-  feeRate: string | undefined;
-  selectFeeTier: (feeRate: FEE_RATE_OPTION) => void;
+  feeTiers: SwapFeeTierType[];
+  feeTier: SwapFeeTierType | null;
+  pools: PoolModel[],
+  selectFeeTier: (feeTier: SwapFeeTierType) => void;
 }
 
 const SelectFeeTier: React.FC<SelectFeeTierProps> = ({
   feeTiers,
-  feeRate,
+  feeTier,
+  pools,
   selectFeeTier,
 }) => {
 
-  const onClickFeeTierItem = useCallback((feeRate: string) => {
-    const feeRateOption = Object.values(FEE_RATE_OPTION).find(option => option === feeRate);
-    if (feeRateOption) {
-      selectFeeTier(feeRateOption);
-    }
+  const onClickFeeTierItem = useCallback((feeTier: SwapFeeTierType) => {
+    selectFeeTier(feeTier);
   }, [selectFeeTier]);
 
   return (
     <SelectFeeTierWrapper>
-      {feeTiers.map((feeTier, index) => (
+      {feeTiers.map((item, index) => (
         <SelectFeeTierItem
-          selected={feeTier.feeRate === feeRate}
           key={index}
-          feeRate={feeTier.feeRate}
-          description={feeTier.description}
-          range={feeTier.range}
-          onClick={() => onClickFeeTierItem(feeTier.feeRate)}
+          selected={feeTier === item}
+          feeTier={item}
+          pools={pools}
+          onClick={() => onClickFeeTierItem(item)}
         />
       ))}
     </SelectFeeTierWrapper>
   );
 };
 
-interface SelectFeeTierItemProps extends AddLiquidityFeeTier {
+interface SelectFeeTierItemProps {
   selected: boolean;
+  feeTier: SwapFeeTierType;
+  pools: PoolModel[];
   onClick: () => void;
 }
 
 const SelectFeeTierItem: React.FC<SelectFeeTierItemProps> = ({
   selected,
-  feeRate,
-  description,
-  range,
+  feeTier,
+  pools,
   onClick,
 }) => {
   const feeRateStr = useMemo(() => {
-    return `${feeRate}%`;
-  }, [feeRate]);
+    return SwapFeeTierInfoMap[feeTier].rateStr;
+  }, [feeTier]);
 
   const rangeStr = useMemo(() => {
-    if (range === "0") {
+    const fee = SwapFeeTierInfoMap[feeTier].fee;
+    const pool = pools.find(pool => pool.fee === fee);
+    if (!pool || pool.bins.length < 2) {
       return "Not created";
     }
-    return `${range}% select`;
-  }, [range]);
+    const sortedBins = pool.bins.sort((p1, p2) => p1.currentTick - p2.currentTick);
+    const fullTickRange = 1774545;
+    const currentTickGap = sortedBins[0].currentTick - sortedBins[sortedBins.length - 1].currentTick;
+    return BigNumber(currentTickGap)
+      .dividedBy(fullTickRange)
+      .multipliedBy(100)
+      .toFixed();
+  }, [feeTier, pools]);
+
+  const description = useMemo(() => {
+    return SwapFeeTierInfoMap[feeTier].description;
+  }, [feeTier]);
 
   return (
     <SelectFeeTierItemWrapper className={selected ? "selected" : ""} onClick={onClick}>

diff --git a/packages/web/src/components/common/select-pair-button/SelectPairButton.stories.tsx b/packages/web/src/components/common/select-pair-button/SelectPairButton.stories.tsx
@@ -15,11 +15,15 @@ const Template: ComponentStory<typeof SelectPairButton> = args => (
 export const Selected = Template.bind({});
 Selected.args = {
   token: {
-    path: Math.floor(Math.random() * 50 + 1).toString(),
-    name: "HEX",
-    symbol: "HEX",
-    logoURI:
-      "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png",
+    chainId: "test3",
+    address: "0x111111111117dC0aa78b770fA6A738034120C302",
+    path: "gno.land/r/demo/1inch",
+    name: "1inch",
+    symbol: "1INCH",
+    decimals: 6,
+    logoURI: "https://assets.coingecko.com/coins/images/13469/thumb/1inch-token.png?1608803028",
+    priceId: "1inch",
+    createdAt: "1999-01-01T00:00:01Z"
   },
 };
 

diff --git a/packages/web/src/components/common/select-pair-button/SelectPairButton.tsx b/packages/web/src/components/common/select-pair-button/SelectPairButton.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback } from "react";
 import IconStrokeArrowDown from "@components/common/icons/IconStrokeArrowDown";
 import { wrapper } from "./SelectPairButton.styles";
-import { TokenInfo } from "@models/token/token-info";
 import { useSelectTokenModal } from "@hooks/token/use-select-token-modal";
+import { TokenModel } from "@models/token/token-model";
 
 interface SelectPairButtonProps {
-  token?: TokenInfo;
-  changeToken?: (token: TokenInfo) => void;
+  token: TokenModel | null;
+  changeToken?: (token: TokenModel) => void;
   disabled?: boolean;
 }
 

diff --git a/packages/web/src/components/common/select-pair/SelectPair.stories.tsx b/packages/web/src/components/common/select-pair/SelectPair.stories.tsx
@@ -13,17 +13,28 @@ const Template: ComponentStory<typeof SelectPair> = args => (
 );
 
 const tokenA = {
-  path: "0",
-  name: "HEX",
-  symbol: "HEX",
-  logoURI: "",
+  chainId: "test3",
+  address: "0x111111111117dC0aa78b770fA6A738034120C302",
+  path: "gno.land/r/demo/1inch",
+  name: "1inch",
+  symbol: "1INCH",
+  decimals: 6,
+  logoURI: "https://assets.coingecko.com/coins/images/13469/thumb/1inch-token.png?1608803028",
+  priceId: "1inch",
+  createdAt: "1999-01-01T00:00:01Z"
 };
 
 const tokenB = {
-  path: "1",
-  name: "USDCoin",
-  symbol: "USDC",
-  logoURI: "",
+  name: "Wrapped Ether",
+  address: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
+  path: "gno.land/r/demo/weth",
+  symbol: "WETH",
+  decimals: 6,
+  chainId: "test3",
+  priceId: "weth",
+  createdAt: "1999-01-01T00:00:02Z",
+  isWrappedGasToken: true,
+  logoURI: "https://s2.coinmarketcap.com/static/img/coins/64x64/2396.png"
 };
 
 export const Default = Template.bind({});

diff --git a/packages/web/src/components/common/select-pair/SelectPair.tsx b/packages/web/src/components/common/select-pair/SelectPair.tsx
@@ -1,28 +1,28 @@
 import React from "react";
 import SelectPairButton from "@components/common/select-pair-button/SelectPairButton";
 import { SelectPairWrapper } from "./SelectPair.styles";
-import { TokenInfo } from "@models/token/token-info";
+import { TokenModel } from "@models/token/token-model";
 
 interface SelectPairProps {
-  tokenA: TokenInfo | undefined;
-  tokenB: TokenInfo | undefined;
-  changeToken0: (token: TokenInfo) => void;
-  changeToken1: (token: TokenInfo) => void;
+  tokenA: TokenModel | null;
+  tokenB: TokenModel | null;
+  changeTokenA: (token: TokenModel) => void;
+  changeTokenB: (token: TokenModel) => void;
   disabled?: boolean;
 }
 
 const SelectPair: React.FC<SelectPairProps> = ({
   tokenA,
   tokenB,
-  changeToken0,
-  changeToken1,
+  changeTokenA,
+  changeTokenB,
   disabled,
 }) => {
 
   return (
     <SelectPairWrapper>
-      <SelectPairButton disabled={disabled} token={tokenA} changeToken={changeToken0} />
-      <SelectPairButton disabled={disabled} token={tokenB} changeToken={changeToken1} />
+      <SelectPairButton disabled={disabled} token={tokenA} changeToken={changeTokenA} />
+      <SelectPairButton disabled={disabled} token={tokenB} changeToken={changeTokenB} />
     </SelectPairWrapper>
   );
 };

diff --git a/packages/web/src/components/common/select-price-range/SelectPriceRange.stories.tsx b/packages/web/src/components/common/select-price-range/SelectPriceRange.stories.tsx
@@ -1,9 +1,7 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
 import SelectPriceRange from "./SelectPriceRange";
 import { action } from "@storybook/addon-actions";
-import { DUMMY_PRICE_RANGE_MAP } from "@containers/earn-add-liquidity-container/earn-add-liquidity-dummy";
 
 export default {
   title: "common/AddLiquidity/SelectPriceRange",
@@ -16,7 +14,7 @@ const Template: ComponentStory<typeof SelectPriceRange> = args => (
 
 export const Default = Template.bind({});
 Default.args = {
-  priceRangeMap: DUMMY_PRICE_RANGE_MAP,
+  priceRanges: [],
   priceRange: undefined,
-  selectPriceRange: action("selectPriceRange"),
+  changePriceRange: action("changePriceRange"),
 };