fix: zap button loading state

sushi-labs · Nov 9, 2024 · f1bff99 · f1bff99
1 parent 8b417c5
commit f1bff99
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/add/page.tsx b/apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/add/page.tsx
@@ -222,7 +222,11 @@ const ZapWidget: FC<ZapWidgetProps> = ({ chainId, pool, poolState, title }) => {
     [inputAmount, inputCurrency],
   )
 
-  const { data: zapResponse, isError: isZapError } = useZap({
+  const {
+    data: zapResponse,
+    isError: isZapError,
+    isLoading: isZapLoading,
+  } = useZap({
     chainId,
     fromAddress: address,
     tokenIn: [inputCurrency.isNative ? NativeAddress : inputCurrency.address],
@@ -232,8 +236,8 @@ const ZapWidget: FC<ZapWidgetProps> = ({ chainId, pool, poolState, title }) => {
 
   const {
     data: estGas,
-    isError: isEstimateGasError,
-    isLoading: isEstimateGasLoading,
+    isError: isEstGasError,
+    isLoading: isEstGasLoading,
   } = useEstimateGas({
     chainId,
     account: address,
@@ -292,10 +296,10 @@ const ZapWidget: FC<ZapWidgetProps> = ({ chainId, pool, poolState, title }) => {
                     fullWidth
                     testId="zap-liquidity"
                     onClick={() => preparedTx && sendTransaction(preparedTx)}
-                    loading={isEstimateGasLoading || isWritePending}
-                    disabled={isZapError || isEstimateGasError}
+                    loading={isZapLoading || isEstGasLoading || isWritePending}
+                    disabled={isZapError || isEstGasError}
                   >
-                    {isZapError || isEstimateGasError ? (
+                    {isZapError || isEstGasError ? (
                       'Shoot! Something went wrong :('
                     ) : isWritePending ? (
                       <Dots>{title}</Dots>

diff --git a/apps/web/src/ui/pool/Steer/SteerLiquidityManagement/Add/SteerPositionZap.tsx b/apps/web/src/ui/pool/Steer/SteerLiquidityManagement/Add/SteerPositionZap.tsx
@@ -30,7 +30,11 @@ export const SteerPositionZap: FC<SteerPositionAddProps> = ({ vault }) => {
     [inputAmount, inputCurrency],
   )
 
-  const { data: zapResponse, isError: isZapError } = useZap({
+  const {
+    data: zapResponse,
+    isError: isZapError,
+    isLoading: isZapLoading,
+  } = useZap({
     chainId: vault.chainId,
     fromAddress: address,
     tokenIn: [inputCurrency.isNative ? NativeAddress : inputCurrency.address],
@@ -40,8 +44,8 @@ export const SteerPositionZap: FC<SteerPositionAddProps> = ({ vault }) => {
 
   const {
     data: estGas,
-    isError: isEstimateGasError,
-    isLoading: isEstimateGasLoading,
+    isError: isEstGasError,
+    isLoading: isEstGasLoading,
   } = useEstimateGas({
     chainId: vault.chainId,
     account: address,
@@ -103,10 +107,12 @@ export const SteerPositionZap: FC<SteerPositionAddProps> = ({ vault }) => {
                       fullWidth
                       testId="zap-liquidity"
                       onClick={() => preparedTx && sendTransaction(preparedTx)}
-                      loading={isEstimateGasLoading || isWritePending}
-                      disabled={isZapError || isEstimateGasError}
+                      loading={
+                        isZapLoading || isEstGasLoading || isWritePending
+                      }
+                      disabled={isZapError || isEstGasError}
                     >
-                      {isZapError || isEstimateGasError ? (
+                      {isZapError || isEstGasError ? (
                         'Shoot! Something went wrong :('
                       ) : isWritePending ? (
                         <Dots>Add Liquidity</Dots>

diff --git a/apps/web/src/ui/pool/ZapSectionLegacy.tsx b/apps/web/src/ui/pool/ZapSectionLegacy.tsx
@@ -63,7 +63,11 @@ export const ZapSectionLegacy: FC<ZapSectionLegacyProps> = ({
     [inputAmount, inputCurrency],
   )
 
-  const { data: zapResponse, isError: isZapError } = useZap({
+  const {
+    data: zapResponse,
+    isError: isZapError,
+    isLoading: isZapLoading,
+  } = useZap({
     chainId: _pool.chainId,
     fromAddress: address,
     tokenIn: [inputCurrency.isNative ? NativeAddress : inputCurrency.address],
@@ -73,8 +77,8 @@ export const ZapSectionLegacy: FC<ZapSectionLegacyProps> = ({
 
   const {
     data: estGas,
-    isError: isEstimateGasError,
-    isLoading: isEstimateGasLoading,
+    isError: isEstGasError,
+    isLoading: isEstGasLoading,
   } = useEstimateGas({
     chainId: _pool.chainId,
     account: address,
@@ -166,10 +170,12 @@ export const ZapSectionLegacy: FC<ZapSectionLegacyProps> = ({
                       fullWidth
                       testId="zap-liquidity"
                       onClick={() => preparedTx && sendTransaction(preparedTx)}
-                      loading={isEstimateGasLoading || isWritePending}
-                      disabled={isZapError || isEstimateGasError}
+                      loading={
+                        isZapLoading || isEstGasLoading || isWritePending
+                      }
+                      disabled={isZapError || isEstGasError}
                     >
-                      {isZapError || isEstimateGasError ? (
+                      {isZapError || isEstGasError ? (
                         'Shoot! Something went wrong :('
                       ) : isWritePending ? (
                         <Dots>Add Liquidity</Dots>