Merge pull request #1019 from oraidex/fix/add-pool-modal

Fix/add pool modal
oraidex · Oct 31, 2024 · ccd9490 · ccd9490
2 parents 2c04c63 + c452561
commit ccd9490
Show file tree

Hide file tree

Showing 13 changed files with 230 additions and 191 deletions.
diff --git a/src/libs/contractSingleton.ts b/src/libs/contractSingleton.ts
@@ -190,6 +190,10 @@ export default class SingletonOraiswapV3 {
     return this._dex;
   }
 
+  public static get cosmwasmClient() {
+    return this._cosmwasmClient;
+  }
+
   private constructor() {}
 
   public static async load(signingClient: SigningCosmWasmClient, sender: string) {

diff --git a/src/pages/Pool-V3/components/CreateNewPool/index.tsx b/src/pages/Pool-V3/components/CreateNewPool/index.tsx
@@ -14,6 +14,7 @@ import SelectToken from '../SelectToken';
 import styles from './index.module.scss';
 import SlippageSetting from '../SettingSlippage';
 import { newPoolKey, poolKeyToString } from '@oraichain/oraiswap-v3';
+import CreateNewPosition from '../CreateNewPosition';
 
 export enum STEP_CREATE_POOL {
   SELECT_POOL,
@@ -33,6 +34,7 @@ const CreateNewPool = ({ pools }: { pools: PoolWithPoolKey[] }) => {
   const [showModal, setShowModal] = useState<boolean>(false);
   const [isOpen, setIsOpen] = useState(false);
   const [slippage, setSlippage] = useState(1);
+  const [moveToAddLiquidity, setMoveToAddLiquidity] = useState(false);
   const refContent = useRef();
 
   // useOnClickOutside(refContent, () => {
@@ -58,143 +60,143 @@ const CreateNewPool = ({ pools }: { pools: PoolWithPoolKey[] }) => {
   };
 
   return (
-    <div className={styles.createNewPool}>
-      <div className={styles.btnAdd}>
-        <Button type="primary-sm" onClick={() => setShowModal(true)}>
-          Create new pool
-        </Button>
-      </div>
+    <>
+      {moveToAddLiquidity ? (
+        <CreateNewPosition showModal={moveToAddLiquidity} setShowModal={setMoveToAddLiquidity} pool={isPoolExisted(fee)} />
+      ) : (
+        <div className={styles.createNewPool}>
+          <div className={styles.btnAdd}>
+            <Button type="primary-sm" onClick={() => setShowModal(true)}>
+              Create new pool
+            </Button>
+          </div>
 
-      <div
-        onClick={() => setShowModal(false)}
-        className={classNames(styles.overlay, { [styles.activeOverlay]: showModal })}
-      ></div>
-      <div className={classNames(styles.modalWrapper, { [styles.activeModal]: showModal })}>
-        <div className={styles.contentWrapper} ref={refContent}>
-          <div className={styles.header}>
-            <div
-              className={classNames(styles.back, { [styles.activeBack]: step === STEP_CREATE_POOL.ADD_LIQUIDITY })}
-              onClick={() => setStep(STEP_CREATE_POOL.SELECT_POOL)}
-            >
-              <BackIcon />
-            </div>
-            <div>Create New Pool</div>
-            <div className={styles.headerActions}>
-              {step === STEP_CREATE_POOL.ADD_LIQUIDITY && (
-                <div className={styles.setting}>
-                  <SettingIcon onClick={() => setIsOpen(true)} />
-                  <SlippageSetting
-                    isOpen={isOpen}
-                    setIsOpen={setIsOpen}
-                    setSlippage={setSlippage}
-                    slippage={slippage}
-                  />
+          <div
+            onClick={() => setShowModal(false)}
+            className={classNames(styles.overlay, { [styles.activeOverlay]: showModal })}
+          ></div>
+          <div className={classNames(styles.modalWrapper, { [styles.activeModal]: showModal })}>
+            <div className={styles.contentWrapper} ref={refContent}>
+              <div className={styles.header}>
+                <div
+                  className={classNames(styles.back, { [styles.activeBack]: step === STEP_CREATE_POOL.ADD_LIQUIDITY })}
+                  onClick={() => setStep(STEP_CREATE_POOL.SELECT_POOL)}
+                >
+                  <BackIcon />
+                </div>
+                <div>Create New Pool</div>
+                <div className={styles.headerActions}>
+                  {step === STEP_CREATE_POOL.ADD_LIQUIDITY && (
+                    <div className={styles.setting}>
+                      <SettingIcon onClick={() => setIsOpen(true)} />
+                      <SlippageSetting
+                        isOpen={isOpen}
+                        setIsOpen={setIsOpen}
+                        setSlippage={setSlippage}
+                        slippage={slippage}
+                      />
+                    </div>
+                  )}
+                  <div onClick={() => onCloseModal()}>
+                    <CloseIcon />
+                  </div>
                 </div>
-              )}
-              <div onClick={() => onCloseModal()}>
-                <CloseIcon />
               </div>
-            </div>
-          </div>
-          <div className={styles.stepTitle}>
-            <h1>{step === STEP_CREATE_POOL.ADD_LIQUIDITY ? 'Add Liquidity' : 'Select pool'}</h1>
-            <div
-              className={classNames(styles.step, {
-                [styles.activeAllStep]: step === STEP_CREATE_POOL.ADD_LIQUIDITY
-              })}
-            >
-              <span className={styles.currentStep}>{step + 1}</span>/<span>2</span>
-            </div>
-          </div>
-          {step === STEP_CREATE_POOL.ADD_LIQUIDITY ? (
-            <CreatePoolForm
-              slippage={slippage}
-              tokenFrom={tokenFrom}
-              tokenTo={tokenTo}
-              feeTier={fee}
-              poolData={pools}
-              onCloseModal={onCloseModal}
-            />
-          ) : (
-            <div className={styles.content}>
-              <div className={styles.select}>
-                <div className={styles.selectContent}>
-                  <SelectToken
-                    token={tokenFrom}
-                    handleChangeToken={(tk) => setTokenFrom(tk)}
-                    otherTokenDenom={tokenTo?.denom}
-                    customClassButton={styles.customSelect}
-                  />
-                  <SelectToken
-                    token={tokenTo}
-                    handleChangeToken={(tk) => setTokenTo(tk)}
-                    otherTokenDenom={tokenFrom?.denom}
-                    customClassButton={styles.customSelect}
-                  />
+              <div className={styles.stepTitle}>
+                <h1>{step === STEP_CREATE_POOL.ADD_LIQUIDITY ? 'Add Liquidity' : 'Select pool'}</h1>
+                <div
+                  className={classNames(styles.step, {
+                    [styles.activeAllStep]: step === STEP_CREATE_POOL.ADD_LIQUIDITY
+                  })}
+                >
+                  <span className={styles.currentStep}>{step + 1}</span>/<span>2</span>
                 </div>
-                {tokenFrom && tokenTo ? (
-                  <div className={styles.fee}>
-                    {ALL_FEE_TIERS_DATA.map((e, index) => {
-                      const existedPool = isPoolExisted(e);
-                      return (
-                        <div
-                          className={classNames(styles.feeItem, { [styles.chosen]: e.fee === fee.fee })}
-                          key={`${index}-${e}-fee`}
-                          onClick={() => {
-                            if (existedPool) {
-                              openInNewTab(
-                                `/new-position/${encodeURIComponent(
-                                  `${extractDenom(tokenFrom)}-${extractDenom(tokenTo)}-${e.fee}-100`
-                                )}`
-                              );
-
-                              return;
-                            }
-
-                            setFee(e);
-                          }}
-                        >
-                          <div className={styles.valueFee}>
-                            <span>
-                              Fee:&nbsp;
-                              {toDisplay(e.fee.toString(), 10)}%
-                            </span>
-                            <span className={styles.descFee}>
-                              {!existedPool ? 'Not yet created' : 'Pool already created'}
-                            </span>
-                          </div>
-                          {!existedPool ? null : (
-                            <div>
-                              <OpenBlankTabIcon />
+              </div>
+              {step === STEP_CREATE_POOL.ADD_LIQUIDITY ? (
+                <CreatePoolForm
+                  slippage={slippage}
+                  tokenFrom={tokenFrom}
+                  tokenTo={tokenTo}
+                  feeTier={fee}
+                  poolData={pools}
+                  onCloseModal={onCloseModal}
+                />
+              ) : (
+                <div className={styles.content}>
+                  <div className={styles.select}>
+                    <div className={styles.selectContent}>
+                      <SelectToken
+                        token={tokenFrom}
+                        handleChangeToken={(tk) => setTokenFrom(tk)}
+                        otherTokenDenom={tokenTo?.denom}
+                        customClassButton={styles.customSelect}
+                      />
+                      <SelectToken
+                        token={tokenTo}
+                        handleChangeToken={(tk) => setTokenTo(tk)}
+                        otherTokenDenom={tokenFrom?.denom}
+                        customClassButton={styles.customSelect}
+                      />
+                    </div>
+                    {tokenFrom && tokenTo ? (
+                      <div className={styles.fee}>
+                        {ALL_FEE_TIERS_DATA.map((e, index) => {
+                          const existedPool = isPoolExisted(e);
+                          return (
+                            <div
+                              className={classNames(styles.feeItem, { [styles.chosen]: e.fee === fee.fee })}
+                              key={`${index}-${e}-fee`}
+                              onClick={() => {
+                                setFee(e);
+                                if (existedPool) {
+                                  setMoveToAddLiquidity(true);
+                                  return;
+                                }
+                              }}
+                            >
+                              <div className={styles.valueFee}>
+                                <span>
+                                  Fee:&nbsp;
+                                  {toDisplay(e.fee.toString(), 10)}%
+                                </span>
+                                <span className={styles.descFee}>
+                                  {!existedPool ? 'Not yet created' : 'Pool already created'}
+                                </span>
+                              </div>
+                              {!existedPool ? null : (
+                                <div>
+                                  <OpenBlankTabIcon />
+                                </div>
+                              )}
                             </div>
-                          )}
-                        </div>
-                      );
-                    })}
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <div className={styles.initFee}>
+                        <p className={styles.initFeeTxt}>Fee tier</p>
+                        <p>...</p>
+                      </div>
+                    )}
                   </div>
-                ) : (
-                  <div className={styles.initFee}>
-                    <p className={styles.initFeeTxt}>Fee tier</p>
-                    <p>...</p>
+                  <div className={styles.next}>
+                    <Button
+                      disabled={!tokenFrom || !tokenTo || !!isPoolExisted(fee)}
+                      type="primary"
+                      onClick={() => {
+                        setStep(STEP_CREATE_POOL.ADD_LIQUIDITY);
+                      }}
+                    >
+                      Next
+                    </Button>
                   </div>
-                )}
-              </div>
-              <div className={styles.next}>
-                <Button
-                  disabled={!tokenFrom || !tokenTo || !!isPoolExisted(fee)}
-                  type="primary"
-                  onClick={() => {
-                    setStep(STEP_CREATE_POOL.ADD_LIQUIDITY);
-                  }}
-                >
-                  Next
-                </Button>
-              </div>
+                </div>
+              )}
             </div>
-          )}
+          </div>
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 };
 

diff --git a/src/pages/Pool-V3/components/CreateNewPosition/index.module.scss b/src/pages/Pool-V3/components/CreateNewPosition/index.module.scss
@@ -117,7 +117,7 @@
       .headerActions {
         display: flex;
         align-items: center;
-        gap: 12px;
+        gap: 10px;
 
         transform: translateY(4px);
 

diff --git a/src/pages/Pool-V3/components/CreateNewPosition/index.tsx b/src/pages/Pool-V3/components/CreateNewPosition/index.tsx
@@ -15,6 +15,7 @@ import { useDispatch } from 'react-redux';
 import { setToDefault } from 'reducer/poolDetailV3';
 import CreatePositionForm from '../CreatePositionForm';
 
+
 const cx = cn.bind(styles);
 export const openInNewTab = (url: string): void => {
   const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
@@ -117,11 +118,7 @@ const CreateNewPosition = ({
               <div className={styles.fee}>Fee: {Number(pool.pool_key.fee_tier.fee) / 10 ** 10}%</div>
             </div>
             <div className={styles.headerActions}>
-              <div className={styles.setting}>
-                {/* <SettingIcon onClick={() => setIsOpen(true)} /> */}
-                {/* <SlippageSetting isOpen={isOpen} setIsOpen={setIsOpen} setSlippage={setSlippage} slippage={slippage} /> */}
-              </div>
-              <div onClick={() => onCloseModal()}>
+              <div className={styles.btn} onClick={() => onCloseModal()}>
                 <CloseIcon />
               </div>
             </div>

diff --git a/src/pages/Pool-V3/components/CreatePositionForm/index.module.scss b/src/pages/Pool-V3/components/CreatePositionForm/index.module.scss
@@ -5,7 +5,7 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
-  max-height: calc(100vh - 200px);
+  max-height: calc(110vh - 200px);
   overflow-y: auto;
   flex: 1 1 auto;
 

diff --git a/src/pages/Pool-V3/components/CreatePositionForm/index.tsx b/src/pages/Pool-V3/components/CreatePositionForm/index.tsx
@@ -96,6 +96,7 @@ const CreatePositionForm: FC<CreatePositionFormProps> = ({ poolId, slippage, sho
     zapApr,
     cache3Month,
     cache7Day,
+    setIsFullRange,
     setApr,
     setZapApr,
     setTokenZap,
@@ -358,8 +359,18 @@ const CreatePositionForm: FC<CreatePositionFormProps> = ({ poolId, slippage, sho
                     liquidityChartData={liquidityChartData}
                     currentPrice={currentPrice}
                     fullRange={fullRange}
-                    setMaxPrice={setMaxPrice}
-                    setMinPrice={setMinPrice}
+                    setMaxPrice={(value: number) => {
+                      setMaxPrice(value);
+                      if (optionType === OptionType.FULL_RANGE) {
+                        setIsFullRange(false);
+                      }
+                    }}
+                    setMinPrice={(value: number) => {
+                      setMinPrice(value);
+                      if (optionType === OptionType.FULL_RANGE) {
+                        setIsFullRange(false);
+                      }
+                    }}
                     zoomIn={zoomIn}
                     zoomOut={zoomOut}
                     resetRange={resetRange}

diff --git a/src/pages/Pool-V3/components/PoolDetail/index.module.scss b/src/pages/Pool-V3/components/PoolDetail/index.module.scss
@@ -107,11 +107,11 @@
         gap: 8px;
 
         .item {
-          padding: 8px 12px;
+          padding: 6px 10px;
           border-radius: 8px;
 
           @include theme {
-            background: theme-get('neutral-6');
+            border: 1px solid theme-get('colors-neutral-border-border-bold');
             color: theme-get('colors-neutral-text-body-on-row');
           }