Chrome-extension-react-typescript-boilerplate NPM

Coinbase Wallet extension

Getting started

make init
Dev env auto refresh on change: yarn run start
Build :
yarn run build:walletlink (just need to do this once and whenever walletlink changes)
yarn run build:dev
yarn build:prod
yarn start : to start dev and watch changes

To load local extension into browser:

File a request at go/securityops for an exception to load unpacked extensions into chrome
While that request is being processed, Install and run Brave browser
navigate to brave://extensions
Turn on Developer mode
hit "Load unpacked" button, then select folder: wallet-extension/dist

Testing

Runs on Jest with React Testing Library

yarn test

I18N

Uses the react-intl library.

/i18n contains the translation property files, the English property file can be generated from the code via i18n:extract and translated files in other languages would be included here as well.

The property files are compiled via i18n:compile into JSON files in /src/i18n. These are the files that are actually read by react-intl and need to be bundled in the extension package.

yarn i18n:extract - Extracts all i18n.formatMessage as a new {root}/i18n/en.json file that other translations are based off of.
These files should be translated and named after their appropriate locale translations.
yarn i18n:compile - Compiles translation files from {root}/i18n/en.json into src/i18n.
These files are what is imported and read by the react-intl library.

Error reporting

Tool used: Bugsnag
Usage: this function can be used anywhere in the app:

import { reportError } from './init/reportError
reportError(ErrorData)

ErrorData type:

export type ErrorData = {
  error: Error;
  errorInfo?: React.ErrorInfo;
  metadata?: Record<string, string | number | boolean | string[]>;
  context?: string;
  severity?: 'info' | 'warning' | 'error';
};

In dev env, it will be console.log and not appear in bugsnag dashboard

Generating and uploading production source maps to Bugsnag

Update the appVersion in webpack.sourcemaps.js as needed.
yarn build:sourcemaps
This will automatically generate Source Maps to the /dist folder and upload them to Bugsnag