Initialization

You can configure various aspects of Ramper UI by passing in a config to init() function. Make sure to first visit the Developer Dashboard to obtain your App ID and App Secret.

Basic Examples

EVM

import { 
  init, 
  AUTH_PROVIDER, 
  CHAIN, 
  THEME, 
  WALLET_PROVIDER, 
  SUPPORTED_ETHEREUM_NETWORKS 
} from '@ramper/ethereum'

init({
  appId: '<YOUR_APP_ID>',
  appName: 'EVM Test App',
  authProviders: [
    AUTH_PROVIDER.GOOGLE,
    AUTH_PROVIDER.FACEBOOK,
    AUTH_PROVIDER.TWITTER,
    AUTH_PROVIDER.APPLE,
    AUTH_PROVIDER.EMAIL
  ],
  walletProviders: [WALLET_PROVIDER.METAMASK],
  network: SUPPORTED_ETHEREUM_NETWORKS.MATICMUM,
  theme: THEME.DARK,
})

NEAR

import { 
  init, 
  AUTH_PROVIDER, 
  CHAIN, 
  THEME, 
  WALLET_PROVIDER,
  SUPPORTED_NEAR_NETWORKS 
} from '@ramper/near'

init({
  appName: 'Near Test App',
  authProviders: [
    AUTH_PROVIDER.GOOGLE,
    AUTH_PROVIDER.FACEBOOK,
    AUTH_PROVIDER.TWITTER,
    AUTH_PROVIDER.APPLE,
    AUTH_PROVIDER.EMAIL
  ]
  walletProviders: [WALLET_PROVIDER.NEAR_WALLET],
  network: SUPPORTED_NEAR_NETWORKS.TESTNET,
  theme: THEME.DARK,
})

Terra

import { init, AUTH_PROVIDER, CHAIN, 
  THEME, WALLET_PROVIDER } from '@ramper/terra'

init({
  appName: 'Terra Test App',
  chainName: CHAIN.TERRA,
  walletProviders: [WALLET_PROVIDER.TERRA_STATION, 
    WALLET_PROVIDER.WALLET_CONNECT],
  theme: THEME.LIGHT,
  network: 'mainnet',
  authProviders: [
    AUTH_PROVIDER.GOOGLE,
    AUTH_PROVIDER.FACEBOOK,
    AUTH_PROVIDER.TWITTER,
    AUTH_PROVIDER.APPLE,
    AUTH_PROVIDER.EMAIL
  ]
})

Basic Configuration

   * App Name
   * @default ''
   */
  appName: string

  /**
   * Network to use for the app.
   * @default 'mainnet'
   */
  network: string

  /**
   * Token addresses to show default tokens on WalletView.
   * @default []
   */
  defaultTokenAddresses: string[]
  
  /**
   * App ID for viewing user data on developer dashboard.
   * @default 'missing_app_id'
   */
  appId: string

  /**
   * Whether the app should issue an dapp based idToken on login in.
   * Setting to false improves log in performance.
   * Setting to true requires a valid appId to be set.
   * @default false
   */
  issueIdToken: boolean

  /**
   * List of wallet tabs to show on WalletView.
   * @default "['coin', 'nft']"
   */
  walletTabs: WalletTab[]

Auth methods displayed

  /**
   * List of social sign in methods to use for sign in.
   * @default "['google', 'facebook', 'twitter', 'email']"
   */
  authProviders: AuthProviders

Appearance

  /**
   * Theme to use for the UI.
   * @default 'dark'
   */
  theme: Theme

  /**
   * Primary color to use for the UI.
   * @default '#00B5D8'
   */
  primaryColor: string

  /**
   * Logo to display on top of sign in popup.
   * @default 'https://static.ramper.xyz/logo.png'
   */
  logoURI: string

  /**
   * Language to use for the UI.
   * @default 'en'
   */
  language: Language

  /**
   * Currency to display in the UI.
   * @default 'usd'
   */
  currency: Currency