fix: improve ui and add transactions

examples/sample-react-app/src/App.tsx

@@ -1,12 +1,13 @@
 import {
     WalletButton,
+    useConnex,
     useWallet,
     useWalletModal,
 } from '@vechain/dapp-kit-react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 function App() {
-    const { account } = useWallet();
+    const { account, setSource, connect } = useWallet();
     const { open, onConnectionStatusChange } = useWalletModal();
     const [buttonText, setButtonText] = useState('Connect Custom Button');
 
@@ -28,13 +29,84 @@ function App() {
         onConnectionStatusChange(handleConnected);
     }, [account, onConnectionStatusChange]);
 
+    const { vendor } = useConnex();
+
+    const sendVetTransaction = useCallback(() => {
+        if (account) {
+            const clauses = [
+                {
+                    to: account,
+                    value: '1000000000000000000', // 1 vet
+                },
+            ];
+            vendor.sign('tx', clauses).signer(account).request();
+        }
+    }, [account, vendor]);
+
+    const sendVthoTransaction = useCallback(() => {
+        if (account) {
+            const vthoClauses = [
+                {
+                    data: '0xa9059cbb000000000000000000000000d420d35c6a07e58a188d776114267b0b0a2392350000000000000000000000000000000000000000000000000de0b6b3a7640000',
+                    to: account,
+                    value: 0,
+                }, // 1 vtho
+            ];
+            vendor.sign('tx', vthoClauses).signer(account).request();
+        }
+    }, [account, vendor]);
+
+    const connectWithVeworld = useCallback(() => {
+        setSource('veworld');
+        connect();
+    }, [setSource, connect]);
+
+    const connectWithWalletConnect = useCallback(() => {
+        setSource('wallet-connect');
+        connect();
+    }, [setSource, connect]);
+
+    const connectWithSync2 = useCallback(() => {
+        setSource('sync2');
+        connect();
+    }, [setSource, connect]);
+
     return (
-        <div className="container">
+        <div className="container v-stack">
             <h2>React JS</h2>
             <div className="label">kit button:</div>
             <WalletButton />
-            <div className="label">custom button:</div>
-            <button onClick={open}>{buttonText}</button>
+            <div className="label">custom kit button:</div>
+            <button className="custom" onClick={open}>
+                {buttonText}
+            </button>
+            {account ? (
+                <div className="v-stack">
+                    <div className="label">Send transaction:</div>
+                    <button className="custom" onClick={sendVetTransaction}>
+                        Send vet transaction
+                    </button>
+                    <button className="custom" onClick={sendVthoTransaction}>
+                        Send vtho transaction
+                    </button>
+                </div>
+            ) : (
+                <div className="v-stack">
+                    <div className="label">Connect without modal:</div>
+                    <button className="custom" onClick={connectWithVeworld}>
+                        Connect with veworld
+                    </button>
+                    <button
+                        className="custom"
+                        onClick={connectWithWalletConnect}
+                    >
+                        Connect with wallet connect
+                    </button>
+                    <button className="custom" onClick={connectWithSync2}>
+                        Connect with sync 2
+                    </button>
+                </div>
+            )}
         </div>
     );
 }

examples/sample-react-app/src/index.css

@@ -9,15 +9,27 @@ h2 {
     margin: 0;
 }
 .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
     border: 1px solid #000;
     border-radius: 20px;
     padding: 20px;
 }
-.label {
-    margin-top: 20px;
-    margin-bottom: 10px;
+
+button.custom {
+    border: none;
+    padding: 10px 20px;
+    border-radius: 10px;
+    text-align: center;
+    text-decoration: none;
+    display: block;
+    font-size: 14px;
+    cursor: pointer;
+    background-color: #008cba;
+    color: white;
+}
+div.v-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
 }