Initial commit

app/pages/transfer/TransferPage.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { isAddress, parseEther } from "viem";
+import { useConnection, useSendTransaction, useWaitForTransactionReceipt } from "wagmi";
+
+
+export function TransferPage() {
+  const { isConnected } = useConnection();
+  const navigate = useNavigate();
+
+  const [inputAddress, setInputAddress] = useState('');
+  const [inputValue, setInputValue] = useState('');
+
+  const { data: transactionHash, isPending: isSendingTransaction, error, mutate: sendTransaction } = useSendTransaction();
+  const { data: receipt, isPending, isFetching } = useWaitForTransactionReceipt({
+    hash: transactionHash,
+    query: {
+      // not stricly needed, because if transactionHash is not defined,
+      // in current versions of wagmi it defaults to disabled
+      // (but, it's good to know so you can control dependent queries)
+      enabled: !!transactionHash
+    }
+  });
+
+  useEffect(() => {
+    if (!isConnected) {
+      navigate('/status');
+    }
+  }, [isConnected, navigate]);
+
+  function onSubmit(e) {
+    e.preventDefault();
+
+    if (!isAddress(inputAddress)) {
+      return toast.error('Invalid address.');
+    }
+
+    if (!inputValue || isNaN(Number(inputValue)) || Number(inputValue) <= 0) {
+      return toast.error('Invalid value.');
+    }
+
+    sendTransaction({
+      to: inputAddress,
+      value: parseEther(inputValue)
+    })
+  }
+
+  return (
+    <div className="bg-white border border-slate-200 rounded-xl p-5 flex flex-col gap-6 shadow-sm">
+      <h1 className="text-lg font-bold">Transfer ETH</h1>
+
+      <form onSubmit={onSubmit} className="flex flex-col gap-6">
+        <input 
+          type="text" 
+          className="border border-gray-300 p-2 rounded-lg" 
+          placeholder="Enter address." 
+          value={inputAddress} 
+          onChange={e => setInputAddress(e.target.value)} 
+        />
+        <input 
+          type="text" 
+          className="border border-gray-300 p-2 rounded-lg" 
+          placeholder="Enter value." 
+          value={inputValue} 
+          onChange={e => setInputValue(e.target.value)} 
+        />
+
+        <div className="flex flex-row">
+          <button 
+            type="submit" 
+            disabled={!inputAddress || !inputValue} 
+            className="bg-black text-white px-5 py-2 cursor-pointer rounded-xl disabled:opacity-50"
+          >
+            {isSendingTransaction ? 'Sending...' : 'Send'}
+          </button>
+        </div>
+      </form>
+
+      {error && <p>An error occurred. Please check the address and the value.</p>}
+      {(isPending && isFetching) && <p>Confirming...</p>}
+      {receipt && <p>Status: {receipt.status}</p>}
+    </div>
+  );
+}