From eb2a24980dfe5f7e333fe198b0ddc148ccbb5356 Mon Sep 17 00:00:00 2001
From: juan <juandgoc@gmail.com>
Date: Sun, 24 Jan 2021 15:43:28 -0500
Subject: [PATCH] added swap input style to withdraw

---
 src/components/DepositInput/index.tsx  | 11 ++------
 src/components/WithdrawInput/index.tsx | 36 +++++++++++++-------------
 2 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/components/DepositInput/index.tsx b/src/components/DepositInput/index.tsx
index a3dc057..11da23b 100644
--- a/src/components/DepositInput/index.tsx
+++ b/src/components/DepositInput/index.tsx
@@ -1,14 +1,7 @@
 import React, { useCallback, useState } from "react";
-import {
-  InputType,
-  useSliderInput,
-  useTokenName,
-  useUserBalance,
-} from "../../hooks";
+import { InputType, useSliderInput, useUserBalance } from "../../hooks";
 import { LendingReserve } from "../../models/lending";
-import { TokenIcon } from "../TokenIcon";
 import { Card, Slider } from "antd";
-import { NumericInput } from "../Input/numeric";
 import { useConnection } from "../../contexts/connection";
 import { useWallet } from "../../contexts/wallet";
 import { deposit } from "../../actions/deposit";
@@ -35,7 +28,7 @@ export const DepositInput = (props: {
   const { accounts: fromAccounts, balance, balanceLamports } = useUserBalance(
     reserve?.liquidityMint
   );
-  console.log(balance)
+
   const convert = useCallback(
     (val: string | number) => {
       if (typeof val === "string") {
diff --git a/src/components/WithdrawInput/index.tsx b/src/components/WithdrawInput/index.tsx
index 60b46ce..f00ee57 100644
--- a/src/components/WithdrawInput/index.tsx
+++ b/src/components/WithdrawInput/index.tsx
@@ -3,13 +3,10 @@ import {
   InputType,
   useUserCollateralBalance,
   useSliderInput,
-  useTokenName,
   useUserBalance,
 } from "../../hooks";
 import { LendingReserve } from "../../models/lending";
-import { TokenIcon } from "../TokenIcon";
 import { Card, Slider } from "antd";
-import { NumericInput } from "../Input/numeric";
 import { useConnection } from "../../contexts/connection";
 import { useWallet } from "../../contexts/wallet";
 import { withdraw } from "../../actions";
@@ -18,6 +15,7 @@ import "./style.less";
 import { LABELS, marks } from "../../constants";
 import { ActionConfirmation } from "./../ActionConfirmation";
 import { ConnectButton } from "../ConnectButton";
+import CollateralInput from "../CollateralInput";
 
 export const WithdrawInput = (props: {
   className?: string;
@@ -32,7 +30,6 @@ export const WithdrawInput = (props: {
   const reserve = props.reserve;
   const address = props.address;
 
-  const name = useTokenName(reserve?.liquidityMint);
   const {
     balanceLamports: collateralBalanceLamports,
     accounts: fromAccounts,
@@ -46,7 +43,7 @@ export const WithdrawInput = (props: {
       if (typeof val === "string") {
         return (parseFloat(val) / collateralBalanceInLiquidity) * 100;
       } else {
-        return ((val * collateralBalanceInLiquidity) / 100).toFixed(2);
+        return (val * collateralBalanceInLiquidity) / 100;
       }
     },
     [collateralBalanceInLiquidity]
@@ -120,21 +117,24 @@ export const WithdrawInput = (props: {
           }}
         >
           <div className="withdraw-input-title">{LABELS.WITHDRAW_QUESTION}</div>
-          <div className="token-input">
-            <TokenIcon mintAddress={reserve?.liquidityMint} />
-            <NumericInput
-              value={value}
-              onChange={setValue}
-              autoFocus={true}
-              style={{
-                fontSize: 20,
-                boxShadow: "none",
-                borderColor: "transparent",
-                outline: "transparent",
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-evenly",
+              alignItems: "center",
+            }}
+          >
+            <CollateralInput
+              title="Amount"
+              reserve={reserve}
+              amount={parseFloat(value) || 0}
+              onInputChange={(val: number | null) => {
+                setValue(val?.toString() || "");
               }}
-              placeholder="0.00"
+              disabled={true}
+              hideBalance={true}
             />
-            <div>{name}</div>
           </div>
 
           <Slider marks={marks} value={pct} onChange={setPct} />