th3ya0vi/phantom-connect-skill

Overview

This skill teaches building wallet-connected applications using Phantom Connect SDKs for Solana. It covers React, React Native, and browser SDKs, authentication methods (Google, Apple, injected extension), network support, and common integration patterns. The content focuses on practical setup, configuration, and troubleshooting for app-ready wallet connections.

How this skill works

The skill inspects the Phantom Connect SDKs and their integration flow: provider configuration, appId usage, allowed redirect URLs, and address types for Solana. It explains how to initialize SDK providers in React, React Native, and vanilla JS, how to trigger wallet auth flows, and how to sign messages and transactions. It also summarizes patterns for token gating, NFT minting, and crypto payment flows.

When to use it

• Integrating Phantom wallet connection into a React web application.
• Adding wallet support to React Native or Expo mobile apps.
• Connecting wallets from vanilla JavaScript, Vue, or Angular apps.
• Implementing auth flows with Google or Apple embedded wallets.
• Building token-gated access, NFT minting, or Solana payment flows.

Best practices

• Register an app on the Phantom Portal and obtain an appId before integration.
• Add all allowed redirect URLs and domains to the Portal to prevent auth failures.
• Choose the SDK that matches your platform: React, React Native, or Browser SDK.
• Import react-native-get-random-values as the very first import for React Native.
• Use autoConnect carefully and implement retry/timeouts for extension discovery.

Example use cases

• React dApp that authenticates users with Google and signs Solana transactions.
• Expo mobile app that opens embedded Phantom wallet via deep link for payments.
• Single-page app that checks token ownership to enable gated content.
• NFT mint page that prompts wallet connect and uses signed transactions.
• Backend workflow that verifies signed messages for user identity on Solana.