Merge pull request #297 from ergolabs/dev

Release v1.0.4

src/App.tsx

@@ -17,11 +17,11 @@ import {
 import { globalHistory } from './createBrowserHistory';
 import { ContextModalProvider } from './ergodex-cdk';
 import { useWindowSize } from './hooks/useWindowSize';
-import { Swap } from './pages';
-import { AddLiquidity } from './pages';
+import { AddLiquidity } from './pages/Pool/AddLiquidity/AddLiquidity';
 import { Pool } from './pages/Pool/Pool';
 import { PoolPosition } from './pages/Pool/PoolPosition/PoolPosition';
 import { Remove } from './pages/Remove/Remove';
+import { Swap } from './pages/Swap/Swap';
 
 const NotFound = () => <Redirect to="/swap" />;
 

src/components/common/ActionForm/ActionForm.tsx

@@ -82,7 +82,14 @@ export const ActionForm: FC<ActionFormProps<any>> = ({
     } else {
       setButtonData({ state: ActionButtonState.ACTION });
     }
-  }, [isOnline, isWalletLoading, value]);
+  }, [
+    isOnline,
+    isWalletLoading,
+    value,
+    isLiquidityInsufficient,
+    getInsufficientTokenNameForFee,
+    getInsufficientTokenNameForTx,
+  ]);
 
   const handleSubmit = () => {
     if (buttonData.state !== ActionButtonState.ACTION || !action) {

src/components/common/PoolSelect/PoolSelect.tsx

@@ -69,7 +69,10 @@ const PoolSelect: React.FC<PoolSelectProps> = ({
     if (positions && positions.length > 0) {
       const positionWithHighestLiquidity = maxBy(positions, (p) => p.lp.amount);
 
-      if (positionWithHighestLiquidity) {
+      if (
+        positionWithHighestLiquidity &&
+        positionWithHighestLiquidity?.id !== value?.id
+      ) {
         handleChange(positionWithHighestLiquidity);
       }
     }

src/hooks/usePair.ts

@@ -1,31 +1,46 @@
-import { AmmPool } from '@ergolabs/ergo-dex-sdk';
 import { AssetAmount } from '@ergolabs/ergo-sdk';
 import { useEffect, useState } from 'react';
 
 import { AssetPair } from '../@types/asset';
+import { AmmPool } from '../common/models/AmmPool';
+import { isWalletLoading$ } from '../services/new/core';
 import { parseUserInputToFractions, renderFractions } from '../utils/math';
+import { useObservable } from './useObservable';
 
 interface Pair {
   pair?: AssetPair;
   lpBalance?: number;
   setPair?: (p: AssetPair) => void;
   setLpBalance?: (p: number) => void;
+  isPairLoading: boolean;
 }
 
 const usePair = (pool: AmmPool | undefined): Pair => {
   const [pair, setPair] = useState<AssetPair | undefined>();
   const [lpBalance, setLpBalance] = useState<number | undefined>();
+  const [isPairLoading, setIsPairLoading] = useState(true);
+  const [isWalletLoading] = useObservable(isWalletLoading$);
 
   useEffect(() => {
-    if (pool) {
-      ergo.get_balance(pool.lp.asset.id).then((lp) => setLpBalance(Number(lp)));
+    if (pool && !isWalletLoading) {
+      ergo
+        .get_balance(pool['pool'].lp.asset.id)
+        .then((lp) => setLpBalance(Number(lp)));
     }
-  }, [pool]);
+  }, [pool?.id, isWalletLoading]);
 
   useEffect(() => {
-    if (pool && lpBalance) {
-      const sharedPair = pool.shares(
-        new AssetAmount(pool.lp.asset, parseUserInputToFractions(lpBalance)),
+    if (lpBalance === 0) {
+      setPair(undefined);
+      setIsPairLoading(false);
+    }
+
+    if (pool && lpBalance && lpBalance !== 0) {
+      const sharedPair = pool['pool'].shares(
+        new AssetAmount(
+          pool['pool'].lp.asset,
+          parseUserInputToFractions(lpBalance),
+        ),
       );
 
       const positionPair = {
@@ -46,10 +61,11 @@ const usePair = (pool: AmmPool | undefined): Pair => {
       };
 
       setPair(positionPair);
+      setIsPairLoading(false);
     }
-  }, [pool, lpBalance]);
+  }, [pool?.id, lpBalance]);
 
-  return { pair, lpBalance, setPair, setLpBalance };
+  return { pair, lpBalance, setPair, setLpBalance, isPairLoading };
 };
 
 export { usePair };

src/hooks/usePosition.ts

@@ -1,10 +1,13 @@
-import { AmmPool, PoolId } from '@ergolabs/ergo-dex-sdk';
+import { PoolId } from '@ergolabs/ergo-dex-sdk';
 
-import { useNetworkPools } from './useNetworkPools';
+import { AmmPool } from '../common/models/AmmPool';
+// import { useNetworkPools } from './useNetworkPools';
+import { useGetAllPools } from './useGetAllPools';
 
 const usePosition = (poolId: PoolId): AmmPool | undefined => {
-  const positions = useNetworkPools();
-  return positions?.find((position) => position.id === poolId);
+  const positions = useGetAllPools();
+  const pl = positions?.find((position) => position.id === poolId);
+  return pl ? new AmmPool(pl) : undefined;
 };
 
 export { usePosition };