(Deposit/Withdraw) Fix transfer details layout shift while loading qu…

…otes (osmosis-labs#3626) * feat: automatically connect wallets on change chain * feat: connect wallet modal improvements * feat: support eth key signing * fix: loading for transfer details * fix: display balances for eth
osmosis-labs · Jul 30, 2024 · 97a2332 · 97a2332
1 parent 1c6ff35
commit 97a2332
Showing 1 changed file with 82 additions and 82 deletions.
diff --git a/packages/web/components/bridge/amount-screen.tsx b/packages/web/components/bridge/amount-screen.tsx
@@ -769,9 +769,7 @@ export const AmountScreen = observer(
               transferGasChain={fromChain}
             />
 
-            {(direction === "deposit"
-              ? !isNil(fromCosmosCounterpartyAccount)
-              : !isNil(toCosmosCounterpartyAccount)) && (
+            {isWalletNeededConnected && (
               <>
                 {isLoadingAssetsBalance && (
                   <div className="flex w-full items-center justify-center gap-3">
@@ -1162,30 +1160,15 @@ export const AmountScreen = observer(
               </Menu>
             )}
 
-            {isLoadingBridgeQuote && (
-              <div className="flex animate-[fadeIn_0.25s] items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <Spinner className="text-wosmongton-500" />
-                  <p className="body1 md:body2 text-osmoverse-300">
-                    {t("transfer.estimatingTime")}
-                  </p>
-                </div>
-                <span className="body1 md:body2 text-osmoverse-300">
-                  {t("transfer.calculatingFees")}
-                </span>
-              </div>
-            )}
-
-            {!isLoadingBridgeQuote && !isNil(selectedQuote) && (
-              <TransferDetails
-                quote={
-                  quote as BridgeQuote & {
-                    selectedQuote: NonNullable<BridgeQuote["selectedQuote"]>;
-                  }
+            <TransferDetails
+              quote={
+                quote as BridgeQuote & {
+                  selectedQuote: NonNullable<BridgeQuote["selectedQuote"]>;
                 }
-                fromChain={fromChain}
-              />
-            )}
+              }
+              fromChain={fromChain}
+              isLoading={isLoadingBridgeQuote}
+            />
 
             <div className="flex flex-col items-center gap-4">
               <ScreenManager
@@ -1439,25 +1422,18 @@ const WalletDisplay: FunctionComponent<{
 };
 
 const TransferDetails: FunctionComponent<{
-  quote: BridgeQuote & {
-    selectedQuote: NonNullable<BridgeQuote["selectedQuote"]>;
-  };
+  quote: BridgeQuote | undefined;
   fromChain: BridgeChainWithDisplayInfo;
-}> = ({ quote, fromChain }) => {
+  isLoading: boolean;
+}> = ({ quote, fromChain, isLoading }) => {
   const [detailsRef, { height: detailsHeight, y: detailsOffset }] =
     useMeasure<HTMLDivElement>();
   const { t } = useTranslation();
-  const {
-    selectedQuote,
-    warnUserOfPriceImpact,
-    warnUserOfSlippage,
-    selectedQuoteUpdatedAt,
-    refetchInterval,
-    successfulQuotes,
-    setSelectedBridgeProvider,
-    isRefetchingQuote,
-    isTxPending,
-  } = quote;
+  const successfulQuotes = quote?.successfulQuotes ?? [];
+
+  if (!isLoading && successfulQuotes.length === 0) {
+    return null;
+  }
 
   return (
     <Disclosure>
@@ -1472,57 +1448,81 @@ const TransferDetails: FunctionComponent<{
         >
           <DisclosureButton>
             <div className="flex animate-[fadeIn_0.25s] items-center justify-between">
-              {open ? (
+              {isLoading || !quote ? (
+                <div className="flex items-center gap-2">
+                  <Spinner className="text-wosmongton-500" />
+                  <p className="body1 md:body2 text-osmoverse-300">
+                    {t("transfer.estimatingTime")}
+                  </p>
+                </div>
+              ) : open ? (
                 <p className="subtitle1">{t("transfer.transferDetails")}</p>
-              ) : (
+              ) : null}
+
+              {!isLoading && quote?.selectedQuote && !open && (
                 <div className="flex items-center gap-1">
                   <Icon id="stopwatch" className="h-4 w-4 text-osmoverse-400" />
                   <p className="body1 md:body2 text-osmoverse-300 first-letter:capitalize">
-                    {selectedQuote.estimatedTime.humanize()}
+                    {quote.selectedQuote.estimatedTime.humanize()}
                   </p>
                 </div>
               )}
-              <ExpandDetailsControlContent
-                warnUserOfPriceImpact={warnUserOfPriceImpact}
-                warnUserOfSlippage={warnUserOfSlippage}
-                selectedQuoteUpdatedAt={selectedQuoteUpdatedAt}
-                refetchInterval={refetchInterval}
-                selectedQuote={selectedQuote}
-                open={open}
-                isRemainingTimePaused={isRefetchingQuote || isTxPending}
-                showRemainingTime
-              />
+
+              {isLoading || !quote ? (
+                <span className="body1 md:body2 text-osmoverse-300">
+                  {t("transfer.calculatingFees")}
+                </span>
+              ) : null}
+
+              {!isLoading && quote?.selectedQuote ? (
+                <ExpandDetailsControlContent
+                  warnUserOfPriceImpact={quote.warnUserOfPriceImpact}
+                  warnUserOfSlippage={quote.warnUserOfSlippage}
+                  selectedQuoteUpdatedAt={quote.selectedQuoteUpdatedAt}
+                  refetchInterval={quote.refetchInterval}
+                  selectedQuote={quote.selectedQuote}
+                  open={open}
+                  isRemainingTimePaused={
+                    quote.isRefetchingQuote || quote.isTxPending
+                  }
+                  showRemainingTime
+                />
+              ) : null}
             </div>
           </DisclosureButton>
           <DisclosurePanel ref={detailsRef} className="flex flex-col gap-3">
-            <BridgeProviderDropdownRow
-              successfulQuotes={successfulQuotes}
-              setSelectedBridgeProvider={setSelectedBridgeProvider}
-              isRefetchingQuote={isRefetchingQuote}
-              selectedQuote={selectedQuote}
-            />
-            <EstimatedTimeRow
-              isRefetchingQuote={isRefetchingQuote}
-              selectedQuote={selectedQuote}
-            />
-            <ProviderFeesRow
-              isRefetchingQuote={isRefetchingQuote}
-              selectedQuote={selectedQuote}
-            />
-            <NetworkFeeRow
-              isRefetchingQuote={isRefetchingQuote}
-              selectedQuote={selectedQuote}
-              fromChainName={fromChain.prettyName}
-            />
-            <TotalFeesRow
-              isRefetchingQuote={isRefetchingQuote}
-              selectedQuote={selectedQuote}
-            />
-            <ExpectedOutputRow
-              isRefetchingQuote={isRefetchingQuote}
-              selectedQuote={selectedQuote}
-              warnUserOfSlippage={Boolean(warnUserOfSlippage)}
-            />
+            {quote?.selectedQuote && (
+              <>
+                <BridgeProviderDropdownRow
+                  successfulQuotes={quote.successfulQuotes}
+                  setSelectedBridgeProvider={quote.setSelectedBridgeProvider}
+                  isRefetchingQuote={quote.isRefetchingQuote}
+                  selectedQuote={quote.selectedQuote}
+                />
+                <EstimatedTimeRow
+                  isRefetchingQuote={quote.isRefetchingQuote}
+                  selectedQuote={quote.selectedQuote}
+                />
+                <ProviderFeesRow
+                  isRefetchingQuote={quote.isRefetchingQuote}
+                  selectedQuote={quote.selectedQuote}
+                />
+                <NetworkFeeRow
+                  isRefetchingQuote={quote.isRefetchingQuote}
+                  selectedQuote={quote.selectedQuote}
+                  fromChainName={fromChain.prettyName}
+                />
+                <TotalFeesRow
+                  isRefetchingQuote={quote.isRefetchingQuote}
+                  selectedQuote={quote.selectedQuote}
+                />
+                <ExpectedOutputRow
+                  isRefetchingQuote={quote.isRefetchingQuote}
+                  selectedQuote={quote.selectedQuote}
+                  warnUserOfSlippage={Boolean(quote.warnUserOfSlippage)}
+                />
+              </>
+            )}
           </DisclosurePanel>
         </div>
       )}