FEAT: Show error on absent token

hoodieshq · Mar 28, 2024 · 85bf9cf · 85bf9cf
1 parent 64de395
commit 85bf9cf
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git a/packages/ui/src/entities/token/use-token-balance.tsx b/packages/ui/src/entities/token/use-token-balance.tsx
@@ -86,7 +86,7 @@ export function useTokenBalance(
       return empty
     },
     queryKey: ["useTokenBalance", String(address), String(publicKey)],
-    refetchInterval: opts?.refetchInterval ?? 6000,
+    refetchInterval: opts?.refetchInterval ?? 12000,
     refetchIntervalInBackground: opts?.refetchIntervalInBackground,
   })
 

diff --git a/packages/ui/src/entities/upgrade/index.tsx b/packages/ui/src/entities/upgrade/index.tsx
@@ -30,7 +30,7 @@ export async function upgradeToken(
     const result = (_amount * Math.pow(10, originalMint.decimals)) / 1e10
 
     return result
-}
+  }
 
   /// Anciliary creation
   //  Store N amount of token to upgrade

diff --git a/packages/ui/src/widgets/token-upgrade.tsx b/packages/ui/src/widgets/token-upgrade.tsx
@@ -9,7 +9,7 @@ import useTokenAmount from "../entities/token/use-token-amount"
 import { Container } from "./token-upgrade/container"
 import { UpgradeButton } from "../features/upgrade-button"
 import { useMint } from "../entities/token/use-mint"
-import { useTokenBalance, placeholderData } from "../entities/token/use-token-balance"
+import { useTokenBalance } from "../entities/token/use-token-balance"
 import { withErrorBoundary } from "react-error-boundary"
 import { useTokenUpgrade } from "../entities/use-token-upgrade"
 
@@ -39,7 +39,7 @@ export function TokenUpgradeBase({
   tokenUpgradeProgramId,
 }: TokenUpgradeProps) {
   const [{ amount, destination }, setAction] = useTokenAmount()
-  const { balance } = useTokenBalance(tokenAddress, { placeholderData })
+  const { balance } = useTokenBalance(tokenAddress)
   const { mint } = useMint(tokenAddress)
   const { mutate } = useTokenUpgrade()
 
@@ -106,6 +106,12 @@ export function TokenUpgradeBase({
 
   const isAllowedUpgrade = typeof amount !== "undefined" && amount > 0
 
+  const error = useMemo(() => {
+    if (balance?.decimals === -1)
+      return new Error("Wallet does not hold a token")
+    return undefined
+  }, [balance])
+
   return (
     <Form.Root
       className={clsx(
@@ -122,7 +128,8 @@ export function TokenUpgradeBase({
             <Amount
               address={tokenAddress}
               balance={balance?.uiAmountString}
-              disabled={!tokenAddress}
+              disabled={!tokenAddress || Boolean(error)}
+              error={error}
               onAmountChange={onAmountChange}
               onAmountMaxChange={onAmountChange}
               placeholder={ph}

diff --git a/packages/ui/src/widgets/token-upgrade/amount.tsx b/packages/ui/src/widgets/token-upgrade/amount.tsx
@@ -1,21 +1,28 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useRef } from "react"
 import * as Form from "@radix-ui/react-form"
 import { cva, VariantProps } from "class-variance-authority"
 import clsx from "clsx"
 
-// TODO: adjust right padding according the symbol present
+// FEAT: adjust right padding according the symbol present
 const inputVariants = cva(
-  "block w-full rounded border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6",
+  "block w-full rounded border-0 py-1.5 sm:text-sm sm:leading-6",
   {
     variants: {
       variant: {
         disabled: "pointer-events-none pl-10 px-1.5 rounded-md",
         regular: "pl-10 pr-14 rounded-md",
         active: "pl-1 pr-14 rounded-none rounded-r-md",
       },
+      err: {
+        false:
+          "text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600",
+        true: "text-red-900 ring-1 ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500",
+      },
     },
     defaultVariants: {
       variant: "regular",
+      //@ts-expect-error weird
+      err: "false",
     },
   },
 )
@@ -25,6 +32,7 @@ interface AmountProps
     React.ComponentPropsWithoutRef<"input"> {
   address?: string
   balance?: string
+  error?: Error
   label?: string
   name?: string
   onAmountChange?: (a: { amount: number }) => void
@@ -36,6 +44,7 @@ export default function Amount({
   address,
   balance = "0",
   disabled,
+  error,
   label = "Amount",
   name = "amount",
   onAmountChange,
@@ -49,6 +58,7 @@ export default function Amount({
 }: AmountProps) {
   let variants = {}
   const hasBalance = balance && Number(balance) > 0
+  const hasError = Boolean(error)
   const inpRef = useRef<HTMLInputElement>(null)
 
   const onValueChange = useCallback(
@@ -79,6 +89,7 @@ export default function Amount({
 
   if (disabled) variants = { variant: "disabled" }
   if (hasBalance) variants = { variant: "active" }
+  if (hasError) variants = { ...variants, err: "true" }
 
   const displaySymbol = useMemo(() => {
     let s = symbol
@@ -101,7 +112,7 @@ export default function Amount({
       </label>
       <div
         className={clsx("mt-2 flex rounded-md shadow-sm", {
-          "mb-[22px]": !hasBalance,
+          "mb-[22px]": !hasBalance && !hasError,
         })}
       >
         {hasBalance && (
@@ -124,7 +135,8 @@ export default function Amount({
             }}
           >
             <input
-              aria-describedby={`${name}-label`}
+              aria-describedby={!hasError ? `${name}-label` : `${name}-error`}
+              aria-invalid={hasError ? "true" : "false"}
               className={inputVariants(variants)}
               disabled={disabled}
               id={name}
@@ -146,6 +158,11 @@ export default function Amount({
           ) : null}
         </div>
       </div>
+      {hasError && (
+        <p className="mt-2 text-sm text-red-600" id={`${name}-error`}>
+          {error?.message}
+        </p>
+      )}
       {Number(balance) > 0 ? (
         <div
           aria-label="balance"