useGlyphFunding

A hook that provides functionality for funding a wallet through the Glyph platform. It handles the entire funding flow including quote generation, payment processing, and status tracking.

INFO

v1.2.15: doFunding's onSuccess callback now receives the payment URL as an optional first argument. A third parameter shouldAutoOpenPopup (default true) allows receiving the link without opening a popup.

TIP

It is recommended for most developers to use the widget as a complete solution.

INFO

Some regions are not supported yet. Best supported in the US.

Import

import { useGlyphFunding } from "@use-glyph/sdk-react";

Usage

function FundWalletButton() {
  const {
    fundAmount,
    fundAmountError,
    fundInProgress,
    fundQuote,
    fundSymbol,
    quoteLoading,
    doFunding,
    setFundAmount,
    isOnrampEnabled,
  } = useGlyphFunding();

  const handleFund = async () => {
    doFunding(
      (paymentLink) => {
        // Handle success - paymentLink is the payment URL (useful when shouldAutoOpenPopup is false)
        console.log("Funding initiated", paymentLink);
      },
      (error) => {
        // Handle error
        console.error("Funding failed:", error);
      }
    );
  };

  return (
    <div>
      <input
        type="number"
        value={fundAmount}
        onChange={(e) => setFundAmount(e.target.value)}
        placeholder="Enter amount"
      />
      {fundAmountError && <p className="error">{fundAmountError}</p>}
      <button
        onClick={handleFund}
        disabled={
          !isOnrampEnabled || quoteLoading || !fundQuote || fundInProgress
        }
      >
        Fund Wallet
      </button>
    </div>
  );
}

Return Type

Property	Type	Description
fundAmount	string	The amount entered by the user for funding.
fundAmountError	string | null	Error message if the entered amount is invalid or below minimum.
fundDone	boolean	Indicates if the funding process is complete.
fundError	string | null	Error message if there was an issue during the funding process.
fundInProgress	boolean	Indicates if a funding transaction is currently in progress.
fundQuote	FundQuoteDTO | null	The current quote for the funding transaction, including exchange rates and fees.
fundStatus	GLYPH_FUND_STATUS	Current status of the funding process. Can be "STARTED", "PENDING", "SUCCESS", or "FAILED".
quoteLoading	boolean	Indicates if a quote is currently being generated or updated.
doFunding	(onSuccess: (url?: string) => void, onError: (error: string) => void, shouldAutoOpenPopup?: boolean) => Promise<void>	Initiates the funding process. By default opens a popup for payment. Pass shouldAutoOpenPopup: false to receive the payment link in onSuccess without opening a popup (e.g. for QR code or deep link UX).
setFundAmount	(amount: string) => void	Sets the funding amount. Automatically validates against minimum and maximum limits.
fundSymbol	string	The native token symbol (e.g. "APE", "ETH") for the current chain.
isOnrampEnabled	boolean	Indicates if the onramp feature is enabled for the current user (in current region).

Funding Flow

The hook manages the following funding flow:

1. User enters an amount
2. Quote is generated/updated automatically
3. User initiates funding
4. Payment popup opens (via Coinbase)
5. Status is tracked until completion

Example with Full Implementation

function WalletFundView() {
  const {
    fundAmount,
    fundAmountError,
    fundDone,
    fundError,
    fundInProgress,
    fundQuote,
    fundStatus,
    quoteLoading,
    doFunding,
    setFundAmount,
    isOnrampEnabled,
  } = useGlyphFunding();

  const handleBuy = async () => {
    doFunding(
      (paymentLink) => {
        // Funding initiated successfully - paymentLink contains the payment URL
        console.log("Payment popup opened", paymentLink);
      },
      (error) => {
        // Handle funding error
        console.error("Funding failed:", error);
      }
    );
  };

  return (
    <div className="fund-wallet">
      <div className="amount-input">
        <label>Enter Amount</label>
        <input
          type="text"
          value={fundAmount}
          onChange={(e) => setFundAmount(e.target.value)}
          placeholder="0"
        />
        {fundAmountError && <p className="error">{fundAmountError}</p>}
      </div>

      {fundQuote && (
        <div className="quote-details">
          <div className="receive-amount">
            <span>You will receive:</span>
            <span>{fundQuote.out_tokens_amount} APE</span>
          </div>
          <div className="fees">
            <span>Network Fees:</span>
            <span>
              {fundQuote.estimated_fees_amount} {fundQuote.currency}
            </span>
          </div>
        </div>
      )}

      <button
        onClick={handleBuy}
        disabled={
          !isOnrampEnabled || fundInProgress || quoteLoading || !!fundError
        }
      >
        {quoteLoading ? "Loading..." : "Continue"}
      </button>

      {fundError && <p className="error">{fundError}</p>}
    </div>
  );
}

Custom UX: Payment Link Without Popup

Pass shouldAutoOpenPopup: false as the third argument to receive the payment link in the onSuccess callback without opening a popup. Useful for QR code displays, deep links, or custom payment flows:

doFunding(
  (paymentLink) => {
    // paymentLink contains the full payment URL - use it for QR code, deep link, etc.
    setQrCodeUrl(paymentLink);
  },
  (error) => console.error(error),
  false  // Do not auto-open popup
);

Best Practices

1. Always check isOnrampEnabled before showing funding options
2. Handle all error states appropriately
3. Show loading states during quote generation
4. Use the provided quote information to show transaction details
5. Monitor fundStatus to show appropriate UI states
6. Consider using the fundDone state to trigger post-funding actions

Error Handling

The hook provides several error states that should be handled:

• fundAmountError: Invalid amount entered
• fundError: General funding process errors
• fundStatus === "FAILED": Failed funding transaction

Notes

• The hook automatically refreshes quotes at regular intervals
• Funding status is automatically polled when a transaction is in progress
• The minimum funding amount is determined by the user's location
• The hook integrates with the Glyph API for quote generation and payment processing