Skip to main content

Sample Wallet Application

We provide a template-ized sample wallet application that is built using the WaaS React Native SDK and the WaaS Proxy Server.

This sample application serves as an educational resource and foundational scaffold for developers building with the WaaS APIs. It is provided as an example to guide developers in quickly bootstrapping their own applications with the WaaS APIs, while demonstrating best practices.

Features​

The sample application utilizes the WaaS APIs to implement the following features:

  • MPC wallet creation: Users can sign-up and create an account with an MPC wallet.
  • Wallet address generation: Users can generate new wallet addresses for multiple networks.
  • Send transactions and payments: Users can send payments via transactions executed on the blockchain.
  • Transaction history: Users can view a history of transactions and details associated with payments made between them and their friends.
  • Wallet backup and recovery: Users can backup and recover their MPC wallets.
  • Wallet key export: Users can export their wallet private keys and import them into other existing wallet solutions of their choice.
info

The sample app implements backup and recovery via copy and pasting the contents of the decryption share. In a production environment it is recommended to leverage end-user storage options (iCloud, Google Drive, Dropbox, etc.) instead to store and fetch the decryption share when implementing backup and recovery.

Prerequisites​

Checkout the code​

Checkout the sample app:

git clone https://github.com/coinbase/waas-sample-app.git
info

The sample app assumes the proxy server is running on http://localhost:8091 by default. If your proxy server is running on a different host or port, update the PROXY_SERVER_HOST and PROXY_SERVER_PORT variables within the .env file.

Running the app​

Build​

You can build and run the sample app using yarn by running the commands below from the root directory of the sample app.

To build the sample app:

yarn install
cd ios
pod install
cd ..
info

If you get an error when you run pod install, you may need to pull the latest PodSpecs by running pod repo update.

Run​

To run the sample app:

yarn start
info

Once metro is running, you can run the app by starting an emulator: To run on iOS, press i.

tip

If you get a pop up that says, Unable to boot device in current state: Booted, you can close it.

tip

If you get a footer message that appears at the bottom of the app, you can close it.

App customization​

A configuration file is provided in the project, allowing you to modify the default styling and theme of the application.

Theme, colors, title​

To modify the theme and colors of the app:

  1. Open app.config.js.
  2. Update the variables under config.theme with your desired color hexcodes and application title.
export const config = {
  /* 
   * Default network of application
   * (i.e. networks/ethereum-mainnet, networks/ethereum-goerli, networks/base-goerli, networks/base-mainnet)
  */
  defaultNetwork: 'networks/base-goerli',
  defaultChainId: '0x14a33',
  theme: {
    appName: 'FRENPAY',
    colors: {
        // list of hexcode colors for theme customization
        background: "#000000",
        text: "#000000",
        textSecondary: "#8A919E",
        textInverse: "#FFFFFF",
        textPositive: '#27AD75',
        textNegative: '#F0616D',
        primary: '#8A96F8',
        primaryHover: '#848FF0',
        primaryPressed: '#8A96F8',
        primaryBackground: '#0A0B0D',
        primaryForeground: '#0A0B0D',
        primaryForegroundMuted: '#8A919E',
        primaryLineHeavy: '#8A919EA8',
        secondary: '#32353D',
        secondaryHover: '#3A3D45',
        secondaryPressed: '#1E2025',
        secondaryForeground: '#FFFFFF',
        default: '#F9F9F9',
        defaultHover: '#F9F9F9',
        defaultPressed: '#EAEAEB',
        defaultForeground: '#000000',
      }
  }
};

To modify the logo used within the app:

  1. Replace /assets/logo.png.

Was this helpful?