From 076a98f0fe00680694dff03a7f95875d1da6bd59 Mon Sep 17 00:00:00 2001
From: Andraz <69682837+andyv09@users.noreply.github.com>
Date: Wed, 14 Aug 2024 12:06:31 +0200
Subject: [PATCH] feat: implement 50% button (#17)

---
 .../src/components/TokenInput/TokenInput.tsx        | 13 +++++++++++++
 .../src/screens/Dashboard/ActionTab/InputCard.tsx   |  8 ++++++++
 2 files changed, 21 insertions(+)

diff --git a/apps/frontend/src/components/TokenInput/TokenInput.tsx b/apps/frontend/src/components/TokenInput/TokenInput.tsx
index 2152659a..2f3e75ff 100644
--- 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
index e5acb8c9..2743e42c 100644
--- 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()}
           />