Feat: add blockchain interaction with solana

react/react-solana/package.json

@@ -13,6 +13,7 @@
     "@reown/appkit": "1.6.0",
     "@reown/appkit-adapter-solana": "1.6.0",
     "@solana/wallet-adapter-wallets": "^0.19.32",
+    "@solana/web3.js": "^1.95.8",
     "bs58": "^6.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

react/react-solana/src/App.css

@@ -9,6 +9,10 @@ body {
   overflow-x: hidden;
 }
 
+h2 {
+  padding-bottom: 10px;
+}
+
 body {
   color: var(--foreground);
   background: var(--background);

react/react-solana/src/App.tsx

@@ -1,5 +1,6 @@
 import { createAppKit } from '@reown/appkit/react'
 import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/networks'
+import { useState } from 'react'
 import { metadata, projectId, solanaWeb3JsAdapter } from './config'
 import { ActionButtonList } from './components/ActionButtonList'
 import { InfoList } from './components/InfoList'
@@ -16,21 +17,35 @@ createAppKit({
 })
 
 export function App() {
+  const [transactionHash, setTransactionHash] = useState<string | undefined>(undefined);
+  const [signedMsg, setSignedMsg] = useState('');
+  const [balance, setBalance] = useState('');
 
+  const receiveHash = (hash: string) => {
+    setTransactionHash(hash); // Update the state with the transaction hash
+  };
+
+  const receiveSignedMsg = (signedMsg: string) => {
+    setSignedMsg(signedMsg); // Update the state with the transaction hash
+  };
+
+  const receivebalance = (balance: string) => {
+    setBalance(balance)
+  }
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
       <img src="/reown.svg" alt="Reown" style={{ width: '150px', height: '150px' }} />
       <h2>Reown AppKit + Solana</h2>
       <appkit-button />
-      <ActionButtonList />
+      <ActionButtonList sendHash={receiveHash} sendSignMsg={receiveSignedMsg} sendBalance={receivebalance}/>
       <div className="advice">
         <p>
           This projectId only works on localhost. <br/>
           Go to <a href="https://cloud.reown.com" target="_blank" className="link-button" rel="Reown Cloud">Reown Cloud</a> to get your own.
         </p>
       </div>
-      <InfoList />
+      <InfoList hash={transactionHash} signedMsg={signedMsg} balance={balance}/>
     </div>
   )
 }

react/react-solana/src/components/ActionButtonList.tsx

@@ -1,10 +1,72 @@
-import { useDisconnect, useAppKit, useAppKitNetwork  } from '@reown/appkit/react'
+import { useDisconnect, useAppKit, useAppKitNetwork, useAppKitAccount, useAppKitProvider   } from '@reown/appkit/react'
 import { networks } from '../config'
+import type { Provider } from '@reown/appkit-adapter-solana/react'
+import { useAppKitConnection } from '@reown/appkit-adapter-solana/react'
+import { PublicKey, LAMPORTS_PER_SOL, Transaction, SystemProgram } from "@solana/web3.js";
 
-export const ActionButtonList = () => {
+interface ActionButtonListProps {
+  sendHash: (hash: string ) => void;
+  sendSignMsg: (hash: string) => void;
+  sendBalance: (balance: string) => void;
+}
+
+export const ActionButtonList = ({ sendHash, sendSignMsg, sendBalance }: ActionButtonListProps) => {
     const { disconnect } = useDisconnect();
     const { open } = useAppKit();
     const { switchNetwork } = useAppKitNetwork();
+    const { isConnected, address } = useAppKitAccount()
+    const { connection } = useAppKitConnection();
+    const { walletProvider } = useAppKitProvider<Provider>('solana')
+
+
+    // function to send a tx
+    const handleSendTx = async () => {
+      if (!address || !connection) throw Error('user is disconnected');
+
+      const wallet = new PublicKey(address);
+      if (!wallet) throw Error('wallet provider is not available');
+
+      const latestBlockhash = await connection.getLatestBlockhash();
+
+      const transaction= new Transaction({
+        feePayer: wallet,
+        recentBlockhash: latestBlockhash?.blockhash,
+      }).add(
+        SystemProgram.transfer({
+          fromPubkey: wallet,
+          toPubkey: new PublicKey(address), // destination address
+          lamports: 1000,
+        })
+      );
+
+      const sig = await walletProvider.sendTransaction(transaction, connection)
+
+      sendHash(sig);
+    }
+
+    // function to sing a msg 
+    const handleSignMsg = async () => {
+      if (!walletProvider || !address) throw Error('user is disconnected')
+
+      const encodedMessage = new TextEncoder().encode("Hello Reown AppKit!");
+      const sig = await walletProvider.signMessage(encodedMessage);
+
+      const signatureHex = Buffer.from(sig).toString("hex");
+      sendSignMsg(signatureHex);
+    }
+
+    // function to get the balance
+    const handleGetBalance = async () => {
+      if (!address || !connection) throw Error('user is disconnected');
+
+      const wallet = new PublicKey(address);
+      const balance = await connection?.getBalance(wallet);
+      if (balance !== undefined) {
+        sendBalance(`${balance / LAMPORTS_PER_SOL} SOL`);
+      } else {
+        sendBalance('- SOL');
+      }
+    }
 
     const handleDisconnect = async () => {
       try {
@@ -13,11 +75,20 @@ export const ActionButtonList = () => {
         console.error("Failed to disconnect:", error);
       }
     };
-  return (
-    <div >
-        <button onClick={() => open()}>Open</button>
-        <button onClick={handleDisconnect}>Disconnect</button>
-        <button onClick={() => switchNetwork(networks[1]) }>Switch</button>
-    </div>
-  )
-}
+    return (
+      <>
+        {isConnected ? (
+          <div >
+            <div >
+              <button onClick={() => open()}>Open</button>
+              <button onClick={handleDisconnect}>Disconnect</button>
+              <button onClick={() => switchNetwork(networks[1]) }>Switch</button>
+              <button onClick={handleSignMsg}>Sign msg</button>
+              <button onClick={handleSendTx}>Send tx</button>
+              <button onClick={handleGetBalance}>Get Balance</button>  
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }

react/react-solana/src/components/InfoList.tsx

@@ -7,7 +7,13 @@ import {
     useWalletInfo
      } from '@reown/appkit/react'
 
-export const InfoList = () => {
+interface InfoListProps {
+    hash: string | undefined;
+    signedMsg: string;
+    balance: string;
+}
+
+export const InfoList = ({ hash, signedMsg, balance }: InfoListProps) => {
     const { themeMode, themeVariables } = useAppKitTheme();
     const state = useAppKitState();
     const {address, caipAddress, isConnected, status} = useAppKitAccount();
@@ -20,6 +26,28 @@ export const InfoList = () => {
 
   return (
     < >
+        {balance && (
+        <section>
+            <h2>Balance: {balance}</h2>
+        </section>
+        )}
+        {hash && (
+        <section>
+            <h2>Sign Tx</h2>
+            <pre>
+                Hash: {hash}<br />
+                Status: {/* receipt?.status.toString() */}<br />
+            </pre>
+        </section>
+        )}
+        {signedMsg && (
+        <section>
+            <h2>Sign msg</h2>
+            <pre>
+                signedMsg: {signedMsg}<br />
+            </pre>
+        </section>
+        )}
         <section>
             <h2>useAppKit</h2>
             <pre>