import { Streambird } from "@streambird/streambird-react";
import { ErrorData, SuccessData, WalletType } from '@streambird/streambird-js';

const App = () => {
  const streambirdConfig = {
    emailMagicLink: {
      loginRedirectUrl: 'LOGIN_REDIRECT_URL_FROM_PORTAL_GOES_HERE',
      registrationRedirectUrl: 'REGISTRATION_REDIRECT_URL_FROM_PORTAL_GOES_HERE',
      loginExpiresIn: 5,
      registrationExpireIn: 5,
      requiresVerification: false,
      autoVerify: true
    },
    componentStyle: {
      width: 500,
      showHeaderText: true,
      headerText: 'Sign in or register',
      headerTextColor: '',
      bodyText: 'Please enter your email address',
      bodyTextColor: '#333333',
      buttonTextColor: '#FFFFFF',
      buttonColor: '',
      errMsgColor: '',
      showContainerBorder: true,
      containerXAlignment: 'center',
      containerYAlignment: 'center',
      bodyTextPosition: 'center',
      headerTextPosition: 'center'
    },
    wallet: {
      walletType: 'ETH',
      network: 'https://goerli.infura.io/v3/INFURA_API_KEY'
    }
  }

  const handleCallbacks = {
    onSuccess: (data: SuccessData) => {
      console.log(data)
    },
    onError: (data: ErrorData) => {
      console.log(data)
    }
  }

  return (
    <div id="login">
      <Streambird
        publicToken={"YOUR_API_KEY_HERE"}
        config={streambirdConfig}
        callbacks={handleCallbacks}
      />
    </div>
  );
};

export default App;
  {
    eventType: 'EVENT_SUCCESS', 
    eventData: {
      publicAddress: "xvPgUXBKTPUBrBdZWHajG17nWM59Zmx7s5NhXXXXXXX",
      sessionJwt: "eyJhbGciOiJ...",
      sessionToken: "TqXsQbXoTxKvjRAqVyLjrz8cRdQRM4enTUh9ixkoeClcgldtzs4LUxEB1XXXXXXX",
      walletType: "SOL",
      public_address: "xvPgUXBKTPUBrBdZWHajG17nWM59Zmx7s5NhXXXXXXX", // legacy field
      session_token: "TqXsQbXoTxKvjRAqVyLjrz8cRdQRM4enTUh9ixkoeClcgldtzs4LUxEB1XXXXXXX", // legacy field
      wallet_type: "SOL" // legacy field
    }
  }

props parameters

publicTokenrequired
string

Publishable API Key that identifies your App.

config
StreambirdClientProps Object
emailMagicLink
EmailMagicLinkOptions Object

This is the config for emailMagicLink and required if emailMagicLink is enabled in enabledProducts

wallet
Web3NetworkConfig Object

Determines what kind of wallet login to perform, if we cannot find any wallets for a new or existing user, we will provision a wallet of the specified type for this user.

componentStyle
ComponentStyleBase

Custom styling for the login UI component

callbacks
Object

Custom event handler functions for different events triggered within the SDK.

onSuccess
function(data) => void

When there is a success event such as when magic link has been sent.

onError
function(data) => void

Any error that might occur from the SDK or API. This is helpful for doing debug during development and production.