useEffect<\/code> function.<\/a> This is important as we don’t want to constantly update the provider every time the app re-renders.<\/p>\n\n\n\nAdd logic to display content based on state of the provider<\/h5>\n\n\n\n Finally, update the UI based on the state of the provider. If the provider exists, add a button to connect to the Phantom wallet. Otherwise, show a message suggesting the user to install the Phantom Browser extension.<\/p>\n\n\n\n
return (\n <div className=\"App\">\n <header className=\"App-header\">\n <h2>Tutorial: Connect to Phantom Wallet<\/h2>\n {provider && (\n <button\n style={{\n fontSize: \"16px\",\n padding: \"15px\",\n fontWeight: \"bold\",\n borderRadius: \"5px\",\n }}\n >\n Connect to Phantom Wallet\n <\/button>\n )}\n\n {!provider && (\n <p>\n No provider found. Install{\" \"}\n <a href=\"https:\/\/phantom.app\/\">Phantom Browser extension<\/a>\n <\/p>\n )}\n\n <p>\n Built by{\" \"}\n <a\n href=\"https:\/\/twitter.com\/arealesramirez\"\n target=\"_blank\"\n rel=\"noreferrer\"\n className=\"twitter-link\"\n >\n @arealesramirez\n <\/a>\n <\/p>\n <\/header>\n <\/div><\/code><\/pre>\n\n\n\nOpen the App.css<\/em> to add some styling to the links and buttons we added.<\/p>\n\n\n\na {\n color: white;\n}\n.twitter-link {\n color: \"white\";\n font-size: \"16px\";\n margin-top: \"15px\";\n margin-bottom: \"15px\";\n}<\/code><\/pre>\n\n\n\nTest the logic<\/h5>\n\n\n\n That was quite a bit of explanation, which hopefully will make sense once we start running our app.<\/p>\n\n\n\n
yarn start<\/code><\/pre>\n\n\n\nNotice how the “Connect to Phantom Wallet” button is displayed whenever the Phantom browser extension is available.<\/p>\n\n\n\n
Connect to Phantom Wallet button displayed<\/figcaption><\/figure><\/div>\n\n\n\nNow, go ahead and disable the Phantom browser extension from your browser. Then, refresh the page. You should see a message prompting the user to install the browser extension.<\/p>\n\n\n\n
Message displayed when Phantom browser extension is not available<\/figcaption><\/figure><\/div>\n\n\n\nOnce proving the logic works, enable Phantom browser extension one more time.<\/p>\n\n\n\n
<\/span>Connect to Phantom Wallet<\/span><\/h4>\n\n\n\nWe have a “Connect to Phantom Wallet” button that doesn’t do anything as of now. Let’s create a function to trigger once the user clicks the button.<\/p>\n\n\n\n
First, generate a walletKey<\/code> to store the public key of the connected account.<\/p>\n\n\n\nconst [walletKey, setWalletKey] = useState<PhantomProvider | undefined>(\n undefined\n );<\/code><\/pre>\n\n\n\nThen, add a connectWallet<\/code> variable storing the function that makes the request to connect to the wallet below getProvider<\/code>.<\/p>\n\n\n\n\/**\n * @description prompts user to connect wallet if it exists\n *\/\n const connectWallet = async () => {\n \/\/ @ts-ignore\n const { solana } = window;\n\n if (solana) {\n try {\n const response = await solana.connect();\n console.log('wallet account ', response.publicKey.toString());\n setWalletKey(response.publicKey.toString());\n } catch (err) {\n \/\/ { code: 4001, message: 'User rejected the request.' }\n }\n }\n };\n<\/code><\/pre>\n\n\n\nFinally, wire up the button to trigger connectWallet<\/code> once the button is clicked.<\/p>\n\n\n\n<button\n style={{\n fontSize: \"16px\",\n padding: \"15px\",\n fontWeight: \"bold\",\n borderRadius: \"5px\",\n }}\n onClick={connectWallet}\n >\n Connect to Phantom Wallet\n <\/button><\/code><\/pre>\n\n\n\nTest the logic by going back to the browser and clicking on the “Connect to Phantom Wallet” button. You should see a Phantom browser extension prompting you to whether connect the app.<\/p>\n\n\n\n
After clicking the button to connect to the wallet for the first time<\/figcaption><\/figure><\/div>\n\n\n\nThis is a mechanism to ensure we are trusting to connect our account with any site. Click on “Connect”. This will add our app as part of the list of trusted apps.<\/p>\n\n\n\n
Finding the list of trusted apps in the Phantom wallet<\/h5>\n\n\n\n You can always verify the list of trusted apps in our Phantom wallet. To find them, <\/p>\n\n\n\n
Click on the Phantom browser extension<\/li> Click on the Settings icon<\/li> Click on the “Trusted Apps” option<\/li> Verify our app is trusted by verifying the address, which is localhost:3000<\/em> since we are currently developing in our local environment.<\/li><\/ol>\n\n\n\n<\/p>\n\n\n\n
Finding Phantom wallet trusted apps<\/figcaption><\/figure><\/div>\n\n\n\n<\/span>Display Account and Hide “Connect to Wallet” button<\/span><\/h4>\n\n\n\nOnce the account is connected, it is not necessary to have available the “Connect to Phantom Wallet” button. Hence, we are going to check if the walletKey<\/code> does not exist. If so, do not display the button. Also, add a check to verify the walletKey<\/code> exists to display the account to the user.<\/p>\n\n\n\n{provider && !walletKey && (\n <button\n style={{\n fontSize: \"16px\",\n padding: \"15px\",\n fontWeight: \"bold\",\n borderRadius: \"5px\",\n }}\n onClick={connectWallet}\n >\n Connect to Phantom Wallet\n <\/button>\n )}\n\n {provider && walletKey && <p>Connected account {walletKey}<\/p>}\n<\/code><\/pre>\n\n\n\nRefresh the app and verify the account is displayed once you connect to the wallet, and check the “Connect to wallet” button is no longer enabled.<\/p>\n\n\n\n
<\/span>Add button to disconnect from the Phantom Wallet<\/span><\/h4>\n\n\n\nJust like when you log in to a traditional app, you want to have the option to log out. In this case, we want to connect and disconnect to a digital wallet.<\/p>\n\n\n\n
To allow users to disconnect the wallet, use the disconnect()<\/code> function provided by Solana. To do this, we are going to create a disconnectWallet<\/code> variable and assign the following function.<\/p>\n\n\n\n\/**\n * @description disconnect Phantom wallet \n *\/\n const disconnectWallet = async () => {\n \/\/ @ts-ignore\n const { solana } = window;\n\n if (walletKey && solana) {\n await (solana as PhantomProvider).disconnect();\n setWalletKey(undefined);\n }\n };<\/code><\/pre>\n\n\n\nAdd a disconnect button which will trigger the disconnectWallet<\/code> function.<\/p>\n\n\n\n{provider && walletKey && (\n <div>\n <p>Connected account {walletKey}<\/p>\n\n <button\n style={{\n fontSize: \"16px\",\n padding: \"15px\",\n fontWeight: \"bold\",\n borderRadius: \"5px\",\n margin: \"15px auto\",\n }}\n onClick={disconnectWallet}\n >\n Disconnect\n <\/button>\n <\/div>\n )}<\/code><\/pre>\n\n\n\nGo to your browser and verify the account is not available after you click the “Disconnect” button.<\/p>\n\n\n\n
<\/span>Final Code<\/span><\/h4>\n\n\n\nIf for any reason something wasn’t working as expected and you are stuck trying to figure out what is going, feel free to compare it with the final code.<\/p>\n\n\n\n
import { useEffect, useState } from \"react\";\nimport { PublicKey, Transaction } from \"@solana\/web3.js\";\n\nimport \".\/App.css\";\n\ntype DisplayEncoding = \"utf8\" | \"hex\";\ntype PhantomEvent = \"disconnect\" | \"connect\" | \"accountChanged\";\ntype PhantomRequestMethod =\n | \"connect\"\n | \"disconnect\"\n | \"signTransaction\"\n | \"signAllTransactions\"\n | \"signMessage\";\n\ninterface ConnectOpts {\n onlyIfTrusted: boolean;\n}\n\ninterface PhantomProvider {\n publicKey: PublicKey | null;\n isConnected: boolean | null;\n signTransaction: (transaction: Transaction) => Promise<Transaction>;\n signAllTransactions: (transactions: Transaction[]) => Promise<Transaction[]>;\n signMessage: (\n message: Uint8Array | string,\n display?: DisplayEncoding\n ) => Promise<any>;\n connect: (opts?: Partial<ConnectOpts>) => Promise<{ publicKey: PublicKey }>;\n disconnect: () => Promise<void>;\n on: (event: PhantomEvent, handler: (args: any) => void) => void;\n request: (method: PhantomRequestMethod, params: any) => Promise<unknown>;\n}\n\nfunction App() {\n const [provider, setProvider] = useState<PhantomProvider | undefined>(\n undefined\n );\n const [walletKey, setWalletKey] = useState<PhantomProvider | undefined>(\n undefined\n );\n\n \/**\n * @description gets Phantom provider, if it exists\n *\/\n const getProvider = (): PhantomProvider | undefined => {\n if (\"solana\" in window) {\n \/\/ @ts-ignore\n const provider = window.solana as any;\n if (provider.isPhantom) return provider as PhantomProvider;\n }\n };\n\n \/**\n * @description prompts user to connect wallet if it exists\n *\/\n const connectWallet = async () => {\n \/\/ @ts-ignore\n const { solana } = window;\n\n if (solana) {\n try {\n const response = await solana.connect();\n console.log(\"wallet account \", response.publicKey.toString());\n setWalletKey(response.publicKey.toString());\n } catch (err) {\n \/\/ { code: 4001, message: 'User rejected the request.' }\n }\n }\n };\n\n \/**\n * @description disconnect Phantom wallet \n *\/\n const disconnectWallet = async () => {\n \/\/ @ts-ignore\n const { solana } = window;\n\n if (walletKey && solana) {\n await (solana as PhantomProvider).disconnect();\n setWalletKey(undefined);\n }\n };\n\n \/\/ detect phantom provider exists\n useEffect(() => {\n const provider = getProvider();\n\n if (provider) setProvider(provider);\n else setProvider(undefined);\n }, []);\n\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <h2>Tutorial: Connect to Phantom Wallet<\/h2>\n {provider && !walletKey && (\n <button\n style={{\n fontSize: \"16px\",\n padding: \"15px\",\n fontWeight: \"bold\",\n borderRadius: \"5px\",\n }}\n onClick={connectWallet}\n >\n Connect to Phantom Wallet\n <\/button>\n )}\n\n {provider && walletKey && (\n <div>\n <p>Connected account {walletKey}<\/p>\n\n <button\n style={{\n fontSize: \"16px\",\n padding: \"15px\",\n fontWeight: \"bold\",\n borderRadius: \"5px\",\n margin: \"15px auto\",\n }}\n onClick={disconnectWallet}\n >\n Disconnect\n <\/button>\n <\/div>\n )}\n\n {!provider && (\n <p>\n No provider found. Install{\" \"}\n <a href=\"https:\/\/phantom.app\/\">Phantom Browser extension<\/a>\n <\/p>\n )}\n\n <p>\n Built by{\" \"}\n <a\n href=\"https:\/\/twitter.com\/arealesramirez\"\n target=\"_blank\"\n rel=\"noreferrer\"\n className=\"twitter-link\"\n >\n @arealesramirez\n <\/a>\n <\/p>\n <\/header>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n<\/span>Conclusion<\/span><\/h2>\n\n\n\nThis tutorial explained how to connect to the Phantom wallet using the Phantom browser extension in a React app. However, after understanding how to connect and disconnect the wallet, you can use other frontend frameworks as all that you need is to have access to the solana<\/code> object injected by the Phantom browser extension.<\/p>\n\n\n\nDid you like this article?<\/strong><\/p>\n\n\n\nShare your thoughts by replying on Twitter of Become A Better Programmer<\/a> or to my personal Twitter account<\/a>.<\/p>\n\n\n\n\n