-
Notifications
You must be signed in to change notification settings - Fork 0
/
Setting Up Your React App.js
127 lines (112 loc) · 3.47 KB
/
Setting Up Your React App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
// import functionalities
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {
PublicKey,
Transaction,
} from "@solana/web3.js";
import {useEffect , useState } from "react";
// create types
type DisplayEncoding = "utf8" | "hex";
type PhantomEvent = "disconnect" | "connect" | "accountChanged";
type PhantomRequestMethod =
| "connect"
| "disconnect"
| "signTransaction"
| "signAllTransactions"
| "signMessage";
interface ConnectOpts {
onlyIfTrusted: boolean;
}
// create a provider interface (hint: think of this as an object) to store the Phantom Provider
interface PhantomProvider {
publicKey: PublicKey | null;
isConnected: boolean | null;
signTransaction: (transaction: Transaction) => Promise<Transaction>;
signAllTransactions: (transactions: Transaction[]) => Promise<Transaction[]>;
signMessage: (
message: Uint8Array | string,
display?: DisplayEncoding
) => Promise<any>;
connect: (opts?: Partial<ConnectOpts>) => Promise<{ publicKey: PublicKey }>;
disconnect: () => Promise<void>;
on: (event: PhantomEvent, handler: (args: any) => void) => void;
request: (method: PhantomRequestMethod, params: any) => Promise<unknown>;
}
/**
* @description gets Phantom provider, if it exists
*/
const getProvider = (): PhantomProvider | undefined => {
if ("solana" in window) {
// @ts-ignore
const provider = window.solana as any;
if (provider.isPhantom) return provider as PhantomProvider;
}
};
function App() {
// create state variable for the provider
const [provider, setProvider] = useState<PhantomProvider | undefined>(
undefined
);
// create state variable for the wallet key
const [walletKey, setWalletKey] = useState<PhantomProvider | undefined>(
undefined
);
// this is the function that runs whenever the component updates (e.g. render, refresh)
useEffect(() => {
const provider = getProvider();
// if the phantom provider exists, set this as the provider
if (provider) setProvider(provider);
else setProvider(undefined);
}, []);
/**
* @description prompts user to connect wallet if it exists.
* This function is called when the connect wallet button is clicked
*/
const connectWallet = async () => {
// @ts-ignore
const { solana } = window;
// checks if phantom wallet exists
if (solana) {
try {
// connects wallet and returns response which includes the wallet public key
const response = await solana.connect();
console.log('wallet account ', response.publicKey.toString());
// update walletKey to be the public key
setWalletKey(response.publicKey.toString());
} catch (err) {
// { code: 4001, message: 'User rejected the request.' }
}
}
};
// HTML code for the app
return (
<div className="App">
<header className="App-header">
<h2>Connect to Phantom Wallet</h2>
</header>
{provider && !walletKey && (
<button
style={{
fontSize: "16px",
padding: "15px",
fontWeight: "bold",
borderRadius: "5px",
}}
onClick={connectWallet}
>
Connect Wallet
</button>
)}
{provider && walletKey && <p>Connected account</p> }
{!provider && (
<p>
No provider found. Install{" "}
<a href="<https://phantom.app/>">Phantom Browser extension</a>
</p>
)}
</div>
);
}
export default App;