Skip to content

Instantly share code, notes, and snippets.

@jmlon
Last active May 19, 2023 20:02
Show Gist options
  • Save jmlon/a17af0ca76da5722f21e8f8b9b4bbd3e to your computer and use it in GitHub Desktop.
Save jmlon/a17af0ca76da5722f21e8f8b9b4bbd3e to your computer and use it in GitHub Desktop.
Example connection to the Phantom wallet for the solana_part1 tutorial
import { FC, useEffect, useState } from "react";
import { Connection, PublicKey, clusterApiUrl } from "@solana/web3.js";
type PhantomEvent = "disconnect" | "connect" | "accountChanged";
interface ConnectOpts {
onlyIfTrusted: boolean;
}
interface PhantomProvider {
connect: (opts?: Partial<ConnectOpts>) => Promise<{ publicKey: PublicKey }>;
disconnect: ()=>Promise<void>;
on: (event: PhantomEvent, callback: (args:any)=>void) => void;
isPhantom: boolean;
}
type WindowWithSolana = Window & {
solana?: PhantomProvider;
}
const Connect2Phantom: FC = () => {
const [ walletAvail, setWalletAvail ] = useState(false);
const [ provider, setProvider ] = useState<PhantomProvider | null>(null);
const [ connected, setConnected ] = useState(false);
const [ pubKey, setPubKey ] = useState<PublicKey | null>(null);
useEffect( ()=>{
if ("solana" in window) {
const solWindow = window as WindowWithSolana;
if (solWindow?.solana?.isPhantom) {
setProvider(solWindow.solana);
setWalletAvail(true);
// Attemp an eager connection
solWindow.solana.connect({ onlyIfTrusted: true });
}
}
}, []);
useEffect( () => {
provider?.on("connect", (publicKey: PublicKey)=>{
console.log(`connect event: ${publicKey}`);
setConnected(true);
setPubKey(publicKey);
});
provider?.on("disconnect", ()=>{
console.log("disconnect event");
setConnected(false);
setPubKey(null);
});
}, [provider]);
const connectHandler: React.MouseEventHandler<HTMLButtonElement> = (event) => {
console.log(`connect handler`);
provider?.connect()
.catch((err) => { console.error("connect ERROR:", err); });
}
const disconnectHandler: React.MouseEventHandler<HTMLButtonElement> = (event) => {
console.log("disconnect handler");
provider?.disconnect()
.catch((err) => {console.error("disconnect ERROR:", err); });
}
return (
<div>
{ walletAvail ?
<>
<button disabled={connected} onClick={connectHandler}>Connect to Phantom</button>
<button disabled={!connected} onClick={disconnectHandler}>Disconnect from Phantom</button>
{ connected ? <p>Your public key is : {pubKey?.toBase58()}</p> : null }
</>
:
<>
<p>Opps!!! Phantom is not available. Go get it <a href="https://phantom.app/">https://phantom.app/</a>.</p>
</>
}
</div>
);
}
export default Connect2Phantom;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment