Add client

1 files changed, 70 insertions, 0 deletions

diff --git a/client/src/components/Transfers.tsx b/client/src/components/Transfers.tsx
new file mode 100644
index 0000000..3bd1e65
--- /dev/null
+++ b/client/src/components/Transfers.tsx
@@ -0,0 +1,70 @@
+import React, { useState, Dispatch, SetStateAction } from "react";
+import { TezosToolkit } from "@taquito/taquito";
+
+const Transfers = ({
+  Tezos,
+  setUserBalance,
+  userAddress
+}: {
+  Tezos: TezosToolkit;
+  setUserBalance: Dispatch<SetStateAction<number>>;
+  userAddress: string;
+}): JSX.Element => {
+  const [recipient, setRecipient] = useState<string>("");
+  const [amount, setAmount] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const sendTransfer = async (): Promise<void> => {
+    if (recipient && amount) {
+      setLoading(true);
+      try {
+        const op = await Tezos.wallet
+          .transfer({ to: recipient, amount: parseInt(amount) })
+          .send();
+        await op.confirmation();
+        setRecipient("");
+        setAmount("");
+        const balance = await Tezos.tz.getBalance(userAddress);
+        setUserBalance(balance.toNumber());
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  return (
+    <div id="transfer-inputs">
+      <input
+        type="text"
+        placeholder="Recipient"
+        value={recipient}
+        onChange={e => setRecipient(e.target.value)}
+      />
+      <input
+        type="number"
+        placeholder="Amount"
+        value={amount}
+        onChange={e => setAmount(e.target.value)}
+      />
+      <button
+        className="button"
+        disabled={!recipient && !amount}
+        onClick={sendTransfer}
+      >
+        {loading ? (
+          <span>
+            <i className="fas fa-spinner fa-spin"></i>&nbsp; Please wait
+          </span>
+        ) : (
+          <span>
+            <i className="far fa-paper-plane"></i>&nbsp; Send
+          </span>
+        )}
+      </button>
+    </div>
+  );
+};
+
+export default Transfers;