Update font size of BalanceInput

ringecosystem · May 8, 2024 · 186b74f · 186b74f
1 parent bd9ea94
commit 186b74f
Showing 1 changed file with 2 additions and 24 deletions.
diff --git a/src/components/balance-input.tsx b/src/components/balance-input.tsx
@@ -2,7 +2,7 @@ import { Asset, Cross } from "@/types";
 import Input from "@/ui/input";
 import { BN, BN_ZERO, bnToBn } from "@polkadot/util";
 import AssetSelect from "./asset-select";
-import { ChangeEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ChangeEventHandler, useCallback, useEffect, useMemo, useRef } from "react";
 import { formatBalance } from "@/utils";
 import { formatUnits, parseUnits } from "viem";
 import { InputAlert } from "./input-alert";
@@ -43,7 +43,6 @@ export default function BalanceInput({
   const assetRef = useRef(asset);
   const spanRef = useRef<HTMLSpanElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const [dynamicStyle, setDynamicStyle] = useState("");
 
   const _placeholder = useMemo(() => {
     if (balance && asset) {
@@ -80,25 +79,6 @@ export default function BalanceInput({
     assetRef.current = asset;
   }, [value, asset, min, balance, assetLimit, assetSupply, onChange]);
 
-  useEffect(() => {
-    const inputWidth = inputRef.current?.clientWidth || 1;
-    const spanWidth = spanRef.current?.clientWidth || 0;
-    const percent = (spanWidth / inputWidth) * 100;
-    if (percent < 20) {
-      setDynamicStyle("text-[2.25rem] font-light");
-    } else if (percent < 30) {
-      setDynamicStyle("text-[1.875rem] font-light");
-    } else if (percent < 40) {
-      setDynamicStyle("text-[1.5rem] font-normal");
-    } else if (percent < 50) {
-      setDynamicStyle("text-[1.25rem] font-normal");
-    } else if (percent < 60) {
-      setDynamicStyle("text-[1.125rem] font-medium");
-    } else {
-      setDynamicStyle("text-[1rem] font-medium");
-    }
-  }, [value]);
-
   const insufficient = balance && value?.input && balance.lt(value.amount) ? true : false;
   const requireMin = min && value?.input && value.amount.lt(min) ? true : false;
   const requireLimit = isExcess(assetLimit, assetSupply, value?.amount);
@@ -112,9 +92,7 @@ export default function BalanceInput({
       <Input
         disabled={disabled}
         placeholder={_placeholder}
-        className={`h-full w-full bg-transparent px-1 transition-[font-weight,font-size,line-height] duration-300 ${
-          value?.input ? `leading-none ${dynamicStyle}` : ""
-        }`}
+        className="h-full w-full bg-transparent px-1"
         ref={inputRef}
         value={value?.input}
         onChange={handleInputChange}