rujira.ui 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rujira.ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",

package/src/components/balance/OmniBalance.tsx

@@ -1,12 +1,17 @@
-import { Balance, BalanceAccount, networkLabel } from "rujira.js";
+import { Fragment, useId, useMemo } from "react";
+import { Tooltip } from "react-tooltip";
+import { Address, Balance, BalanceAccount, networkLabel } from "rujira.js";
 import { nFormatter } from "../../helpers";
+import { ProviderIcon } from "../icons/ProviderIcon";
 import { NetworkIcon } from "../icons/NetworkIcon";
 import { Decimal } from "../numbers/Decimal";
+import { Provider } from "../../wallets";
 
 type OmniBalanceProps = {
   onClick?: (b: Balance | BalanceAccount) => void;
   className?: string;
   balance?: Balance;
+  accountProviders?: { address: Address; provider: Provider.Key }[] | null;
 };
 
 const accountSorter = (a: BalanceAccount, b: BalanceAccount) => {
@@ -21,7 +26,15 @@ export const OmniBalance = ({
   balance,
   onClick,
   className,
+  accountProviders,
 }: OmniBalanceProps) => {
+  const tooltipId = useId();
+
+  const providerLookup = useMemo(
+    () => new Map(accountProviders?.map(({ address, provider }) => [address, provider])),
+    [accountProviders]
+  );
+
   const sortedAccounts = balance?.accounts
     ? [...balance.accounts].sort(accountSorter)
     : [];
@@ -37,18 +50,36 @@ export const OmniBalance = ({
         <div className="omni-balance__networks">
           {sortedAccounts.map((x) => {
             const n = x.asset.type === "SECURED" ? "THOR" : x.asset.chain;
+            const provider = providerLookup.get(x.address);
+            const tipId = `${tooltipId}-${n}`;
             return (
-              <button
-                key={n}
-                data-tooltip-id="global-tip"
-                data-tooltip-html={`
-                    <div class="condensed fs-16 fw-500">${nFormatter(x.balance, 6)}</div><div class="fs-14 lh-16 color-grey">on ${networkLabel(
-                      n
-                    )}</div>`}
-                className={`omni-balance__network-button omni-balance__network-button--${n.toLowerCase()}`}
-                onClick={() => onClick?.(x)}>
-                <NetworkIcon network={n} />
-              </button>
+              <Fragment key={n}>
+                <button
+                  data-tooltip-id={tipId}
+                  className={`omni-balance__network-button omni-balance__network-button--${n.toLowerCase()}`}
+                  onClick={() => onClick?.(x)}>
+                  <NetworkIcon network={n} />
+                </button>
+                <Tooltip id={tipId} className="tooltip">
+                  <div className="flex ai-c gap-1">
+                    {provider && (
+                      <ProviderIcon
+                        provider={provider}
+                        selected
+                        className="w-3 h-3 block"
+                      />
+                    )}
+                    <div>
+                      <div className="condensed fs-16 fw-500">
+                        {nFormatter(x.balance, 6)}
+                      </div>
+                      <div className="fs-14 lh-16 color-grey">
+                        on {networkLabel(n)}
+                      </div>
+                    </div>
+                  </div>
+                </Tooltip>
+              </Fragment>
             );
           })}
         </div>

package/src/components/bridges/DepositModal.tsx

@@ -1,33 +1,32 @@
+import { FC, ReactNode, useEffect, useRef, useState } from "react";
 import {
-  FC,
-  ReactNode,
-  useEffect,
-  useRef,
-  /* useEffect, */ useState,
-} from "react";
-import { Address, Asset, Balance, BalanceAccount, networkConfirmationTime, networkExplorerLabel, /* Network, */ networkLabel, networkTxLink, TxResult, signers } from "rujira.js";
+  Address,
+  Asset,
+  Balance,
+  BalanceAccount,
+  networkConfirmationTime,
+  networkExplorerLabel,
+  networkLabel,
+  networkTxLink,
+  TxResult,
+  signers,
+  validateAddress,
+} from "rujira.js";
 import { useTranslation } from "../../i18n";
+import { LoaderWithContent } from "../loader/LoaderWithContent";
 import { IconDenom } from "../icons/IconDenom";
-import {
-  /* AngleDown, */ AngleLeft,
-  External,
-  /* Info, */
-  MinusCircle,
-} from "../icons/Icons";
+import { AngleLeft, External, MinusCircle } from "../icons/Icons";
 import { Input } from "../inputs/Input";
-/* import { useClickOutside } from "../../hooks/useClickOutside";
-import { BreakPoints, useWindowSize } from "../../hooks/useWindowSize";
-import { AnimatePresence, motion } from "motion/react"; */
 import clsx from "clsx";
 import { formatDuration, intervalToDuration } from "date-fns";
 import toast from "react-hot-toast";
 
-
 import {
   Button,
   Decimal,
   DenomInput,
   Fiat,
+  Icons,
   NetworkIcon,
   Radio,
   Toggle,
@@ -63,6 +62,7 @@ export interface DepositModalProps {
   queryClient: signers.cosmos.QueryClient & signers.cosmos.ThorchainExtension;
   amount?: bigint;
   label?: string | ReactNode;
+  inboundAddresses?: { dustThreshold: bigint; chain: string }[];
 }
 
 export const DepositModal: FC<DepositModalProps> = ({
@@ -76,6 +76,7 @@ export const DepositModal: FC<DepositModalProps> = ({
   amount,
   target,
   label,
+  inboundAddresses,
 }) => {
   const { t } = useTranslation("common");
   const [token, setToken] = useState<string | undefined>(
@@ -135,6 +136,7 @@ export const DepositModal: FC<DepositModalProps> = ({
               Submit={Submit}
               onSuccess={setTx}
               queryClient={queryClient}
+              inboundAddresses={inboundAddresses}
             />
           </>
         )}
@@ -240,6 +242,7 @@ interface DepositConfirmProps {
   onSuccess: (tx: TxResult) => void;
   queryClient: signers.cosmos.QueryClient & signers.cosmos.ThorchainExtension;
   amount?: bigint;
+  inboundAddresses?: { dustThreshold: bigint; chain: string }[];
 }
 
 const Confirm: FC<DepositConfirmProps> = ({
@@ -251,6 +254,7 @@ const Confirm: FC<DepositConfirmProps> = ({
   onSuccess,
   queryClient,
   amount: requestAmount,
+  inboundAddresses,
 }) => {
   const { t } = useTranslation("common");
   const ref = useRef<HTMLInputElement | null>(null);
@@ -264,18 +268,28 @@ const Confirm: FC<DepositConfirmProps> = ({
     undefined | "loading" | signers.cosmos.QuoteSwap | Error
   >();
   const [account, setAccount] = useState(balance?.accounts[0]);
+  const dustThreshold = inboundAddresses?.find(
+    (a) => a.chain === account?.asset.chain
+  )?.dustThreshold;
+
   useEffect(() => {
     if (ref.current && target === "custom") {
       ref.current.focus();
     }
   }, [target, ref]);
-  const shouldSwap =
+
+  const canSwap =
     asset.chain !== account?.asset.chain ||
     asset.metadata.symbol !== account.asset.metadata.symbol;
 
+  const shouldSwap = canSwap && !direct;
+
   // Determine the actual destination address
   const destination = target === "custom" ? custom : target;
 
+  const isCustomAddressInvalid =
+    target === "custom" && custom !== "" && !validateAddress("THOR", custom);
+
   // Fetch swap quote when conditions are met
   useEffect(() => {
     setQuote(undefined);
@@ -356,17 +370,18 @@ const Confirm: FC<DepositConfirmProps> = ({
                     />
                   </div>
                   {x.valueUsd ? (
-                   <div className="iflex ml-0.5 ml-sm-1 fs-13 color-grey"
-                        style={{marginBottom:"0.05rem"}}>
-                     (
+                    <div
+                      className="iflex ml-0.5 ml-sm-1 fs-13 color-grey"
+                      style={{ marginBottom: "0.05rem" }}>
+                      (
                       <Fiat
                         amount={x.valueUsd}
                         symbol="$"
                         decimals={8}
                         className="fs-12 color-grey"
                       />
-                     )
-                   </div>
+                      )
+                    </div>
                   ) : null}
                 </div>
               </div>
@@ -387,51 +402,96 @@ const Confirm: FC<DepositConfirmProps> = ({
       />
 
       <div className="row wrap mt-1.5 mt-sm-2 condensed fs-14 px-2 gap-y-1">
+        <div
+          className={clsx(
+            "col-12 col-xs-4 text-center text-xs-left fw-500",
+            amount > 0n && amount < (dustThreshold ?? 0n)
+              ? "color-red"
+              : "color-grey"
+          )}>
+          {t("minimumDeposit")}
+        </div>
+        <div className="col-12 col-xs-8 text-center text-xs-right color-grey">
+          {(dustThreshold ?? 0n) > 0n && (
+            <Decimal
+              amount={dustThreshold!}
+              symbol={account?.asset.metadata.symbol}
+              className={clsx("pointer", {
+                "color-red": amount > 0n && amount < dustThreshold!,
+                "color-grey": amount > 0n && amount > dustThreshold!,
+              })}
+              symbolClassName={clsx("fs-14 condensed fw-500", {
+                "color-red": amount > 0n && amount < dustThreshold!,
+                "color-grey": amount > 0n && amount > dustThreshold!,
+              })}
+              onClick={() => setAmount(dustThreshold! ?? 0n)}
+            />
+          )}
+        </div>
+
         <div className="col-12 col-xs-4 text-center text-xs-left color-grey fw-500">
           {t("swapFee")}
         </div>
-        <div className="col-12 col-xs-8 text-center text-xs-right">
-          <Decimal
-            amount={depositFee}
-            symbol={
-              direct ? account?.asset.metadata.symbol : asset.metadata.symbol
+        <div className="col-12 col-xs-8 text-center text-xs-right color-teal">
+          <LoaderWithContent
+            loading={quote === "loading"}
+            content={
+              <div className="color-grey">
+                <Decimal
+                  amount={depositFee}
+                  symbol={
+                    direct
+                      ? account?.asset.metadata.symbol
+                      : asset.metadata.symbol
+                  }
+                  className={direct || !shouldSwap ? "color-grey" : undefined}
+                  symbolClassName="color-grey fs-14 condensed fw-500"
+                />
+                <div className="iflex ml-1 fs-13 color-grey">
+                  (
+                  <Fiat
+                    amount={feeValue ?? 0n}
+                    symbol="$"
+                    decimals={8}
+                    className="numeric-input__value color-grey fs-12"
+                  />
+                  )
+                </div>
+              </div>
             }
-            className={direct || !shouldSwap ? "color-grey" : undefined}
-            symbolClassName="color-grey fs-14 condensed fw-500"
           />
-          <div className="iflex ml-1 fs-13 color-grey">
-            (
-            <Fiat
-              amount={feeValue ?? 0n}
-              symbol="$"
-              decimals={8}
-              className="numeric-input__value color-grey fs-12"
-            />
-            )
-          </div>
         </div>
 
         <div className="col-12 col-xs-4 text-center text-xs-left color-grey fw-500">
           {t("receivedAmount")}
         </div>
-        <div className="col-12 col-xs-8 text-center text-xs-right">
-          <Decimal
-            amount={depositAmount}
-            symbol={
-              direct ? account?.asset.metadata.symbol : asset.metadata.symbol
+        <div className="col-12 col-xs-8 text-center text-xs-right color-teal">
+          <LoaderWithContent
+            loading={quote === "loading"}
+            content={
+              <div className="color-white">
+                <Decimal
+                  amount={depositAmount}
+                  symbol={
+                    direct
+                      ? account?.asset.metadata.symbol
+                      : asset.metadata.symbol
+                  }
+                  symbolClassName="color-grey fs-14 condensed fw-500"
+                />
+                <div className="iflex ml-1 fs-13 color-grey">
+                  (
+                  <Fiat
+                    amount={receivedValue ?? 0n}
+                    symbol="$"
+                    decimals={8}
+                    className="numeric-input__value color-grey fs-12"
+                  />
+                  )
+                </div>
+              </div>
             }
-            symbolClassName="color-grey fs-14 condensed fw-500"
           />
-          <div className="iflex ml-1 fs-13 color-grey">
-            (
-            <Fiat
-              amount={receivedValue ?? 0n}
-              symbol="$"
-              decimals={8}
-              className="numeric-input__value color-grey fs-12"
-            />
-            )
-          </div>
         </div>
 
         <div
@@ -469,8 +529,9 @@ const Confirm: FC<DepositConfirmProps> = ({
                   {x}
                 </option>
               ))}
-              <option className={"bg-darkGrey"}
-                      value="custom">{t("customAddress")}</option>
+              <option className={"bg-darkGrey"} value="custom">
+                {t("customAddress")}
+              </option>
             </Select>
           </div>
           {target === "custom" && (
@@ -489,7 +550,7 @@ const Confirm: FC<DepositConfirmProps> = ({
               </div>
             </>
           )}
-          {shouldSwap && (
+          {canSwap && (
             <>
               {asset.chain === "THOR" ? null : (
                 <div className="col-12 text-center text-xs-right">
@@ -524,6 +585,14 @@ const Confirm: FC<DepositConfirmProps> = ({
               )}
             </>
           )}
+          {isCustomAddressInvalid && (
+            <div className="flex dir-r jc-c grow mt-1">
+              <Warning color="red" className="condensed iflex grow">
+                <Icons.ExclamationTriangle className="color-red" />
+                <span className="warning__msg">{t("invalidThorAddress")}</span>
+              </Warning>
+            </div>
+          )}
         </div>
       )}
       <Submit
@@ -532,7 +601,7 @@ const Confirm: FC<DepositConfirmProps> = ({
         target={target !== "custom" ? target : custom}
         swapMemo={"memo"}
         onSuccess={onSuccess}
-        disabled={false}
+        disabled={isCustomAddressInvalid}
         isDangerous={false}
         quote={quote}
         shouldSwap={shouldSwap}