feat: [GSW-2033] refetching UI

gnoswap-labs · Jan 5, 2025 · 415b380 · 415b380
1 parent 2818333
commit 415b380
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 2 deletions.
diff --git a/packages/web/src/hooks/swap/data/use-swap-handler.tsx b/packages/web/src/hooks/swap/data/use-swap-handler.tsx
@@ -178,6 +178,7 @@ export const useSwapHandler = () => {
     updateSwapAmount,
     resetSwapAmount,
     isTyping,
+    isRefetching,
     handleResetEstimatedLiquidity,
   } = useSwap({
     tokenA,
@@ -1131,6 +1132,7 @@ export const useSwapHandler = () => {
     isSwitchNetwork,
     switchNetwork,
     isLoading: swapState === "LOADING" || isTyping,
+    isRefetching,
     setSwapValue,
     tokenA,
     tokenB,

diff --git a/packages/web/src/hooks/swap/data/use-swap.tsx b/packages/web/src/hooks/swap/data/use-swap.tsx
@@ -81,6 +81,7 @@ export const useSwap = ({ tokenA, tokenB, direction, slippage, swapFee = 15 }: U
   const {
     data: estimatedSwapResult,
     isLoading: isEstimatedSwapLoading,
+    isRefetching,
     error,
   } = useGetRoutes(
     {
@@ -309,6 +310,7 @@ export const useSwap = ({ tokenA, tokenB, direction, slippage, swapFee = 15 }: U
     updateSwapAmount,
     isEstimatedSwapLoading,
     isTyping,
+    isRefetching,
     handleResetEstimatedLiquidity,
     resetSwapAmount: () => {
       setSwapAmount(0);

diff --git a/packages/web/src/layouts/swap/components/swap-card/SwapCard.tsx b/packages/web/src/layouts/swap/components/swap-card/SwapCard.tsx
@@ -32,6 +32,7 @@ interface SwapCardProps {
   isSwitchNetwork: boolean;
   isLoading: boolean;
   isSameToken: boolean;
+  isRefetching: boolean;
 
   changeTokenA: (token: TokenModel) => void;
   changeTokenAAmount: (value: string, none?: boolean) => void;
@@ -76,6 +77,7 @@ const SwapCard: React.FC<SwapCardProps> = ({
   setSwapRateAction,
   priceImpactStatus,
   isSameToken,
+  isRefetching,
 }) => {
   const theme = useTheme();
   const { t } = useTranslation();
@@ -109,6 +111,7 @@ const SwapCard: React.FC<SwapCardProps> = ({
         isSwitchNetwork={isSwitchNetwork}
         priceImpactStatus={priceImpactStatus}
         isSameToken={isSameToken}
+        isRefetching={isRefetching}
         resetEstimatedLiquidity={resetEstimatedLiquidity}
       />
       {shouldShowPriceImpactWarning && (

diff --git a/packages/web/src/layouts/swap/components/swap-card/swap-card-content/SwapCardContent.tsx b/packages/web/src/layouts/swap/components/swap-card/swap-card-content/SwapCardContent.tsx
@@ -38,6 +38,7 @@ interface ContentProps {
   isSwitchNetwork: boolean;
   priceImpactStatus: PriceImpactStatus;
   isSameToken: boolean;
+  isRefetching: boolean;
 }
 
 const SwapCardContent: React.FC<ContentProps> = ({
@@ -55,6 +56,7 @@ const SwapCardContent: React.FC<ContentProps> = ({
   priceImpactStatus,
   isSameToken,
   resetEstimatedLiquidity,
+  isRefetching,
 }) => {
   const { t } = useTranslation();
 
@@ -134,7 +136,11 @@ const SwapCardContent: React.FC<ContentProps> = ({
         <div className="amount-container">
           <input
             id={tokenA?.priceID}
-            className={`amount-text ${isLoading && direction !== "EXACT_IN" ? "text-opacity" : ""}`}
+            className={`amount-text ${
+              (isLoading && direction !== "EXACT_IN") || (isRefetching && direction === "EXACT_OUT")
+                ? "text-opacity"
+                : ""
+            }`}
             value={tokenAAmount}
             onChange={onChangeTokenAAmount}
             placeholder="0"
@@ -171,7 +177,11 @@ const SwapCardContent: React.FC<ContentProps> = ({
         <div className="amount-container">
           <input
             id={tokenB?.priceID}
-            className={`amount-text ${isLoading && direction === "EXACT_IN" ? "text-opacity" : ""}`}
+            className={`amount-text ${
+              (isLoading && direction === "EXACT_IN") || (isRefetching && direction === "EXACT_IN")
+                ? "text-opacity"
+                : ""
+            }`}
             value={tokenBAmount}
             onChange={onChangeTokenBAmount}
             placeholder="0"

diff --git a/packages/web/src/layouts/swap/containers/swap-container/SwapContainer.tsx b/packages/web/src/layouts/swap/containers/swap-container/SwapContainer.tsx
@@ -40,6 +40,7 @@ const SwapContainer: React.FC = () => {
     isSwitchNetwork,
     switchNetwork,
     isLoading,
+    isRefetching,
     setSwapValue,
     setSwapRateAction,
     priceImpactStatus,
@@ -121,6 +122,7 @@ const SwapContainer: React.FC = () => {
       priceImpactStatus={priceImpactStatus}
       resetEstimatedLiquidity={handleResetEstimatedLiquidity}
       isSameToken={isSameToken}
+      isRefetching={isRefetching}
     />
   );
 };