Fix issue and improve ux (#536)

* update record table balance precision

* add discord social

* no available relayer check

* dynamic import Modal component with disable ssr

packages/apps/src/components/cross-chain-info.tsx

@@ -1,7 +1,9 @@
 import { BaseBridge } from "@/bridges/base";
 import { Token } from "@/types/token";
 import CountLoading from "@/ui/count-loading";
+import Tooltip from "@/ui/tooltip";
 import { formatBalance } from "@/utils/balance";
+import Image from "next/image";
 import { PropsWithChildren, useEffect, useState } from "react";
 import { Subscription, from } from "rxjs";
 
@@ -46,12 +48,14 @@ export default function CrossChainInfo({ fee, bridge }: Props) {
         <span>Transaction Fee</span>
         {fee?.loading ? (
           <CountLoading color="white" />
-        ) : fee?.token ? (
+        ) : fee?.token && fee.value ? (
           <span>
             {formatBalance(fee.value, fee.token.decimals, { precision: 6 })} {fee.token.symbol}
           </span>
         ) : (
-          <span />
+          <Tooltip content="No relayer available, please check the transfer amount">
+            <Image width={16} height={16} alt="Fee" src="/images/warning.svg" />
+          </Tooltip>
         )}
       </Item>
       {!!dailyLimit && (

packages/apps/src/components/disclaimer-modal.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import Button from "@/ui/button";
-import Modal from "@/ui/modal";
+import dynamic from "next/dynamic";
 import { useState } from "react";
 
 const KEY = "disclaimer";
+const Modal = dynamic(() => import("@/ui/modal"), { ssr: false });
 
 export default function DisclaimerModal() {
   const [isOpen, setIsOpen] = useState(!localStorage.getItem(KEY));

packages/apps/src/components/faucet.tsx

@@ -3,13 +3,15 @@ import { useCallback, useEffect, useState } from "react";
 import { useAccount, useNetwork, usePublicClient, useSwitchNetwork, useWalletClient } from "wagmi";
 import { Subscription, forkJoin, from } from "rxjs";
 import { switchMap } from "rxjs/operators";
-import Modal from "@/ui/modal";
 import { formatBalance } from "@/utils/balance";
 import { notification } from "@/ui/notification";
 import { notifyTransaction } from "@/utils/notification";
 import Label from "@/ui/label";
 import { useTransfer } from "@/hooks/use-transfer";
 import { parseUnits } from "viem";
+import dynamic from "next/dynamic";
+
+const Modal = dynamic(() => import("@/ui/modal"), { ssr: false });
 
 export default function Faucet() {
   const { sourceChain, sourceToken, updateBalance } = useTransfer();

packages/apps/src/components/footer.tsx

@@ -36,6 +36,9 @@ export default function Footer() {
           <SocialLink href="https://twitter.com/helixbridges">
             <Image width={18} height={18} alt="Twitter" src="/images/social/twitter.svg" />
           </SocialLink>
+          <SocialLink href="https://discord.gg/6XyyNGugdE">
+            <Image width={20} height={20} alt="Discord" src="/images/social/discord.svg" />
+          </SocialLink>
           <SocialLink href="mailto:[email protected]">
             <Image width={18} height={18} alt="Email" src="/images/social/email.svg" />
           </SocialLink>

packages/apps/src/components/records-table.tsx

@@ -131,7 +131,7 @@ function FromTo({ network, amount, symbol }: { network: Network; amount: bigint;
       <Image width={32} height={32} alt="Logo" src={getChainLogoSrc(chain.logo)} className="rounded-full" />
       <div className="flex flex-col items-start">
         <span className="truncate text-sm font-medium text-white">
-          {formatBalance(amount, token.decimals, { keepZero: false })} {symbol}
+          {formatBalance(amount, token.decimals, { precision: 4 })} {symbol}
         </span>
         <span className="text-xs font-normal text-white/50">{chain.name}</span>
       </div>

packages/apps/src/components/relayer-manage-modal.tsx

@@ -1,4 +1,3 @@
-import Modal from "@/ui/modal";
 import SegmentedTabs, { SegmentedTabsProps } from "@/ui/segmented-tabs";
 import Tooltip from "@/ui/tooltip";
 import Image from "next/image";
@@ -10,8 +9,10 @@ import { getChainConfig } from "@/utils/chain";
 import { useNetwork, useSwitchNetwork } from "wagmi";
 import { formatBalance } from "@/utils/balance";
 import { useRelayer } from "@/hooks/use-relayer";
+import dynamic from "next/dynamic";
 
 type TabKey = "update" | "deposit" | "withdraw";
+const Modal = dynamic(() => import("@/ui/modal"), { ssr: false });
 
 interface Props {
   relayerInfo?: LnRelayerInfo;

packages/apps/src/components/relayer-register.tsx

@@ -24,8 +24,8 @@ import { useApolloClient } from "@apollo/client";
 import { QUERY_SPECIAL_RELAYER } from "@/config/gql";
 import { SpecialRelayerResponseData, SpecialRelayerVariables } from "@/types/graphql";
 import { notification } from "@/ui/notification";
-import Modal from "@/ui/modal";
 import { useRelayer } from "@/hooks/use-relayer";
+import dynamic from "next/dynamic";
 
 enum Step {
   ONE,
@@ -35,6 +35,7 @@ enum Step {
   THREE,
   COMPLETE_THREE,
 }
+const Modal = dynamic(() => import("@/ui/modal"), { ssr: false });
 
 const { availableTargetChains, defaultTargetChains, availableBridges, availableTokens, defaultSourceOptions } =
   getParsedCrossChain();

packages/apps/src/components/transaction-status.tsx

@@ -9,10 +9,11 @@ import { useNetwork, usePublicClient, useSwitchNetwork, useWalletClient } from "
 import { getChainConfig } from "@/utils/chain";
 import { notification } from "@/ui/notification";
 import { notifyTransaction } from "@/utils/notification";
-import Modal from "@/ui/modal";
 import { BalanceInput } from "./balance-input";
 import { formatBalance } from "@/utils/balance";
+import dynamic from "next/dynamic";
 
+const Modal = dynamic(() => import("@/ui/modal"), { ssr: false });
 interface Props {
   record?: HistoryRecord | null;
 }

packages/apps/src/components/transfer-action.tsx

@@ -6,15 +6,14 @@ import Button from "@/ui/button";
 import { useTransfer } from "@/hooks/use-transfer";
 import { isAddress } from "viem";
 
-export default function TransferAction({
-  recipient,
-  transferValue,
-  onTransfer,
-}: {
+interface Props {
+  fee: { value: bigint } | undefined;
   recipient: Address | undefined;
   transferValue: TransferValue;
   onTransfer: () => void;
-}) {
+}
+
+export default function TransferAction({ recipient, transferValue, onTransfer }: Props) {
   const { sourceAllowance, sourceValue, targetValue, bridgeClient, fee, approve } = useTransfer();
   const [busy, setBusy] = useState(false);
   const { chain } = useNetwork();
@@ -48,7 +47,14 @@ export default function TransferAction({
         <Button
           kind="primary"
           disabled={
-            !(sourceValue && targetValue && bridgeClient && transferValue.formatted > 0 && isAddress(recipient || ""))
+            !(
+              sourceValue &&
+              targetValue &&
+              bridgeClient &&
+              fee?.value &&
+              transferValue.formatted &&
+              isAddress(recipient || "")
+            )
           }
           className="button"
           onClick={onTransfer}

packages/apps/src/components/transfer-modal.tsx

@@ -1,7 +1,6 @@
 import { BaseBridge } from "@/bridges/base";
 import { ChainToken } from "@/types/misc";
 import { RelayersResponseData } from "@/types/graphql";
-import Modal from "@/ui/modal";
 import { formatBalance } from "@/utils/balance";
 import { getChainLogoSrc } from "@/utils/misc";
 import { ApolloQueryResult } from "@apollo/client";
@@ -12,7 +11,9 @@ import { notification } from "@/ui/notification";
 import { parseUnits } from "viem";
 import { Token } from "@/types/token";
 import { useTransfer } from "@/hooks/use-transfer";
+import dynamic from "next/dynamic";
 
+const Modal = dynamic(() => import("@/ui/modal"), { ssr: false });
 interface Props {
   sender?: `0x${string}` | null;
   recipient?: `0x${string}` | null;

packages/apps/src/components/transfer.tsx

@@ -265,6 +265,7 @@ export default function Transfer() {
 
         {/* action */}
         <TransferAction
+          fee={fee}
           transferValue={deferredTransferValue}
           recipient={recipient || address}
           onTransfer={setIsOpenTrue}