rujira.ui 1.0.4 → 1.0.6

package/src/components/buttons/TxButton.tsx

@@ -5,30 +5,36 @@ import {
   ReactElement,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 import toast, { Renderable } from "react-hot-toast";
+import { Trans } from "react-i18next";
 import { Tooltip } from "react-tooltip";
 import {
   InsufficientAllowanceError,
   Msg,
   MsgErc20IncreaseAllowance,
+  MsgErc20ResetAllowance,
+  Network,
   networkTxLink,
   Simulation,
   translateError,
   TxError,
   TxResult,
 } from "rujira.js";
+import txFail from "../../assets/images/txfail.gif";
+import txSign from "../../assets/images/txsign.gif";
+import txSuccess from "../../assets/images/txsuccess.gif";
 import lock from "../../assets/images/unlock.gif";
 import { useTranslation } from "../../i18n";
 import { AccountProvider } from "../../wallets";
+import { Loader } from "../loader/Loader";
 import { Warning } from "../notices/Warning";
 import { Decimal } from "../numbers/Decimal";
 import { Button, ButtonProps } from "./Button";
-import txSuccess from "../../assets/images/txsuccess.gif";
-import txFail from "../../assets/images/txfail.gif";
-import txSign from "../../assets/images/txsign.gif";
-import { Loader } from "../loader/Loader";
+import txSimulate from "../../assets/images/txsimulate.gif";
+import txSimulateError from "../../assets/images/exclamation.gif";
 
 // Helper to identify spacing/layout classes
 const SPACING_CLASS_REGEX = /^(m|p)(l|r|t|b|x|y)?-\d+$/;
@@ -61,6 +67,11 @@ export type TxButtonProps<T extends ElementType = "button"> = ButtonProps<T> & {
   };
 };
 
+// Add chains here that do not require the extra reset step, for USDT allowance approvals,
+// when there is already a non-zero allowance approved. We default to the 3-step process
+// to avoid failing deposits for future chain integrations.
+const TWO_STEP_ALLOWANCE_CHAINS = new Set<Network>(["BSC", "AVAX"]);
+
 export const TxButton: FC<TxButtonProps> = (props) => {
   const { t } = useTranslation("common");
   const {
@@ -79,20 +90,35 @@ export const TxButton: FC<TxButtonProps> = (props) => {
 
   const [simulation, setSimulation] = useState<Simulation>();
   const [simulationError, setSimulationError] = useState<Error>();
+  const [isSimulating, setIsSimulating] = useState(false);
+  const simulationSeqRef = useRef(0);
   const { loading, success, error } = toastOpts;
   const [isSigning, setIsSigning] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
   const [isRejected, setIsRejected] = useState(false);
+  const [allowanceWasReset, setAllowanceWasReset] = useState(false);
 
   const doSimulate = (msg: Msg | null) => {
     setSimulationError(undefined);
     setSimulation(undefined);
     if (msg) {
+      const seq = ++simulationSeqRef.current;
+      setIsSimulating(true);
       const signer = accountProvider.signer(msg.account.address);
       signer
         .simulate(msg)
-        .then(setSimulation)
+        .then((sim) => {
+          //ignore stale simulations
+          if (seq !== simulationSeqRef.current) return;
+
+          setIsSimulating(false);
+          setSimulation(sim);
+        })
         .catch((err) => {
+          //ignore stale simulation errors
+          if (seq !== simulationSeqRef.current) return;
+
+          setIsSimulating(false);
           console.error(err);
           setSimulationError(err);
           onError && onError(new TxError(msg, err, "simulation"));
@@ -101,7 +127,9 @@ export const TxButton: FC<TxButtonProps> = (props) => {
   };
 
   useEffect(() => {
-    doSimulate(msg);
+    setIsSimulating(false);
+    const timeout = setTimeout(() => doSimulate(msg), 1000);
+    return () => clearTimeout(timeout);
   }, [msg]);
 
   const handleSign = (e: any) => {
@@ -161,7 +189,7 @@ export const TxButton: FC<TxButtonProps> = (props) => {
     });
   };
 
-  const disabled = !msg || !simulation || !!simulationError || rest.disabled;
+  const disabled =!msg || !simulation || !!simulationError || rest.disabled;
 
   // Separate spacing classes (always applied) from styling classes (conditionally applied)
   const { spacing: spacingClasses, styling: stylingClasses } =
@@ -177,6 +205,38 @@ export const TxButton: FC<TxButtonProps> = (props) => {
     return new MsgErc20IncreaseAllowance(msg.account, simulationError);
   }, [msg, simulationError]);
 
+  const resetAllowanceMsg = useMemo(() => {
+    if (!msg) return null;
+    if (!simulationError) return null;
+    if (!(simulationError instanceof InsufficientAllowanceError)) return null;
+    if (simulationError.current === 0n) return null;
+    if (simulationError.asset.symbol.toUpperCase() !== "USDT") return null;
+    if (TWO_STEP_ALLOWANCE_CHAINS.has(msg.account.network)) return null;
+    return new MsgErc20ResetAllowance(msg.account, simulationError);
+  }, [msg, simulationError]);
+
+  if (resetAllowanceMsg)
+    return (
+      <>
+        <TxButton
+          {...props}
+          toastOpts={{
+            loading: t("resettingAllowance"),
+            success: t("allowanceReset"),
+          }}
+          label={t("stepReset")}
+          msg={resetAllowanceMsg}
+          onSuccess={() => {
+            setAllowanceWasReset(true);
+            doSimulate(msg);
+          }}
+        />
+        <ResetAllowanceWarning
+          error={simulationError as InsufficientAllowanceError}
+        />
+      </>
+    );
+
   if (allowanceMsg)
     return (
       <>
@@ -186,11 +246,11 @@ export const TxButton: FC<TxButtonProps> = (props) => {
             loading: t("increasingAllowance"),
             success: t("allowanceIncreased"),
           }}
-          label={t("stepApprove")}
+          label={allowanceWasReset ? t("stepApprove2of3") : t("stepApprove")}
           msg={allowanceMsg}
           onSuccess={() => doSimulate(msg)}
         />
-        <InsufficientAllowanceWarning />
+        <InsufficientAllowanceWarning isStep2={allowanceWasReset} />
       </>
     );
 
@@ -204,7 +264,9 @@ export const TxButton: FC<TxButtonProps> = (props) => {
             ? t("waiting")
             : isRejected
               ? t("rejected")
-              : rest.label
+              : isSimulating
+                ? t("simulating")
+                : rest.label
       }`,
     }),
   };
@@ -217,16 +279,17 @@ export const TxButton: FC<TxButtonProps> = (props) => {
           stylingClasses.length > 0 ? stylingClasses : "button",
           spacingClasses,
           {
-            "button--grey": disabled && !stylingClasses.includes("transparent"),
+            "button--grey": disabled && !isSimulating && !stylingClasses.includes("transparent"),
             "button--waiting":
-              (isSigning || isRejected || isSuccess) &&
+              (isSigning || isRejected || isSuccess || isSimulating) &&
               !className?.includes("transparent"),
             "button--success": isSuccess,
             "button--rejected": isRejected,
+            "button--simulating": isSimulating,
           }
         )}
         style={{
-          cursor: isSigning || isSuccess || isRejected ? "default" : undefined,
+          cursor: isSigning || isSuccess || isRejected || isSimulating ? "default" : undefined,
           ...rest.style,
         }}
         disabled={disabled}
@@ -236,11 +299,11 @@ export const TxButton: FC<TxButtonProps> = (props) => {
             ? `<p class="fs-12 lh-16 fw-400 w-36 mb-0.5">${translateError(simulationError.message)}</p>`
             : undefined
         }>
-        {(isSuccess || isRejected || isSigning) &&
+        {(isSuccess || isRejected || isSigning || isSimulating || !!simulationError) &&
           !className?.includes("transparent") && (
             <img
               className="w-4 h-4 filter-white big"
-              src={isSigning ? txSign : isSuccess ? txSuccess : txFail}
+              src={isSimulating ? txSimulate : !!simulationError ? txSimulateError : isSigning ? txSign : isSuccess ? txSuccess : txFail}
               alt="lock"
             />
           )}
@@ -255,9 +318,7 @@ export const TxButton: FC<TxButtonProps> = (props) => {
       </Button>
       {hideSimulation ? null : msg ? (
         <SimulationComponent simulation={simulation} error={simulationError} />
-      ) : (
-        <span>&nbsp;</span>
-      )}
+      ) : null}
     </>
   );
 };
@@ -273,16 +334,20 @@ export const TxButtonTip = () => (
 export interface SimulationComponentProps {
   simulation?: Simulation;
   error?: Error;
+  isSimulating?: boolean;
 }
 
 const DefaultSimulationComponent = ({
   simulation,
   error,
+  isSimulating,
 }: SimulationComponentProps): ReactElement => {
   const { t } = useTranslation("common");
   if (error instanceof InsufficientAllowanceError) {
     return <InsufficientAllowanceWarning />;
   }
+  if (error) return <span>&nbsp;</span>;
+  if (!simulation && !isSimulating) return <span>&nbsp;</span>;
 
   return (
     <small className="fs-12 text-center mt-1 color-grey block">
@@ -290,6 +355,7 @@ const DefaultSimulationComponent = ({
         {t("networkFee")}{" "}
         {simulation ? (
           <Decimal
+            subscript
             amount={simulation.amount}
             decimals={simulation.decimals}
             symbol={simulation.symbol}
@@ -303,13 +369,53 @@ const DefaultSimulationComponent = ({
   );
 };
 
-const InsufficientAllowanceWarning = () => {
+const InsufficientAllowanceWarning = ({
+  isStep2 = false,
+}: {
+  isStep2?: boolean;
+}) => {
   const { t } = useTranslation("common");
   return (
-    <Warning className="warning mt-2 condensed flex ai-c" color="orange">
-      {/* <ExclamationCircle className="color-orange" /> */}
-      <img src={lock} alt="lock" />
-      <div className="text-left">{t("insufficientAllowanceWarning")}</div>
+    <Warning
+      className="warning warning--borderless mt-2 condensed flex ai-c"
+      color="teal">
+      <img src={lock} alt="lock" style={{ height: "2.25rem" }} />
+      <div className="text-left">
+        {t(
+          isStep2
+            ? "insufficientAllowanceWarningStep2"
+            : "insufficientAllowanceWarning"
+        )}
+      </div>
+    </Warning>
+  );
+};
+
+const ResetAllowanceWarning = ({
+  error,
+}: {
+  error: InsufficientAllowanceError;
+}) => {
+  return (
+    <Warning
+      className="warning warning--borderless mt-2 condensed flex ai-c"
+      color="teal">
+      <img src={lock} alt="lock" style={{ height: "2.25rem" }} />
+      <div className="text-left">
+        <Trans
+          i18nKey="common:resetAllowanceWarning"
+          components={{
+            allowance: (
+              <Decimal
+                amount={error.current}
+                decimals={error.asset.decimals}
+                symbol={error.asset.symbol}
+                className="color-white"
+              />
+            ),
+          }}
+        />
+      </div>
     </Warning>
   );
 };

package/src/components/header/Accounts.tsx

@@ -92,11 +92,7 @@ export const Accounts = ({
     <>
       {!accounts || accounts.length === 0 ? (
         <ConnectAnimation>
-          <Wallets
-            provider={provider}
-            routingElement={routingElement}
-            wallets={wallets}
-          />
+          <Wallets provider={provider} wallets={wallets} />
         </ConnectAnimation>
       ) : (
         <MyAccount
@@ -112,10 +108,7 @@ export const Accounts = ({
           }
           onHide={() => setShowBlur(false)}>
           {selected ? (
-            <ResolveLink
-              as={routingElement}
-              to="portfolio"
-              className="balance">
+            <ResolveLink as={routingElement} to="portfolio" className="balance">
               <div className="flex ai-b">
                 {showBalance === "true" ? (
                   <>
@@ -234,10 +227,12 @@ const ConnectAnimation = ({ children }: { children: React.ReactNode }) => {
             initial={{ opacity: 0, marginTop: -4 }}
             animate={{ opacity: 1, marginTop: 4 }}
             exit={{ opacity: 0, marginTop: -4 }}>
-            <p className="color-white">{t("connectYourWallet")}</p>
-            <small className="color-grey mb-1">
-              {t("createOrConnectWallet")}
-            </small>
+            <Link className="flex dir-c action transparent" to="connect">
+              <p className="color-white">{t("connectYourWallet")}</p>
+              <small className="color-grey mb-1">
+                {t("createOrConnectWallet")}
+              </small>
+            </Link>
             {children}
           </motion.div>
         )}
@@ -264,11 +259,10 @@ interface WalletsProps {
 export const Wallets = ({
   modalLayout = false,
   provider,
-  routingElement,
   wallets,
 }: WalletsProps): ReactElement => {
   const { t } = useTranslation("header");
-  const { connect, isAvaialable } = provider;
+  const { connect, isAvailable } = provider;
   const { hideModal } = useGlobalModalContext();
 
   const [first, ...rest] = wallets;
@@ -297,7 +291,7 @@ export const Wallets = ({
         </div>
         <div className="flex w-full ai-c jc-c wrap">
           {rest.map((x) => {
-            const disabled = x.provider ? !isAvaialable(x.provider) : true;
+            const disabled = x.provider ? !isAvailable(x.provider) : true;
             return (
               <button
                 key={x.label}
@@ -321,6 +315,9 @@ export const Wallets = ({
             );
           })}
         </div>
+        <Link to="/tou" className="terms mb-1">
+          By connecting a wallet, you agree to Rujira's Terms of Use.
+        </Link>
         <hr
           className={clsx({
             hr: true,
@@ -328,12 +325,9 @@ export const Wallets = ({
             "my-2": modalLayout,
           })}
         />
-        <ResolveLink
-          as={routingElement}
-          to="ecosystem/wallets"
-          onClick={hideModal}>
+        <Link to="ecosystem/wallets" onClick={hideModal}>
           {t("needHelpDeciding")}
-        </ResolveLink>
+        </Link>
       </div>
       <Tooltip id="wallet-tip" className="tooltip" />
     </>

package/src/components/header/Header.tsx

@@ -706,7 +706,7 @@ const SubUtilities = ({
         <ResolveLink
           as={routingElement}
           domain={domain}
-          to="dashboard"
+          to="analytics"
           className="flex ai-s">
           <ChartMixed className="color-grey h-3.5 w-a block mr-2 no-shrink mt-0" />
           <div>

package/src/components/icons/ProviderIcon.tsx

@@ -0,0 +1,145 @@
+import clsx from "clsx";
+import { FC } from "react";
+import { Provider } from "../../wallets";
+import * as WalletIcons from "./Wallets";
+
+export const ProviderIcon: FC<{
+  provider: Provider.Key;
+  selected: boolean;
+  className?: string;
+}> = ({ provider, selected, className }) => {
+  switch (provider) {
+    case "Keplr":
+      return selected ? (
+        <WalletIcons.Keplr className={clsx({ [`${className}`]: className })} />
+      ) : (
+        <WalletIcons.KeplrSimple
+          className={clsx({ [`${className}`]: className })}
+        />
+      );
+    case "Leap":
+      return selected ? (
+        <WalletIcons.Leap className={clsx({ [`${className}`]: className })} />
+      ) : (
+        <WalletIcons.LeapSimple
+          className={clsx({ [`${className}`]: className })}
+        />
+      );
+    case "Ledger":
+      return (
+        <WalletIcons.Ledger
+          className={clsx({
+            [`${className}`]: className,
+            "color-white": selected,
+          })}
+        />
+      );
+    case "Metamask":
+      return selected ? (
+        <WalletIcons.MetaMask
+          className={clsx({ [`${className}`]: className })}
+        />
+      ) : (
+        <WalletIcons.MetaMaskSimple
+          className={clsx({ [`${className}`]: className })}
+        />
+      );
+    case "Rabby":
+      return selected ? (
+        <WalletIcons.Rabby className={clsx({ [`${className}`]: className })} />
+      ) : (
+        <WalletIcons.RabbySimple
+          className={clsx({ [`${className}`]: className })}
+        />
+      );
+    case "Station":
+      return (
+        <WalletIcons.StationSimple
+          className={clsx({ [`${className}`]: className })}
+          gradient={selected}
+        />
+      );
+    case "Vulticonnect":
+    case "Vultisig":
+      return selected ? (
+        <WalletIcons.Vultisig
+          className={clsx({ [`${className}`]: className })}
+        />
+      ) : (
+        <WalletIcons.VultisigSimple
+          className={clsx({ [`${className}`]: className })}
+        />
+      );
+    case "Ctrl":
+      return (
+        <WalletIcons.Ctrl
+          className={clsx({
+            [`${className}`]: className,
+            "color-white": selected,
+          })}
+        />
+      );
+    case "DaoDao":
+      return (
+        <WalletIcons.Daodao
+          className={clsx({
+            [`${className}`]: className,
+            "color-white": selected,
+          })}
+        />
+      );
+    case "Coinbase":
+      return selected ? (
+        <WalletIcons.Coinbase
+          className={clsx({ [`${className}`]: className })}
+        />
+      ) : (
+        <WalletIcons.CoinbaseSimple
+          className={clsx({ [`${className}`]: className })}
+        />
+      );
+    case "Brave":
+      return selected ? (
+        <WalletIcons.Brave className={clsx({ [`${className}`]: className })} />
+      ) : (
+        <WalletIcons.BraveSimple
+          className={clsx({ [`${className}`]: className })}
+        />
+      );
+    case "Okx":
+      return (
+        <WalletIcons.OKX
+          className={clsx({
+            [`${className}`]: className,
+            "color-white": selected,
+          })}
+        />
+      );
+    case "Trust":
+      return selected ? (
+        <WalletIcons.Trust className={clsx({ [`${className}`]: className })} />
+      ) : (
+        <WalletIcons.TrustSimple
+          className={clsx({ [`${className}`]: className })}
+        />
+      );
+    case "Tronlink":
+      return selected ? (
+        <WalletIcons.Tronlink
+          className={clsx({ [`${className}`]: className })}
+        />
+      ) : (
+        <WalletIcons.TronlinkSimple
+          className={clsx({ [`${className}`]: className })}
+        />
+      );
+    case "Xaman":
+      return selected ? (
+        <WalletIcons.Xaman className={clsx({ [`${className}`]: className })} />
+      ) : (
+        <WalletIcons.XamanSimple
+          className={clsx({ [`${className}`]: className })}
+        />
+      );
+  }
+};

package/src/components/inputs/DecimalInput.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { FC, useCallback, useState } from "react";
 import {
   NumericFormat,
   NumericFormatProps,
@@ -49,13 +49,16 @@ export const DecimalInput: FC<
   const trimmed = formatted.replace(trim, "");
   const [previousValue, setPreviousValue] = useState(trimmed);
   const [previousAmount, setPreviousAmount] = useState(amount);
-  const onValueChange: OnValueChange = (values) => {
-    // `values.value` is always a dot separated decimal
-    const intValue = parseFixed(values.value, decimals);
-    setPreviousValue(values.value);
-    setPreviousAmount(intValue);
-    onAmountchange(intValue);
-  };
+  const onValueChange: OnValueChange = useCallback(
+    (values) => {
+      // `values.value` is always a dot separated decimal
+      const intValue = parseFixed(values.value, decimals);
+      setPreviousValue(values.value);
+      setPreviousAmount(intValue);
+      onAmountchange(intValue);
+    },
+    [decimals]
+  );
 
   return (
     <NumericFormat

package/src/components/inputs/DenomInput.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { useMemo, useRef } from "react";
-import { nFormatter, uuidv4 } from "../../helpers";
+import {nFormatter, toFiatAmount, uuidv4} from "../../helpers";
 import { useTranslation } from "../../i18n";
 import { Button } from "../buttons/Button";
 import { IconDenom } from "../icons/IconDenom";
@@ -37,8 +37,9 @@ export const DenomInput = ({
   const input = useRef<HTMLDivElement>(null);
   const id = useMemo(() => uuidv4(), []);
 
-  const fiatAmount =
-    fiat?.price != undefined ? (fiat.price * amount) / 10n ** 12n : undefined;
+ const fiatAmount = useMemo(() =>
+   toFiatAmount(fiat?.price, amount)
+  ,[fiat?.price, amount]);
 
   return (
     <div