This repository is the monorepo for Talisman projects.
This turborepo uses Yarn as a package manager. It includes the following packages/apps:
Node version >18 Yarn version >1.2
This README was written and verified with:
- Node v18.16.0
- Yarn v1.22.19
apps/extension
: the Talisman browser extension (non-custodial wallet)packages/eslint-config
: sharedeslint
configurationspackages/tsconfig
: sharedtsconfig.json
s used throughout the monorepopackages/util
: library containing shared non-react code. It is not meant to be npm published.
All our package and apps are 100% TypeScript.
-
Clone the repo.
git clone git@github.com:TalismanSociety/talisman.git
-
Change to the repo directory.
cd talisman
-
Install dependencies and generate the english translation files (these are loaded by i18next during development).
yarn && yarn update:translations
-
Start the dev server, waiting for it to generate the
dist
directory.yarn dev:extension
-
Open Chrome and navigate to
chrome://extensions
. -
Turn on the
Developer mode
toggle on the top right of the page. -
Click
Load unpacked
on the top left of the page and select theapps/extension/dist
directory. -
Change some code!
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:
- Import the
useTranslation
hook into your React components:
import { useTranslation } from "react-i18next"
- Use the hook in your component to get access to the
t
function:
// uses the `common` namespace (`apps/extension/public/locales/en/common.json`)
const { t } = useTranslation()
// uses the `admin` namespace (`apps/extension/public/locales/en/admin.json`)
const { t } = useTranslation("admin")
- 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>
)
- 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>
),
}}
)
- 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:
yarn update:translations
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 walletdev
: builds and watches all packages/apps with hot reloadingdev:extension
: when working on extension only, for better color outputbuild
: builds the wallet inpackages/apps/extension/dist
folder, without sentry keysbuild:extension:prod
builds the Talisman browser extension (requires sentry settings, Talisman team only)build:extension:canary
: builds the Talisman browser extension test version, with different ID and icon than prod
# 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 .
# Make changes, and then run:
yarn changeset
# Select the packages which have been modified and write a commit message