Fix fee loading all the time (#496)

* fix fee loadig all the time * fix failed to build
helix-bridge · Jul 27, 2023 · 8b8a149 · 8b8a149
1 parent 502c417
commit 8b8a149
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git a/packages/apps/components/CrossChain.tsx b/packages/apps/components/CrossChain.tsx
@@ -17,7 +17,7 @@ import { from, from as fromRx } from 'rxjs/internal/observable/from';
 import { iif } from 'rxjs/internal/observable/iif';
 import { of } from 'rxjs/internal/observable/of';
 import { switchMap } from 'rxjs/internal/operators/switchMap';
-import type { Subscription } from 'rxjs';
+import { Subscription, tap } from 'rxjs';
 import { DEFAULT_DIRECTION, FORM_CONTROL, LONG_DURATION } from 'shared/config/constant';
 import { validateMessages } from 'shared/config/validate-msg';
 import { getBridges } from 'utils/bridge';
@@ -95,6 +95,7 @@ export function CrossChain() {
   const router = useRouter();
   const { afterCrossChain } = useAfterTx<CrossChainPayload<Bridge<BridgeConfig, ChainConfig, ChainConfig>>>(router);
   const [fetchRelayersInfo] = useManualQuery(GET_RELAYERS_INFO);
+  const [relayerCount, setRelayerCount] = useState(-1);
 
   const allowanceEnough = useMemo(
     () =>
@@ -215,6 +216,7 @@ export function CrossChain() {
         })
       )
         .pipe(
+          tap(({ data: relayersInfo }) => setRelayerCount(relayersInfo?.sortedLnv20RelayInfos.length || 0)),
           switchMap(({ data: relayersInfo }) =>
             relayersInfo?.sortedLnv20RelayInfos.length
               ? bridge.getFee(direction, false, {
@@ -459,6 +461,7 @@ export function CrossChain() {
           allowance={allowance}
           fee={fee}
           dailyLimit={dailyLimit}
+          relayerCount={relayerCount}
           updatePayload={setPatchPayload}
         />
       ) : (
@@ -519,15 +522,15 @@ export function CrossChain() {
 
                 // eslint-disable-next-line complexity
                 form.validateFields().then(async (values) => {
-                  let relayerCount = 1;
+                  let _relayerCount = 1;
 
                   const payload = await flow(
                     patchPayload,
                     (value: CrossChainPayload<CommonBridge> | null) =>
                       value && { ...value, wallet: departureConnection.wallet as SupportedWallet },
                     async (value) => {
                       if (value?.bridge.category === 'lnbridgev20') {
-                        relayerCount = 0;
+                        _relayerCount = 0;
                         try {
                           const { data: relayersInfo } = await fetchRelayersInfo({
                             variables: {
@@ -539,7 +542,7 @@ export function CrossChain() {
                               token: value.direction.from.address,
                             },
                           });
-                          relayerCount = relayersInfo?.sortedLnv20RelayInfos.length || 0;
+                          _relayerCount = relayersInfo?.sortedLnv20RelayInfos.length || 0;
 
                           if (relayerCount) {
                             return {
@@ -579,7 +582,7 @@ export function CrossChain() {
                       amount: dailyLimit && new BN(dailyLimit.limit).sub(new BN(dailyLimit.spentToday)),
                     },
                     allowance: { ...fromToken, amount: allowance },
-                    relayerCount,
+                    relayerCount: _relayerCount,
                   });
 
                   const workflow = createTxWorkflow(

diff --git a/packages/apps/components/bridge/Bridge.tsx b/packages/apps/components/bridge/Bridge.tsx
@@ -17,6 +17,7 @@ export function Bridge({
   form,
   hideRecipient = false,
   tip,
+  relayerCount = -1,
 }: CrossChainComponentProps<
   Brg<BridgeConfig, ChainConfig, ChainConfig>,
   CrossToken<ChainConfig>,
@@ -53,6 +54,7 @@ export function Bridge({
         direction={direction}
         dailyLimit={dailyLimit}
         allowance={allowance}
+        relayerCount={relayerCount}
       ></CrossChainInfo>
     </>
   );

diff --git a/packages/apps/components/widget/CrossChainInfo.tsx b/packages/apps/components/widget/CrossChainInfo.tsx
@@ -18,6 +18,7 @@ interface CrossChainInfoProps {
   isDynamicFee?: boolean;
   dailyLimit?: DailyLimit | null;
   allowance?: BN | null;
+  relayerCount?: number;
 }
 
 export function CrossChainInfo({
@@ -28,11 +29,13 @@ export function CrossChainInfo({
   dailyLimit,
   direction,
   allowance,
+  relayerCount,
   isDynamicFee = false,
 }: PropsWithChildren<CrossChainInfoProps>) {
   const { t } = useITranslation();
   const { departureConnection } = useApi();
 
+  // eslint-disable-next-line complexity
   const feeContent = useMemo(() => {
     if (fee) {
       return fee.amount.lt(BN_ZERO) ? (
@@ -45,16 +48,22 @@ export function CrossChainInfo({
           {fee.symbol}
         </Tooltip>
       );
+    } else if (isDynamicFee) {
+      return (
+        <Tooltip title={t('The transaction fee is dynamic, need some conditions to estimate it')}>
+          <QuestionCircleOutlined className="cursor-pointer" />
+        </Tooltip>
+      );
+    } else if (relayerCount === 0) {
+      return (
+        <Tooltip title={t('No provider available, please check the transfer amount')}>
+          <InfoCircleOutlined />
+        </Tooltip>
+      );
+    } else {
+      return <CountLoading />;
     }
-
-    return isDynamicFee ? (
-      <Tooltip title={t('The transaction fee is dynamic, need some conditions to estimate it')}>
-        <QuestionCircleOutlined className="cursor-pointer" />
-      </Tooltip>
-    ) : (
-      <CountLoading />
-    );
-  }, [fee, isDynamicFee, t]);
+  }, [fee, relayerCount, isDynamicFee, t]);
 
   // eslint-disable-next-line complexity
   const dailyLimitContent = useMemo(() => {

diff --git a/packages/apps/model/component.ts b/packages/apps/model/component.ts
@@ -37,6 +37,7 @@ export interface CrossChainComponentProps<
   allowance: BN | null;
   dailyLimit: DailyLimit | null;
   fee: TokenWithAmount | null;
+  relayerCount?: number;
   updatePayload: React.Dispatch<
     React.SetStateAction<
       (