- React
- Browser SDK
- React Native
import { PhantomProvider, usePhantom, useModal, useAccounts, useDisconnect, darkTheme } from "@phantom/react-sdk";
import { AddressType } from "@phantom/browser-sdk";
function App() {
return (
<PhantomProvider
config={{
providers: ["google", "apple", "injected"],
appId: "your-app-id",
addressTypes: [AddressType.solana],
authOptions: {
redirectUrl: "https://yourapp.com/auth/callback",
},
}}
theme={darkTheme}
appName="Your App"
>
<AppContent />
</PhantomProvider>
);
}
function AppContent() {
const { isConnected } = usePhantom();
const { open } = useModal();
const addresses = useAccounts();
const { disconnect } = useDisconnect();
// User is logged in
if (isConnected && addresses) {
return (
<div>
<p>Welcome back!</p>
<p>Wallet: {addresses[0]?.address}</p>
<button onClick={() => disconnect()}>Sign out</button>
</div>
);
}
// User needs to log in
return (
<div>
<h1>Welcome</h1>
<button onClick={open}>Sign in</button>
</div>
);
}
import { BrowserSDK, AddressType } from "@phantom/browser-sdk";
const sdk = new BrowserSDK({
providers: ["google", "apple", "injected"],
appId: "your-app-id",
addressTypes: [AddressType.solana],
});
// Listen for connection events
sdk.on("connect", (data) => {
console.log("Connected:", data.addresses);
// Update your UI to show logged-in state
});
sdk.on("disconnect", () => {
console.log("Disconnected");
// Update your UI to show logged-out state
});
// Try to restore existing session on page load
await sdk.autoConnect();
import { PhantomProvider, usePhantom, useModal, useAccounts, useDisconnect, AddressType, darkTheme } from "@phantom/react-native-sdk";
import { View, Text, Button, StyleSheet, ActivityIndicator } from "react-native";
function App() {
return (
<PhantomProvider
config={{
providers: ["google", "apple"],
appId: "your-app-id",
scheme: "yourapp",
addressTypes: [AddressType.solana],
authOptions: {
redirectUrl: "yourapp://auth/callback",
},
}}
theme={darkTheme}
appName="Your App"
>
<AppContent />
</PhantomProvider>
);
}
function AppContent() {
const { isConnected } = usePhantom();
const { open } = useModal();
const addresses = useAccounts();
const { disconnect } = useDisconnect();
if (isConnected && addresses) {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome back!</Text>
<Text style={styles.address}>Wallet: {addresses[0]?.address}</Text>
<Button title="Sign out" onPress={() => disconnect()} />
</View>
);
}
return (
<View style={styles.container}>
<Text style={styles.title}>Welcome</Text>
<Button title="Sign in" onPress={open} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
padding: 20,
},
title: {
fontSize: 24,
fontWeight: "bold",
marginBottom: 20,
},
welcome: {
fontSize: 20,
fontWeight: "bold",
marginBottom: 10,
},
address: {
fontSize: 14,
color: "#666",
marginBottom: 20,
},
});