Skip to content
This repository was archived by the owner on Jan 7, 2025. It is now read-only.

Commit 4d58106

Browse files
DonnySolanaDonnySolana
authored
Merge pull request #297 from mordonez-me/main
Update dependencies and example snippets to latest version
2 parents 7ffec9f + ef8b9bc commit 4d58106

File tree

9 files changed

+19622
-12969
lines changed

9 files changed

+19622
-12969
lines changed

‎package-lock.json‎

Lines changed: 17703 additions & 11135 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"name": "solana-dapp-next",
3-
"version": "0.1.0",
3+
"version": "0.2.0",
4+
"author": "Solana Maintainers <maintainers@solana.foundation>",
45
"license": "MIT",
56
"private": false,
67
"scripts": {
@@ -12,29 +13,32 @@
1213
"dependencies": {
1314
"@heroicons/react": "^1.0.5",
1415
"@noble/ed25519": "^1.7.1",
15-
"@solana/wallet-adapter-base": "^0.9.18",
16-
"@solana/wallet-adapter-react": "^0.15.21-rc.4",
17-
"@solana/wallet-adapter-react-ui": "^0.9.19-rc.4",
18-
"@solana/wallet-adapter-wallets": "^0.19.4",
19-
"@solana/web3.js": "^1.58.0",
20-
"@tailwindcss/typography": "^0.5.0",
16+
"@solana/wallet-adapter-base": "^0.9.20",
17+
"@solana/wallet-adapter-react": "^0.15.28",
18+
"@solana/wallet-adapter-react-ui": "^0.9.27",
19+
"@solana/wallet-adapter-wallets": "^0.19.11",
20+
"@solana/web3.js": "^1.73.0",
21+
"@tailwindcss/typography": "^0.5.9",
2122
"daisyui": "^1.24.3",
2223
"immer": "^9.0.12",
23-
"next": "12.0.8",
24+
"next": "^13.1.5",
2425
"next-compose-plugins": "^2.2.1",
25-
"next-transpile-modules": "^9.0.0",
26-
"react": "17.0.2",
27-
"react-dom": "17.0.2",
26+
"next-transpile-modules": "^10.0.0",
27+
"react": "^18.2.0",
28+
"react-dom": "^18.2.0",
2829
"zustand": "^3.6.9"
2930
},
3031
"devDependencies": {
31-
"@types/node": "17.0.10",
32-
"@types/react": "17.0.38",
32+
"@types/node": "^18.11.18",
33+
"@types/react": "^18.0.27",
3334
"autoprefixer": "^10.4.2",
3435
"eslint": "8.7.0",
35-
"eslint-config-next": "12.0.8",
36+
"eslint-config-next": "^13.1.5",
3637
"postcss": "^8.4.5",
37-
"tailwindcss": "^3.0.15",
38-
"typescript": "4.5.4"
38+
"tailwindcss": "^3.2.4",
39+
"typescript": "^4.9.4"
40+
},
41+
"engines": {
42+
"node": ">=16"
3943
}
4044
}

‎src/components/AppBar.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import { FC } from 'react';
22
import Link from "next/link";
3+
import dynamic from 'next/dynamic';
34

4-
import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
55
import { useAutoConnect } from '../contexts/AutoConnectProvider';
66
import NetworkSwitcher from './NetworkSwitcher';
77

8-
export const AppBar: FC = props => {
8+
const WalletMultiButtonDynamic = dynamic(
9+
async () => (await import('@solana/wallet-adapter-react-ui')).WalletMultiButton,
10+
{ ssr: false }
11+
);
12+
13+
14+
export const AppBar: React.FC = () => {
915
const { autoConnect, setAutoConnect } = useAutoConnect();
1016

1117
return (
@@ -20,7 +26,7 @@ export const AppBar: FC = props => {
2026
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
2127
</svg>
2228
</label>
23-
29+
2430
<div className="hidden sm:inline w-22 h-22 md:p-2">
2531
<svg width="100%" height="22" viewBox="0 0 646 96" fill="none" xmlns="http://www.w3.org/2000/svg">
2632
<g clipPath="url(#clip0_1064_606)">
@@ -53,17 +59,17 @@ export const AppBar: FC = props => {
5359
<div className="hidden md:inline md:navbar-center">
5460
<div className="flex items-stretch">
5561
<Link href="/">
56-
<a className="btn btn-ghost btn-sm rounded-btn">Home</a>
62+
<span className="btn btn-ghost btn-sm rounded-btn">Home</span>
5763
</Link>
5864
<Link href="/basics">
59-
<a className="btn btn-ghost btn-sm rounded-btn">Basics</a>
65+
<span className="btn btn-ghost btn-sm rounded-btn">Basics</span>
6066
</Link>
6167
</div>
6268
</div>
6369

6470
{/* Wallet & Settings */}
6571
<div className="navbar-end">
66-
<WalletMultiButton className="btn btn-ghost mr-4" />
72+
<WalletMultiButtonDynamic className="btn btn-ghost mr-4" />
6773

6874
<div className="dropdown dropdown-end">
6975
<div tabIndex={0} className="btn btn-square btn-ghost text-right">
@@ -87,7 +93,6 @@ export const AppBar: FC = props => {
8793
</div>
8894
</div>
8995
</div>
90-
{props.children}
9196
</div>
9297
);
9398
};

‎src/components/ContentContainer.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
import { FC } from 'react';
22
import Link from "next/link";
3-
export const ContentContainer: FC = props => {
3+
4+
interface Props {
5+
children: React.ReactNode;
6+
}
7+
8+
export const ContentContainer: React.FC<Props> = ({ children }) => {
49

510
return (
611
<div className="flex-1 drawer h-52">
7-
{/* <div className="h-screen drawer drawer-mobile w-full"> */}
12+
{/* <div className="h-screen drawer drawer-mobile w-full"> */}
813
<input id="my-drawer" type="checkbox" className="grow drawer-toggle" />
914
<div className="items-center drawer-content">
10-
{props.children}
15+
{children}
1116
</div>
1217

1318
{/* SideBar / Drawer */}
@@ -19,12 +24,12 @@ export const ContentContainer: FC = props => {
1924
</li>
2025
<li>
2126
<Link href="/">
22-
<a>Home</a>
27+
<span>Home</span>
2328
</Link>
2429
</li>
2530
<li>
2631
<Link href="/basics">
27-
<a>Basics</a>
32+
<span>Basics</span>
2833
</Link>
2934
</li>
3035
</ul>

‎src/components/RequestAirdrop.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,11 @@ export const RequestAirdrop: FC = () => {
2020

2121
try {
2222
signature = await connection.requestAirdrop(publicKey, LAMPORTS_PER_SOL);
23-
await connection.confirmTransaction(signature, 'confirmed');
23+
24+
// Get the lates block hash to use on our transaction and confirmation
25+
let latestBlockhash = await connection.getLatestBlockhash()
26+
await connection.confirmTransaction({ signature, ...latestBlockhash }, 'confirmed');
27+
2428
notify({ type: 'success', message: 'Airdrop successful!', txid: signature });
2529

2630
getUserSOLBalance(publicKey, connection);

‎src/components/SendTransaction.tsx‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useConnection, useWallet } from '@solana/wallet-adapter-react';
2-
import { Keypair, SystemProgram, Transaction, TransactionSignature } from '@solana/web3.js';
2+
import { Keypair, SystemProgram, Transaction, TransactionMessage, TransactionSignature, VersionedTransaction } from '@solana/web3.js';
33
import { FC, useCallback } from 'react';
44
import { notify } from "../utils/notifications";
55

@@ -16,17 +16,35 @@ export const SendTransaction: FC = () => {
1616

1717
let signature: TransactionSignature = '';
1818
try {
19-
const transaction = new Transaction().add(
19+
20+
// Create instructions to send, in this case a simple transfer
21+
const instructions = [
2022
SystemProgram.transfer({
2123
fromPubkey: publicKey,
2224
toPubkey: Keypair.generate().publicKey,
2325
lamports: 1_000_000,
24-
})
25-
);
26+
}),
27+
];
28+
29+
// Get the lates block hash to use on our transaction and confirmation
30+
let latestBlockhash = await connection.getLatestBlockhash()
31+
32+
// Create a new TransactionMessage with version and compile it to legacy
33+
const messageLegacy = new TransactionMessage({
34+
payerKey: publicKey,
35+
recentBlockhash: latestBlockhash.blockhash,
36+
instructions,
37+
}).compileToLegacyMessage();
38+
39+
// Create a new VersionedTransacction which supports legacy and v0
40+
const transation = new VersionedTransaction(messageLegacy)
41+
42+
// Send transaction and await for signature
43+
signature = await sendTransaction(transation, connection);
2644

27-
signature = await sendTransaction(transaction, connection);
45+
// Send transaction and await for signature
46+
await connection.confirmTransaction({ signature, ...latestBlockhash }, 'confirmed');
2847

29-
await connection.confirmTransaction(signature, 'confirmed');
3048
console.log(signature);
3149
notify({ type: 'success', message: 'Transaction successful!', txid: signature });
3250
} catch (error: any) {
@@ -45,8 +63,8 @@ export const SendTransaction: FC = () => {
4563
<div className="hidden group-disabled:block ">
4664
Wallet not connected
4765
</div>
48-
<span className="block group-disabled:hidden" >
49-
Send Transaction
66+
<span className="block group-disabled:hidden" >
67+
Send Transaction
5068
</span>
5169
</button>
5270
</div>

‎src/components/SendVersionedTransaction.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { useConnection, useWallet } from '@solana/wallet-adapter-react';
2+
import { Keypair, SystemProgram, TransactionMessage, TransactionSignature, VersionedTransaction } from '@solana/web3.js';
3+
import { FC, useCallback } from 'react';
4+
import { notify } from "../utils/notifications";
5+
6+
export const SendVersionedTransaction: FC = () => {
7+
const { connection } = useConnection();
8+
const { publicKey, sendTransaction } = useWallet();
9+
10+
const onClick = useCallback(async () => {
11+
if (!publicKey) {
12+
notify({ type: 'error', message: `Wallet not connected!` });
13+
console.log('error', `Send Transaction: Wallet not connected!`);
14+
return;
15+
}
16+
17+
let signature: TransactionSignature = '';
18+
try {
19+
20+
// Create instructions to send, in this case a simple transfer
21+
const instructions = [
22+
SystemProgram.transfer({
23+
fromPubkey: publicKey,
24+
toPubkey: Keypair.generate().publicKey,
25+
lamports: 1_000_000,
26+
}),
27+
];
28+
29+
// Get the lates block hash to use on our transaction and confirmation
30+
let latestBlockhash = await connection.getLatestBlockhash()
31+
32+
// Create a new TransactionMessage with version and compile it to version 0
33+
const messageV0 = new TransactionMessage({
34+
payerKey: publicKey,
35+
recentBlockhash: latestBlockhash.blockhash,
36+
instructions,
37+
}).compileToV0Message();
38+
39+
// Create a new VersionedTransacction to support the v0 message
40+
const transation = new VersionedTransaction(messageV0)
41+
42+
// Send transaction and await for signature
43+
signature = await sendTransaction(transation, connection);
44+
45+
// Await for confirmation
46+
await connection.confirmTransaction({ signature, ...latestBlockhash }, 'confirmed');
47+
48+
console.log(signature);
49+
notify({ type: 'success', message: 'Transaction successful!', txid: signature });
50+
} catch (error: any) {
51+
notify({ type: 'error', message: `Transaction failed!`, description: error?.message, txid: signature });
52+
console.log('error', `Transaction failed! ${error?.message}`, signature);
53+
return;
54+
}
55+
}, [publicKey, notify, connection, sendTransaction]);
56+
57+
return (
58+
<div>
59+
<button
60+
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 ... "
61+
onClick={onClick} disabled={!publicKey}
62+
>
63+
<div className="hidden group-disabled:block ">
64+
Wallet not connected
65+
</div>
66+
<span className="block group-disabled:hidden" >
67+
Send Versioned Transaction
68+
</span>
69+
</button>
70+
</div>
71+
);
72+
};

‎src/views/basics/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@
22
import { FC } from "react";
33
import { SignMessage } from '../../components/SignMessage';
44
import { SendTransaction } from '../../components/SendTransaction';
5+
import { SendVersionedTransaction } from '../../components/SendVersionedTransaction';
56

67
export const BasicsView: FC = ({ }) => {
78

89
return (
9-
<div className="md:hero mx-auto p-4">
10+
<div className="md:hero mx-auto p-4">
1011
<div className="md:hero-content flex flex-col">
1112
<h1 className="text-center text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-tr from-[#9945FF] to-[#14F195]">
1213
Basics
1314
</h1>
1415
{/* CONTENT GOES HERE */}
1516
<div className="text-center">
16-
<SignMessage/>
17+
<SignMessage />
1718
<SendTransaction />
19+
<SendVersionedTransaction />
1820
</div>
1921
</div>
2022
</div>

0 commit comments

Comments
 (0)