CDP Frontend SDK
    Preparing search index...

    Function FundModal

    • A fund modal component that wraps the Fund component.

      Parameters

      • props: FundModalProps

        The props for the FundModal component.

        • Optionalchildren?: ReactNode

          The children to render inside the modal.

        • Optionalopen?: boolean

          Whether the modal is open. Note: if you set this, you must also set setIsOpen.

        • OptionalsetIsOpen?: (value: boolean) => void

          A function to set the modal's open state. Note: if you set this, you must also set open.

        • OptionalclassName?: string
        • Optionalstyle?: CSSProperties
        • OptionalonError?: (e: undefined | OnrampError) => void
        • Optionaltitle?: ReactNode
        • country: string
        • OptionalsubmitLabel?: ReactNode
        • OptionalonSuccess?: (result?: OnrampSuccessEventData) => void
        • Optionallocale?: string
        • OptionalcryptoDecimalPlaces?: number
        • cryptoCurrency: string
        • fiatCurrency: string
        • OptionalfiatDecimalPlaces?: number
        • OptionalinputType?: InputType
        • network: string
        • OptionalpresetAmountInputs?: FundPresetAmountInputs
        • Optionalsubdivision?: string
        • destinationAddress: string
        • fetchBuyOptions: FetchBuyOptions
        • fetchBuyQuote: FetchBuyQuote
        • OptionalopenIn?: "tab" | "popup"
        • OptionalredirectUrl?: string
        • OptionalonStatus?: (lifecycleStatus: FundLifecycleStatus) => void

      Returns Element

      The FundModal component.

      // Render the FundModal component
      function App() {
        const fetchBuyQuote: FundProps["fetchBuyQuote"] = async (params) => {
          // call the buy quote API
        }
        const fetchBuyOptions: FundProps["fetchBuyOptions"] = async params => {
          // call the buy options API
        }
        return (
          <CDPReactProvider config={config} theme={themeOverrides}>
            <FundModal
              country="US"
              subdivision="NY"
              cryptoCurrency="eth"
              fiatCurrency="usd"
              fetchBuyQuote={fetchBuyQuote}
              fetchBuyOptions={fetchBuyOptions}
              network="base"
              presetAmountInputs={[10, 25, 50]}
            />
          </CDPReactProvider>
        );
      }

      // Render the FundModal component with a custom trigger button
      function App() {
        const fetchBuyQuote: FundProps["fetchBuyQuote"] = async (params) => {
          // call the buy quote API
        }
        const fetchBuyOptions: FundProps["fetchBuyOptions"] = async params => {
          // call the buy options API
        }
        return (
          <CDPReactProvider config={config} theme={themeOverrides}>
            <FundModal
              country="US"
              subdivision="NY"
              cryptoCurrency="eth"
              fiatCurrency="usd"
              fetchBuyQuote={fetchBuyQuote}
              fetchBuyOptions={fetchBuyOptions}
              network="base"
              presetAmountInputs={[10, 25, 50]}
            >
              <button className="fund-button">
                Get ETH
              </button>
            </FundModal>
          </CDPReactProvider>
        );
      }

    Settings

    Member Visibility