Support max input (#24)

* Fix config hasAssetLimit for Darwinia * Support max input
ringecosystem · May 8, 2024 · bd9ea94 · bd9ea94
1 parent c653be2
commit bd9ea94
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/src/components/asset-select.tsx b/src/components/asset-select.tsx
@@ -21,7 +21,7 @@ export default function AssetSelect({ value, options, disabled, onChange = () =>
       }
       disabled={disabled}
       sameWidth
-      labelClassName="flex items-center gap-middle shrink-0 w-32 justify-between bg-component h-full border-radius px-1 hover:opacity-80 transition-[transform,color] disabled:translate-y-0 disabled:opacity-100 disabled:cursor-not-allowed"
+      labelClassName="flex items-center gap-middle shrink-0 w-32 justify-between bg-component h-full rounded-r-2xl px-1 hover:opacity-80 transition-[transform,color] disabled:translate-y-0 disabled:opacity-100 disabled:cursor-not-allowed"
       childClassName="flex flex-col py-small bg-component border-primary border border-radius gap-[1px]"
     >
       {options?.length ? (

diff --git a/src/components/balance-input.tsx b/src/components/balance-input.tsx
@@ -4,7 +4,7 @@ import { BN, BN_ZERO, bnToBn } from "@polkadot/util";
 import AssetSelect from "./asset-select";
 import { ChangeEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { formatBalance } from "@/utils";
-import { parseUnits } from "viem";
+import { formatUnits, parseUnits } from "viem";
 import { InputAlert } from "./input-alert";
 
 interface Value {
@@ -19,7 +19,7 @@ interface Props {
   placeholder?: string;
   balance?: BN;
   cross?: Cross;
-  asset?: Asset;
+  asset: Asset;
   assetSupply?: BN;
   assetLimit?: BN;
   assetOptions?: Asset[];
@@ -119,7 +119,35 @@ export default function BalanceInput({
         value={value?.input}
         onChange={handleInputChange}
       />
-      {asset ? <AssetSelect disabled={disabled} value={asset} options={assetOptions} onChange={onAssetChange} /> : null}
+      <div className="flex h-full items-center gap-[2px]">
+        <button
+          className="h-full rounded-l-2xl bg-component px-2 transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-100"
+          onClick={() => {
+            if (balance && assetSupply) {
+              if (assetLimit && assetSupply.gte(assetLimit)) {
+                onChange({ valid: !(min && min.gt(BN_ZERO)), input: "0", amount: BN_ZERO });
+              } else if (assetLimit) {
+                const remaining = assetLimit.sub(assetSupply);
+                const amount = remaining.lte(balance) ? remaining : balance;
+                const input = formatUnits(BigInt(amount.toString()), asset.decimals);
+                onChange({ valid: !(min && min.gt(amount)), input, amount });
+              } else {
+                onChange({
+                  amount: balance,
+                  valid: !(min && min.gt(balance)),
+                  input: formatUnits(BigInt(balance.toString()), asset.decimals),
+                });
+              }
+            } else {
+              onChange({ valid: !(min && min.gt(BN_ZERO)), input: "0", amount: BN_ZERO });
+            }
+          }}
+          disabled={disabled}
+        >
+          Max
+        </button>
+        <AssetSelect disabled={disabled} value={asset} options={assetOptions} onChange={onAssetChange} />
+      </div>
 
       {/* Alert */}
       {requireLimit ? (

diff --git a/src/config/chains/darwinia-chain.ts b/src/config/chains/darwinia-chain.ts
@@ -66,6 +66,7 @@ export const darwiniaChain: ChainConfig = {
   ],
   wallets: [WalletID.RAINBOW, WalletID.TALISMAN],
   addressType: "evm",
+  hasAssetLimit: true,
 
   /**
    * Substrate