Overview

import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App'; // Your main App component
import { CDPReactProvider, type Theme } from '@coinbase/cdp-react';

// Your CDP config
const cdpConfig = {
  projectId: "your-project-id", // Copy your Project ID here.
}

// Global config for your dapp
const appConfig = {
  name: "My app", // the name of your application
  logoUrl: "https://picsum.photos/64", // logo will be displayed in select components
}

// You can customize the theme by overriding theme variables
const themeOverrides: Partial<Theme> = {
  "colors-bg-default": "black",
  "colors-bg-alternate": "#121212",
  "colors-fg-default": "white",
  "colors-fg-muted": "#999999",
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <App />
    </CDPReactProvider>
  </React.StrictMode>,
);

// In your App.tsx or any other component
import { AuthButton } from '@coinbase/cdp-react/components/AuthButton';

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <AuthButton />
    </div>
  );
}

export default App;

function App() {
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <YourApp />
    </CDPReactProvider>
  );
}

const MyComponent = () => {
  // Access the app config from a child component
  const appConfig = useAppConfig();
  return <div>{appConfig.name}</div>;
}

function App() {
  return (
    <CDPReactProvider config={CDP_CONFIG} app={appConfig}>
      <MyComponent />
    </CDPReactProvider>
  );
}

function App() {
  // Render the AuthButton component
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <AuthButton />
    </CDPReactProvider>
  );
}

function App() {
  // Render the SignIn component with a custom onSuccess handler
  const handleSuccess = () => {
    console.log("Sign in successful");
  }
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <SignIn onSuccess={handleSuccess} />
    </CDPReactProvider>
  );
}

function App() {
  // Render the title, description, and auth method buttons inside the transition containers
  // This is the default UI if no children are provided.
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <SignIn>
        <SignInBackButton />
        <SignInImage />
        <SignInForm>
          {({ authMethod, step, Form }) => {
            // Pass the authMethod and step from the render function args to the title
            // and description components so the UI is rendered correctly when both states
            // are visible during the transition
            return (
              <>
                <SignInTitle step={step} authMethod={authMethod} />
                <SignInDescription step={step} authMethod={authMethod} />
                {Form}
                {state.step === "credentials" && <SignInAuthMethodButtons activeMethod={authMethod} />}
              </>
            );
          }}
        </SignInForm>
        <SignInFooter />
      </SignIn>
    </CDPReactProvider>
  );
}

function App() {
  // Render a page title based on the current step
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <SignIn>
        {(state) => {
           return (
             <>
               <SignInBackButton />
               <SignInImage />
               <h1>
                 {state.step === "credentials" && "Welcome"}
                 {state.step === "verification" && "Almost there"}
               </h1>
               <SignInTitle />
               <SignInDescription />
               <SignInForm />
               {state.step === "credentials" && <SignInAuthMethodButtons activeMethod={state.authMethod} />}
               <SignInFooter />
             </>
           );
         }}
      </SignIn>
    </CDPReactProvider>
  );
}

function App() {
  // Render the SignInModal component
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <SignInModal />
    </CDPReactProvider>
  );
}

function App() {
  // Render the SignInModal component with a custom trigger button
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <SignInModal>
        <button className="sign-in-button">
          Sign in with email
        </button>
      </SignInModal>
    </CDPReactProvider>
  );
}

const AuthBasedTheme = ({ children }: { children: React.ReactNode }) => {
  const { isSignedIn: signedIn } = useIsSignedIn();
  const { evmAddress: cdpEvmAddress } = useEvmAddress();
  const isAuthenticated = signedIn && cdpEvmAddress;
  const theme = useMemo(() => (isAuthenticated ? darkTheme : {}), [isAuthenticated]);
  return (
    <ThemeProvider theme={theme}>
      {children}
    </ThemeProvider>
  );
};

function App() {
  // Change the theme based on the user's authentication status
  return (
    <CDPHooksProvider config={cdpConfig}>
      <AuthBasedTheme>
        <YourApp />
      </AuthBasedTheme>
    </CDPHooksProvider>
  );
}

function App() {
  // Style a paragraph with the secondary text color
  const { theme } = useTheme();
  return <p style={{ color: theme["colors-fg-muted"] }}>Secondary text</p>;
}

const themeOverrides: Partial<Theme> = {
  "color-bg-primary": "red",
};

// { "--cdp-web-color-bg-primary": "red" }
const cssVariables = themeToCssVariables(themeOverrides);

***

### IconArrowLeft()

```ts
function IconArrowLeft(props): Element;

// Icon is correctly hidden from screen readers
<p>
  <IconArrowLeft />
  Back
</p>

// Icon with screen-reader accessible label only
<p>
  <IconArrowLeft aria-label="Back" />
</p>

// Icon is correctly hidden from screen readers
<p>
  <IconArrowsUpDown />
  Swap
</p>

// Icon with screen-reader accessible label only
<p>
  <IconArrowsUpDown aria-label="Swap" />
</p>

// Icon is correctly from screen readers
<p>
  <IconCheck />
  Success!
</p>

// Icon with screen-reader accessible label only
<p>
  <IconCheck aria-label="Success" />
</p>

// Icon is correctly from screen readers
<p>
  <IconCheckCircle />
  Success!
</p>

// Icon with screen-reader accessible label only
<p>
  <IconCheckCircle aria-label="Success" />
</p>

// Icon is correctly hidden from screen readers
<p>
  <IconChevronDown />
  Expand
</p>

// Icon with screen-reader accessible label only
<p>
  <IconChevronDown aria-label="Expand" />
</p>

// Icon is correctly from screen readers
<p>
  <IconEnvelope />
  Email me a code
</p>

// Icon with screen-reader accessible label only
<p>
  <IconEnvelope aria-label="Email me a code" />
</p>

// Icon is correctly from screen readers
<p>
  <IconExclamationCircle />
  Warning!
</p>

// Icon with screen-reader accessible label only
<p>
  <IconExclamationCircle aria-label="Warning" />
</p>

// Icon is correctly hidden from screen readers
<p>
  <IconExclamationTriangle />
  Warning!
</p>

// Icon with screen-reader accessible label only
<p>
  <IconExclamationTriangle aria-label="Warning" />
</p>

// Icon is correctly from screen readers
<p>
  <IconLock />
  Locked
</p>

// Icon with screen-reader accessible label only
<p>
  <IconLock aria-label="locked" />
</p>

// Icon is correctly from screen readers
<p>
  <IconPhone />
  Text me a code
</p>

// Icon with screen-reader accessible label only
<p>
  <IconPhone aria-label="Text me a code" />
</p>

// Icon is correctly from screen readers
<p>
  <IconXMark />
  Close
</p>

// Icon with screen-reader accessible label only
<p>
  <IconXMark aria-label="Close" />
</p>

try {
  ...
}
catch (error) {
  if (isApiError(error)) {
    // Handle API error
    console.log(error.errorMessage);
  }
}

if (isEmailInvalid("test@example")) {
  console.log("Invalid email address");
}

// Basic usage
const App = () => {
  const fetchBuyQuote: FundProps["fetchBuyQuote"] = async (params) => {
    // call the buy quote API
  }
  const fetchBuyOptions: FundProps["fetchBuyOptions"] = async params => {
    // call the buy options API
  }
  return (
    <Fund
      country="US"
      subdivision="NY"
      cryptoCurrency="eth"
      fiatCurrency="usd"
      fetchBuyQuote={fetchBuyQuote}
      fetchBuyOptions={fetchBuyOptions}
      network="base"
      presetAmountInputs={[10, 25, 50]}
    />
  )
}

// Example customizing the children to render the title as a page title
// and add a custom error message
const App = () => {
  const fetchBuyQuote: FundProps["fetchBuyQuote"] = async (params) => {
    // call the buy quote API
  }
  const fetchBuyOptions: FundProps["fetchBuyOptions"] = async params => {
    // call the buy options API
  }
  const title = "Buy ETH";
  const titleId = useId();
  const submitLabel = "Purchase now";
  return (
    <Fund
      country="US"
      subdivision="NY"
      cryptoCurrency="eth"
      fiatCurrency="usd"
      fetchBuyQuote={fetchBuyQuote}
      fetchBuyOptions={fetchBuyOptions}
      network="base"
      presetAmountInputs={[10, 25, 50]}
      submitLabel={submitLabel}
      title={title}
    >
      <FundTitle as="h1" id={titleId}>{title}</FundTitle>
      <FundForm aria-labelledby={titleId} submitLabel={submitLabel}>
        {({ view, Content }) => (
          <>
            {Content}
            {view === "error" && <p>Contact support at support@example.com</p>}
          </>
        )}
      </FundForm>
      <FundFooter />
    </Fund>
  )
}

function App() {
  // Render the FundModal component
  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={cdpConfig} app={appConfig} theme={themeOverrides}>
      <FundModal
        country="US"
        subdivision="NY"
        cryptoCurrency="eth"
        fiatCurrency="usd"
        fetchBuyQuote={fetchBuyQuote}
        fetchBuyOptions={fetchBuyOptions}
        network="base"
        presetAmountInputs={[10, 25, 50]}
      />
    </CDPReactProvider>
  );
}

function App() {
  // Render the FundModal component with a custom trigger button
  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={cdpConfig} app={appConfig} 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>
  );
}

function App() {
  // Customize the back button icon and label
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <SignIn>
        <SignInBackButton aria-label="go back">
          <MyCustomIcon />
        </SignInBackButton>
        <SignInImage />
        <SignInTitle />
        <SignInDescription />
        <SignInForm />
        <SignInFooter />
      </SignIn>
    </CDPReactProvider>
  );
}

function App() {
  // Render a custom description in the SignIn component
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <SignIn>
        <SignInBackButton />
        <SignInImage />
        <SignInTitle />
        <SignInDescription>
          Custom Sign In Description
        </SignInDescription>
        <SignInForm />
        <SignInFooter />
      </SignIn>
    </CDPReactProvider>
  );
}

function App() {
  // Add class to the footer
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <SignIn>
        <SignInBackButton />
        <SignInImage />
        <SignInTitle />
        <SignInDescription />
        <SignInForm />
        <SignInFooter className="sign-in-footer" />
      </SignIn>
    </CDPReactProvider>
  );
}

function App() {
  // Add div wrapper and class to the form
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <SignIn>
        <SignInBackButton />
        <SignInImage />
        <SignInTitle />
        <SignInDescription />
        <div className="sign-in-form-wrapper">
          <SignInForm className="sign-in-form" />
        </div>
        <SignInFooter />
      </SignIn>
    </CDPReactProvider>
  );
}

function App() {
  // Use a different image from your app logo in the SignIn component
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <SignIn>
        <SignInBackButton />
        <SignInImage src="https://example.com/image.png" alt="Example Image" />
        <SignInTitle />
        <SignInDescription />
        <SignInForm />
        <SignInFooter />
      </SignIn>
    </CDPReactProvider>
  );
}

function App() {
  // Render a custom title in the SignIn component
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <SignIn>
        <SignInBackButton />
        <SignInImage />
        <SignInTitle>
          Custom Sign In Title
        </SignInTitle>
        <SignInDescription />
        <SignInForm />
        <SignInFooter />
      </SignIn>
    </CDPReactProvider>
  );
}

function EmailComponent() {
  const { state } = useSignInContext();
  return <div>Submitted email: {state.email}</div>;
}

function App() {
  return (
    <CDPReactProvider config={cdpConfig} app={appConfig} theme={themeOverrides}>
      <SignIn>
        <SignInTitle />
        <SignInDescription />
        <EmailComponent />
        <SignInForm />
      </SignIn>
    </CDPReactProvider>
  );

## Interfaces

### AppConfig

Optional app config to add branding

#### Example

```tsx lines
const appConfig: AppConfig = {
  name: "My App",
  logoUrl: "https://placehold.co/64",
};