boilerplate

README.md

@@ -68,6 +68,6 @@ Compared to older platforms like Bitcoin and EVM-based protocols, Solana is:
 
 * **[Demo 1: Connecting to the Blockchain](demos/frontend/01_connecting_to_the_blockchain)**
 * **[Demo 2: Writing Non-Native Programs](demos/frontend/02_non_native_programs)**
-
+* **[Demo 3: Interacting with Wallets](demos/frontend/03_wallets)**
 
 

chapters/06_frontend.md

@@ -1,4 +1,4 @@
-# 🛹 Master Solana Frontend [IN CONSTRUCTION]
+# 🛹 Master Solana Frontend
 
 <br>
 
@@ -7,6 +7,38 @@
 <br>
 
 
+<br>
+
+----
+
+
+### Interacting with Wallets 
+
+<br>
+
+* A wallet refers to software or hardware that stores a secret key in order to keep it secure and handle secure transaction signing.
+
+* Solana's [@solana/wallet-adapter-base and @solana/wallet-adapter-react.-Adapter](https://github.com/anza-xyz/wallet-adapter) are libraries used to simplify the process of supporting wallet browser extensions.
+
+* `@solana/wallet-adapter-react` allows us to persist and access wallet connection states through hooks and context providers:
+    - `useWallet`
+    - `WalletProvider`
+    - `useConnection`
+    - `ConnectionProvider`
+
+* Any use of `useWallet` and `useConnection` should be wrapped in `WalletProvider` and `ConnectionProvider`.
+
+* `@solana/wallet-adapter-react-ui` allow the creation of custom components for, such as:
+    - `WalletModalProvider`
+    - `WalletMultiButton`
+    - `WalletConnectButton`
+    - `WalletModal`
+    - `WalletModalButton`
+    - `WalletDisconnectButton`
+    - `WalletIcon`
+
+
+
 <br>
 
 ----
@@ -18,11 +50,18 @@
 
 #### Introduction to [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/)
 
+
+* [Demo 1: Interacting with the Blockchain](https://github.com/urani-labs/solana-dev-onboarding-rs/tree/main/demos/frontend/01_connecting_to_the_blockchain)
+
+* [Demo 2: Non-native Programs](https://github.com/urani-labs/solana-dev-onboarding-rs/tree/main/demos/frontend/02_non_native_programs)
+
+
 <br>
 
-* [Demo 1: Interacting with the Blockchain](https://github.com/urani-labs/solana-dev-onboarding-rs/tree/main/demos/frontend/01_connecting_to_the_blockchain).
+#### Introduction to [@solana/wallet-adapter](https://github.com/anza-xyz/wallet-adapter)
+
 
-* [Demo 2: Non-native Programs](https://github.com/urani-labs/solana-dev-onboarding-rs/tree/main/demos/frontend/02_non_native_programs).
+* [Demo 3: Interacting with Wallets](https://github.com/urani-labs/solana-dev-onboarding-rs/tree/main/demos/frontend/03_wallets)
 
 <br>
 

demos/README.md

@@ -4,4 +4,6 @@
 
 ### ➡️ [Backend demos](backend)
 
-### ➡️ [Frontend demos](frontend)
+### ➡️ [Frontend demos](frontend)
+
+

demos/frontend/01_connecting_to_the_blockchain/.gitignore

@@ -1,5 +1,9 @@
+
+.anchor
+.DS_Store
 target
-Cargo.lock
+**/*.rs.bk
 node_modules
-target/*
-.env
+test-ledger
+.yarn
+.env

demos/frontend/02_non_native_programs/.gitignore

@@ -1,8 +1,8 @@
-
 .anchor
 .DS_Store
 target
 **/*.rs.bk
 node_modules
 test-ledger
 .yarn
+.env

demos/frontend/03_wallets/.gitignore

@@ -0,0 +1,9 @@
+
+.anchor
+.DS_Store
+target
+**/*.rs.bk
+node_modules
+test-ledger
+.yarn
+.next

demos/frontend/03_wallets/README.md

@@ -0,0 +1,36 @@
+# 🛹 Demo 3: Connecting with a Wallet
+
+
+<br>
+
+### tl; dr
+
+<br>
+
+* In ths demo, we will use [@solana/wallet-adapter-base and @solana/wallet-adapter-react.-Adapter](https://github.com/anza-xyz/wallet-adapter) to create the frontend for a transaction approval for last's demo ping program.
+
+<br>
+
+---
+
+### Setup
+
+<br>
+
+* Run `npm install` from the root of the project.
+* Install [Phantom Wallet](https://phantom.app/).
+
+
+<br>
+
+---
+
+
+### Running
+
+<br>
+
+```
+npm install
+npm run dev
+```

demos/frontend/03_wallets/components/AppBar.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react'
+import styles from '../styles/Home.module.css'
+import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
+import Image from 'next/image'
+
+export const AppBar: FC = () => {
+    return (
+        <div className={styles.AppHeader}>
+            <Image src="/solanaLogo.png" height={30} width={200} />
+            <span>Wallet-Adapter Example</span>
+            <WalletMultiButton />
+        </div>
+    )
+}

demos/frontend/03_wallets/components/PingButton.tsx

@@ -0,0 +1,42 @@
+import { useConnection, useWallet } from '@solana/wallet-adapter-react';
+import * as web3 from '@solana/web3.js'
+import { FC } from 'react'
+import styles from '../styles/PingButton.module.css'
+
+const PROGRAM_ID = `ChT1B39WKLS8qUrkLvFDXMhEJ4F1XZzwUNHUt4AU9aVa`
+const DATA_ACCOUNT_PUBKEY = `Ah9K7dQ8EHaZqcAsgBW8w37yN2eAy3koFmUn4x3CJtod`
+
+export const PingButton: FC = () => {
+	const { connection } = useConnection();
+	const { publicKey, sendTransaction } = useWallet();
+
+	const onClick = () => {
+		if (!connection || !publicKey) { return }
+
+		const programId = new web3.PublicKey(PROGRAM_ID)
+		const programDataAccount = new web3.PublicKey(DATA_ACCOUNT_PUBKEY)
+		const transaction = new web3.Transaction()
+
+		const instruction = new web3.TransactionInstruction({
+			keys: [
+				{
+					pubkey: programDataAccount,
+					isSigner: false,
+					isWritable: true
+				},
+			],
+			programId
+		});
+
+		transaction.add(instruction)
+		sendTransaction(transaction, connection).then(sig => {
+			console.log(sig)
+		})
+	}
+
+	return (
+		<div className={styles.buttonContainer} onClick={onClick}>
+			<button className={styles.button}>Ping!</button>
+		</div>
+	)
+}

demos/frontend/03_wallets/components/WalletContextProvider.tsx

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react'
+import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
+import * as web3 from '@solana/web3.js'
+import * as walletAdapterWallets from '@solana/wallet-adapter-wallets';
+require('@solana/wallet-adapter-react-ui/styles.css');
+
+const WalletContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const endpoint = web3.clusterApiUrl('devnet')
+	const wallets = [new walletAdapterWallets.PhantomWalletAdapter()]
+
+	return (
+		<ConnectionProvider endpoint={endpoint}>
+	    <WalletProvider wallets={wallets}>
+	      <WalletModalProvider>
+	        { children }
+        </WalletModalProvider>
+      </WalletProvider>
+    </ConnectionProvider>
+	)
+}
+
+export default WalletContextProvider

demos/frontend/03_wallets/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

demos/frontend/03_wallets/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig