Temple Wallet

Cryptocurrency wallet for Tezos blockchain & EVM blockchains as Web Extension for your Browser.
Providing ability to manage NFT, tokens and interact with dApps.

▶️ Install

You can install Temple Wallet right now: https://templewallet.com/download.

Browser Support

110 & later ✔	115 & later ✔	Latest ✔	96 & later ✔	110 & later ✔

🚀 Quick Start

Ensure you have:

• Node.js 20 or later installed
• Yarn v1 or v2 installed

Then run the following:

1) Clone the repository

git clone https://github.com/madfish-solutions/templewallet-extension && cd templewallet-extension

2) Install dependencies

yarn

3) Create .env file

Make copy of .env.dist and do changes if needed.

4) Build

Builds the extension for production to the dist folder.
It correctly bundles in production mode and optimizes the build for the best performance.

# for Chrome by default
yarn build:core

Optional for different browsers:

# for Chrome directly
yarn build:chrome:core
# for Firefox directly
yarn build:firefox:core
# for Opera directly
yarn build:opera:core

# for all at once
yarn build-all

5) Load extension to your Browser

🧱 Development

yarn start:core

Runs the extension in the development mode for Chrome target.
It's recommended to use Chrome for developing.

Debugging

• To enable Redux DevTools during development, specify some port in the .env file before running yarn start like so:

REDUX_DEVTOOLS_PORT=8000

Install @redux-devtools/cli globally:

yarn global add @redux-devtools/cli

Then open an explorer at previously specified port:

redux-devtools --open --port=8000

Other UI options like --open=browser are available.

Go to settings to specify port one more time.

• To enable React DevTools during development install react-devtools globally:

yarn global add react-devtools

Then open the standalone app:

react-devtools --port=8097

Then run:

yarn start:devtools

Notes about countries flags

• Do not compress the atlas with them, which is located at public/misc/country-flags/atlas_original.png, using tinypng; the compressed image has too low quality.
• You can generate such an atlas with a script like below:

  const sharp = require('sharp');
  const fsPromises = require('fs/promises');
  const path = require('path');
  (async () => {
  const imagesNames = await fsPromises.readdir(path.resolve('input'));
  const atlasRowSize = 7;
  const atlasRows = Math.ceil(imagesNames.length / atlasRowSize);
  // Each image has a size of 40x30
  const atlas = sharp({
    create: {
      width: 40 * atlasRowSize,
      height: 30 * atlasRows,
      channels: 4,
      background: { r: 0, g: 0, b: 0, alpha: 0 }
    }
  }).composite(
    imagesNames.map((imageName, index) => ({
      input: path.resolve(`input/${imageName}`),
      left: 40 * (index % atlasRowSize),
      top: 30 * Math.floor(index / atlasRowSize)
    }))
  );
  await atlas.png().toFile(path.resolve('output/atlas.png'));
  })();