chrome-extension-react-typescript-boilerplate

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