style(tangle-dapp): Add refreshing animation to inputs

tangle-network · Aug 26, 2024 · b2bbb5e · b2bbb5e
1 parent e4426a0
commit b2bbb5e
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 25 deletions.
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/ExchangeRateDetailItem.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/ExchangeRateDetailItem.tsx
@@ -21,25 +21,27 @@ const ExchangeRateDetailItem: FC<ExchangeRateDetailItemProps> = ({
   const { exchangeRate, isRefreshing } = useLsExchangeRate(type, protocolId);
 
   const exchangeRateElement =
-    exchangeRate === null ? (
+    exchangeRate instanceof Error ? (
+      exchangeRate
+    ) : exchangeRate === null ? (
       <SkeletonLoader className="w-[50px]" />
     ) : isRefreshing ? (
       <div className="animate-pulse">{exchangeRate}</div>
     ) : (
       exchangeRate
     );
 
-  return (
-    <DetailItem
-      title="Rate"
-      value={
-        <div className="flex gap-1 items-center justify-center whitespace-nowrap">
-          1 {token} = {exchangeRateElement} {LST_PREFIX}
-          {token}
-        </div>
-      }
-    />
-  );
+  const value =
+    exchangeRateElement instanceof Error ? (
+      exchangeRateElement
+    ) : (
+      <div className="flex gap-1 items-center justify-center whitespace-nowrap">
+        1 {token} = {exchangeRateElement} {LST_PREFIX}
+        {token}
+      </div>
+    );
+
+  return <DetailItem title="Rate" value={value} />;
 };
 
 export default ExchangeRateDetailItem;
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakeCard.tsx
@@ -69,11 +69,18 @@ const LiquidStakeCard: FC = () => {
     setValue: setSelectedProtocolId,
   });
 
-  const { exchangeRate } = useLsExchangeRate(
+  const {
+    exchangeRate: exchangeRateOrError,
+    isRefreshing: isRefreshingExchangeRate,
+  } = useLsExchangeRate(
     ExchangeRateType.NativeToDerivative,
     selectedProtocolId,
   );
 
+  // TODO: Properly handle the error state.
+  const exchangeRate =
+    exchangeRateOrError instanceof Error ? null : exchangeRateOrError;
+
   const handleStakeClick = useCallback(async () => {
     // Not ready yet; no amount given.
     if (fromAmount === null) {
@@ -143,6 +150,7 @@ const LiquidStakeCard: FC = () => {
         isTokenLiquidVariant
         token={selectedProtocol.token}
         rightElement={<SelectValidatorsButton />}
+        className={isRefreshingExchangeRate ? 'animate-pulse' : undefined}
       />
 
       {/* Details */}

diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakingInput.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidStakingInput.tsx
@@ -35,6 +35,7 @@ export type LiquidStakingInputProps = {
   minAmount?: BN;
   maxAmount?: BN;
   maxErrorMessage?: string;
+  className?: string;
   onAmountChange?: (newAmount: BN | null) => void;
   setChainId?: (newChain: LsProtocolId) => void;
   onTokenClick?: () => void;
@@ -56,6 +57,7 @@ const LiquidStakingInput: FC<LiquidStakingInputProps> = ({
   onAmountChange,
   setChainId,
   onTokenClick,
+  className,
 }) => {
   const minErrorMessage = ((): string | undefined => {
     if (minAmount === undefined) {
@@ -115,7 +117,10 @@ const LiquidStakingInput: FC<LiquidStakingInputProps> = ({
         <div className="flex gap-1">
           <input
             id={id}
-            className="w-full bg-transparent border-none text-xl font-bold outline-none focus:ring-0"
+            className={twMerge(
+              'w-full bg-transparent border-none text-xl font-bold outline-none focus:ring-0',
+              className,
+            )}
             type="text"
             placeholder={placeholder}
             value={displayAmount}

diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidUnstakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LiquidUnstakeCard.tsx
@@ -71,11 +71,18 @@ const LiquidUnstakeCard: FC = () => {
 
   const selectedProtocol = getLsProtocolDef(selectedProtocolId);
 
-  const { exchangeRate } = useLsExchangeRate(
+  const {
+    exchangeRate: exchangeRateOrError,
+    isRefreshing: isRefreshingExchangeRate,
+  } = useLsExchangeRate(
     ExchangeRateType.DerivativeToNative,
     selectedProtocol.id,
   );
 
+  // TODO: Properly handle the error state.
+  const exchangeRate =
+    exchangeRateOrError instanceof Error ? null : exchangeRateOrError;
+
   useSearchParamSync({
     key: LsSearchParamKey.AMOUNT,
     value: fromAmount,
@@ -179,6 +186,7 @@ const LiquidUnstakeCard: FC = () => {
         token={selectedProtocol.token}
         setChainId={setSelectedProtocolId}
         isReadOnly
+        className={isRefreshingExchangeRate ? 'animate-pulse' : undefined}
       />
 
       {/* Details */}

diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/TotalDetailItem.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/TotalDetailItem.tsx
@@ -38,9 +38,11 @@ const TotalDetailItem: FC<TotalDetailItemProps> = ({
     if (inputAmount === null || exchangeRate === null || feePermill === null) {
       return null;
     }
-    // Propagate error.
+    // Propagate errors.
     else if (feePermill instanceof Error) {
       return feePermill;
+    } else if (exchangeRate instanceof Error) {
+      return exchangeRate;
     }
 
     const feeAmount = scaleAmountByPermill(inputAmount, feePermill);

diff --git a/apps/tangle-dapp/data/liquidStaking/useLsExchangeRate.ts b/apps/tangle-dapp/data/liquidStaking/useLsExchangeRate.ts
@@ -48,7 +48,7 @@ const useLsExchangeRate = (
   type: ExchangeRateType,
   protocolId: LsProtocolId,
 ) => {
-  const [exchangeRate, setExchangeRate] = useState<number | null>(null);
+  const [exchangeRate, setExchangeRate] = useState<number | Error | null>(null);
 
   const protocol = getLsProtocolDef(protocolId);
 
@@ -123,14 +123,11 @@ const useLsExchangeRate = (
   } = useContractRead(LIQUIFIER_ADAPTER_ABI, getLiquifierTotalSharesOptions);
 
   const fetchLiquifierExchangeRate = useCallback(async () => {
-    // Not yet ready.
-    if (
-      tgTokenTotalSupply === null ||
-      liquifierTotalShares === null ||
-      tgTokenTotalSupply instanceof Error ||
-      liquifierTotalShares instanceof Error
-    ) {
-      return null;
+    // Propagate error or loading states.
+    if (typeof tgTokenTotalSupply !== 'bigint') {
+      return tgTokenTotalSupply;
+    } else if (typeof liquifierTotalShares !== 'bigint') {
+      return liquifierTotalShares;
     }
 
     const tgTokenTotalSupplyBn = new BN(tgTokenTotalSupply.toString());