UI - max input amount

react/src/utils/consts.ts

@@ -12,6 +12,7 @@ export interface TokenInfo {
   chainId: ChainId;
   logo: string;
   isNative: boolean;
+  maxAmount: number;
 }
 
 export const MATIC_TOKEN_INFO: TokenInfo = {
@@ -20,6 +21,7 @@ export const MATIC_TOKEN_INFO: TokenInfo = {
   chainId: CHAIN_ID_POLYGON,
   logo: polygonIcon,
   isNative: true,
+  maxAmount: 0.1,
 };
 
 export const WMATIC_TOKEN_INFO: TokenInfo = {
@@ -28,6 +30,7 @@ export const WMATIC_TOKEN_INFO: TokenInfo = {
   chainId: CHAIN_ID_POLYGON,
   logo: polygonIcon,
   isNative: false,
+  maxAmount: 0.1,
 };
 
 export const ETH_TOKEN_INFO: TokenInfo = {
@@ -36,6 +39,7 @@ export const ETH_TOKEN_INFO: TokenInfo = {
   chainId: CHAIN_ID_ETH,
   logo: ethIcon,
   isNative: true,
+  maxAmount: 0.01,
 };
 
 export const WETH_TOKEN_INFO: TokenInfo = {
@@ -44,6 +48,7 @@ export const WETH_TOKEN_INFO: TokenInfo = {
   chainId: CHAIN_ID_ETH,
   logo: ethIcon,
   isNative: false,
+  maxAmount: 0.01,
 };
 
 export const TOKEN_INFOS = [

react/src/views/Home.tsx

@@ -129,6 +129,10 @@ const useStyles = makeStyles((theme) => ({
     color: COLORS.green,
     fontSize: "200px",
   },
+  swapPath: {
+    display: "inline-flex",
+    alignItems: "center",
+  },
 }));
 
 const switchProviderNetwork = async (
@@ -178,6 +182,7 @@ export default function Home() {
       setHasQuote(false);
       setIsComputingQuote(true);
       setAmountOut("");
+      setAmountInUST("");
       try {
         if (
           parseFloat(amountIn) > 0 &&
@@ -386,6 +391,12 @@ export default function Home() {
               onChange={handleAmountChange}
               placeholder="0.0"
             ></TextField>
+            {parseFloat(amountIn) > sourceTokenInfo.maxAmount ? (
+              <Typography
+                variant="subtitle2"
+                color="error"
+              >{`The max input amount is ${sourceTokenInfo.maxAmount} ${sourceTokenInfo.name}`}</Typography>
+            ) : null}
             <div className={classes.spacer} />
             <TokenSelect
               tokens={TOKEN_INFOS}
@@ -436,7 +447,7 @@ export default function Home() {
           </Collapse>
           <div className={classes.spacer} />
           {hasQuote && (
-            <Typography variant="subtitle1">
+            <Typography variant="subtitle1" className={classes.swapPath}>
               {`${amountIn} ${sourceTokenInfo.name} `}
               <ArrowForward fontSize="inherit" />
               {` ${amountInUST} UST `} <ArrowForward fontSize="inherit" />