From 82750de5a47648015dd576615286586bef995ed2 Mon Sep 17 00:00:00 2001
From: Willem Olding <willemolding@gmail.com>
Date: Tue, 11 Jun 2024 13:54:23 +1000
Subject: [PATCH] add better helpers for withdrawing

---
 bridge-frontend/src/Transfers.tsx | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/bridge-frontend/src/Transfers.tsx b/bridge-frontend/src/Transfers.tsx
index bf90103..8a3112f 100644
--- a/bridge-frontend/src/Transfers.tsx
+++ b/bridge-frontend/src/Transfers.tsx
@@ -10,7 +10,7 @@
 // License for the specific language governing permissions and limitations
 // under the License.
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { ethers } from "ethers";
 import { useRollups } from "./useRollups";
 import { useWallets } from "@web3-onboard/react";
@@ -67,9 +67,17 @@ export const Transfers: React.FC<IInputPropos> = (propos) => {
     }
   };
 
-  const [etherAmount, setEtherAmount] = useState<string>("");
+  const [etherAmount, setEtherAmount] = useState<string>("0");
   const [destAddress, setDestAddress] = useState<string>("t1");
 
+  const [withdrawAmount, setWithdrawAmount] = useState<string>("0");
+  const [withdrawAddress, setWithdrawAddress] = useState<string>(connectedWallet.accounts[0].address);
+  const [withdrawCommand, setWithdrawCommand] = useState<string>("");
+
+  useEffect(() => {
+    setWithdrawCommand(`send ${rollups?.rollupExitAddress} ${ethers.utils.parseEther(withdrawAmount).div(10000000000)} ${withdrawAddress.replace('0x', '')}`)
+  }, [withdrawAddress, withdrawAmount, rollups])
+
   return (
     <Card
       colorScheme="blackAlpha"
@@ -182,11 +190,23 @@ export const Transfers: React.FC<IInputPropos> = (propos) => {
             <TabPanel>
               <Accordion defaultIndex={[0]} allowMultiple>
                 <Text fontSize="large" color="grey">
-                  To withdraw send funds to the exit address{" "}
-                  {rollups?.rollupExitAddress} on the L2 then execute
-                  the resulting voucher here
+                  To withdraw set the parameters then execute the resulting command in Zingo-cli
                 </Text>
+                <Stack>
+                <label>Amount (Eth)</label>
+                <EtherInput
+                  onChange={(value: string) => setWithdrawAmount(value)}
+                  value={withdrawAmount}
+                />
+                <label>Withdrawal Eth Address</label>
+                <Input value={withdrawAddress} onChange={(e) => setWithdrawAddress(e.target.value)}></Input>
+                <label>Zingo withdraw command</label>
+                <Input value={withdrawCommand} disabled={true}></Input>
+                </Stack>
                 <br />
+                <Text fontSize="large" color="grey">
+                  Once processed a voucher will appear here to claim the funds
+                </Text>
                 <Vouchers dappAddress={propos.dappAddress} />
               </Accordion>
             </TabPanel>