diff --git a/react/react-solana/package.json b/react/react-solana/package.json index c140670..32a969a 100644 --- a/react/react-solana/package.json +++ b/react/react-solana/package.json @@ -13,6 +13,7 @@ "@reown/appkit": "1.6.1", "@reown/appkit-adapter-solana": "1.6.1", "@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" diff --git a/react/react-solana/pnpm-lock.yaml b/react/react-solana/pnpm-lock.yaml index 894567d..ca4a5d9 100644 --- a/react/react-solana/pnpm-lock.yaml +++ b/react/react-solana/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: '@solana/wallet-adapter-wallets': specifier: ^0.19.32 version: 0.19.32(@babel/core@7.25.2)(@babel/runtime@7.25.6)(@solana/web3.js@1.95.8(bufferutil@4.0.8)(utf-8-validate@5.0.10))(bs58@6.0.0)(bufferutil@4.0.8)(react-dom@18.3.1(react@18.3.1))(react-native@0.75.3(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.3.9)(bufferutil@4.0.8)(react@18.3.1)(typescript@5.6.2)(utf-8-validate@5.0.10))(react@18.3.1)(tslib@2.7.0)(utf-8-validate@5.0.10) + '@solana/web3.js': + specifier: ^1.95.8 + version: 1.95.8(bufferutil@4.0.8)(utf-8-validate@5.0.10) bs58: specifier: ^6.0.0 version: 6.0.0 diff --git a/react/react-solana/src/App.css b/react/react-solana/src/App.css index 319fdae..ce8613f 100644 --- a/react/react-solana/src/App.css +++ b/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); diff --git a/react/react-solana/src/App.tsx b/react/react-solana/src/App.tsx index a46b3ab..006b7e9 100644 --- a/react/react-solana/src/App.tsx +++ b/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(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 (
Reown

Reown AppKit + Solana

- +

This projectId only works on localhost.
Go to Reown Cloud to get your own.

- +
) } diff --git a/react/react-solana/src/components/ActionButtonList.tsx b/react/react-solana/src/components/ActionButtonList.tsx index 1b423aa..8e5ff11 100644 --- a/react/react-solana/src/components/ActionButtonList.tsx +++ b/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('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 ( -
- - - -
- ) -} + return ( + <> + {isConnected ? ( +
+
+ + + + + + +
+
+ ) : null} + + ); + } \ No newline at end of file diff --git a/react/react-solana/src/components/InfoList.tsx b/react/react-solana/src/components/InfoList.tsx index d74d57d..8e1fffd 100644 --- a/react/react-solana/src/components/InfoList.tsx +++ b/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 && ( +
+

Balance: {balance}

+
+ )} + {hash && ( +
+

Sign Tx

+ 
+                Hash: {hash}

+                Status: {/* receipt?.status.toString() */}

+
+
+ )} + {signedMsg && ( +
+

Sign msg

+ 
+                signedMsg: {signedMsg}

+
+
+ )}

useAppKit