eoa withdrawal

Author: Tarnadas

src/App.tsx

@@ -21,7 +21,7 @@ import {
 
 function App() {
   const [brokerId, setBrokerId] = useState<string>('');
-  const [address, setAddress] = useState<string>('');
+  const [contractAddress, setContractAddress] = useState<string>('');
   const [accountId, setAccountId] = useState<string>();
   const [delegateSigner, setDelegateSigner] = useState<DelegateSignerResponse>();
   const [orderlyKey, setOrderlyKey] = useState<Uint8Array>();
@@ -41,13 +41,11 @@ function App() {
       setBrokerId(loadBrokerId(connectedChain.id));
       const address = loadContractAddress(connectedChain.id);
       if (!address && isTestnet(connectedChain.id)) {
-        setAddress(exampleDelegateContract);
-      } else {
-        setAddress(address);
+        setContractAddress(exampleDelegateContract);
       }
     } else {
       setBrokerId('');
-      setAddress('');
+      setContractAddress('');
     }
   }, [connectedChain]);
 
@@ -120,9 +118,9 @@ function App() {
           <label>
             Delegate Signer Address
             <TextField.Root
-              value={address}
+              value={contractAddress}
               onChange={(event) => {
-                setAddress(event.target.value);
+                setContractAddress(event.target.value);
                 setAccountId(undefined);
               }}
             />
@@ -131,16 +129,16 @@ function App() {
           <Button
             disabled={
               !brokerId ||
-              !address ||
+              !contractAddress ||
               !connectedChain ||
-              address.toLowerCase() === wallet?.accounts[0].address.toLowerCase() ||
+              contractAddress.toLowerCase() === wallet?.accounts[0].address.toLowerCase() ||
               !isChainSupported
             }
             onClick={async () => {
-              if (!brokerId || !address || !connectedChain) return;
-              setAccountId(getAccountId(address, brokerId));
+              if (!brokerId || !contractAddress || !connectedChain) return;
+              setAccountId(getAccountId(contractAddress, brokerId));
               saveBrokerId(connectedChain.id, brokerId);
-              saveContractAddress(connectedChain.id, address);
+              saveContractAddress(connectedChain.id, contractAddress);
               setShowEOA(false);
               setActiveTab('delegate-signer');
             }}
@@ -179,7 +177,7 @@ function App() {
             <DelegateSigner
               brokerId={brokerId}
               accountId={accountId}
-              contractAddress={address}
+              contractAddress={contractAddress}
               delegateSigner={delegateSigner}
               setDelegateSigner={setDelegateSigner}
               orderlyKey={orderlyKey}
@@ -190,7 +188,7 @@ function App() {
             <Assets
               brokerId={brokerId}
               accountId={accountId}
-              contractAddress={address}
+              contractAddress={contractAddress}
               showEOA={showEOA}
               orderlyKey={orderlyKey}
             />

src/Assets.tsx

@@ -13,7 +13,8 @@ import {
   delegateSettlePnL,
   usdFormatter,
   settlePnL,
-  getUnsettledPnL
+  getUnsettledPnL,
+  withdraw
 } from './helpers';
 
 export const Assets: FC<{
@@ -69,6 +70,9 @@ export const Assets: FC<{
         return;
       }
       const address = wallet.accounts[0].address;
+      console.log('address', address);
+      console.log('usdcContract', usdcContract);
+      console.log('getUSDCAddress(connectedChain.id)', getUSDCAddress(connectedChain.id));
       usdcContract.balanceOf(address).then(setBalance);
       usdcContract.allowance(address, getVaultAddress(connectedChain.id)).then(setAllowance);
     };
@@ -82,6 +86,7 @@ export const Assets: FC<{
       setContractBalance(undefined);
       return;
     }
+    console.log('contractAddress', contractAddress);
     const fetchContractBalance = async () => {
       if (!usdcContract || !contractAddress) {
         setContractBalance(undefined);
@@ -161,32 +166,19 @@ export const Assets: FC<{
         </Table.Body>
       </Table.Root>
 
-      {showEOA && (
-        <Flex direction="column" gap="4">
-          <Button
-            disabled={!wallet || !connectedChain || !brokerId || !orderlyKey}
-            onClick={async () => {
-              if (!wallet || !connectedChain || !brokerId || !orderlyKey) return;
-              await settlePnL(wallet, connectedChain.id, brokerId, accountId, orderlyKey);
-            }}
-          >
-            Settle PnL
-          </Button>
-        </Flex>
-      )}
+      <Flex direction="column" gap="4">
+        <TextField.Root
+          style={{ gridArea: 'input' }}
+          type="number"
+          step="0.01"
+          min="0"
+          placeholder="USDC amount"
+          onChange={(event) => {
+            setAmount(event.target.value);
+          }}
+        />
 
-      {!showEOA && (
-        <Flex direction="column" gap="4">
-          <TextField.Root
-            style={{ gridArea: 'input' }}
-            type="number"
-            step="0.01"
-            min="0"
-            placeholder="USDC amount"
-            onChange={(event) => {
-              setAmount(event.target.value);
-            }}
-          />
+        {!showEOA && (
           <Button
             disabled={
               !wallet ||
@@ -233,7 +225,29 @@ export const Assets: FC<{
           >
             {needsApproval ? 'Approve' : 'Deposit to Contract'}
           </Button>
+        )}
 
+        {showEOA ? (
+          <Button
+            disabled={!wallet || !connectedChain || !brokerId || !orderlyKey}
+            onClick={async () => {
+              if (!wallet || !connectedChain || !orderlyKey || !amount) return;
+              const amountBN = parseUnits(amount, 6);
+              if (parseUnits(String(vaultBalance), 6) < amountBN) return;
+              await withdraw(
+                wallet,
+                connectedChain.id,
+                brokerId,
+                accountId,
+                orderlyKey,
+                amountBN.toString(),
+                wallet.accounts[0].address
+              );
+            }}
+          >
+            Withdraw
+          </Button>
+        ) : (
           <Button
             disabled={
               !wallet ||
@@ -262,7 +276,19 @@ export const Assets: FC<{
           >
             Withdraw from Contract
           </Button>
+        )}
 
+        {showEOA ? (
+          <Button
+            disabled={!wallet || !connectedChain || !brokerId || !orderlyKey}
+            onClick={async () => {
+              if (!wallet || !connectedChain || !brokerId || !orderlyKey) return;
+              await settlePnL(wallet, connectedChain.id, brokerId, accountId, orderlyKey);
+            }}
+          >
+            Settle PnL
+          </Button>
+        ) : (
           <Button
             disabled={!wallet || !connectedChain || !brokerId || !orderlyKey}
             onClick={async () => {
@@ -279,8 +305,8 @@ export const Assets: FC<{
           >
             Settle Delegate PnL
           </Button>
-        </Flex>
-      )}
+        )}
+      </Flex>
     </Flex>
   );
 };

src/helpers/index.ts

@@ -345,6 +345,61 @@ export async function delegateDeposit(
   await contract.depositTo(delegateContract, depositInput, { value: depositFee });
 }
 
+export async function withdraw(
+  wallet: WalletState,
+  chainId: string,
+  brokerId: string,
+  accountId: string,
+  orderlyKey: Uint8Array,
+  amount: string,
+  receiver: string
+): Promise<void> {
+  const nonceRes = await signAndSendRequest(
+    accountId,
+    orderlyKey,
+    `${getBaseUrl(chainId)}/v1/withdraw_nonce`
+  );
+  const nonceJson = await nonceRes.json();
+  const withdrawNonce = nonceJson.data.withdraw_nonce as string;
+
+  const withdrawMessage = {
+    brokerId,
+    chainId: Number(chainId),
+    receiver,
+    token: 'USDC',
+    amount: Number(amount),
+    timestamp: Date.now(),
+    withdrawNonce
+  };
+
+  const provider = new BrowserProvider(wallet.provider);
+  const signer = await provider.getSigner();
+  const signature = await signer.signTypedData(
+    getOnChainDomain(chainId),
+    { Withdraw: MESSAGE_TYPES.Withdraw },
+    withdrawMessage
+  );
+
+  const res = await signAndSendRequest(
+    accountId,
+    orderlyKey,
+    `${getBaseUrl(chainId)}/v1/withdraw_request`,
+    {
+      method: 'POST',
+      body: JSON.stringify({
+        message: withdrawMessage,
+        signature,
+        userAddress: wallet.accounts[0].address,
+        verifyingContract: getVerifyingAddress(chainId)
+      })
+    }
+  );
+  const withdrawJson = await res.json();
+  if (!withdrawJson.success) {
+    throw new Error(withdrawJson.message);
+  }
+}
+
 export async function delegateWithdraw(
   wallet: WalletState,
   chainId: string,