Skip to main content

​
Hooks

​
useWallet()

The primary hook for accessing wallet state and methods. 
import { useWallet } from '@moongate/sdk';

const { connected, publicKey, disconnect, connecting } = useWallet();

​
Returns

​
connected
boolean
Whether a wallet is currently connected
​
publicKey
PublicKey | null
The connected wallet’s public key, or null if not connected
​
disconnect
() => void
Function to disconnect the current wallet
​
connecting
boolean
Whether a wallet connection is currently in progress
​
wallet
Wallet | null
The currently connected wallet adapter instance

​
Example Usage

function WalletStatus() {
  const { connected, publicKey, disconnect, connecting } = useWallet();

  if (connecting) return <div>Connecting...</div>;
  
  if (connected) {
    return (
      <div>
        <p>Connected: {publicKey?.toString().slice(0, 8)}...</p>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    );
  }

  return <div>Not connected</div>;
}

​
useConnection()

Hook for accessing the Solana connection instance. 
import { useConnection } from '@moongate/sdk';

const { connection } = useConnection();

​
Returns

​
connection
Connection
The Solana connection instance for making RPC calls

​
useWalletModal()

Hook for controlling the wallet selection modal. 
import { useWalletModal } from '@moongate/sdk';

const { visible, setVisible } = useWalletModal();

​
Returns

​
visible
boolean
Whether the wallet modal is currently visible
​
setVisible
(visible: boolean) => void
Function to show or hide the wallet modal

​
Example Usage

function CustomConnectButton() {
  const { connected } = useWallet();
  const { setVisible } = useWalletModal();

  if (connected) return null;

  return (
    <button onClick={() => setVisible(true)}>
      Choose Wallet
    </button>
  );
}

​
Components

​
MoongateConnectButton

The main connect button component (recommended for most use cases). 
import { MoongateConnectButton } from '@moongate/sdk';

<MoongateConnectButton />

​
Props

​
children
ReactNode
default:"Connect Wallet"
Custom button text or content
​
className
string
Additional CSS classes to apply
​
style
CSSProperties
Inline styles to apply

​
Example Usage

// Basic usage
<MoongateConnectButton />

// With custom text
<MoongateConnectButton>
  Connect to Solana
</MoongateConnectButton>

// With custom styling
<MoongateConnectButton 
  className="my-custom-button"
  style={{ backgroundColor: '#purple' }}
>
  Connect Wallet
</MoongateConnectButton>

​
WalletConnectButton

Individual wallet connect button for specific wallets. 
import { WalletConnectButton } from '@moongate/sdk';

<WalletConnectButton walletName="Phantom" />

​
Props

​
walletName
string
required
Name of the specific wallet to connect to
​
children
ReactNode
Custom button content

​
Example Usage

// Connect to specific wallet
<WalletConnectButton walletName="Phantom"/>

<WalletConnectButton walletName="Solflare"/>

​
📱 Mobile Considerations

The SDK is fully responsive and mobile-optimized:
  • Touch-friendly wallet selection
  • Mobile wallet deep linking
  • Responsive modal sizing
  • iOS/Android wallet app integration

​
🆘 Need Help?

⌘I