Swap input to have available balance

synapsecns · May 6, 2024 · cc9f96d · cc9f96d
1 parent a83aceb
commit cc9f96d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 9 deletions.
diff --git a/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx b/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx
@@ -162,7 +162,8 @@ export const InputContainer = () => {
         {hasMounted && isConnected && (
           <MiniMaxButton
             onClickBalance={onMaxBalance}
-            isDisabled={!isConnected || !hasValidSelections}
+            isDisabled={!balance || balance === 0n ? true : false}
+            isHidden={!isConnected || !hasValidSelections}
           />
         )}
       </BridgeAmountContainer>

diff --git a/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx b/packages/synapse-interface/components/StateManagedSwap/SwapInputContainer.tsx
@@ -26,6 +26,7 @@ import { CHAINS_BY_ID } from '@/constants/chains'
 import { useSwapChainListArray } from '@/components/StateManagedSwap//hooks/useSwapChainListArray'
 import { useSwapFromTokenListArray } from '@/components/StateManagedSwap/hooks/useSwapFromTokenListOverlay'
 import { AmountInput } from '@/components/ui/AmountInput'
+import { joinClassNames } from '@/utils/joinClassNames'
 
 export const SwapInputContainer = () => {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -107,6 +108,13 @@ export const SwapInputContainer = () => {
     }
   }, [chain, swapChainId, isConnected, hasMounted])
 
+  const labelClassName = joinClassNames({
+    space: 'block',
+    textColor: 'text-xxs md:text-xs',
+    animation: 'transition-all duration-150 transform-gpu',
+    hover: 'hover:opacity-70 cursor-pointer',
+  })
+
   return (
     <BridgeSectionContainer>
       <div className="flex items-center justify-between">
@@ -115,16 +123,32 @@ export const SwapInputContainer = () => {
       </div>
       <BridgeAmountContainer>
         <SwapFromTokenSelector />
-        <AmountInput
-          inputRef={inputRef}
-          showValue={showValue}
-          handleFromValueChange={handleFromValueChange}
-        />
+        <div>
+          <AmountInput
+            inputRef={inputRef}
+            showValue={showValue}
+            handleFromValueChange={handleFromValueChange}
+          />
+          {hasMounted && isConnected && (
+            <label
+              htmlFor="inputRow"
+              className={labelClassName}
+              onClick={onMaxBalance}
+            >
+              {parsedBalance ?? '0.0'}
+              <span className="text-zinc-500 dark:text-zinc-400">
+                {' '}
+                available
+              </span>
+            </label>
+          )}
+        </div>
 
         {hasMounted && isConnected && (
           <MiniMaxButton
-            disabled={!balance || balance === 0n ? true : false}
             onClickBalance={onMaxBalance}
+            isDisabled={!balance || balance === 0n ? true : false}
+            isHidden={false}
           />
         )}
       </BridgeAmountContainer>

diff --git a/packages/synapse-interface/components/buttons/MiniMaxButton.tsx b/packages/synapse-interface/components/buttons/MiniMaxButton.tsx
@@ -3,11 +3,13 @@ import { joinClassNames } from '@/utils/joinClassNames'
 type MaxButtonTypes = {
   onClickBalance: () => void
   isDisabled: boolean
+  isHidden: boolean
 }
 
 export default function MaxButton({
   onClickBalance,
   isDisabled,
+  isHidden,
 }: MaxButtonTypes) {
   const className = joinClassNames({
     space: 'px-4 py-1 -ml-1 mr-1 rounded',
@@ -17,11 +19,15 @@ export default function MaxButton({
     disabled: 'disabled:opacity-60 disabled:cursor-default',
   })
 
-  if (isDisabled) {
+  if (isHidden) {
     return null
   } else {
     return (
-      <button className={className} onClick={onClickBalance}>
+      <button
+        className={className}
+        onClick={onClickBalance}
+        disabled={isDisabled}
+      >
         Max
       </button>
     )