[CI Skip] release/stable 3.14.1

skip-checks: true

.babelrc.js

@@ -1 +0,0 @@
-module.exports = require('./babel.config.js');

.circleci/config.yml

@@ -1,24 +0,0 @@
-version: 2
-jobs:
-  build:
-    branches:
-      ignore:
-        - gh-pages
-    working_directory: ~/polkadot-js
-    docker:
-      - image: circleci/node:10
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-{{ checksum "yarn.lock" }}
-      - run:
-          name: install-deps
-          command: yarn install --frozen-lockfile
-      - save_cache:
-          key: dependency-cache-{{ checksum "yarn.lock" }}
-          paths:
-            - ./node_modules
-            - ~/.cache/yarn
-      - run:
-          name: build
-          command: yarn polkadot-dev-circleci-build

.codeclimate.yml

@@ -1,3 +0,0 @@
-exclude_patterns:
-- "**/*.spec.js"
-- "**/*.spec.ts"

.eslintignore

@@ -1,3 +0,0 @@
-**/build/*
-**/coverage/*
-**/node_modules/*

.eslintrc.js

@@ -1 +0,0 @@
-module.exports = require('@polkadot/dev-react/config/eslint');

.github/issue_template.md

@@ -0,0 +1,86 @@
+<!--
+
+For general support, howto, coding and bundling questions, please
+use the Substrate & Polkadot StackExchange at
+
+  https://substrate.stackexchange.com/
+
+and get other ecosystem developers involved. This issues in this
+repository are meant for the tracking of feature requests and bug
+reports.
+
+While all issues are looked at non-bug and non-features would take
+quite a bit longer to get to and may yield less than satisfactory
+responses in this format.
+
+Additionally, please ensure you have done a search on the existing
+and closed issues before logging a new request. This saves time on
+all sides.
+
+-->
+
+
+* **I'm submitting a ...**
+
+<!---
+
+REQUIRED:
+
+Classify the type of report your are submitting
+
+-->
+
+  - [ ] Bug report
+  - [ ] Feature request
+  - [ ] Support request
+  - [ ] Other
+
+
+* **What is the current behavior and expected behavior?**
+
+<!---
+
+REQUIRED:
+
+If you're describing a bug, tell us what should happen. If you're
+suggesting a change/improvement, tell us how it should work.
+
+-->
+
+
+* **What is the motivation for changing the behavior?**
+
+<!---
+
+OPTIONAL:
+
+Suggest a motivation for the request or ideas how to implement the
+addition or change
+
+-->
+
+
+* **Please tell us about your environment:**
+
+<!---
+
+REQUIRED:
+
+Include as many relevant details about the environment in which you
+experienced the issue. Also ensure that you have tested against the
+latest stable releases if you believe this to be a bug
+
+-->
+
+  - Version:
+  - Environment:
+
+    - [ ] Node.js
+    - [ ] Browser
+    - [ ] Other (limited support for other environments)
+
+  - Language:
+
+    - [ ] JavaScript
+    - [ ] TypeScript (include tsc --version)
+    - [ ] Other

.github/workflows/auto-approve.yml

@@ -0,0 +1,16 @@
+name: bot
+
+on:
+  pull_request:
+    types: [labeled]
+
+jobs:
+  approve:
+    if: "! startsWith(github.event.head_commit.message, '[CI Skip]') && (!github.event.pull_request || github.event.pull_request.head.repo.full_name == github.repository)"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: jacogr/action-approve@795afd1dd096a2071d7ec98740661af4e853b7da
+        with:
+          authors: jacogr, TarikGul
+          labels: -auto
+          token: ${{ secrets.GH_PAT_BOT }}

.github/workflows/auto-merge.yml

@@ -0,0 +1,16 @@
+name: bot
+
+on:
+  pull_request:
+    types: [labeled]
+
+jobs:
+  merge:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: jacogr/action-merge@d2d64b4545acd93b0a9575177d3d215ae3f92029
+        with:
+          checks: pr (build),pr (lint),pr (test)
+          labels: -auto
+          strategy: squash
+          token: ${{ secrets.GH_PAT_BOT }}

.github/workflows/lock.yml

@@ -0,0 +1,25 @@
+name: 'Lock Threads'
+
+on:
+  schedule:
+    - cron: '25 2/3 * * *'
+
+jobs:
+  lock:
+    runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_SCRIPTS: false
+    steps:
+      - uses: dessant/lock-threads@c1b35aecc5cdb1a34539d14196df55838bb2f836
+        with:
+          github-token: ${{ secrets.GH_PAT_BOT }}
+          issue-inactive-days: '7'
+          issue-comment: >
+            This thread has been automatically locked since there has not been
+            any recent activity after it was closed. Please open a new issue
+            if you think you have a related problem or query.
+          pr-inactive-days: '2'
+          pr-comment: >
+            This pull request has been automatically locked since there
+            has not been any recent activity after it was closed.
+            Please open a new issue for related bugs.

.github/workflows/pr-any.yml

@@ -0,0 +1,21 @@
+name: PR
+on: [pull_request]
+
+jobs:
+  pr:
+    continue-on-error: true
+    strategy:
+      matrix:
+        step: ['lint', 'test', 'build']
+    runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_SCRIPTS: false
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+    - name: ${{ matrix.step }}
+      run: |
+        yarn install --immutable
+        yarn ${{ matrix.step }}

.github/workflows/push-master.yml

@@ -0,0 +1,31 @@
+name: Master
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  master:
+    if: "! startsWith(github.event.head_commit.message, '[CI Skip]')"
+    strategy:
+      matrix:
+        step: ['build:release']
+    runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_SCRIPTS: false
+      CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
+      GH_PAT: ${{ secrets.GH_PAT_BOT }}
+      GH_RELEASE_GITHUB_API_TOKEN: ${{ secrets.GH_PAT_BOT }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+        token: ${{ secrets.GH_PAT_BOT }}
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+    - name: ${{ matrix.step }}
+      run: |
+        yarn install --immutable
+        yarn ${{ matrix.step }}

.gitignore

@@ -1,16 +1,22 @@
 build/
-build-docs/
+build-*/
 coverage/
 node_modules/
 tmp/
+.idea
 .DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 .npmrc
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+.pnp.*
 cc-test-reporter
 package-lock.json
 npm-debug.log*
+tsconfig.*buildinfo
 yarn-debug.log*
 yarn-error.log*

.mailmap

@@ -0,0 +1,3 @@
+Jaco <jacogr@gmail.com>
+github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> <action@github.com>
+github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Github Actions <action@github.com>

.nvmrc

@@ -1 +0,0 @@
-10.13.0

.prettierignore

@@ -0,0 +1,3 @@
+build
+coverage
+packages

.prettierrc.cjs

@@ -0,0 +1,4 @@
+// Copyright 2017-2025 @polkadot/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+module.exports = require('@polkadot/dev/config/prettier.cjs');

.travis.yml

@@ -1,28 +0,0 @@
-language: node_js
-node_js:
-  - "10"
-env:
-  global:
-    - CC_TEST_REPORTER_ID=8317dd42c8674d0f3094dda84c022abced4d0bf632b53406afd239ec4b039db2
-    - GH_PAGES_SRC="build-docs"
-cache:
-  yarn: true
-  directories:
-    - node_modules
-before_install:
-  - curl -o- -L https://yarnpkg.com/install.sh | bash
-  - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
-  - chmod +x ./cc-test-reporter
-  - export PATH=$HOME/.yarn/bin:$PATH
-before_script:
-  - ./cc-test-reporter before-build
-script:
-  - yarn polkadot-dev-travis-build
-after_script:
-  - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT
-deploy:
-  skip_cleanup: true
-  provider: script
-  script: yarn polkadot-dev-travis-deploy
-  on:
-    branch: master

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "eslint.enable": true,
+  "eslint.experimental.useFlatConfig": true
+}

.yarnrc.yml

@@ -0,0 +1,15 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+enableImmutableInstalls: false
+
+enableProgressBars: false
+
+logFilters:
+  - code: YN0013
+    level: discard
+
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.5.1.cjs

CONTRIBUTORS

@@ -0,0 +1,42 @@
+     735	Jaco                          	Adjust Vue peerDependency, >= 2.7 for defineComponent (#782)
+      38	Tarik Gul                     	3.14.1 (#835)
+       7	YJ                            	fix #224: decrease frame size to 1024, set multipart bool (#225)
+       4	Antoine Estienne              	Refactor logic to better use prefix (#491)
+       4	kwingram25                    	fix ff api url issue (#289)
+       4	Thibaut Sardan                	store hardware wallets (#431)
+       3	Luke Sugiura                  	remove language options (#244)
+       3	Stefanie Doll                 	Replace isUndefined util with explicit typeof check (#107)
+       2	Arjun Porwal                  	3.13.1 (#832)
+       2	Drew Stone                    	Add Edgeware testnet and mainnet updated endpoints (#274)
+       2	Hanwen Cheng                  	allow qr to scan seed qr (#330)
+       2	Nikos Kontakis                	Fix undefined process error that may appear when using ui (#524)
+       2	Valentin Fernandez            	3.12.2
+       2	Viki Val                      	Add compatibility layer for H160 addresses (#789)
+       2	Vlad Proshchavaiev            	Add Subsocial to ss58 defaults (#358)
+       2	Xiliang Chen                  	Update UNfrastructure node label (#160)
+       2	雪霁                            	Batch export patch up (#455)
+       1	Adam Dossa                    	Add Polymesh Ledger Integration (#427)
+       1	Alex Siman                    	Fix typo in README: stiorage -> storage (#69)
+       1	Alexander Krupenkin           	Added ECDSA crypto type (#313)
+       1	Andrei Eres                   	Fix raising error if process has not defined yet (#548)
+       1	Axel Chalon                   	Simplify KeyringAddress interface (#144)
+       1	Cameron Franz                 	react-native example app port (#223)
+       1	carumusan                     	Add kulupu (#342)
+       1	Derek Colley                  	Remove redundant `div` wrappers in vue-identicon (#643)
+       1	Harry Liu                     	Update README.md (#166)
+       1	Jake Naviasky                 	Add Edgeware chain prefix to settings. (#317)
+       1	Jeeyong Um                    	Fix outdated links in README.md (#772)
+       1	Logan Saether                 	Propose W3F node (#188)
+       1	Lovesh Harchandani            	Allow Ledger support for Dock (#425)
+       1	Luke Schoen                   	Fix typo in heading (#114)
+       1	Nantian                       	fix bigint type (#510)
+       1	Nikhil Ranjan                 	Updated to valid javascript (#271)
+       1	omahs                         	Fix: typos (#709)
+       1	Ryan Lee                      	fix: qr-code (#801)
+       1	Shawn Tabrizi                 	Add a new `notification` setting (#498)
+       1	Wei Tang                      	Add Kulupu to the network selection list (#254)
+       1	WoeOm                         	add darwinia ss58 (#379)
+       1	yuhui1208                     	[Stores] make FileStroe read key safely  (#338)
+       1	Yuri                          	Add webpack 5 support (#557)
+       1	Zen                           	feat: adapt Vue 3.x (#755)
+       1	菩提                            	fix some bugs  (#260)

README.md

@@ -1,13 +1,6 @@
-[![polkadotjs](https://img.shields.io/badge/polkadot-js-orange?style=flat-square)](https://polkadot.js.org)
-![license](https://img.shields.io/badge/License-Apache%202.0-blue?logo=apache&style=flat-square)
-[![npm](https://img.shields.io/npm/v/@polkadot/react-identicon?logo=npm&style=flat-square)](https://www.npmjs.com/package/@polkadot/react-identicon)
-[![beta](https://img.shields.io/npm/v/@polkadot/react-identicon/beta?label=beta&logo=npm&style=flat-square)](https://www.npmjs.com/package/@polkadot/react-identicon)
-[![maintainability](https://img.shields.io/codeclimate/maintainability-percentage/polkadot-js/ui?logo=code-climate&style=flat-square)](https://codeclimate.com/github/polkadot-js/ui)
-[![coverage](https://img.shields.io/codeclimate/coverage/polkadot-js/ui?logo=code-climate&style=flat-square)](https://codeclimate.com/github/polkadot-js/ui)
-
 # @polkadot/ui
 
-Basic browser and UI components for creating apps using the polkadot{.js} libraries
+Basic browser and framework agnostic UI components for creating apps using the polkadot{.js} libraries
 
 ## overview
 
@@ -18,9 +11,8 @@ The following UI components are currently available -
 - [vue-identicon](packages/vue-identicon/) Vue identity icon generator with address as input
 - [react-qr](packages/react-qr/) QR code generator/reader for [uos](https://github.com/maciejhirsz/uos) (Substrate/Polkadot only)
 
-Additionally some shared libraries -
+Additionally some shared libraries, that are not dependent on any framework -
 
-- [ui-assets](packages/ui-assets/) Static assets, images and others, shared accross projects
-- [ui-keyring](packages/ui-keyring/) A browser-specific wrapper around the base [@polkadot/util-keyring](https://github.com/polkadot-js/util/) library
+- [ui-keyring](packages/ui-keyring/) A browser-specific wrapper around the base [@polkadot/keyring](https://github.com/polkadot-js/common/) library
 - [ui-settings](packages/ui-settings/) A browser local storage wrapper for app settings & configuration
-- [ui-shared](packages/ui-shared) Shared logic that is used accross UI components, e.g. for icon generation
+- [ui-shared](packages/ui-shared) Shared logic that is used across UI components, e.g. for icon generation

babel.config.js

@@ -1,14 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const base = require('@polkadot/dev-react/config/babel');
-
-module.exports = Object.keys(base).reduce((config, key) => {
-  config[key] = base[key];
-
-  if (key === 'plugins') {
-    config[key] = config[key].concat([
-      'transform-vue-template'
-    ]);
-  }
-
-  return config;
-}, {});

copy-to-apps.sh

@@ -1,20 +0,0 @@
-#!/bin/sh
-
-function copy_folder () {
-  SRC="packages/$1/build"
-  DST="apps/node_modules/@polkadot/$1"
-
-  echo "** Copying $SRC to apps/$DST"
-
-  rm -rf ../$DST
-  cp -r $SRC ../$DST
-}
-
-yarn polkadot-dev-build-ts
-
-copy_folder "react-identicon"
-copy_folder "react-qr"
-copy_folder "ui-assets"
-copy_folder "ui-keyring"
-copy_folder "ui-settings"
-copy_folder "ui-shared"

docs/.vuepress/config.js

@@ -1,35 +0,0 @@
-module.exports = {
-  base: '/ui/',
-  title: 'polkadot-js/ui',
-  description: 'UI utilities, libraries and React components in use across @polkadot projects',
-  markdown: {
-    lineNumbers: true
-  },
-  themeConfig: {
-    displayAllHeaders: true,
-    nav: [
-      { text: 'Polkadot/Substrate Apps', link: 'https://polkadot.js.org/apps/' },
-      { text: 'Project family', link: 'https://polkadot.js.org/' },
-      {
-        text: 'Documentation',
-        items: [
-          { text: 'API Reference', link: 'https://polkadot.js.org/api/' },
-          { text: 'Utility Reference', link: 'https://polkadot.js.org/common/' },
-          { text: 'UI Libs Reference (this)', link: 'https://polkadot.js.org/ui/' },
-        ]
-      },
-      { text: 'GitHub', link: 'https://github.com/polkadot-js/ui' }
-    ],
-    search: false,
-    sidebar: [
-      ['/react-identicon/', '@polkadot/react-identicon'],
-      ['/react-qr/', '@polkadot/react-qr'],
-      ['/reactnative-identicon/', '@polkadot/reactnative-identicon'],
-      ['/ui-keyring/', '@polkadot/ui-keyring'],
-      ['/ui-settings/', '@polkadot/ui-settings'],
-      ['/ui-shared/', '@polkadot/ui-shared'],
-      ['/vue-identicon/', '@polkadot/vue-identicon'],
-      '/CONTRIBUTING.md'
-    ]
-  }
-};

docs/.vuepress/styles/palette.styl

@@ -1,9 +0,0 @@
-$accentColor = #fd8824
-$textColor = #2c3e50
-
-.home .hero .description,
-.home .feature h2,
-.home .feature p {
-  color: $textColor
-  opacity: 0.75
-}

docs/404.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="initial-scale=0.5, maximum-scale=1">
+    <meta http-equiv="refresh" content="0;URL='https://polkadot.js.org/docs/'" />
+    <title>Redirecting to https://polkadot.js.org/docs/</title>
+  </head>
+  <body>
+    Redirecting to <a href="https://polkadot.js.org/docs/">https://polkadot.js.org/docs/</a>
+  </body>
+</html>

docs/README.md

@@ -1,51 +0,0 @@
----
-home: true
-heroText:
-tagline:
-# Bringing JavaScript to the Polkadot world.
-# actionText: Repository Overview
-# actionLink: /REPOS.md
-features:
-- title: Identicon
-  details: A flexible identity icon generator supporting a number of display styles based on theme.
-- title: Keyring
-  details: An extension to the base keyring that allows for additions such as browser storage.
-- title: Utilities
-  details: Utilities for formatting and working with settings inside any browser-based application.
-
-footer: Apache-2 Licensed | Copyright © 2017-2019 polkadot-js authors and contributors
----
-
-## Welcome
-
-This is a collection of UI libraries, utlities and classes that allows for easier use of the Polkadot JS infrastructure inside your apps.
-
-::: tip Examples
-In a rush and just want examples? [Jump right in](react-identicon/README.md) and get a handle the libraries in your projects.
-:::
-
-## Available packages
-
-This repository split up into a number of internal packages, namely -
-
-- [React Identicon](react-identicon/README.md) Display of identity icons based on theme, also availble for [React Native](reactnative-identicon/README.md) and [Vue](vue-identicon/README.md)
-- [keyring](ui-keyring/README.md) A keyring with browser-specific extensions
-- [settings](ui-settings/README.md) Setting management and defaults
-
-## The Polkadot Project
-
-You can read more about the Polkadot Network at [https://polkadot.network/](https://polkadot.network/) and more about the polkadot-js projects at [https://polkadot.js.org](https://polkadot.js.org)
-
-## Github repositories
-
-You can find the Polkadot repositories at:
-
-- [https://github.com/polkadot-js](https://github.com/polkadot-js)
-- [https://github.com/paritytech/polkadot](https://github.com/paritytech/polkadot)
-- [https://github.com/paritytech/substrate](https://github.com/paritytech/substrate)
-
-This documentation is generated from [https://github.com/polkadot-js/ui](https://github.com/polkadot-js/ui)
-
-## Contributing
-
-Contribution to the Polkadot JS projects are more than welcome. You can [report issues](https://github.com/polkadot-js/ui/issues/new) and [log feature requests](https://github.com/polkadot-js/ui/issues/new).

docs/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="initial-scale=0.5, maximum-scale=1">
+    <meta http-equiv="refresh" content="0;URL='https://polkadot.js.org/docs/'" />
+    <title>Redirecting to https://polkadot.js.org/docs/</title>
+  </head>
+  <body>
+    Redirecting to <a href="https://polkadot.js.org/docs/">https://polkadot.js.org/docs/</a>
+  </body>
+</html>

eslint.config.js

@@ -0,0 +1,8 @@
+// Copyright 2017-2025 @polkadot/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import baseConfig from '@polkadot/dev/config/eslint';
+
+export default [
+  ...baseConfig
+];

jest.config.js

@@ -1,12 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const config = require('@polkadot/dev-react/config/jest');
-
-module.exports = Object.assign({}, config, {
-  moduleNameMapper: {
-    '@polkadot/react-(identicon|qr)(.*)$': '<rootDir>/packages/react-$1/src/$2',
-    '@polkadot/reactnative-(identicon)(.*)$': '<rootDir>/packages/reactnative-$1/src/$2',
-    '@polkadot/ui-(assets|keyring|settings|shared)(.*)$': '<rootDir>/packages/ui-$1/src/$2',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object',
-    '\\.(css|less)$': 'empty/object'
-  }
-});

lerna.json

@@ -1,14 +0,0 @@
-{
-  "lerna": "2.11.0",
-  "npmClient": "yarn",
-  "useWorkspaces": true,
-  "command": {
-    "publish": {
-      "allowBranch": "master"
-    }
-  },
-  "packages": [
-    "packages/*"
-  ],
-  "version": "0.42.1"
-}

package.json

@@ -1,36 +1,47 @@
 {
-  "version": "0.42.1",
-  "private": true,
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "bugs": "https://github.com/polkadot-js/ui/issues",
   "engines": {
-    "yarn": "^1.10.1"
+    "node": ">=18.14"
+  },
+  "homepage": "https://github.com/polkadot-js/ui#readme",
+  "license": "Apache-2.0",
+  "packageManager": "yarn@4.5.1",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/polkadot-js/ui.git"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "version": "3.14.1",
+  "versions": {
+    "git": "3.14.1",
+    "npm": "3.14.1"
   },
-  "homepage": ".",
   "workspaces": [
     "packages/*"
   ],
-  "resolutions": {
-    "babel-core": "^7.0.0-bridge.0",
-    "typescript": "^3.5.3"
-  },
   "scripts": {
-    "build": "polkadot-dev-build-ts && polkadot-dev-build-docs",
-    "check": "yarn lint",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx . && tsc --noEmit --pretty",
+    "build": "polkadot-dev-build-ts",
+    "build:release": "polkadot-ci-ghact-build",
+    "build:rollup": "polkadot-exec-rollup --config",
     "clean": "polkadot-dev-clean-build",
-    "demo:identicon:react": "webpack-serve --config packages/react-identicon/webpack.config.js --content packages/react-identicon --port 3000",
-    "demo:identicon:vue": "webpack-serve --config packages/vue-identicon/webpack.config.js --content packages/vue-identicon --port 3000",
+    "lint": "polkadot-dev-run-lint",
     "postinstall": "polkadot-dev-yarn-only",
-    "test": "jest --coverage --runInBand",
-    "test:one": "jest"
+    "test": "polkadot-dev-run-test --env browser",
+    "test:one": "polkadot-dev-run-test --env browser"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/runtime": "^7.5.5",
-    "@polkadot/dev-react": "^0.31.0-beta.3",
-    "@polkadot/ts": "^0.1.64",
-    "babel-plugin-transform-vue-template": "^0.4.2",
-    "empty": "^0.10.1",
-    "gh-pages": "^2.1.1",
-    "webpack-serve": "^3.1.1"
+    "@polkadot/dev": "^0.83.2",
+    "@polkadot/x-bundle": "^13.5.1",
+    "@types/node": "^22.10.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "react-native": "^0.73.1"
+  },
+  "resolutions": {
+    "typescript": "^5.5.4"
   }
 }

packages/react-identicon/LICENSE

@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.

packages/react-identicon/index.html

@@ -12,6 +12,6 @@
   </head>
   <body>
     <div id="demo"></div>
-    <script src="./demo.js"></script>
+    <script src="./build/Demo.js"></script>
   </body>
 </html>

packages/react-identicon/package.json

@@ -1,32 +1,48 @@
 {
-  "name": "@polkadot/react-identicon",
-  "version": "0.42.1",
-  "description": "Renders an SVG picture representing an address",
-  "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
+  "bugs": "https://github.com/polkadot-js/ui/issues",
+  "description": "Renders an SVG picture representing an address",
+  "engines": {
+    "node": ">=18"
+  },
+  "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/react-identicon#readme",
   "license": "Apache-2.0",
+  "name": "@polkadot/react-identicon",
+  "repository": {
+    "directory": "packages/react-identicon",
+    "type": "git",
+    "url": "https://github.com/polkadot-js/ui.git"
+  },
+  "sideEffects": [
+    "./packageDetect.js",
+    "./packageDetect.cjs"
+  ],
+  "type": "module",
+  "version": "3.14.1",
+  "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.5.5",
-    "@polkadot/ui-settings": "^0.42.1",
-    "@polkadot/ui-shared": "^0.42.1",
-    "@types/color": "^3.0.0",
-    "@types/react-copy-to-clipboard": "^4.2.6",
-    "color": "^3.1.2",
-    "jdenticon": "2.2.0",
-    "react-copy-to-clipboard": "^5.0.1",
-    "styled-components": "^4.3.1"
+    "@polkadot/keyring": "^13.5.1",
+    "@polkadot/ui-settings": "3.14.1",
+    "@polkadot/ui-shared": "3.14.1",
+    "@polkadot/util": "^13.5.1",
+    "@polkadot/util-crypto": "^13.5.1",
+    "ethereum-blockies-base64": "^1.0.2",
+    "jdenticon": "3.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
+    "styled-components": "^6.1.1",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "@types/react-dom": "^18.2.18",
+    "xmlserializer": "^0.6.1"
   },
   "peerDependencies": {
     "@polkadot/keyring": "*",
+    "@polkadot/util": "*",
     "@polkadot/util-crypto": "*",
-    "react": "*"
-  },
-  "devDependencies": {
-    "@polkadot/keyring": "^1.1.1",
-    "@polkadot/util-crypto": "^1.1.1",
-    "xmlserializer": "^0.6.1"
+    "react": "*",
+    "react-dom": "*",
+    "react-is": "*"
   }
 }

packages/react-identicon/src/Demo.tsx

@@ -1,37 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { encodeAddress, randomAsU8a } from '@polkadot/util-crypto';
-
-import IdentityIcon from '.';
-
-export default class Demo extends React.PureComponent {
-  public render (): React.ReactNode {
-    const identities: string[] = [];
-
-    while (identities.length !== 50) {
-      identities.push(
-        encodeAddress(randomAsU8a(32))
-      );
-    }
-
-    return identities.map((value): React.ReactNode => (
-      <IdentityIcon
-        key={value.toString()}
-        theme='jdenticon'
-        value={value}
-      />
-    ));
-  }
-}
-
-const rootElement = document.getElementById('demo');
-
-if (!rootElement) {
-  throw new Error(`Unable to find element with id 'demo'`);
-}
-
-ReactDOM.render(<Demo />, rootElement);

packages/react-identicon/src/Identicon.tsx

@@ -1,18 +1,18 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Prefix } from '@polkadot/util-crypto/address/types';
-import { IdentityProps as Props, Props as ComponentProps } from './types';
+import type { Prefix } from '@polkadot/util-crypto/address/types';
+import type { IdentityProps as Props, Props as ComponentProps } from './types.js';
 
 import React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import styled from 'styled-components';
-import settings from '@polkadot/ui-settings';
-import { isHex, isU8a, u8aToHex } from '@polkadot/util';
-import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
-import { Beachball, Empty, Jdenticon, Polkadot } from './icons';
+import { ICON_DEFAULT_HOST, settings } from '@polkadot/ui-settings';
+import { isHex, isU8a, u8aToHex } from '@polkadot/util';
+import { decodeAddress, encodeAddress, ethereumEncode } from '@polkadot/util-crypto';
+
+import { Beachball, Empty, Ethereum, Jdenticon, Polkadot } from './icons/index.js';
+import { styled } from './styled.js';
 
 const Fallback = Beachball;
 
@@ -25,42 +25,14 @@ const DEFAULT_SIZE = 64;
 const Components: Record<string, React.ComponentType<ComponentProps>> = {
   beachball: Beachball,
   empty: Empty,
+  ethereum: Ethereum,
   jdenticon: Jdenticon,
   polkadot: Polkadot,
   substrate: Jdenticon
 };
-const Wrapper = styled.div`
-  cursor: copy;
-  display: inline-block;
-  line-height: 0;
 
-  > .container {
-    position: relative;
-
-    > div,
-    > svg {
-      position: relative;
-    }
-
-    &:before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 50%;
-      box-shadow: 0 0 5px 2px #e0e0e0;
-      content: '';
-    }
-
-    &.highlight:before {
-      box-shadow: 0 0 5px 2px red;
-    }
-  }
-`;
-
-export default class IdentityIcon extends React.PureComponent<Props, State> {
-  public state: State = {
+class BaseIcon extends React.PureComponent<Props, State> {
+  public override state: State = {
     address: '',
     publicKey: '0x'
   };
@@ -68,10 +40,18 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
   private static prefix?: Prefix = undefined;
 
   public static setDefaultPrefix (prefix: Prefix): void {
-    IdentityIcon.prefix = prefix;
+    BaseIcon.prefix = prefix;
   }
 
-  public static getDerivedStateFromProps ({ prefix = IdentityIcon.prefix, value }: Props, prevState: State): State | null {
+  public static getDerivedStateFromProps ({ prefix = BaseIcon.prefix, theme, value }: Props, prevState: State): State | null {
+    if (theme === 'ethereum') {
+      const address = isU8a(value)
+        ? ethereumEncode(value)
+        : value || '';
+
+      return { address, publicKey: '' };
+    }
+
     try {
       const address = isU8a(value) || isHex(value)
         ? encodeAddress(value, prefix)
@@ -84,7 +64,7 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
           address,
           publicKey
         };
-    } catch (error) {
+    } catch {
       return {
         address: '',
         publicKey: '0x'
@@ -92,9 +72,9 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
     }
   }
 
-  public render (): React.ReactNode {
+  public override render (): React.ReactNode {
     const { address } = this.state;
-    const wrapped = this.getWrapped(this.state);
+    const wrapped = this.getWrapped(this.state, this.props);
 
     return !address
       ? wrapped
@@ -108,25 +88,26 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
       );
   }
 
-  private getWrapped ({ address, publicKey }: State): React.ReactNode {
-    const { className, isHighlight = false, size = DEFAULT_SIZE, style, theme = settings.uiTheme } = this.props;
+  private getWrapped ({ address, publicKey }: State, { Custom }: Props): React.ReactNode {
+    const { className = '', isAlternative, isHighlight, size = DEFAULT_SIZE, style = {}, theme = settings.icon } = this.props;
     const Component = !address
       ? Empty
-      : Components[theme] || Fallback;
+      : Custom || Components[theme === 'default' ? ICON_DEFAULT_HOST : theme] || Fallback;
 
     return (
-      <Wrapper
-        className={`ui--IdentityIcon ${className}`}
+      <StyledDiv
+        className={`ui--IdentityIcon  ${className}`}
         key={address}
         style={style}
       >
         <Component
           address={address}
           className={isHighlight ? 'highlight' : ''}
+          isAlternative={isAlternative}
           publicKey={publicKey}
           size={size}
         />
-      </Wrapper>
+      </StyledDiv>
     );
   }
 
@@ -137,5 +118,37 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
     if (address && onCopy) {
       onCopy(address);
     }
-  }
+  };
 }
+
+function Icon (props: Props): React.ReactElement<Props> {
+  return <BaseIcon {...props} />;
+}
+
+const StyledDiv = styled.div`
+  cursor: copy;
+  display: inline-block;
+  line-height: 0;
+
+  > .container {
+    position: relative;
+
+    > div,
+    > svg {
+      position: relative;
+    }
+
+    &.highlight:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 50%;
+      box-shadow: 0 0 5px 2px #aaa;
+      content: '';
+    }
+  }
+`;
+
+export const Identicon = React.memo(Icon);

packages/react-identicon/src/bundle.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './icons/index.js';
+export { Identicon } from './Identicon.js';
+export { packageInfo } from './packageInfo.js';

packages/react-identicon/src/icons/Beachball.tsx

@@ -1,32 +1,29 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Props } from '../types';
+import type { Props } from '../types.js';
 
-import React from 'react';
-import generate from '@polkadot/ui-shared/beachballIcon';
+import React, { useCallback } from 'react';
 
-export default class Beachball extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, style } = this.props;
+import { beachballIcon } from '@polkadot/ui-shared';
 
-    return (
-      <div
-        className={`container ${className}`}
-        ref={this.appendIcon}
-        style={style}
-      />
-    );
-  }
-
-  private appendIcon = (node: Element | null): void => {
-    const { address, size } = this.props;
-
-    if (node) {
-      node.appendChild(
-        generate(address, size)
+function Identicon ({ address, className = '', size, style = {} }: Props): React.ReactElement<Props> {
+  const updateElem = useCallback(
+    (node: HTMLDivElement): void => {
+      node?.appendChild(
+        beachballIcon(address, { isAlternative: false, size })
       );
-    }
-  }
+    },
+    [address, size]
+  );
+
+  return (
+    <div
+      className={className}
+      ref={updateElem}
+      style={style}
+    />
+  );
 }
+
+export const Beachball = React.memo(Identicon);

packages/react-identicon/src/icons/Empty.tsx

@@ -1,26 +1,20 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Props } from '../types';
+import type { Props } from '../types.js';
 
 import React from 'react';
 
-export default class Empty extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, size, style } = this.props;
-
-    return (
-      <div
-        className={`container ${className}`}
-        style={style}
-      >
-        <svg
-          height={size}
-          viewBox='0 0 64 64'
-          width={size}
-        />
-      </div>
-    );
-  }
+function Identicon ({ className = '', size, style = {} }: Props): React.ReactElement<Props> {
+  return (
+    <svg
+      className={className}
+      height={size}
+      style={style}
+      viewBox='0 0 64 64'
+      width={size}
+    />
+  );
 }
+
+export const Empty = React.memo(Identicon);

packages/react-identicon/src/icons/Ethereum.tsx

@@ -0,0 +1,37 @@
+// Copyright 2017-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Props } from '../types.js';
+
+import makeBlockie from 'ethereum-blockies-base64';
+import React, { useMemo } from 'react';
+
+import { styled } from '../styled.js';
+
+interface ImgProps {
+  size: number;
+}
+
+function Identicon ({ address, className = '', size, style = {} }: Props): React.ReactElement<Props> {
+  const imgSrc = useMemo(
+    () => makeBlockie(address),
+    [address]
+  );
+
+  return (
+    <StyledImg
+      className={className}
+      size={size}
+      src={imgSrc}
+      style={style}
+    />
+  );
+}
+
+const StyledImg = styled.img<ImgProps>(({ size }) => `
+  display: block;
+  height: ${size}px;
+  width: ${size}px;
+`);
+
+export const Ethereum = React.memo(Identicon);

packages/react-identicon/src/icons/Jdenticon.tsx

@@ -1,24 +1,24 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Props } from '../types';
+import type { Props } from '../types.js';
 
-import React from 'react';
-import jdenticon from 'jdenticon';
+import * as jdenticon from 'jdenticon';
+import React, { useMemo } from 'react';
 
-export default class Jdenticon extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, publicKey, size, style } = this.props;
+function Identicon ({ className = '', publicKey, size, style = {} }: Props): React.ReactElement<Props> {
+  const html = useMemo(
+    () => ({ __html: jdenticon.toSvg(publicKey.substring(2), size) }),
+    [publicKey, size]
+  );
 
-    return (
-      <div
-        className={`container ${className}`}
-        style={style}
-        dangerouslySetInnerHTML={ {
-          __html: jdenticon.toSvg(publicKey.substr(2), size)
-        } }
-      />
-    );
-  }
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={html}
+      style={style}
+    />
+  );
 }
+
+export const Jdenticon = React.memo(Identicon);

packages/react-identicon/src/icons/Polkadot.tsx

@@ -1,7 +1,7 @@
+// Copyright 2018-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
 // Copyright 2018 Paritytech via paritytech/oo7/polkadot-identicon
-// Copyright 2018 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
 
 // This has been converted from the original version that can be found at
 //
@@ -16,46 +16,44 @@
 //   - Move constants to file-level
 //   - Overall it is now just a static component, expecting an address as an input value
 
-import { Props as BaseProps } from '../types';
+import type { Circle } from '@polkadot/ui-shared/icons/types';
+import type { Props } from '../types.js';
 
-import React from 'react';
-import generateIcon, { Circle } from '@polkadot/ui-shared/polkadotIcon';
+import React, { useMemo } from 'react';
 
-interface Props extends BaseProps {
-  sixPoint?: boolean;
+import { polkadotIcon } from '@polkadot/ui-shared';
+
+function renderCircle ({ cx, cy, fill, r }: Circle, key: number): React.ReactNode {
+  return (
+    <circle
+      cx={cx}
+      cy={cy}
+      fill={fill}
+      key={key}
+      r={r}
+    />
+  );
 }
 
-export default class Identicon extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { address, className, sixPoint, size, style } = this.props;
+function Identicon ({ address, className = '', isAlternative = false, size, style = {} }: Props): React.ReactElement<Props> {
+  const circles = useMemo(
+    () => polkadotIcon(address, { isAlternative }),
+    [address, isAlternative]
+  );
 
-    return (
-      <div
-        className={`container ${className}`}
-        style={style}
-      >
-        <svg
-          id={address}
-          name={address}
-          width={size}
-          height={size}
-          viewBox='0 0 64 64'
-        >
-          {generateIcon(address, sixPoint).map(this.renderCircle)}
-        </svg>
-      </div>
-    );
-  }
-
-  private renderCircle = ({ cx, cy, r, fill }: Circle, key: number): React.ReactNode => {
-    return (
-      <circle
-        key={key}
-        cx={cx}
-        cy={cy}
-        r={r}
-        fill={fill}
-      />
-    );
-  }
+  return (
+    <svg
+      className={className}
+      height={size}
+      id={address}
+      name={address}
+      style={style}
+      viewBox='0 0 64 64'
+      width={size}
+    >
+      {circles.map(renderCircle)}
+    </svg>
+  );
 }
+
+export const Polkadot = React.memo(Identicon);

packages/react-identicon/src/icons/index.ts

@@ -1,8 +1,8 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-export { default as Beachball } from './Beachball';
-export { default as Empty } from './Empty';
-export { default as Jdenticon } from './Jdenticon';
-export { default as Polkadot } from './Polkadot';
+export { Beachball } from './Beachball.js';
+export { Empty } from './Empty.js';
+export { Ethereum } from './Ethereum.js';
+export { Jdenticon } from './Jdenticon.js';
+export { Polkadot } from './Polkadot.js';

packages/react-identicon/src/index.ts

@@ -1,8 +1,10 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import Identicon from './Identicon';
-export * from './icons';
+import './packageDetect.js';
+
+import { Identicon } from './bundle.js';
+
+export * from './bundle.js';
 
 export default Identicon;

packages/react-identicon/src/packageDetect.ts

@@ -0,0 +1,13 @@
+// Copyright 2017-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Do not edit, auto-generated by @polkadot/dev
+// (packageInfo imports will be kept as-is, user-editable)
+
+import { packageInfo as settingsInfo } from '@polkadot/ui-settings/packageInfo';
+import { packageInfo as sharedInfo } from '@polkadot/ui-shared/packageInfo';
+import { detectPackage } from '@polkadot/util';
+
+import { packageInfo } from './packageInfo.js';
+
+detectPackage(packageInfo, null, [settingsInfo, sharedInfo]);

packages/react-identicon/src/packageInfo.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Do not edit, auto-generated by @polkadot/dev
+
+export const packageInfo = { name: '@polkadot/react-identicon', path: 'auto', type: 'auto', version: '3.14.1' };

packages/react-identicon/src/styled.ts

@@ -0,0 +1,4 @@
+// Copyright 2017-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export { styled } from 'styled-components';

packages/react-identicon/src/types.ts

@@ -1,25 +1,30 @@
-// Copyright 2018 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2018-2025 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Prefix } from '@polkadot/util-crypto/address/types';
+import type React from 'react';
+import type { Prefix } from '@polkadot/util-crypto/address/types';
 
 export interface BaseProps {
   className?: string;
-  style?: Record<string, string | number>;
+  style?: React.CSSProperties;
 }
 
 export interface Props extends BaseProps {
   address: string;
+  isAlternative?: boolean | undefined;
   publicKey: string;
   size: number;
 }
 
 export interface IdentityProps extends BaseProps {
+  Custom?: React.ComponentType<Props>;
+  isAlternative?: boolean;
   isHighlight?: boolean;
   onCopy?: (value: string) => void;
   prefix?: Prefix;
   size?: number;
-  theme?: 'beachball' | 'empty' | 'jdenticon' | 'polkadot' | 'substrate';
+  theme?: IconTheme;
   value?: string | Uint8Array | null;
 }
+
+export type IconTheme = 'beachball' | 'empty' | 'ethereum' | 'jdenticon' | 'polkadot' | 'substrate';

packages/react-identicon/tsconfig.build.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "..",
+    "outDir": "./build",
+    "rootDir": "./src"
+  },
+  "references": [
+    { "path": "../ui-shared/tsconfig.build.json" },
+    { "path": "../ui-settings/tsconfig.build.json" }
+  ]
+}

packages/react-identicon/webpack.config.js

@@ -1,38 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require('path');
-
-const ENV = process.env.NODE_ENV || 'development';
-const isProd = ENV === 'production';
-
-module.exports = {
-  context: __dirname,
-  devtool: isProd ? 'source-map' : 'cheap-eval-source-map',
-  entry: './src/Demo.tsx',
-  mode: ENV,
-  output: {
-    path: __dirname,
-    filename: './demo.js'
-  },
-  resolve: {
-    alias: {
-      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/src')
-    },
-    extensions: ['.js', '.jsx', '.ts', '.tsx']
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|ts|tsx)$/,
-        exclude: /(node_modules)/,
-        use: [
-          'babel-loader'
-        ]
-      }
-    ]
-  },
-  plugins: []
-};

packages/react-qr/LICENSE

@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.

packages/react-qr/package.json

@@ -1,17 +1,40 @@
 {
-  "name": "@polkadot/react-qr",
-  "version": "0.42.1",
-  "description": "Generates and reads QR codes",
-  "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
+  "bugs": "https://github.com/polkadot-js/ui/issues",
+  "description": "Generates and reads QR codes",
+  "engines": {
+    "node": ">=18"
+  },
+  "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/react-qr#readme",
   "license": "Apache-2.0",
+  "name": "@polkadot/react-qr",
+  "repository": {
+    "directory": "packages/react-qr",
+    "type": "git",
+    "url": "https://github.com/polkadot-js/ui.git"
+  },
+  "sideEffects": [
+    "./packageDetect.js",
+    "./packageDetect.cjs"
+  ],
+  "type": "module",
+  "version": "3.14.1",
+  "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.5.5",
-    "@types/react-qr-reader": "^2.1.1",
-    "qrcode-generator": "^1.4.3",
-    "react-qr-reader": "^2.2.1"
+    "@polkadot/ui-settings": "3.14.1",
+    "@polkadot/util": "^13.5.1",
+    "@polkadot/util-crypto": "^13.5.1",
+    "@zxing/browser": "^0.1.5",
+    "@zxing/library": "^0.21.2",
+    "qrcode-generator": "^1.4.4",
+    "styled-components": "^6.1.1",
+    "tslib": "^2.8.1"
+  },
+  "peerDependencies": {
+    "@polkadot/util": "*",
+    "@polkadot/util-crypto": "*",
+    "react": "*",
+    "react-dom": "*",
+    "react-is": "*"
   }
 }

packages/react-qr/src/Display.tsx

@@ -1,132 +1,140 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
-import React from 'react';
-import styled from 'styled-components';
+import { objectSpread } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
-import qrcode from './qrcode';
-import { createFrames, createImgSize } from './util';
+import { qrcode } from './qrcode.js';
+import { styled } from './styled.js';
+import { createFrames, createImgSize } from './util.js';
 
-interface Props extends BaseProps {
-  size?: number;
+interface Props {
+  className?: string | undefined;
+  size?: string | number | undefined;
   skipEncoding?: boolean;
+  style?: React.CSSProperties | undefined;
+  timerDelay?: number | undefined;
   value: Uint8Array;
 }
 
-interface State {
+interface FrameState {
   frames: Uint8Array[];
   frameIdx: number;
   image: string | null;
-  timerId: number | null;
   valueHash: string | null;
 }
 
-const FRAME_DELAY = 2100;
+interface TimerState {
+  timerDelay: number;
+  timerId: ReturnType<typeof setTimeout> | null;
+}
+
+const DEFAULT_FRAME_DELAY = 2750;
+const TIMER_INC = 500;
 
 function getDataUrl (value: Uint8Array): string {
   const qr = qrcode(0, 'M');
 
-  // HACK See out qrcode stringToBytes override as used internally. This
-  // will only work for the case where we actuall pass `Bytes` in here
-  // @ts-ignore
-  qr.addData(value, 'Byte');
+  // HACK See our qrcode stringToBytes override as used internally. This
+  // will only work for the case where we actually pass `Bytes` in here
+  qr.addData(value as unknown as string, 'Byte');
   qr.make();
 
   return qr.createDataURL(16, 0);
 }
 
-class Display extends React.PureComponent<Props, State> {
-  public state: State = {
-    frames: [],
-    frameIdx: 0,
-    image: null,
-    timerId: null,
-    valueHash: null
-  };
+function Display ({ className = '', size, skipEncoding, style = {}, timerDelay = DEFAULT_FRAME_DELAY, value }: Props): React.ReactElement<Props> | null {
+  const [{ image }, setFrameState] = useState<FrameState>({ frameIdx: 0, frames: [], image: null, valueHash: null });
+  const timerRef = useRef<TimerState>({ timerDelay, timerId: null });
 
-  public static getDerivedStateFromProps ({ value, skipEncoding = false }: Props, prevState: State): Pick<State, never> | null {
-    const valueHash = xxhashAsHex(value);
+  const containerStyle = useMemo(
+    () => createImgSize(size),
+    [size]
+  );
 
-    if (valueHash === prevState.valueHash) {
-      return null;
-    }
+  // run on initial load to setup the global timer and provide and unsubscribe
+  useEffect((): () => void => {
+    const nextFrame = () => setFrameState((state): FrameState => {
+      // when we have a single frame, we only ever fire once
+      if (state.frames.length <= 1) {
+        return state;
+      }
 
-    const frames: Uint8Array[] = skipEncoding
-      ? [value]
-      : createFrames(value);
+      let frameIdx = state.frameIdx + 1;
 
-    // encode on demand
-    return {
-      frames,
-      frameIdx: 0,
-      image: getDataUrl(frames[0]),
-      valueHash
+      // when we overflow, skip to the first and slightly increase the delay between frames
+      if (frameIdx === state.frames.length) {
+        frameIdx = 0;
+        timerRef.current.timerDelay = timerRef.current.timerDelay + TIMER_INC;
+      }
+
+      // only encode the frames on demand, not above as part of the
+      // state derivation - in the case of large payloads, this should
+      // be slightly more responsive on initial load
+      const newState = objectSpread<FrameState>({}, state, {
+        frameIdx,
+        image: getDataUrl(state.frames[frameIdx])
+      });
+
+      // set the new timer last
+      timerRef.current.timerId = setTimeout(nextFrame, timerRef.current.timerDelay);
+
+      return newState;
+    });
+
+    timerRef.current.timerId = setTimeout(nextFrame, timerRef.current.timerDelay);
+
+    return (): void => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      timerRef.current.timerId && clearTimeout(timerRef.current.timerId);
     };
-  }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  public componentDidMount (): void {
-    this.setState({
-      timerId: window.setInterval(this.nextFrame, FRAME_DELAY)
+  useEffect((): void => {
+    setFrameState((state): FrameState => {
+      const valueHash = xxhashAsHex(value);
+
+      if (valueHash === state.valueHash) {
+        return state;
+      }
+
+      const frames: Uint8Array[] = skipEncoding
+        ? [value]
+        : createFrames(value);
+
+      // encode on demand
+      return {
+        frameIdx: 0,
+        frames,
+        image: getDataUrl(frames[0]),
+        valueHash
+      };
     });
+  }, [skipEncoding, value]);
+
+  if (!image) {
+    return null;
   }
 
-  public componentWillUnmount (): void {
-    const { timerId } = this.state;
-
-    if (timerId) {
-      clearInterval(timerId);
-    }
-  }
-
-  public render (): React.ReactNode {
-    const { className, size, style } = this.props;
-    const { image } = this.state;
-
-    if (!image) {
-      return null;
-    }
-
-    return (
+  return (
+    <StyledDiv
+      className={className}
+      style={containerStyle}
+    >
       <div
-        className={className}
-        style={createImgSize(size)}
+        className='ui--qr-Display'
+        style={style}
       >
-        <div
-          className='ui--qr-Display'
-          style={style}
-        >
-          <img src={image} />
-        </div>
+        <img src={image} />
       </div>
-    );
-  }
-
-  private nextFrame = (): void => {
-    const { frames, frameIdx } = this.state;
-
-    if (!frames || frames.length <= 1) {
-      return;
-    }
-
-    const nextIdx = frameIdx === frames.length - 1
-      ? 0
-      : frameIdx + 1;
-
-    // only encode the frames on demand, not above as part of the
-    // state derivation - in the case of large payloads, this should
-    // be slightly more responsive on initial load
-    this.setState({
-      frameIdx: nextIdx,
-      image: getDataUrl(frames[nextIdx])
-    });
-  }
+    </StyledDiv>
+  );
 }
 
-export default styled(Display as React.ComponentClass<Props>)`
+const StyledDiv = styled.div`
   .ui--qr-Display {
     height: 100%;
     width: 100%;
@@ -141,3 +149,5 @@ export default styled(Display as React.ComponentClass<Props>)`
     }
   }
 `;
+
+export const QrDisplay = React.memo(Display);

packages/react-qr/src/DisplayAddress.tsx

@@ -1,56 +1,40 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
+import React, { useMemo } from 'react';
 
-import React from 'react';
-import { xxhashAsHex } from '@polkadot/util-crypto';
+import { QrDisplay } from './Display.js';
+import { createAddressPayload } from './util.js';
 
-import { createAddressPayload } from './util';
-import QrDisplay from './Display';
-
-interface Props extends BaseProps {
+interface Props {
   address: string;
+  genesisHash: string;
+  className?: string;
+  size?: string | number;
+  style?: React.CSSProperties;
+  timerDelay?: number;
 }
 
-interface State {
-  data: Uint8Array | null;
-  dataHash: string | null;
-}
+function DisplayAddress ({ address, className, genesisHash, size, style, timerDelay }: Props): React.ReactElement<Props> | null {
+  const data = useMemo(
+    () => createAddressPayload(address, genesisHash),
+    [address, genesisHash]
+  );
 
-export default class DisplayExtrinsic extends React.PureComponent<Props, State> {
-  public state: State = {
-    data: null,
-    dataHash: null
-  };
-
-  public static getDerivedStateFromProps ({ address }: Props, prevState: State): State | null {
-    const data = createAddressPayload(address);
-    const dataHash = xxhashAsHex(data);
-
-    if (dataHash === prevState.dataHash) {
-      return null;
-    }
-
-    return { data, dataHash };
+  if (!data) {
+    return null;
   }
 
-  public render (): React.ReactNode {
-    const { className, style } = this.props;
-    const { data } = this.state;
-
-    if (!data) {
-      return null;
-    }
-
-    return (
-      <QrDisplay
-        className={className}
-        skipEncoding={true}
-        style={style}
-        value={data}
-      />
-    );
-  }
+  return (
+    <QrDisplay
+      className={className}
+      size={size}
+      skipEncoding
+      style={style}
+      timerDelay={timerDelay}
+      value={data}
+    />
+  );
 }
+
+export const QrDisplayAddress = React.memo(DisplayAddress);

packages/react-qr/src/DisplayPayload.tsx

@@ -1,57 +1,42 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
+import React, { useMemo } from 'react';
 
-import React from 'react';
-import { xxhashAsHex } from '@polkadot/util-crypto';
+import { QrDisplay } from './Display.js';
+import { createSignPayload } from './util.js';
 
-import { createSignPayload } from './util';
-import QrDisplay from './Display';
-
-interface Props extends BaseProps {
+interface Props {
   address: string;
+  className?: string;
   cmd: number;
+  delay?: number;
+  genesisHash: Uint8Array | string;
   payload: Uint8Array;
+  size?: string | number;
+  style?: React.CSSProperties;
+  timerDelay?: number;
 }
 
-interface State {
-  data: Uint8Array | null;
-  dataHash: string | null;
-}
+function DisplayPayload ({ address, className, cmd, genesisHash, payload, size, style, timerDelay }: Props): React.ReactElement<Props> | null {
+  const data = useMemo(
+    () => createSignPayload(address, cmd, payload, genesisHash),
+    [address, cmd, payload, genesisHash]
+  );
 
-export default class DisplayPayload extends React.PureComponent<Props, State> {
-  public state: State = {
-    data: null,
-    dataHash: null
-  };
-
-  public static getDerivedStateFromProps ({ address, cmd, payload }: Props, prevState: State): State | null {
-    const data = createSignPayload(address, cmd, payload);
-    const dataHash = xxhashAsHex(data);
-
-    if (dataHash === prevState.dataHash) {
-      return null;
-    }
-
-    return { data, dataHash };
+  if (!data) {
+    return null;
   }
 
-  public render (): React.ReactNode {
-    const { className, style } = this.props;
-    const { data } = this.state;
-
-    if (!data) {
-      return null;
-    }
-
-    return (
-      <QrDisplay
-        className={className}
-        style={style}
-        value={data}
-      />
-    );
-  }
+  return (
+    <QrDisplay
+      className={className}
+      size={size}
+      style={style}
+      timerDelay={timerDelay}
+      value={data}
+    />
+  );
 }
+
+export const QrDisplayPayload = React.memo(DisplayPayload);

packages/react-qr/src/NetworkSpecs.tsx

@@ -0,0 +1,39 @@
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { NetworkSpecsStruct } from '@polkadot/ui-settings/types';
+
+import React, { useMemo } from 'react';
+
+import { QrDisplay } from './Display.js';
+import { encodeString } from './util.js';
+
+interface Props {
+  className?: string;
+  networkSpecs: NetworkSpecsStruct;
+  size?: string | number;
+  style?: React.CSSProperties;
+}
+
+function DisplayNetworkSpecs ({ className, networkSpecs, size, style }: Props): React.ReactElement<Props> | null {
+  const data = useMemo(
+    () => encodeString(JSON.stringify(networkSpecs)),
+    [networkSpecs]
+  );
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <QrDisplay
+      className={className}
+      size={size}
+      skipEncoding
+      style={style}
+      value={data}
+    />
+  );
+}
+
+export const QrNetworkSpecs = React.memo(DisplayNetworkSpecs);

packages/react-qr/src/Scan.tsx

@@ -1,72 +1,100 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
+import { BrowserQRCodeReader, type IScannerControls } from '@zxing/browser';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import React from 'react';
-import Reader from 'react-qr-reader';
-import styled from 'styled-components';
+import { styled } from './styled.js';
+import { createImgSize } from './util.js';
 
-import { createImgSize } from './util';
-
-interface Props extends BaseProps {
+interface Props {
+  className?: string | undefined;
   delay?: number;
-  onError?: (error: Error) => void;
-  onScan?: (data: string) => void;
-  size?: number;
+  onError?: undefined | ((error: Error) => void);
+  onScan: (data: string) => void;
+  size?: string | number | undefined;
+  style?: React.CSSProperties | undefined;
 }
 
 const DEFAULT_DELAY = 150;
+
 const DEFAULT_ERROR = (error: Error): void => {
   console.error('@polkadot/react-qr:Scan', error.message);
 };
 
-class Scan extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, delay = DEFAULT_DELAY, size, style } = this.props;
+function Scan ({ className = '', delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style = {} }: Props): React.ReactElement<Props> {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const controlsRef = useRef<IScannerControls | null>(null);
 
-    return (
-      <div
-        className={className}
-        style={createImgSize(size)}
-      >
-        <Reader
-          className='ui--qr-Scan'
-          delay={delay}
-          onError={this.onError}
-          onScan={this.onScan}
-          style={style}
-        />
-      </div>
-    );
-  }
+  const containerStyle = useMemo(
+    () => createImgSize(size),
+    [size]
+  );
 
-  private onError = (error: Error): void => {
-    const { onError = DEFAULT_ERROR } = this.props;
+  const _onError = useCallback(
+    (error: Error) => onError(error),
+    [onError]
+  );
 
-    onError(error);
-  }
+  useEffect(() => {
+    const codeReader = new BrowserQRCodeReader();
 
-  private onScan = (data: string | null): void => {
-    const { onScan } = this.props;
+    const startScanning = async () => {
+      try {
+        const videoInputDevices = await BrowserQRCodeReader.listVideoInputDevices();
+        const selectedDeviceId = videoInputDevices[0].deviceId;
 
-    if (!data || !onScan) {
-      return;
-    }
+        controlsRef.current = await codeReader.decodeFromVideoDevice(
+          selectedDeviceId,
+          videoRef.current ?? undefined,
+          (result, error) => {
+            if (result) {
+              onScan(result.getText());
+            }
 
-    onScan(data);
-  }
+            if (error && !(error instanceof Error)) {
+              _onError(new Error(error));
+            }
+          }
+        );
+      } catch (error) {
+        _onError(error instanceof Error ? error : new Error('Unknown error occurred'));
+      }
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    const timeoutId = setTimeout(startScanning, delay);
+
+    return () => {
+      clearTimeout(timeoutId);
+
+      if (controlsRef.current) {
+        controlsRef.current.stop();
+      }
+    };
+  }, [onScan, _onError, delay]);
+
+  return (
+    <StyledDiv
+      className={className}
+      style={containerStyle}
+    >
+      <video
+        className='ui--qr-Scan'
+        ref={videoRef}
+        style={style}
+      />
+    </StyledDiv>
+  );
 }
 
-export default styled(Scan)`
+const StyledDiv = styled.div`
   .ui--qr-Scan {
     display: inline-block;
     height: 100%;
+    transform: matrix(-1, 0, 0, 1, 0, 0);
     width: 100%;
-
-    video {
-      margin: 0;
-    }
   }
 `;
+
+export const QrScan = React.memo(Scan);

packages/react-qr/src/ScanAddress.tsx

@@ -1,48 +1,82 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
+import type { HexString } from '@polkadot/util/types';
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import { ADDRESS_PREFIX } from './constants';
-import QrScan from './Scan';
 import { decodeAddress } from '@polkadot/util-crypto';
 
-interface Props extends BaseProps {
+import { ADDRESS_PREFIX, SEED_PREFIX } from './constants.js';
+import { QrScan } from './Scan.js';
+
+interface ScanType {
+  isAddress: boolean;
+  content: string;
+  genesisHash: HexString | null;
+  name?: string | undefined;
+}
+
+interface Props {
+  className?: string;
   onError?: (error: Error) => void;
-  onScan?: (data: string) => void;
+  onScan: (scanned: ScanType) => void;
+  size?: string | number;
+  style?: React.CSSProperties;
+  isEthereum?: boolean
 }
 
-export default class ScanAddress extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, onError, style } = this.props;
+function ScanAddress ({ className, isEthereum, onError, onScan, size, style }: Props): React.ReactElement<Props> {
+  const _onScan = useCallback(
+    (data: string | null): void => {
+      if (data) {
+        try {
+          let prefix: string;
+          let content: string;
+          let genesisHash: string | null;
+          let name: string[];
 
-    return (
-      <QrScan
-        className={className}
-        onError={onError}
-        onScan={this.onScan}
-        style={style}
-      />
-    );
-  }
+          if (!isEthereum) {
+            [prefix, content, genesisHash, ...name] = data.split(':');
+          } else {
+            [prefix, content, ...name] = data.split(':');
+            genesisHash = null;
+            content = content.substring(0, 42);
+          }
 
-  private onScan = (data: string | null): void => {
-    const { onScan } = this.props;
+          const expectedPrefix = (isEthereum ? 'ethereum' : ADDRESS_PREFIX);
+          const isValidPrefix = (prefix === expectedPrefix) || (prefix === SEED_PREFIX);
 
-    if (!data || !onScan || !data.startsWith(ADDRESS_PREFIX)) {
-      return;
-    }
+          if (!isValidPrefix) {
+            throw new Error(`Invalid prefix received, expected '${expectedPrefix} or ${SEED_PREFIX}' , found '${prefix}'`);
+          }
 
-    const address = data.substr(ADDRESS_PREFIX.length);
+          const isAddress = prefix === expectedPrefix;
 
-    try {
-      decodeAddress(address);
-      onScan(address);
-    } catch (error) {
-      console.error('@polkadot/react-qr:QrScanAddress', error.message);
-    }
-  }
+          if (isAddress && !isEthereum) {
+            decodeAddress(content);
+          }
+
+          onScan({ content, genesisHash: genesisHash as HexString, isAddress, name: name?.length ? name.join(':') : undefined });
+        } catch (error) {
+          onError && onError(error as Error);
+
+          console.error('@polkadot/react-qr:QrScanAddress', (error as Error).message, data);
+        }
+      }
+    },
+    [onScan, onError, isEthereum]
+  );
+
+  return (
+    <QrScan
+      className={className}
+      onError={onError}
+      onScan={_onScan}
+      size={size}
+      style={style}
+    />
+  );
 }
+
+export const QrScanAddress = React.memo(ScanAddress);

packages/react-qr/src/ScanSignature.tsx

@@ -1,40 +1,39 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
+import type { HexString } from '@polkadot/util/types';
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import QrScan from './Scan';
-import { encodeString } from './util';
+import { QrScan } from './Scan.js';
 
-interface Props extends BaseProps {
+interface ScanType {
+  signature: HexString;
+}
+
+interface Props {
+  className?: string;
   onError?: (error: Error) => void;
-  onScan?: (data: Uint8Array) => void;
+  onScan: (scanned: ScanType) => void;
+  size?: string | number;
+  style?: React.CSSProperties;
 }
 
-export default class ScanSignature extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, onError, style } = this.props;
+function ScanSignature ({ className, onError, onScan, size, style }: Props): React.ReactElement<Props> {
+  const _onScan = useCallback(
+    (signature: string | null) => signature && onScan({ signature: `0x${signature}` }),
+    [onScan]
+  );
 
-    return (
-      <QrScan
-        className={className}
-        onError={onError}
-        onScan={this.onScan}
-        style={style}
-      />
-    );
-  }
-
-  private onScan = (data: string | null): void => {
-    const { onScan } = this.props;
-
-    if (!data || !onScan) {
-      return;
-    }
-
-    onScan(encodeString(data));
-  }
+  return (
+    <QrScan
+      className={className}
+      onError={onError}
+      onScan={_onScan}
+      size={size}
+      style={style}
+    />
+  );
 }
+
+export const QrScanSignature = React.memo(ScanSignature);

packages/react-qr/src/bundle.ts

@@ -0,0 +1,9 @@
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export { QrDisplayAddress } from './DisplayAddress.js';
+export { QrDisplayPayload } from './DisplayPayload.js';
+export { QrNetworkSpecs } from './NetworkSpecs.js';
+export { packageInfo } from './packageInfo.js';
+export { QrScanAddress } from './ScanAddress.js';
+export { QrScanSignature } from './ScanSignature.js';

packages/react-qr/src/constants.ts

@@ -1,25 +1,12 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-const DEFAULT_IMG_SIZE = 300;
-const ADDRESS_PREFIX = 'substrate:';
-const FRAME_SIZE = 2048;
-const SUBSTRATE_ID = new Uint8Array([0x53]);
-const CRYPTO_SR25519 = new Uint8Array([0x01]);
-const CMD_SIGN_TX = new Uint8Array([0]);
-const CMD_SIGN_TX_HASH = new Uint8Array([1]);
-const CMD_SIGN_IMMORTAL_TX = new Uint8Array([2]);
-const CMD_SIGN_MSG = new Uint8Array([3]);
-
-export {
-  ADDRESS_PREFIX,
-  CMD_SIGN_TX,
-  CMD_SIGN_TX_HASH,
-  CMD_SIGN_IMMORTAL_TX,
-  CMD_SIGN_MSG,
-  CRYPTO_SR25519,
-  DEFAULT_IMG_SIZE,
-  FRAME_SIZE,
-  SUBSTRATE_ID
-};
+export const ADDRESS_PREFIX = 'substrate';
+export const SEED_PREFIX = 'secret';
+export const FRAME_SIZE = 1024;
+export const SUBSTRATE_ID = new Uint8Array([0x53]);
+export const CRYPTO_SR25519 = new Uint8Array([0x01]);
+export const CMD_SIGN_TX = new Uint8Array([0]);
+export const CMD_SIGN_TX_HASH = new Uint8Array([1]);
+export const CMD_SIGN_IMMORTAL_TX = new Uint8Array([2]);
+export const CMD_SIGN_MSG = new Uint8Array([3]);

packages/react-qr/src/index.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import './packageDetect.js';
+
+export * from './bundle.js';

packages/react-qr/src/index.tsx

@@ -1,8 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export { default as QrDisplayAddress } from './DisplayAddress';
-export { default as QrDisplayPayload } from './DisplayPayload';
-export { default as QrScanAddress } from './ScanAddress';
-export { default as QrScanSignature } from './ScanSignature';

packages/react-qr/src/packageDetect.ts

@@ -0,0 +1,11 @@
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Do not edit, auto-generated by @polkadot/dev
+// (packageInfo imports will be kept as-is, user-editable)
+
+import { detectPackage } from '@polkadot/util';
+
+import { packageInfo } from './packageInfo.js';
+
+detectPackage(packageInfo, null, []);

packages/react-qr/src/packageInfo.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Do not edit, auto-generated by @polkadot/dev
+
+export const packageInfo = { name: '@polkadot/react-qr', path: 'auto', type: 'auto', version: '3.14.1' };

packages/react-qr/src/qrcode.ts

@@ -1,13 +1,15 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import qrcode from 'qrcode-generator';
+import _qrcode from 'qrcode-generator';
+
+// A small hurdle to jump through, just to get the default/default correct (as generated)
+const qrcode: typeof _qrcode = _qrcode;
 
 // HACK The default function take string -> number[], the Uint8array is compatible
 // with that signature and the use thereof
-// @ts-ignore
-qrcode.stringToBytes = (data: Uint8Array): Uint8Array =>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
+(qrcode as any).stringToBytes = (data: Uint8Array): Uint8Array =>
   data;
 
-export default qrcode;
+export { qrcode };

packages/react-qr/src/styled.ts

@@ -0,0 +1,4 @@
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export { styled } from 'styled-components';

packages/react-qr/src/types.ts

@@ -1,8 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export interface BaseProps {
-  className?: string;
-  style?: Record<string, string | number>;
-}

packages/react-qr/src/util.spec.ts

@@ -1,12 +1,13 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import { u8aConcat, u8aToHex, u8aToString } from '@polkadot/util';
-
-import { createAddressPayload, createSignPayload, createFrames, decodeString, encodeNumber, encodeString } from './util';
 import { randomAsU8a } from '@polkadot/util-crypto';
 
+import { createAddressPayload, createFrames, createSignPayload, decodeString, encodeNumber, encodeString } from './util.js';
+
 describe('util', (): void => {
   describe('Uint8Array <-> string', (): void => {
     let u8a: Uint8Array;
@@ -50,9 +51,13 @@ describe('util', (): void => {
     it('encodes an address properly', (): void => {
       expect(
         u8aToString(
-          createAddressPayload('5GKhfyctwmW5LQdGaHTyU9qq2yDtggdJo719bj5ZUxnVGtmX')
+          createAddressPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', '0x')
         )
-      ).toEqual('substrate:5GKhfyctwmW5LQdGaHTyU9qq2yDtggdJo719bj5ZUxnVGtmX');
+      ).toEqual(
+        'substrate:' +
+        '5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq:' +
+        '0x'
+      );
     });
   });
 
@@ -60,7 +65,7 @@ describe('util', (): void => {
     it('encodes a payload properly', (): void => {
       expect(
         u8aToHex(
-          createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', 3, 'THIS IS SPARTA!')
+          createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', 3, 'THIS IS SPARTA!', '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe')
         )
       ).toEqual(
         '0x' + // prefix
@@ -68,7 +73,8 @@ describe('util', (): void => {
         '01' + // sr25519
         '03' + // sign tx
         'f4cd755672a8f9542ca9da4fbf2182e79135d94304002e6a09ffc96fef6e6c4c' + // publickey
-        '544849532049532053504152544121' // THIS IS SPARTA!
+        '544849532049532053504152544121' + // THIS IS SPARTA!
+        'b0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe' // genesisHash
       );
     });
   });
@@ -77,7 +83,7 @@ describe('util', (): void => {
     it('encodes frames properly', (): void => {
       expect(
         createFrames(
-          createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', 0, '0x12345678')
+          createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', 0, '0x12345678', '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe')
         ).map((u8a): string => u8aToHex(u8a))
       ).toEqual([
         '0x' +
@@ -86,7 +92,8 @@ describe('util', (): void => {
         '0000' + // index
         '530100' + // payload info, substrate + sr25519 + signtx
         'f4cd755672a8f9542ca9da4fbf2182e79135d94304002e6a09ffc96fef6e6c4c' + // publicKey
-        '12345678' // data
+        '12345678' + // data
+        'b0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe' // genesisHash
       ]);
     });
   });

packages/react-qr/src/util.ts

@@ -1,11 +1,10 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { u8aConcat, u8aToU8a } from '@polkadot/util';
+import { isString, u8aConcat, u8aToU8a } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
-import { ADDRESS_PREFIX, CRYPTO_SR25519, DEFAULT_IMG_SIZE, FRAME_SIZE, SUBSTRATE_ID } from './constants';
+import { ADDRESS_PREFIX, CRYPTO_SR25519, FRAME_SIZE, SUBSTRATE_ID } from './constants.js';
 
 const MULTIPART = new Uint8Array([0]);
 
@@ -14,9 +13,10 @@ export function encodeNumber (value: number): Uint8Array {
 }
 
 export function encodeString (value: string): Uint8Array {
-  const u8a = new Uint8Array(value.length);
+  const count = value.length;
+  const u8a = new Uint8Array(count);
 
-  for (let i = 0; i < value.length; i++) {
+  for (let i = 0; i < count; i++) {
     u8a[i] = value.charCodeAt(i);
   }
 
@@ -29,20 +29,18 @@ export function decodeString (value: Uint8Array): string {
   }, '');
 }
 
-export function createAddressPayload (address: string): Uint8Array {
-  return u8aConcat(
-    encodeString(ADDRESS_PREFIX),
-    encodeString(address)
-  );
+export function createAddressPayload (address: string, genesisHash: string): Uint8Array {
+  return encodeString(`${ADDRESS_PREFIX}:${address}:${genesisHash}`);
 }
 
-export function createSignPayload (address: string, cmd: number, payload: string | Uint8Array): Uint8Array {
+export function createSignPayload (address: string, cmd: number, payload: string | Uint8Array, genesisHash: string | Uint8Array): Uint8Array {
   return u8aConcat(
     SUBSTRATE_ID,
     CRYPTO_SR25519,
     new Uint8Array([cmd]),
     decodeAddress(address),
-    u8aToU8a(payload)
+    u8aToU8a(payload),
+    u8aToU8a(genesisHash)
   );
 }
 
@@ -66,8 +64,17 @@ export function createFrames (input: Uint8Array): Uint8Array[] {
   );
 }
 
-export function createImgSize (size: number = DEFAULT_IMG_SIZE): Record<string, string> {
-  const height = `${size}px`;
+export function createImgSize (size?: string | number): Record<string, string> {
+  if (!size) {
+    return {
+      height: 'auto',
+      width: '100%'
+    };
+  }
+
+  const height = isString(size)
+    ? size
+    : `${size}px`;
 
   return {
     height,

packages/react-qr/tsconfig.build.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "..",
+    "outDir": "./build",
+    "rootDir": "./src"
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ],
+  "references": [
+    { "path": "../ui-settings/tsconfig.build.json" }
+  ]
+}

packages/react-qr/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "..",
+    "outDir": "./build",
+    "rootDir": "./src",
+    "emitDeclarationOnly": false,
+    "noEmit": true
+  },
+  "include": [
+    "**/*.spec.ts"
+  ],
+  "references": [
+    { "path": "../react-qr/tsconfig.build.json" }
+  ]
+}

packages/reactnative-identicon/LICENSE

@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.

packages/reactnative-identicon/package.json

@@ -1,23 +1,39 @@
 {
-  "name": "@polkadot/reactnative-identicon",
-  "version": "0.42.1",
-  "description": "Renders an SVG picture representing an address",
-  "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.5.5",
-    "@polkadot/ui-shared": "^0.42.1",
-    "react-native-svg": "^9.5.3"
+  "bugs": "https://github.com/polkadot-js/ui/issues",
+  "description": "Renders an SVG picture representing an address",
+  "engines": {
+    "node": ">=18"
   },
-  "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
+  "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/reactnative-identicon#readme",
+  "license": "Apache-2.0",
+  "name": "@polkadot/reactnative-identicon",
+  "repository": {
+    "directory": "packages/reactnative-identicon",
+    "type": "git",
+    "url": "https://github.com/polkadot-js/ui.git"
+  },
+  "sideEffects": [
+    "./packageDetect.js",
+    "./packageDetect.cjs"
+  ],
+  "type": "module",
+  "version": "3.14.1",
+  "main": "index.js",
+  "dependencies": {
+    "@polkadot/ui-shared": "3.14.1",
+    "@polkadot/util": "^13.5.1",
+    "@polkadot/util-crypto": "^13.5.1",
+    "react-native-svg": "^14.1.0",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "react-native": "^0.60.4"
+    "@types/react-native": "^0.72.8"
+  },
+  "peerDependencies": {
+    "@polkadot/util": "*",
+    "@polkadot/util-crypto": "*",
+    "react": "*",
+    "react-native": "*"
   }
 }

packages/reactnative-identicon/src/Identicon.tsx

@@ -1,15 +1,15 @@
-// Copyright 2017-2019 @polkadot/reactnative-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Prefix } from '@polkadot/util-crypto/address/types';
-import { Props as ComponentProps } from './types';
+import type { Prefix } from '@polkadot/util-crypto/address/types';
+import type { Props as ComponentProps } from './types.js';
 
 import React from 'react';
+
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
-import { Empty, Polkadot } from './icons';
+import { Empty, Polkadot } from './icons/index.js';
 
 const Fallback = Polkadot;
 
@@ -33,7 +33,7 @@ const Components: Record<string, React.ComponentType<ComponentProps>> = {
 };
 
 export default class IdentityIcon extends React.PureComponent<Props, State> {
-  public state: State = {
+  public override state: State = {
     address: '',
     publicKey: '0x'
   };
@@ -54,7 +54,7 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
       return address === prevState.address
         ? null
         : { address, publicKey };
-    } catch (error) {
+    } catch {
       return {
         address: '',
         publicKey: '0x'
@@ -62,8 +62,8 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
     }
   }
 
-  public render (): React.ReactNode {
-    const { theme = DEFAULT_THEME, size = DEFAULT_SIZE } = this.props;
+  public override render (): React.ReactNode {
+    const { size = DEFAULT_SIZE, theme = DEFAULT_THEME } = this.props;
     const { address, publicKey } = this.state;
 
     const Component = !address

packages/reactnative-identicon/src/bundle.ts

@@ -0,0 +1,5 @@
+// Copyright 2017-2025 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './icons/index.js';
+export { packageInfo } from './packageInfo.js';

packages/reactnative-identicon/src/icons/Empty.tsx

@@ -1,32 +1,27 @@
-// Copyright 2017-2019 @polkadot/reactnative-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Props } from '../types';
+import type { Props } from '../types.js';
 
 import React from 'react';
 import { View } from 'react-native';
-import Svg, { Circle } from 'react-native-svg';
+import { Circle, Svg } from 'react-native-svg';
 
-export default class Empty extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { size } = this.props;
-
-    return (
-      <View>
-        <Svg
-          height={size}
-          viewBox='0 0 64 64'
-          width={size}
-        >
-          <Circle
-            cx='32'
-            cy='32'
-            r='32'
-            fill='#eee'
-          />
-        </Svg>
-      </View>
-    );
-  }
+export default function Empty ({ size }: Props): React.ReactElement<Props> {
+  return (
+    <View>
+      <Svg
+        height={size}
+        viewBox='0 0 64 64'
+        width={size}
+      >
+        <Circle
+          cx='32'
+          cy='32'
+          fill='#eee'
+          r='32'
+        />
+      </Svg>
+    </View>
+  );
 }

packages/reactnative-identicon/src/icons/Polkadot.tsx

@@ -1,45 +1,43 @@
-// Copyright 2018 @polkadot/reactnative-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2018-2025 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Props as BaseProps } from '../types';
+import type { Circle as CircleType } from '@polkadot/ui-shared/icons/types';
+import type { Props } from '../types.js';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View } from 'react-native';
-import Svg, { Circle as SvgCircle } from 'react-native-svg';
-import generateIcon, { Circle as CircleType } from '@polkadot/ui-shared/polkadotIcon';
+import { Circle as SvgCircle, Svg } from 'react-native-svg';
 
-interface Props extends BaseProps {
-  sixPoint?: boolean;
+import { polkadotIcon } from '@polkadot/ui-shared';
+
+function renderCircle ({ cx, cy, fill, r }: CircleType, key: number): React.ReactNode {
+  return (
+    <SvgCircle
+      cx={cx}
+      cy={cy}
+      fill={fill}
+      key={key}
+      r={r}
+    />
+  );
 }
 
-export default class Identicon extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { address, sixPoint, size } = this.props;
+export default function Identicon ({ address, isAlternative = false, size }: Props): React.ReactElement<Props> {
+  const circles = useMemo(
+    () => polkadotIcon(address, { isAlternative }),
+    [address, isAlternative]
+  );
 
-    return (
-      <View>
-        <Svg
-          height={size}
-          id={address}
-          width={size}
-          viewBox='0 0 64 64'
-        >
-          {generateIcon(address, sixPoint).map(this.renderCircle)}
-        </Svg>
-      </View>
-    );
-  }
-
-  private renderCircle = ({ cx, cy, r, fill }: CircleType, key: number): React.ReactNode => {
-    return (
-      <SvgCircle
-        key={key}
-        cx={cx}
-        cy={cy}
-        r={r}
-        fill={fill}
-      />
-    );
-  }
+  return (
+    <View>
+      <Svg
+        height={size}
+        id={address}
+        viewBox='0 0 64 64'
+        width={size}
+      >
+        {circles.map(renderCircle)}
+      </Svg>
+    </View>
+  );
 }

packages/reactnative-identicon/src/icons/index.ts

@@ -1,6 +1,5 @@
-// Copyright 2017-2019 @polkadot/reactnative-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-export { default as Empty } from './Empty';
-export { default as Polkadot } from './Polkadot';
+export { default as Empty } from './Empty.js';
+export { default as Polkadot } from './Polkadot.js';

packages/reactnative-identicon/src/index.ts

@@ -1,8 +1,10 @@
-// Copyright 2017-2019 @polkadot/reactnative-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2025 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import Identicon from './Identicon';
-export * from './icons';
+import './packageDetect.js';
+
+import Identicon from './Identicon.js';
+
+export * from './bundle.js';
 
 export default Identicon;

packages/reactnative-identicon/src/packageDetect.ts

@@ -0,0 +1,12 @@
+// Copyright 2017-2025 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Do not edit, auto-generated by @polkadot/dev
+// (packageInfo imports will be kept as-is, user-editable)
+
+import { packageInfo as sharedInfo } from '@polkadot/ui-shared/packageInfo';
+import { detectPackage } from '@polkadot/util';
+
+import { packageInfo } from './packageInfo.js';
+
+detectPackage(packageInfo, null, [sharedInfo]);

packages/reactnative-identicon/src/packageInfo.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2025 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Do not edit, auto-generated by @polkadot/dev
+
+export const packageInfo = { name: '@polkadot/reactnative-identicon', path: 'auto', type: 'auto', version: '3.14.1' };

packages/reactnative-identicon/src/type-stubs.d.ts

@@ -1,16 +0,0 @@
-// Copyright 2018 @polkadot/reactnative-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-// NOTE This is not clean since we miss the proper RN typings. However it does
-// conflict with everything else, so... well, stick with the minimum here
-
-declare module 'react-native' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface GestureResponderHandlers {}
-  type ImageProperties = Record<string, string>;
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface ViewProperties {}
-
-  export const View: React.ComponentClass;
-}

packages/reactnative-identicon/src/types.ts

@@ -1,9 +1,9 @@
-// Copyright 2018 @polkadot/reactnative-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2018-2025 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 export interface Props {
   address: string;
+  isAlternative?: boolean;
   publicKey: string;
   size: number;
 }

packages/reactnative-identicon/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "..",
+    "outDir": "./build",
+    "rootDir": "./src"
+  },
+  "references": [
+    { "path": "../ui-shared/tsconfig.build.json" }
+  ]
+}

packages/ui-assets/LICENSE

@@ -1,201 +0,0 @@
-                              Apache License
-                        Version 2.0, January 2004
-                    http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-  "License" shall mean the terms and conditions for use, reproduction,
-  and distribution as defined by Sections 1 through 9 of this document.
-
-  "Licensor" shall mean the copyright owner or entity authorized by
-  the copyright owner that is granting the License.
-
-  "Legal Entity" shall mean the union of the acting entity and all
-  other entities that control, are controlled by, or are under common
-  control with that entity. For the purposes of this definition,
-  "control" means (i) the power, direct or indirect, to cause the
-  direction or management of such entity, whether by contract or
-  otherwise, or (ii) ownership of fifty percent (50%) or more of the
-  outstanding shares, or (iii) beneficial ownership of such entity.
-
-  "You" (or "Your") shall mean an individual or Legal Entity
-  exercising permissions granted by this License.
-
-  "Source" form shall mean the preferred form for making modifications,
-  including but not limited to software source code, documentation
-  source, and configuration files.
-
-  "Object" form shall mean any form resulting from mechanical
-  transformation or translation of a Source form, including but
-  not limited to compiled object code, generated documentation,
-  and conversions to other media types.
-
-  "Work" shall mean the work of authorship, whether in Source or
-  Object form, made available under the License, as indicated by a
-  copyright notice that is included in or attached to the work
-  (an example is provided in the Appendix below).
-
-  "Derivative Works" shall mean any work, whether in Source or Object
-  form, that is based on (or derived from) the Work and for which the
-  editorial revisions, annotations, elaborations, or other modifications
-  represent, as a whole, an original work of authorship. For the purposes
-  of this License, Derivative Works shall not include works that remain
-  separable from, or merely link (or bind by name) to the interfaces of,
-  the Work and Derivative Works thereof.
-
-  "Contribution" shall mean any work of authorship, including
-  the original version of the Work and any modifications or additions
-  to that Work or Derivative Works thereof, that is intentionally
-  submitted to Licensor for inclusion in the Work by the copyright owner
-  or by an individual or Legal Entity authorized to submit on behalf of
-  the copyright owner. For the purposes of this definition, "submitted"
-  means any form of electronic, verbal, or written communication sent
-  to the Licensor or its representatives, including but not limited to
-  communication on electronic mailing lists, source code control systems,
-  and issue tracking systems that are managed by, or on behalf of, the
-  Licensor for the purpose of discussing and improving the Work, but
-  excluding communication that is conspicuously marked or otherwise
-  designated in writing by the copyright owner as "Not a Contribution."
-
-  "Contributor" shall mean Licensor and any individual or Legal Entity
-  on behalf of whom a Contribution has been received by Licensor and
-  subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  copyright license to reproduce, prepare Derivative Works of,
-  publicly display, publicly perform, sublicense, and distribute the
-  Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-  this License, each Contributor hereby grants to You a perpetual,
-  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-  (except as stated in this section) patent license to make, have made,
-  use, offer to sell, sell, import, and otherwise transfer the Work,
-  where such license applies only to those patent claims licensable
-  by such Contributor that are necessarily infringed by their
-  Contribution(s) alone or by combination of their Contribution(s)
-  with the Work to which such Contribution(s) was submitted. If You
-  institute patent litigation against any entity (including a
-  cross-claim or counterclaim in a lawsuit) alleging that the Work
-  or a Contribution incorporated within the Work constitutes direct
-  or contributory patent infringement, then any patent licenses
-  granted to You under this License for that Work shall terminate
-  as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-  Work or Derivative Works thereof in any medium, with or without
-  modifications, and in Source or Object form, provided that You
-  meet the following conditions:
-
-  (a) You must give any other recipients of the Work or
-      Derivative Works a copy of this License; and
-
-  (b) You must cause any modified files to carry prominent notices
-      stating that You changed the files; and
-
-  (c) You must retain, in the Source form of any Derivative Works
-      that You distribute, all copyright, patent, trademark, and
-      attribution notices from the Source form of the Work,
-      excluding those notices that do not pertain to any part of
-      the Derivative Works; and
-
-  (d) If the Work includes a "NOTICE" text file as part of its
-      distribution, then any Derivative Works that You distribute must
-      include a readable copy of the attribution notices contained
-      within such NOTICE file, excluding those notices that do not
-      pertain to any part of the Derivative Works, in at least one
-      of the following places: within a NOTICE text file distributed
-      as part of the Derivative Works; within the Source form or
-      documentation, if provided along with the Derivative Works; or,
-      within a display generated by the Derivative Works, if and
-      wherever such third-party notices normally appear. The contents
-      of the NOTICE file are for informational purposes only and
-      do not modify the License. You may add Your own attribution
-      notices within Derivative Works that You distribute, alongside
-      or as an addendum to the NOTICE text from the Work, provided
-      that such additional attribution notices cannot be construed
-      as modifying the License.
-
-  You may add Your own copyright statement to Your modifications and
-  may provide additional or different license terms and conditions
-  for use, reproduction, or distribution of Your modifications, or
-  for any such Derivative Works as a whole, provided Your use,
-  reproduction, and distribution of the Work otherwise complies with
-  the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-  any Contribution intentionally submitted for inclusion in the Work
-  by You to the Licensor shall be under the terms and conditions of
-  this License, without any additional terms or conditions.
-  Notwithstanding the above, nothing herein shall supersede or modify
-  the terms of any separate license agreement you may have executed
-  with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-  names, trademarks, service marks, or product names of the Licensor,
-  except as required for reasonable and customary use in describing the
-  origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-  agreed to in writing, Licensor provides the Work (and each
-  Contributor provides its Contributions) on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-  implied, including, without limitation, any warranties or conditions
-  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-  PARTICULAR PURPOSE. You are solely responsible for determining the
-  appropriateness of using or redistributing the Work and assume any
-  risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-  whether in tort (including negligence), contract, or otherwise,
-  unless required by applicable law (such as deliberate and grossly
-  negligent acts) or agreed to in writing, shall any Contributor be
-  liable to You for damages, including any direct, indirect, special,
-  incidental, or consequential damages of any character arising as a
-  result of this License or out of the use or inability to use the
-  Work (including but not limited to damages for loss of goodwill,
-  work stoppage, computer failure or malfunction, or any and all
-  other commercial damages or losses), even if such Contributor
-  has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-  the Work or Derivative Works thereof, You may choose to offer,
-  and charge a fee for, acceptance of support, warranty, indemnity,
-  or other liability obligations and/or rights consistent with this
-  License. However, in accepting such obligations, You may act only
-  on Your own behalf and on Your sole responsibility, not on behalf
-  of any other Contributor, and only if You agree to indemnify,
-  defend, and hold each Contributor harmless for any liability
-  incurred by, or claims asserted against, such Contributor by reason
-  of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-  To apply the Apache License to your work, attach the following
-  boilerplate notice, with the fields enclosed by brackets "[]"
-  replaced with your own identifying information. (Don't include
-  the brackets!)  The text should be enclosed in the appropriate
-  comment syntax for the file format. We also recommend that a
-  file or class name and description of purpose be included on the
-  same "printed page" as the copyright notice for easier
-  identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.

packages/ui-assets/README.md

@@ -1,3 +0,0 @@
-# @polkadot/ui-assets
-
-Static assets including images shared across projects

packages/ui-assets/package.json

@@ -1,14 +0,0 @@
-{
-  "name": "@polkadot/ui-assets",
-  "version": "0.42.1",
-  "description": "Static assets shared accross projects",
-  "main": "index.js",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@babel/runtime": "^7.5.5"
-  }
-}

packages/ui-assets/src/empty.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="15 15 140 140" style="enable-background:new 0 0 170 170;" xml:space="preserve">
-<style type="text/css">
-	.bg0{fill:#888;}
-</style>
-<g><circle class="bg0" cx="85" cy="85" r="70"/></g>
-</svg>

packages/ui-assets/src/polkadot-circle.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="15 15 140 140" style="enable-background:new 0 0 170 170;" xml:space="preserve">
-<style type="text/css">
-	.bg0{fill:#fff;}
-	.st0{fill:#E6007A;}
-</style>
-<g>
-	<circle class="bg0" cx="85" cy="85" r="70"/>
-	<g>
-		<path d="M85,34.7c-20.8,0-37.8,16.9-37.8,37.8c0,4.2,0.7,8.3,2,12.3c0.9,2.7,3.9,4.2,6.7,3.3c2.7-0.9,4.2-3.9,3.3-6.7 c-1.1-3.1-1.6-6.4-1.5-9.7C58.1,57.6,69.5,46,83.6,45.3c15.7-0.8,28.7,11.7,28.7,27.2c0,14.5-11.4,26.4-25.7,27.2 c0,0-5.3,0.3-7.9,0.7c-1.3,0.2-2.3,0.4-3,0.5c-0.3,0.1-0.6-0.2-0.5-0.5l0.9-4.4L81,73.4c0.6-2.8-1.2-5.6-4-6.2 c-2.8-0.6-5.6,1.2-6.2,4c0,0-11.8,55-11.9,55.6c-0.6,2.8,1.2,5.6,4,6.2c2.8,0.6,5.6-1.2,6.2-4c0.1-0.6,1.7-7.9,1.7-7.9 c1.2-5.6,5.8-9.7,11.2-10.4c1.2-0.2,5.9-0.5,5.9-0.5c19.5-1.5,34.9-17.8,34.9-37.7C122.8,51.6,105.8,34.7,85,34.7z"/>
-	</g>
-</g>
-<path class="st0" d="M87.7,121.7c-3.4-0.7-6.8,1.4-7.5,4.9c-0.7,3.4,1.4,6.8,4.9,7.5c3.4,0.7,6.8-1.4,7.5-4.9 C93.3,125.7,91.2,122.4,87.7,121.7z"/>
-</svg>

packages/ui-assets/src/polkadot-dots.svg

@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 436.22 436.22"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#f2f2f2;}.cls-4{fill:#4d4d4d;}.cls-5{fill:#d64ca8;}</style><clipPath id="clip-path" transform="translate(-782.01 -781.74)"><circle class="cls-1" cx="1001.02" cy="1001.98" r="215.98"/></clipPath></defs><title>Polkadot dot logo</title><g class="cls-2"><rect class="cls-3" x="782.01" y="781.74" width="436.22" height="436.22" transform="translate(-781.74 1218.23) rotate(-90)"/><circle class="cls-4" cx="84.89" cy="298" r="22.44"/><circle class="cls-4" cx="84.89" cy="222.44" r="22.44"/><circle class="cls-4" cx="84.89" cy="146.89" r="22.44"/><circle class="cls-4" cx="153.81" cy="334.98" r="22.44"/><circle class="cls-4" cx="153.81" cy="259.43" r="22.44"/><circle class="cls-4" cx="153.81" cy="183.88" r="22.44"/><circle class="cls-4" cx="153.81" cy="108.33" r="22.44"/><circle class="cls-4" cx="220.2" cy="373.55" r="22.44"/><circle class="cls-4" cx="220.2" cy="298" r="22.44"/><circle class="cls-5" cx="220.2" cy="222.44" r="22.44"/><circle class="cls-4" cx="220.2" cy="146.89" r="22.44"/><circle class="cls-4" cx="220.2" cy="71.34" r="22.44"/><circle class="cls-4" cx="289.12" cy="334.98" r="22.44"/><circle class="cls-4" cx="289.12" cy="259.43" r="22.44"/><circle class="cls-4" cx="289.12" cy="183.88" r="22.44"/><circle class="cls-4" cx="289.12" cy="108.33" r="22.44"/><circle class="cls-4" cx="355.5" cy="298" r="22.44"/><circle class="cls-4" cx="355.5" cy="222.44" r="22.44"/><circle class="cls-4" cx="355.5" cy="146.89" r="22.44"/></g></svg>

packages/ui-assets/src/polkadot-js.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="15 15 140 140" style="enable-background:new 0 0 170 170;zoom: 1;" xml:space="preserve">
-<style type="text/css">
-	.bg0{fill:#FF8C00}
-	.st0{fill:#FFFFFF;}
-</style>
-<g>
-	<circle class="bg0" cx="85" cy="85" r="70"/>
-	<g>
-		<path class="st0" d="M85,34.7c-20.8,0-37.8,16.9-37.8,37.8c0,4.2,0.7,8.3,2,12.3c0.9,2.7,3.9,4.2,6.7,3.3c2.7-0.9,4.2-3.9,3.3-6.7 c-1.1-3.1-1.6-6.4-1.5-9.7C58.1,57.6,69.5,46,83.6,45.3c15.7-0.8,28.7,11.7,28.7,27.2c0,14.5-11.4,26.4-25.7,27.2 c0,0-5.3,0.3-7.9,0.7c-1.3,0.2-2.3,0.4-3,0.5c-0.3,0.1-0.6-0.2-0.5-0.5l0.9-4.4L81,73.4c0.6-2.8-1.2-5.6-4-6.2 c-2.8-0.6-5.6,1.2-6.2,4c0,0-11.8,55-11.9,55.6c-0.6,2.8,1.2,5.6,4,6.2c2.8,0.6,5.6-1.2,6.2-4c0.1-0.6,1.7-7.9,1.7-7.9 c1.2-5.6,5.8-9.7,11.2-10.4c1.2-0.2,5.9-0.5,5.9-0.5c19.5-1.5,34.9-17.8,34.9-37.7C122.8,51.6,105.8,34.7,85,34.7z M87.7,121.7 c-3.4-0.7-6.8,1.4-7.5,4.9c-0.7,3.4,1.4,6.8,4.9,7.5c3.4,0.7,6.8-1.4,7.5-4.9C93.3,125.7,91.2,122.4,87.7,121.7z"/>
-	</g>
-</g>
-</svg>

packages/ui-assets/src/polkadot-white.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="15 15 140 140" style="enable-background:new 0 0 170 170;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{fill:#E6007A;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M85,34.7c-20.8,0-37.8,16.9-37.8,37.8c0,4.2,0.7,8.3,2,12.3c0.9,2.7,3.9,4.2,6.7,3.3c2.7-0.9,4.2-3.9,3.3-6.7 c-1.1-3.1-1.6-6.4-1.5-9.7C58.1,57.6,69.5,46,83.6,45.3c15.7-0.8,28.7,11.7,28.7,27.2c0,14.5-11.4,26.4-25.7,27.2 c0,0-5.3,0.3-7.9,0.7c-1.3,0.2-2.3,0.4-3,0.5c-0.3,0.1-0.6-0.2-0.5-0.5l0.9-4.4L81,73.4c0.6-2.8-1.2-5.6-4-6.2s-5.6,1.2-6.2,4 c0,0-11.8,55-11.9,55.6c-0.6,2.8,1.2,5.6,4,6.2c2.8,0.6,5.6-1.2,6.2-4c0.1-0.6,1.7-7.9,1.7-7.9c1.2-5.6,5.8-9.7,11.2-10.4 c1.2-0.2,5.9-0.5,5.9-0.5c19.5-1.5,34.9-17.8,34.9-37.7C122.8,51.6,105.8,34.7,85,34.7z"/>
-	</g>
-</g>
-<path class="st1" d="M87.7,121.7c-3.4-0.7-6.8,1.4-7.5,4.9c-0.7,3.4,1.4,6.8,4.9,7.5c3.4,0.7,6.8-1.4,7.5-4.9 C93.3,125.7,91.2,122.4,87.7,121.7z"/>
-</svg>

packages/ui-assets/src/substrate-circle.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;" xml:space="preserve">
-<style type="text/css">
-	.bg0{fill:#fff;}
-	.st0{fill:#231F20;}
-</style>
-<g>
-	<circle class="bg0" cx="1000" cy="1000" r="1000"/>
-	<polygon class="st0" points="1000.5,1959.6 974.6,1974.5 979.3,1977.2 1000.5,1965 1000.5,1989 1862.2,1491.5 1862.2,1437.7 1000.5,1935.2"/>
-	<polygon class="st0" points="1000.5,1796.1 833.1,1892.8 841.2,1897.5 1000.5,1805.6 1000.5,1825.8 1862.2,1328.2 1862.2,1278.3 1000.5,1775.8"/>
-	<polygon class="st0" points="1000.5,1632.7 691.5,1811.1 703.2,1817.8 1000.5,1646.2 1000.5,1662.3 1862.2,1164.8 1862.2,1118.9 1000.5,1616.4"/>
-	<path class="st0" d="M1862.2,495.9l-12.7-7.3l-690 398.4l-89.6-51.7l209.7-121.1v-30.3l454.1-262.2l-22.2-12.8l-431.9,249.3v-26 L998.9,794.3l-96.8-55.9l690-398.4l-18.7-10.8l-690,398.4l-94.2-54.4l153-88.3l-28.6-16.5l537.1-310.1l-15.2-8.8L898.4,559.6 l-27.2-15.7l-153.4,88.3v31.7l-143.8,83l-10.5-6L137.9,986.5v41.8l461.8-266.6l-10.6-6.1l128.6-74.2V714l94.6,54.6l-100.2,57.8 l-7-4L137.9,1150v37.8L738,841.3l-7.1-4.1l100.1-57.8l96.8,55.9L717.8,956.6v22l-579.9,334.8v33.7l579.9-334.8v25.8l90,51.9 l-669.8,386.7v14.6l13.1,7.6l682.5-394l93.1,53.7l-208.8,119.4v27.4l-450.9,260.4l22.2,12.8l428.7-247.5v31.6l281.1-162.3l84.9,49 l-83.3,48.1v8.1l-592.1,341.8l18.7,10.8l573.4-331v8.1l116.1-67l92.1,53.2l-150.3,86.8l13.2,7.6l-71.1,41v12.2L550,1729.3l15.2,8.8 l435.3-251.3v12.1l107.3-62l21.6,12.5l150.3-86.6v-25.1l582.6-336.3v-41.8l-582.6,336.3v-15.3l-92.1-53.2l674.6-389.5v-37.8 l-707.4,408.4l-84.9-49l209.7-121.1v-27.6l582.6-336.3v-33.7l-582.6,336.3v-20.7l-94.4-54.5l677-390.9V495.9z M789.2,997.4 l209.7-121.1l89.5,51.7l-99.9,57.7l0,0l-109.8,63.4L789.2,997.4z M1208.6,997.4L998,1117.9l-93.4-53.9l96.4-55.7v0l113.3-65.4 L1208.6,997.4z"/>
-	<polygon class="st0" points="447.4,674.1 1309.1,176.6 1297.4,169.8 435.7,667.3 421.7,659.3 137.9,823.1 137.9,869 461.5,682.2"/>
-	<polygon class="st0" points="305.7,592.5 1167.6,94.9 1159.4,90.1 297.5,587.8 279.9,577.7 137.9,659.7 137.9,709.6 323.3,602.6"/>
-	<polygon class="st0" points="163.9,510.9 1026,13.1 1021.3,10.4 159.2,508.2 138.2,496.1 137.9,496.2 137.9,550.2 185,523"/>
-</g>
-</svg>

packages/ui-assets/src/substrate-white.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#eee;}
-</style>
-<g>
-	<polygon class="st0" points="1000.5,1959.6 974.6,1974.5 979.3,1977.2 1000.5,1965 1000.5,1989 1862.2,1491.5 1862.2,1437.7 1000.5,1935.2"/>
-	<polygon class="st0" points="1000.5,1796.1 833.1,1892.8 841.2,1897.5 1000.5,1805.6 1000.5,1825.8 1862.2,1328.2 1862.2,1278.3 1000.5,1775.8"/>
-	<polygon class="st0" points="1000.5,1632.7 691.5,1811.1 703.2,1817.8 1000.5,1646.2 1000.5,1662.3 1862.2,1164.8 1862.2,1118.9 1000.5,1616.4"/>
-	<path class="st0" d="M1862.2,495.9l-12.7-7.3l-690,398.4l-89.6-51.7l209.7-121.1v-30.3l454.1-262.2l-22.2-12.8l-431.9,249.3v-26 L998.9,794.3l-96.8-55.9l690-398.4l-18.7-10.8l-690,398.4l-94.2-54.4l153-88.3l-28.6-16.5l537.1-310.1l-15.2-8.8L898.4,559.6 l-27.2-15.7l-153.4,88.3v31.7l-143.8,83l-10.5-6L137.9,986.5v41.8l461.8-266.6l-10.6-6.1l128.6-74.2V714l94.6,54.6l-100.2,57.8 l-7-4L137.9,1150v37.8L738,841.3l-7.1-4.1l100.1-57.8l96.8,55.9L717.8,956.6v22l-579.9,334.8v33.7l579.9-334.8v25.8l90,51.9 l-669.8,386.7v14.6l13.1,7.6l682.5-394l93.1,53.7l-208.8,119.4v27.4l-450.9,260.4l22.2,12.8l428.7-247.5v31.6l281.1-162.3l84.9,49 l-83.3,48.1v8.1l-592.1,341.8l18.7,10.8l573.4-331v8.1l116.1-67l92.1,53.2l-150.3,86.8l13.2,7.6l-71.1,41v12.2L550,1729.3l15.2,8.8 l435.3-251.3v12.1l107.3-62l21.6,12.5l150.3-86.6v-25.1l582.6-336.3v-41.8l-582.6,336.3v-15.3l-92.1-53.2l674.6-389.5v-37.8 l-707.4,408.4l-84.9-49l209.7-121.1v-27.6l582.6-336.3v-33.7l-582.6,336.3v-20.7l-94.4-54.5l677-390.9V495.9z M789.2,997.4 l209.7-121.1l89.5,51.7l-99.9,57.7l0,0l-109.8,63.4L789.2,997.4z M1208.6,997.4L998,1117.9l-93.4-53.9l96.4-55.7v0l113.3-65.4 L1208.6,997.4z"/>
-	<polygon class="st0" points="447.4,674.1 1309.1,176.6 1297.4,169.8 435.7,667.3 421.7,659.3 137.9,823.1 137.9,869 461.5,682.2"/>
-	<polygon class="st0" points="305.7,592.5 1167.6,94.9 1159.4,90.1 297.5,587.8 279.9,577.7 137.9,659.7 137.9,709.6 323.3,602.6"/>
-	<polygon class="st0" points="163.9,510.9 1026,13.1 1021.3,10.4 159.2,508.2 138.2,496.1 137.9,496.2 137.9,550.2 185,523"/>
-</g>
-</svg>