Merge pull request #297 from mordonez-me/main

Update dependencies and example snippets to latest version

package.json

@@ -1,6 +1,7 @@
 {
   "name": "solana-dapp-next",
-  "version": "0.1.0",
+  "version": "0.2.0",
+  "author": "Solana Maintainers <[email protected]>",
   "license": "MIT",
   "private": false,
   "scripts": {
@@ -12,29 +13,32 @@
   "dependencies": {
     "@heroicons/react": "^1.0.5",
     "@noble/ed25519": "^1.7.1",
-    "@solana/wallet-adapter-base": "^0.9.18",
-    "@solana/wallet-adapter-react": "^0.15.21-rc.4",
-    "@solana/wallet-adapter-react-ui": "^0.9.19-rc.4",
-    "@solana/wallet-adapter-wallets": "^0.19.4",
-    "@solana/web3.js": "^1.58.0",
-    "@tailwindcss/typography": "^0.5.0",
+    "@solana/wallet-adapter-base": "^0.9.20",
+    "@solana/wallet-adapter-react": "^0.15.28",
+    "@solana/wallet-adapter-react-ui": "^0.9.27",
+    "@solana/wallet-adapter-wallets": "^0.19.11",
+    "@solana/web3.js": "^1.73.0",
+    "@tailwindcss/typography": "^0.5.9",
     "daisyui": "^1.24.3",
     "immer": "^9.0.12",
-    "next": "12.0.8",
+    "next": "^13.1.5",
     "next-compose-plugins": "^2.2.1",
-    "next-transpile-modules": "^9.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "next-transpile-modules": "^10.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "zustand": "^3.6.9"
   },
   "devDependencies": {
-    "@types/node": "17.0.10",
-    "@types/react": "17.0.38",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.27",
     "autoprefixer": "^10.4.2",
     "eslint": "8.7.0",
-    "eslint-config-next": "12.0.8",
+    "eslint-config-next": "^13.1.5",
     "postcss": "^8.4.5",
-    "tailwindcss": "^3.0.15",
-    "typescript": "4.5.4"
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.4"
+  },
+  "engines": {
+    "node": ">=16"
   }
 }

src/components/AppBar.tsx

@@ -1,11 +1,17 @@
 import { FC } from 'react';
 import Link from "next/link";
+import dynamic from 'next/dynamic';
 
-import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
 import { useAutoConnect } from '../contexts/AutoConnectProvider';
 import NetworkSwitcher from './NetworkSwitcher';
 
-export const AppBar: FC = props => {
+const WalletMultiButtonDynamic = dynamic(
+  async () => (await import('@solana/wallet-adapter-react-ui')).WalletMultiButton,
+  { ssr: false }
+);
+
+
+export const AppBar: React.FC = () => {
   const { autoConnect, setAutoConnect } = useAutoConnect();
 
   return (
@@ -20,7 +26,7 @@ export const AppBar: FC = props => {
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
             </svg>
           </label>
-        
+
           <div className="hidden sm:inline w-22 h-22 md:p-2">
             <svg width="100%" height="22" viewBox="0 0 646 96" fill="none" xmlns="http://www.w3.org/2000/svg">
               <g clipPath="url(#clip0_1064_606)">
@@ -53,17 +59,17 @@ export const AppBar: FC = props => {
         <div className="hidden md:inline md:navbar-center">
           <div className="flex items-stretch">
             <Link href="/">
-              <a className="btn btn-ghost btn-sm rounded-btn">Home</a>
+              <span className="btn btn-ghost btn-sm rounded-btn">Home</span>
             </Link>
             <Link href="/basics">
-              <a className="btn btn-ghost btn-sm rounded-btn">Basics</a>
+              <span className="btn btn-ghost btn-sm rounded-btn">Basics</span>
             </Link>
           </div>
         </div>
 
         {/* Wallet & Settings */}
         <div className="navbar-end">
-          <WalletMultiButton className="btn btn-ghost mr-4" />
+          <WalletMultiButtonDynamic className="btn btn-ghost mr-4" />
 
           <div className="dropdown dropdown-end">
             <div tabIndex={0} className="btn btn-square btn-ghost text-right">
@@ -87,7 +93,6 @@ export const AppBar: FC = props => {
           </div>
         </div>
       </div>
-      {props.children}
     </div>
   );
 };

src/components/ContentContainer.tsx

@@ -1,13 +1,18 @@
 import { FC } from 'react';
 import Link from "next/link";
-export const ContentContainer: FC = props => {
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const ContentContainer: React.FC<Props> = ({ children }) => {
 
   return (
     <div className="flex-1 drawer h-52">
-     {/* <div className="h-screen drawer drawer-mobile w-full"> */}
+      {/* <div className="h-screen drawer drawer-mobile w-full"> */}
       <input id="my-drawer" type="checkbox" className="grow drawer-toggle" />
       <div className="items-center  drawer-content">
-        {props.children}
+        {children}
       </div>
 
       {/* SideBar / Drawer */}
@@ -19,12 +24,12 @@ export const ContentContainer: FC = props => {
           </li>
           <li>
             <Link href="/">
-              <a>Home</a>
+              <span>Home</span>
             </Link>
           </li>
           <li>
             <Link href="/basics">
-              <a>Basics</a>
+              <span>Basics</span>
             </Link>
           </li>
         </ul>

src/components/RequestAirdrop.tsx

@@ -20,7 +20,11 @@ export const RequestAirdrop: FC = () => {
 
         try {
             signature = await connection.requestAirdrop(publicKey, LAMPORTS_PER_SOL);
-            await connection.confirmTransaction(signature, 'confirmed');
+
+            // Get the lates block hash to use on our transaction and confirmation
+            let latestBlockhash = await connection.getLatestBlockhash()
+            await connection.confirmTransaction({ signature, ...latestBlockhash }, 'confirmed');
+
             notify({ type: 'success', message: 'Airdrop successful!', txid: signature });
 
             getUserSOLBalance(publicKey, connection);

src/components/SendTransaction.tsx

@@ -1,5 +1,5 @@
 import { useConnection, useWallet } from '@solana/wallet-adapter-react';
-import { Keypair, SystemProgram, Transaction, TransactionSignature } from '@solana/web3.js';
+import { Keypair, SystemProgram, Transaction, TransactionMessage, TransactionSignature, VersionedTransaction } from '@solana/web3.js';
 import { FC, useCallback } from 'react';
 import { notify } from "../utils/notifications";
 
@@ -16,17 +16,35 @@ export const SendTransaction: FC = () => {
 
         let signature: TransactionSignature = '';
         try {
-            const transaction = new Transaction().add(
+
+            // Create instructions to send, in this case a simple transfer
+            const instructions = [
                 SystemProgram.transfer({
                     fromPubkey: publicKey,
                     toPubkey: Keypair.generate().publicKey,
                     lamports: 1_000_000,
-                })
-            );
+                }),
+            ];
+
+            // Get the lates block hash to use on our transaction and confirmation
+            let latestBlockhash = await connection.getLatestBlockhash()
+
+            // Create a new TransactionMessage with version and compile it to legacy
+            const messageLegacy = new TransactionMessage({
+                payerKey: publicKey,
+                recentBlockhash: latestBlockhash.blockhash,
+                instructions,
+            }).compileToLegacyMessage();
+
+            // Create a new VersionedTransacction which supports legacy and v0
+            const transation = new VersionedTransaction(messageLegacy)
+
+            // Send transaction and await for signature
+            signature = await sendTransaction(transation, connection);
 
-            signature = await sendTransaction(transaction, connection);
+            // Send transaction and await for signature
+            await connection.confirmTransaction({ signature, ...latestBlockhash }, 'confirmed');
 
-            await connection.confirmTransaction(signature, 'confirmed');
             console.log(signature);
             notify({ type: 'success', message: 'Transaction successful!', txid: signature });
         } catch (error: any) {
@@ -45,8 +63,8 @@ export const SendTransaction: FC = () => {
                 <div className="hidden group-disabled:block ">
                     Wallet not connected
                 </div>
-                <span className="block group-disabled:hidden" > 
-                    Send Transaction 
+                <span className="block group-disabled:hidden" >
+                    Send Transaction
                 </span>
             </button>
         </div>

src/components/SendVersionedTransaction.tsx

@@ -0,0 +1,72 @@
+import { useConnection, useWallet } from '@solana/wallet-adapter-react';
+import { Keypair, SystemProgram, TransactionMessage, TransactionSignature, VersionedTransaction } from '@solana/web3.js';
+import { FC, useCallback } from 'react';
+import { notify } from "../utils/notifications";
+
+export const SendVersionedTransaction: FC = () => {
+    const { connection } = useConnection();
+    const { publicKey, sendTransaction } = useWallet();
+
+    const onClick = useCallback(async () => {
+        if (!publicKey) {
+            notify({ type: 'error', message: `Wallet not connected!` });
+            console.log('error', `Send Transaction: Wallet not connected!`);
+            return;
+        }
+
+        let signature: TransactionSignature = '';
+        try {
+
+            // Create instructions to send, in this case a simple transfer
+            const instructions = [
+                SystemProgram.transfer({
+                    fromPubkey: publicKey,
+                    toPubkey: Keypair.generate().publicKey,
+                    lamports: 1_000_000,
+                }),
+            ];
+
+            // Get the lates block hash to use on our transaction and confirmation
+            let latestBlockhash = await connection.getLatestBlockhash()
+
+            // Create a new TransactionMessage with version and compile it to version 0
+            const messageV0 = new TransactionMessage({
+                payerKey: publicKey,
+                recentBlockhash: latestBlockhash.blockhash,
+                instructions,
+            }).compileToV0Message();
+
+            // Create a new VersionedTransacction to support the v0 message
+            const transation = new VersionedTransaction(messageV0)
+
+            // Send transaction and await for signature
+            signature = await sendTransaction(transation, connection);
+
+            // Await for confirmation
+            await connection.confirmTransaction({ signature, ...latestBlockhash }, 'confirmed');
+
+            console.log(signature);
+            notify({ type: 'success', message: 'Transaction successful!', txid: signature });
+        } catch (error: any) {
+            notify({ type: 'error', message: `Transaction failed!`, description: error?.message, txid: signature });
+            console.log('error', `Transaction failed! ${error?.message}`, signature);
+            return;
+        }
+    }, [publicKey, notify, connection, sendTransaction]);
+
+    return (
+        <div>
+            <button
+                className="group w-60 m-2 btn animate-pulse disabled:animate-none bg-gradient-to-r from-[#9945FF] to-[#14F195] hover:from-pink-500 hover:to-yellow-500 ... "
+                onClick={onClick} disabled={!publicKey}
+            >
+                <div className="hidden group-disabled:block ">
+                    Wallet not connected
+                </div>
+                <span className="block group-disabled:hidden" >
+                    Send Versioned Transaction
+                </span>
+            </button>
+        </div>
+    );
+};

src/views/basics/index.tsx

@@ -2,19 +2,21 @@
 import { FC } from "react";
 import { SignMessage } from '../../components/SignMessage';
 import { SendTransaction } from '../../components/SendTransaction';
+import { SendVersionedTransaction } from '../../components/SendVersionedTransaction';
 
 export const BasicsView: FC = ({ }) => {
 
   return (
-<div className="md:hero mx-auto p-4">
+    <div className="md:hero mx-auto p-4">
       <div className="md:hero-content flex flex-col">
         <h1 className="text-center text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-tr from-[#9945FF] to-[#14F195]">
           Basics
         </h1>
         {/* CONTENT GOES HERE */}
         <div className="text-center">
-          <SignMessage/>
+          <SignMessage />
           <SendTransaction />
+          <SendVersionedTransaction />
         </div>
       </div>
     </div>