feat: implement 50% button (#17)

Swaylend · Aug 14, 2024 · 076a98f · 076a98f
1 parent 0d895a4
commit 076a98f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/apps/frontend/src/components/TokenInput/TokenInput.tsx b/apps/frontend/src/components/TokenInput/TokenInput.tsx
@@ -14,6 +14,7 @@ interface IProps {
   setAssetId?: (assetId: string) => void;
 
   onMaxClick?: () => void;
+  on50Click?: () => void;
   balance?: string;
 
   disabled?: boolean;
@@ -64,6 +65,7 @@ const MaxButton = styled.div`
   font-size: 13px;
   line-height: 24px;
   padding: 4px 16px;
+  margin-left: 8px;
   border-radius: 4px;
   cursor: pointer;
   background: ${({ theme }) => theme.colors.button.secondaryBackground};
@@ -115,6 +117,17 @@ const TokenInput: React.FC<IProps> = (props) => {
           placeholder="0.00"
           readOnly={!props.setAmount}
         />
+        {props.on50Click && (
+          <MaxButton
+            onClick={() => {
+              if (props.disabled) return;
+              setFocused(true);
+              props.on50Click?.();
+            }}
+          >
+            50%
+          </MaxButton>
+        )}
         {props.onMaxClick && (
           <MaxButton
             onClick={() => {

diff --git a/apps/frontend/src/screens/Dashboard/ActionTab/InputCard.tsx b/apps/frontend/src/screens/Dashboard/ActionTab/InputCard.tsx
@@ -530,6 +530,13 @@ const InputCard: React.FC<IProps> = () => {
     }
   };
 
+  const on50BtnClick = () => {
+    onMaxBtnClick();
+    if (dashboardStore.tokenAmount == null || dashboardStore.tokenAmount.eq(0))
+      return;
+    dashboardStore.setTokenAmount(dashboardStore.tokenAmount.div(2));
+  };
+
   return (
     <div>
       <div {...getCollapseProps()}>
@@ -545,6 +552,7 @@ const InputCard: React.FC<IProps> = () => {
             setAmount={dashboardStore.setTokenAmount}
             assetId={dashboardStore.actionToken.assetId}
             onMaxClick={() => onMaxBtnClick()}
+            on50Click={() => on50BtnClick()}
             balance={tokenInputBalance()}
             error={tokenInputError()}
           />