Skip to content

taostat/wallet-extension

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

216 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Taostats Wallet

What's inside?

This repo contains the source code for Taostats Wallet.

If you would like to build Taostats from source, please continue reading:

Attribution

This project is a modified fork of the Talisman Wallet (GPLv3). Original source:

Copyright © Talisman Wallet Contributors

This version has been modified and extended by Taostats / T34 Corporation FZCO for the Bittensor ecosystem.

Forked from Talisman Wallet commit: 87f53edb4183924c76cad974af28492efd004792

All modifications are distributed under the GNU General Public License v3.0 (GPLv3).

System requirements

If you haven't already, you will first need to install Node.js on your system.
This repo uses corepack and pnpm to manage dependencies.
Corepack is distributed by default with all recent Node.js versions.

Pnpm is a fast, disk space efficient javascript package manager.
Corepack lets you use pnpm without having to install a specific version of it.

Once you have installed Node.js, run corepack enable to turn it on, then follow the Getting started instructions to continue.

Getting started (wallet extension development)

  1. Install Node.js and enable corepack, as per the System Requirements section.

  2. Clone the repo.

    git clone git@github.com:TaostatsSociety/taostats.git

  3. Change to the repo directory.

    cd taostats

  4. Install nodejs

    nvm install

  5. Install dependencies.

    pnpm install

  6. Start the dev server, waiting for it to generate the dist directory.

    pnpm dev:extension

  7. Open Chrome and navigate to chrome://extensions.

  8. Turn on the Developer mode toggle on the top right of the page.

  9. Click Load unpacked on the top left of the page and select the apps/extension/dist/chrome directory.

  10. Change some code!

Apps and packages

  • apps/extension: the non-custodial Taostats Wallet browser extension
  • packages/eslint-config: shared eslint configurations
  • packages/tsconfig: shared tsconfig.jsons used throughout the monorepo
  • packages/util: library containing shared non-react code. It is not meant to be npm published.

All our apps and packages are 100% TypeScript.

Writing and running tests

  • Testing is carried out with Jest.
  • Tests can be written in *.spec.ts files, inside a __tests__ folder.
  • Follow the pattern in apps/extension/src/core/handlers/Extension.spec.ts or apps/extension/src/core/domains/signing/__tests__/requestsStore.spec.ts
  • Tests are run with pnpm test

i18n (wallet extension development)

We use i18next in the wallet to make it available in a bunch of languages.

When building UI features, please follow the following spec to ensure they're translatable:

  1. Import the useTranslation hook into your React components:

    import { useTranslation } from "react-i18next"
  2. Use the hook in your component to get access to the t function:

    const { t } = useTranslation()
  3. Wrap any user-visible language in your component with the t function:

    return (
      <div className="flex flex-col items-start">
        <div className="text-base">{t("Account Assets")}</div>
        <div className="text-sm">
          {t("Account has {{assetCount}} assets", { assetCount: assets.length })}
        </div>
      </div>
    )
  4. If you want to include any react components in your translation, you will need to use the Trans component:

    import { useTranslation, Trans } from "react-i18next"
    
    const { t } = useTranslation()
    return (
      <Trans
        {/* DO NOT FORGET THIS `t` PROP! */}
        t={t}
        defaults="Your <Highlight>{{name}} <Tooltip /></Highlight> address"
        values={{ name: chain.name }}
        components={{
          Highlight: <span className="text-body" />,
          Tooltip: (
            <Tooltip>
              <TooltipTrigger>
                <InfoIcon className="hover:text-body inline align-middle text-xs" />
              </TooltipTrigger>
              <TooltipContent>
                {t(
                  "Only use this address for receiving assets on the {{name}} network.",
                  {
                    name: chain.name,
                  }
                )}
              </TooltipContent>
            </Tooltip>
          ),
        }}
    )
  5. If you see one of the following errors in your console:

    locales/en/common.json:1
    Failed to load resource: net::ERR_FILE_NOT_FOUND
    
    i18next::translator: missingKey en common <i18n-key>
    

    Then update the english translation files with this command:

    pnpm chore:update-translations

Scripts

  • chore:update-translations : finds all of the i18n strings in the codebase and adds them to the english translations files which i18next loads in development builds of the wallet
  • dev : builds and watches all packages/apps with hot reloading
  • dev:extension : when working on extension only, for better color output
  • build: builds the wallet in packages/apps/extension/dist/chrome folder, without sentry keys
  • build:firefox: builds the wallet in packages/apps/extension/dist/firefox folder, without sentry keys
  • build:extension:prod builds the Taostats browser extension (requires sentry settings, Taostats team only)
  • build:extension:canary : builds the Taostats browser extension test version, with different ID and icon than prod

Build the wallet browser extension using Docker

# builds with docker, outputs in dist folder at the root of the monorepo
rm -rf dist && DOCKER_BUILDKIT=1 docker build --output type=local,dest=./dist .

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors