├── .github ├── dependabot.yml └── workflows │ ├── automerge.yml │ ├── ci.yml │ └── release-please.yml ├── .gitignore ├── .licenserc.json ├── .nvmrc ├── .prettierignore ├── .release-please-manifest.json ├── .stylelintrc.json ├── LICENSE ├── README.md ├── builder ├── package.json ├── src │ ├── builders │ │ ├── common │ │ │ ├── prebuild.ts │ │ │ └── simpleBuild.ts │ │ ├── directory │ │ │ └── index.ts │ │ ├── extension-assets │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── package-readme │ │ │ └── index.ts │ │ └── util.ts │ ├── consts.ts │ ├── index.ts │ ├── templates │ │ ├── directory.md │ │ └── package-readme.md │ └── types.ts ├── tsconfig.json └── tsup.config.ts ├── eslint.config.mjs ├── library ├── crypto │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── packageInfo.yml │ ├── pkg.config.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ └── tsup.config.ts ├── extension-assets │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── packageInfo.yml │ ├── pkg.config.json │ ├── src │ │ ├── Enkrypt │ │ │ ├── icon.svg │ │ │ └── info.json │ │ ├── FearlessWallet │ │ │ ├── icon.svg │ │ │ └── info.json │ │ ├── Ledger │ │ │ ├── icon-square.svg │ │ │ ├── icon.svg │ │ │ └── info.json │ │ ├── NovaWallet │ │ │ ├── icon.svg │ │ │ └── info.json │ │ ├── PolkaGate │ │ │ ├── icon.svg │ │ │ └── info.json │ │ ├── PolkadotJs │ │ │ ├── icon.svg │ │ │ └── info.json │ │ ├── PolkadotVault │ │ │ ├── icon.svg │ │ │ └── info.json │ │ ├── SubWalletJs │ │ │ ├── icon.svg │ │ │ └── info.json │ │ ├── Talisman │ │ │ ├── icon.svg │ │ │ └── info.json │ │ ├── WalletConnect │ │ │ ├── icon.svg │ │ │ └── info.json │ │ └── index.ts │ └── tsconfig.json ├── factories │ ├── CHANGELOG.md │ ├── README.md │ ├── gulpfile.js │ ├── package.json │ ├── packageInfo.yml │ ├── pkg.config.json │ ├── src │ │ ├── index.tsx │ │ └── withProviders.tsx │ └── tsconfig.json ├── hooks │ ├── CHANGELOG.md │ ├── README.md │ ├── gulpfile.js │ ├── package.json │ ├── packageInfo.yml │ ├── pkg.config.json │ ├── src │ │ ├── index.tsx │ │ ├── useEffectIgnoreInitial.tsx │ │ ├── useOnResize.tsx │ │ ├── useOutsideAlerter.tsx │ │ ├── useSafeContext.tsx │ │ ├── useSize.tsx │ │ ├── useTimeLeft │ │ │ ├── defaults.ts │ │ │ └── index.tsx │ │ └── util.ts │ └── tsconfig.json ├── observables-connect │ ├── README.md │ ├── gulpfile.js │ ├── package.json │ ├── packageInfo.yml │ ├── pkg.config.json │ ├── src │ │ ├── accounts │ │ │ ├── get.ts │ │ │ ├── index.ts │ │ │ ├── unsubs.ts │ │ │ └── util.ts │ │ ├── consts.ts │ │ ├── extensions │ │ │ ├── connect.ts │ │ │ ├── discover.ts │ │ │ ├── enable.ts │ │ │ ├── index.ts │ │ │ ├── init.ts │ │ │ └── reconnect.ts │ │ ├── index.ts │ │ ├── local.ts │ │ ├── observables.ts │ │ ├── subjects.ts │ │ ├── types.ts │ │ └── util.ts │ └── tsconfig.json ├── react-connect-kit │ ├── CHANGELOG.md │ ├── README.md │ ├── gulpfile.js │ ├── package.json │ ├── packageInfo.yml │ ├── pkg.config.json │ ├── src │ │ ├── Extensions │ │ │ ├── Accounts.tsx │ │ │ ├── Connect.tsx │ │ │ ├── Provider.tsx │ │ │ ├── index.tsx │ │ │ └── types.ts │ │ ├── Hardware │ │ │ ├── index.tsx │ │ │ └── types.ts │ │ └── index.ts │ └── tsconfig.json ├── react-odometer │ ├── CHANGELOG.md │ ├── README.md │ ├── gulpfile.js │ ├── package.json │ ├── packageInfo.yml │ ├── pkg.config.json │ ├── src │ │ ├── index.css │ │ ├── index.tsx │ │ └── types.ts │ └── tsconfig.json ├── react-polkicon │ ├── CHANGELOG.md │ ├── README.md │ ├── gulpfile.js │ ├── package.json │ ├── packageInfo.yml │ ├── pkg.config.json │ ├── src │ │ ├── consts.ts │ │ ├── index.tsx │ │ ├── types.ts │ │ └── utils.tsx │ └── tsconfig.json ├── types │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── packageInfo.yml │ ├── pkg.config.json │ ├── src │ │ ├── accounts.ts │ │ ├── common.ts │ │ ├── extensions.ts │ │ ├── index.ts │ │ └── time.ts │ ├── tsconfig.json │ └── tsup.config.ts ├── utils │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── packageInfo.yml │ ├── pkg.config.json │ ├── src │ │ ├── base.ts │ │ ├── convert.ts │ │ ├── index.ts │ │ ├── types.ts │ │ └── unit.ts │ ├── tests │ │ ├── base.test.ts │ │ ├── convert.test.ts │ │ └── unit.test.ts │ ├── tsconfig.json │ └── tsup.config.ts └── validator-assets │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── packageInfo.yml │ ├── pkg.config.json │ ├── src │ ├── Amforc.tsx │ ├── ApertureMining.tsx │ ├── Blockseeker.tsx │ ├── Blockshard.tsx │ ├── CoinbaseCloud.tsx │ ├── Crifferent.tsx │ ├── Decentradot.tsx │ ├── Deigenvektor.tsx │ ├── Dionysus.tsx │ ├── Dozenodes.tsx │ ├── DragonStake.tsx │ ├── Frog.tsx │ ├── Gatotech.tsx │ ├── Gdot.tsx │ ├── GenericChain.tsx │ ├── GoOpen.tsx │ ├── GuruStaking.tsx │ ├── Helikon.tsx │ ├── Helixstreet.tsx │ ├── Highstake.tsx │ ├── HoneyStake.tsx │ ├── Metaspan.tsx │ ├── P2POrg.tsx │ ├── PDP.tsx │ ├── Paranodes.tsx │ ├── PioneerStake.tsx │ ├── Polkachu.tsx │ ├── Polkadotters.tsx │ ├── ProStakers.tsx │ ├── PythagorasCapitalInvestment.tsx │ ├── Saxemberg.tsx │ ├── SekoyaLabs.tsx │ ├── StakeMagnet.tsx │ ├── StakeWorld.tsx │ ├── Stakely.tsx │ ├── Stakenode.tsx │ ├── Stakepile.tsx │ ├── Stakeplus.tsx │ ├── StakerSpace.tsx │ ├── Stakin.tsx │ ├── Staking4All.tsx │ ├── StakingFacilities.tsx │ ├── TurboFlakes.tsx │ ├── VFValidierung.tsx │ ├── Wojdot.tsx │ ├── bLdNodes.tsx │ └── index.ts │ └── tsconfig.json ├── package.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── release-please-config.json ├── tsconfig.base.json └── tsconfig.json /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | updates: 4 | - package-ecosystem: npm 5 | directory: '/' 6 | schedule: 7 | interval: daily 8 | open-pull-requests-limit: 30 9 | groups: 10 | eslint: 11 | patterns: 12 | - 'eslint*' 13 | - '@eslint/*' 14 | - '@typescript-eslint/*' 15 | - 'typescript-eslint' 16 | prettier: 17 | patterns: 18 | - 'prettier*' 19 | react: 20 | patterns: 21 | - 'react*' 22 | types: 23 | patterns: 24 | - '@types/*' 25 | 26 | ui: 27 | patterns: 28 | - '@fortawesome/*' 29 | utils: 30 | patterns: 31 | - '@w3ux/*' 32 | - 'date-fns' 33 | - 'buffer' 34 | - 'rxjs' 35 | polkadot: 36 | patterns: 37 | - '@polkadot/*' 38 | - 'dedot' 39 | - '@dedot/*' 40 | commit-message: 41 | prefix: 'deps' 42 | 43 | - package-ecosystem: github-actions 44 | directory: '/' 45 | schedule: 46 | interval: weekly 47 | -------------------------------------------------------------------------------- /.github/workflows/automerge.yml: -------------------------------------------------------------------------------- 1 | name: Automerge 2 | on: pull_request 3 | 4 | permissions: 5 | contents: write 6 | pull-requests: write 7 | 8 | jobs: 9 | automerge: 10 | runs-on: ubuntu-latest 11 | if: github.event.pull_request.user.login == 'dependabot[bot]' 12 | steps: 13 | - name: Dependabot metadata 14 | id: metadata 15 | uses: dependabot/fetch-metadata@08eff52bf64351f401fb50d4972fa95b9f2c2d1b 16 | with: 17 | github-token: '${{ secrets.GITHUB_TOKEN }}' 18 | - name: Enable auto-merge for Dependabot Patch / Minor PRs 19 | if: steps.metadata.outputs.update-type == 'version-update:semver-patch' || steps.metadata.outputs.update-type == 'version-update:semver-minor' 20 | run: gh pr review --approve "$PR_URL" && gh pr merge --auto --squash "$PR_URL" 21 | env: 22 | PR_URL: ${{github.event.pull_request.html_url}} 23 | GH_TOKEN: ${{secrets.GITHUB_TOKEN}} 24 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | jobs: 10 | check-license: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v4 14 | - name: Check License Lines 15 | uses: kt3k/license_checker@v1.0.6 16 | 17 | compile: 18 | runs-on: ubuntu-latest 19 | strategy: 20 | matrix: 21 | node-version: [20.x] 22 | steps: 23 | - uses: actions/checkout@v4 24 | - uses: pnpm/action-setup@v4 25 | with: 26 | version: 10.7.0 27 | - name: Use Node.js ${{ matrix.node-version }} 28 | uses: actions/setup-node@v4 29 | with: 30 | node-version: ${{ matrix.node-version }} 31 | cache: 'pnpm' 32 | - run: pnpm install 33 | - run: pnpm lint 34 | - run: pnpm build 35 | -------------------------------------------------------------------------------- /.github/workflows/release-please.yml: -------------------------------------------------------------------------------- 1 | name: Release Automation 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | permissions: 9 | contents: write 10 | pull-requests: write 11 | 12 | jobs: 13 | release-please: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - uses: googleapis/release-please-action@v4 17 | with: 18 | token: ${{ secrets.RELEASE_PLEASE_TOKEN }} 19 | config-file: release-please-config.json 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | lerna-debug.log* 6 | .pnp.cjs 7 | .pnp.loader.mjs 8 | 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | .vscode 38 | 39 | # Compiled binary addons (https://nodejs.org/api/addons.html) 40 | dist/ 41 | build/ 42 | .build/ 43 | 44 | # Dependency directories 45 | node_modules/ 46 | jspm_packages/ 47 | 48 | # TypeScript v1 declaration files 49 | typings/ 50 | 51 | # TypeScript cache 52 | *.tsbuildinfo 53 | 54 | # Optional npm cache directory 55 | .npm 56 | 57 | # Optional eslint cache 58 | .eslintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # dotenv environment variables file 73 | .env 74 | .env.test 75 | 76 | # parcel-bundler cache (https://parceljs.org/) 77 | .cache 78 | 79 | # Gatsby files 80 | .cache/ 81 | 82 | # vuepress build output 83 | .vuepress/dist 84 | 85 | # Serverless directories 86 | .serverless/ 87 | 88 | # FuseBox cache 89 | .fusebox/ 90 | 91 | # DynamoDB Local files 92 | .dynamodb/ 93 | 94 | # TernJS port file 95 | .tern-port 96 | 97 | # macOS 98 | .DS_Store -------------------------------------------------------------------------------- /.licenserc.json: -------------------------------------------------------------------------------- 1 | { 2 | "**/*.{js,ts,tsx}": [ 3 | "/* @license Copyright 2024 w3ux authors & contributors", 4 | "SPDX-License-Identifier: GPL-3.0-only */" 5 | ], 6 | "**/*.scss": [ 7 | "/* @license Copyright 2024 w3ux authors & contributors", 8 | "SPDX-License-Identifier: GPL-3.0-only */" 9 | ], 10 | "**/*.cjs": [ 11 | "// @license Copyright 2024 w3ux authors & contributors", 12 | "// SPDX-License-Identifier: GPL-3.0-only" 13 | ], 14 | "ignore": ["testdata", "npm", "library/validator-assets/src"] 15 | } 16 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v20.10.0 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/dist 2 | **/build 3 | **/.build 4 | **/node_modules 5 | **/package.json 6 | **/package-lock.json 7 | **/pnpm-lock.yaml 8 | **/.eslintrc.js 9 | **/tsconfig.json 10 | **/tstsconfig.tsbuildinfo 11 | README.md 12 | *CODEOWNERS* 13 | CHANGELOG.md 14 | .licenserc.json -------------------------------------------------------------------------------- /.release-please-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "library/react-connect-kit": "3.5.4", 3 | "library/react-polkicon": "3.2.1", 4 | "library/utils": "2.1.0", 5 | "library/hooks": "2.2.2", 6 | "library/factories": "2.1.1", 7 | "library/crypto": "1.1.0", 8 | "library/extension-assets": "2.2.5", 9 | "library/types": "2.3.0", 10 | "library/observables-connect": "0.9.44", 11 | "library/react-odometer": "2.1.0", 12 | "library/validator-assets": "1.1.1" 13 | } 14 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard-scss"], 3 | "rules": { 4 | "no-descending-specificity": null 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # w3ux Library 2 | 3 | #### `@w3ux/crypto`  [[npm](https://www.npmjs.com/package/@w3ux/crypto) |  [source](https://github.com/w3ux/w3ux-library/tree/main/library/crypto)] 4 | 5 | Cryptographic utilities for Dapps 6 | 7 | #### `@w3ux/extension-assets`  [[npm](https://www.npmjs.com/package/@w3ux/extension-assets) |  [source](https://github.com/w3ux/w3ux-library/tree/main/library/extension-assets)] 8 | 9 | A list of popular Web3 wallet extensions with metadata and icons 10 | 11 | #### `@w3ux/factories`  [[npm](https://www.npmjs.com/package/@w3ux/factories) |  [source](https://github.com/w3ux/w3ux-library/tree/main/library/factories)] 12 | 13 | A collection of general purpose TypeScript factories 14 | 15 | #### `@w3ux/hooks`  [[npm](https://www.npmjs.com/package/@w3ux/hooks) |  [source](https://github.com/w3ux/w3ux-library/tree/main/library/hooks)] 16 | 17 | A collection of general purpose React hooks 18 | 19 | #### `@w3ux/observables-connect`  [[npm](https://www.npmjs.com/package/@w3ux/observables-connect) |  [source](https://github.com/w3ux/w3ux-library/tree/main/library/observables-connect)] 20 | 21 | Observables for extensions and accounts discovery 22 | 23 | #### `@w3ux/react-connect-kit`  [[npm](https://www.npmjs.com/package/@w3ux/react-connect-kit) |  [source](https://github.com/w3ux/w3ux-library/tree/main/library/react-connect-kit)] 24 | 25 | Providers and hooks for connecting to web3 wallets and interacting with accounts 26 | 27 | #### `@w3ux/react-odometer`  [[npm](https://www.npmjs.com/package/@w3ux/react-odometer) |  [source](https://github.com/w3ux/w3ux-library/tree/main/library/react-odometer)] 28 | 29 | An odometer effect used for number and balance transitions 30 | 31 | #### `@w3ux/react-polkicon`  [[npm](https://www.npmjs.com/package/@w3ux/react-polkicon) |  [source](https://github.com/w3ux/w3ux-library/tree/main/library/react-polkicon)] 32 | 33 | A light-weight and customisable Polkadot Icon 34 | 35 | #### `@w3ux/types`  [[npm](https://www.npmjs.com/package/@w3ux/types) |  [source](https://github.com/w3ux/w3ux-library/tree/main/library/types)] 36 | 37 | Common types used throughout the w3ux library 38 | 39 | #### `@w3ux/utils`  [[npm](https://www.npmjs.com/package/@w3ux/utils) |  [source](https://github.com/w3ux/w3ux-library/tree/main/library/utils)] 40 | 41 | A collection of reusable utilities for manipulating data 42 | 43 | #### `@w3ux/validator-assets`  [[npm](https://www.npmjs.com/package/@w3ux/validator-assets) |  [source](https://github.com/w3ux/w3ux-library/tree/main/library/validator-assets)] 44 | 45 | A list of Polkadot validator operators with metadata and icons 46 | -------------------------------------------------------------------------------- /builder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "builder", 3 | "license": "GPL-3.0-only", 4 | "version": "0.1.1", 5 | "type": "module", 6 | "bin": { 7 | "builder": "dist/index.js" 8 | }, 9 | "scripts": { 10 | "build": "rm -fr dist && tsup", 11 | "prepare": "pnpm build", 12 | "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo" 13 | }, 14 | "dependencies": { 15 | "minimist": "^1.2.8", 16 | "prettier": "^3.5.3", 17 | "yaml": "^2.8.0" 18 | }, 19 | "devDependencies": { 20 | "@types/minimist": "^1.2.5", 21 | "@types/node": "^22.13.15", 22 | "tsup": "^8.4.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /builder/src/builders/common/prebuild.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { 5 | PACKAGE_SOURCE_REQUIRED_FILES, 6 | PACKAGE_SOURCE_REQUIRED_PROPERTIES, 7 | } from 'consts' 8 | import { 9 | checkFilesExistInPackages, 10 | gePackageDirectory, 11 | getPackageJson, 12 | removePackageOutput, 13 | } from '../util' 14 | 15 | export const prebuild = async (folder: string): Promise => { 16 | const libDirectory = gePackageDirectory(folder) 17 | // Check if required files exist. 18 | const filesExist = await checkFilesExistInPackages( 19 | libDirectory, 20 | PACKAGE_SOURCE_REQUIRED_FILES 21 | ) 22 | 23 | if (!filesExist) { 24 | console.error(`❌ Some required files are missing in the source package.`) 25 | return false 26 | } 27 | 28 | // Get source package.json. 29 | const sourcePackageJson = await getPackageJson(libDirectory) 30 | 31 | // Get required properties from `package.json`. 32 | const requiredProperties = Object.entries(sourcePackageJson).filter( 33 | ([property]) => PACKAGE_SOURCE_REQUIRED_PROPERTIES.includes(property) 34 | ) 35 | 36 | // Check that all required properties were fetched. 37 | if (requiredProperties.length !== PACKAGE_SOURCE_REQUIRED_PROPERTIES.length) { 38 | console.error( 39 | `❌ Some required properties are missing in the source package.json.` 40 | ) 41 | return false 42 | } 43 | 44 | // Remove package output directory if it exists. 45 | if (!(await removePackageOutput(libDirectory, false))) { 46 | console.error(`❌ Failed to remove package output directory.`) 47 | return false 48 | } 49 | // Remove build output directory if it exists. 50 | if (!(await removePackageOutput(libDirectory, true))) { 51 | console.error(`❌ Failed to remove package build directory.`) 52 | return false 53 | } 54 | 55 | return true 56 | } 57 | -------------------------------------------------------------------------------- /builder/src/builders/common/simpleBuild.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { prebuild } from 'builders/common/prebuild' 5 | import { 6 | gePackageDirectory, 7 | generatePackageJson, 8 | removePackageOutput, 9 | } from 'builders/util' 10 | import { exec } from 'child_process' 11 | import { PACKAGE_OUTPUT } from 'consts' 12 | import { promises as fs } from 'fs' 13 | import type { Bundler } from 'types' 14 | import { promisify } from 'util' 15 | 16 | const execPromisify = promisify(exec) 17 | 18 | export const simpleBuild = async ( 19 | packageName: string, 20 | { bundler }: { bundler: Bundler | null } 21 | ) => { 22 | const libDirectory = gePackageDirectory(packageName) 23 | // Validate package config 24 | try { 25 | if (!(await prebuild(packageName))) { 26 | throw `Prebuild failed.` 27 | } 28 | // Call respective build command and generate dist folder 29 | try { 30 | await execPromisify(`pnpm build`) 31 | } catch (e) { 32 | throw `Failed to generate dist. ${e}` 33 | } 34 | 35 | if ( 36 | !(await generatePackageJson( 37 | libDirectory, 38 | `${libDirectory}/${PACKAGE_OUTPUT}`, 39 | bundler 40 | )) 41 | ) { 42 | throw `Failed to generate package.json file.` 43 | } 44 | 45 | // Copy README.md to dist 46 | try { 47 | await fs.copyFile( 48 | `${libDirectory}/README.md`, 49 | `${libDirectory}/${PACKAGE_OUTPUT}/README.md` 50 | ) 51 | } catch (e) { 52 | console.error(`❌ Failed to copy README.md to dist:`, e) 53 | } 54 | console.log(`✅ Package successfully built.`) 55 | } catch (err) { 56 | // Handle on error. 57 | console.error(`❌ Error occurred while building the package.`, err) 58 | 59 | // Remove package output directory 60 | if (!(await removePackageOutput(libDirectory, false))) { 61 | console.error(`❌ Failed to remove package output directory.`) 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /builder/src/builders/directory/index.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { 5 | gePackageDirectory, 6 | getLibraryDirectory, 7 | getPackageJson, 8 | getTemplate, 9 | getWorkspaceDirectory, 10 | } from 'builders/util' 11 | import { PACKAGE_SCOPE } from 'consts' 12 | import fs from 'fs/promises' 13 | import { parse } from 'yaml' 14 | 15 | export const build = async () => { 16 | try { 17 | const packages = await getPackages() 18 | let data = await getTemplate('directory') 19 | 20 | for (const pkg of packages) { 21 | data += formatDirectoryHeaders(pkg) 22 | const description = await getPackageDescription(pkg) 23 | data += formatDirectoryEntry(description) 24 | } 25 | 26 | await fs.writeFile(`${getWorkspaceDirectory()}/README.md`, data) 27 | 28 | console.log('✅ Generated directory successfully.') 29 | } catch (err) { 30 | console.error(`❌ Error occurred while building directory.`, err) 31 | } 32 | } 33 | 34 | // Gets the list of packges 35 | export const getPackages = async () => { 36 | const packages = await fs.readdir(getLibraryDirectory()) 37 | return packages 38 | } 39 | 40 | // Format the package introduction data in the README file 41 | export const formatDirectoryHeaders = (pkg: string) => 42 | '\n#### `' + 43 | formatNpmPackageName(pkg) + 44 | '`  [[npm](https://www.npmjs.com/package/' + 45 | formatNpmPackageName(pkg) + 46 | ')' + 47 | ' |  [source](https://github.com/w3ux/w3ux-library/tree/main/library/' + 48 | pkg + 49 | ')]\n' 50 | 51 | // Format the package name to include the package scope 52 | export const formatNpmPackageName = (name: string) => 53 | `@${PACKAGE_SCOPE}/${name.replace(/-source$/, '')}` 54 | 55 | // Get package description from packageInfo.yml or fallback to package.json 56 | export const getPackageDescription = async (name: string): Promise => { 57 | try { 58 | // Try to get description from packageInfo.yml first 59 | const packageInfo = await getSourceIndexYml(name) 60 | if (packageInfo.directory && packageInfo.directory[0]?.description) { 61 | return packageInfo.directory[0].description 62 | } 63 | } catch (e) { 64 | // packageInfo.yml might not exist or be malformed 65 | } 66 | 67 | try { 68 | // Fallback to package.json description 69 | const packageJson = await getPackageJson(gePackageDirectory(name)) 70 | if (packageJson.description) { 71 | return packageJson.description 72 | } 73 | } catch (e) { 74 | // package.json might not exist or be malformed 75 | } 76 | 77 | // Final fallback 78 | return `Package: ${name}` 79 | } 80 | 81 | // Get the source index.yml file for a package 82 | export const getSourceIndexYml = async (name: string) => 83 | parse( 84 | await fs.readFile(`${gePackageDirectory(name)}/packageInfo.yml`, 'utf-8') 85 | ) 86 | 87 | // Format the package content data in the README file 88 | export const formatDirectoryEntry = (description: string) => 89 | '\n' + description + '\n' 90 | -------------------------------------------------------------------------------- /builder/src/builders/extension-assets/types.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export interface AdditionalAsset { 5 | input: string 6 | outputFilename: string 7 | } 8 | -------------------------------------------------------------------------------- /builder/src/consts.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | // Package scope to publish to 5 | export const PACKAGE_SCOPE = 'w3ux' 6 | 7 | // Temporary build folder name 8 | export const TEMP_BUILD_OUTPUT = '.build' 9 | 10 | // Package build output folder 11 | export const PACKAGE_OUTPUT = 'dist' 12 | 13 | // Files that are required to exist in a package 14 | export const PACKAGE_SOURCE_REQUIRED_FILES = ['packageInfo.yml', 'package.json'] 15 | 16 | // Required dist package.json properties 17 | export const PACKAGE_SOURCE_REQUIRED_PROPERTIES = ['license', 'version'] 18 | 19 | // URL constants for README generation 20 | export const URLS = { 21 | HOMEPAGE: 'https://w3ux.org', 22 | REPOSITORY: 'https://github.com/w3ux/w3ux-library', 23 | ISSUES: 'https://github.com/w3ux/w3ux-library/issues', 24 | NPM_BASE: 'https://www.npmjs.com/package', 25 | } as const 26 | -------------------------------------------------------------------------------- /builder/src/index.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* @license Copyright 2024 w3ux authors & contributors 3 | SPDX-License-Identifier: GPL-3.0-only */ 4 | 5 | import { simpleBuild } from 'builders/common/simpleBuild' 6 | import minimist from 'minimist' 7 | import { build as buildDirectory } from './builders/directory' 8 | import { build as buildExtensionAssets } from './builders/extension-assets' 9 | import { build as buildPackageReadmes } from './builders/package-readme' 10 | 11 | const args = minimist(process.argv.slice(2)) 12 | 13 | const { t: task } = args 14 | 15 | switch (task) { 16 | case 'crypto': 17 | await simpleBuild('crypto', { bundler: 'tsup' }) 18 | break 19 | 20 | case 'directory': 21 | await buildDirectory() 22 | break 23 | 24 | case 'extension-assets': 25 | await buildExtensionAssets() 26 | break 27 | 28 | case 'package-readmes': 29 | await buildPackageReadmes() 30 | break 31 | 32 | case 'factories': 33 | await simpleBuild('factories', { bundler: 'gulp' }) 34 | break 35 | 36 | case 'hooks': 37 | await simpleBuild('hooks', { bundler: 'gulp' }) 38 | break 39 | 40 | case 'observables-connect': 41 | await simpleBuild('observables-connect', { bundler: 'gulp' }) 42 | break 43 | 44 | case 'react-connect-kit': 45 | await simpleBuild('react-connect-kit', { bundler: 'gulp' }) 46 | break 47 | 48 | case 'react-odometer': 49 | await simpleBuild('react-odometer', { bundler: 'gulp' }) 50 | break 51 | 52 | case 'react-polkicon': 53 | await simpleBuild('react-polkicon', { bundler: 'gulp' }) 54 | break 55 | 56 | case 'types': 57 | await simpleBuild('types', { bundler: 'tsup' }) 58 | break 59 | 60 | case 'utils': 61 | await simpleBuild('utils', { bundler: 'tsup' }) 62 | break 63 | 64 | case 'validator-assets': 65 | await simpleBuild('validator-assets', { bundler: null }) 66 | break 67 | 68 | default: 69 | console.log('❌ No task provided.') 70 | } 71 | -------------------------------------------------------------------------------- /builder/src/templates/directory.md: -------------------------------------------------------------------------------- 1 | # w3ux Library 2 | -------------------------------------------------------------------------------- /builder/src/templates/package-readme.md: -------------------------------------------------------------------------------- 1 | # {{PACKAGE_NAME}} 2 | 3 | {{DESCRIPTION}} 4 | 5 | ## Installation 6 | 7 | ```bash 8 | npm install {{NPM_PACKAGE_NAME}} 9 | ``` 10 | 11 | or 12 | 13 | ```bash 14 | yarn add {{NPM_PACKAGE_NAME}} 15 | ``` 16 | 17 | or 18 | 19 | ```bash 20 | pnpm add {{NPM_PACKAGE_NAME}} 21 | ``` 22 | 23 | ## Usage 24 | 25 | {{USAGE_SECTION}} 26 | 27 | ## Documentation 28 | 29 | For comprehensive documentation and examples, visit the [w3ux documentation]({{HOMEPAGE_URL}}). 30 | 31 | ## Keywords 32 | 33 | {{KEYWORDS}} 34 | 35 | ## Repository 36 | 37 | - **Source**: [GitHub]({{REPOSITORY_URL}}) 38 | - **Package**: [npm]({{NPM_URL}}) 39 | - **Issues**: [GitHub Issues]({{BUGS_URL}}) 40 | 41 | ## License 42 | 43 | This package is licensed under the {{LICENSE}}. 44 | 45 | --- 46 | 47 | Part of the [w3ux library](https://github.com/w3ux/w3ux-library) - A collection of packages for building Web3 applications. 48 | -------------------------------------------------------------------------------- /builder/src/types.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export type Bundler = 'gulp' | 'tsup' | 'module' 5 | 6 | // TypeScript interfaces for package data structures 7 | export interface PackageInfoYml { 8 | directory?: Array<{ 9 | name?: string 10 | description?: string 11 | }> 12 | } 13 | 14 | export interface PackageJson { 15 | name?: string 16 | description?: string 17 | version?: string 18 | license?: string 19 | keywords?: string[] 20 | homepage?: string 21 | repository?: { 22 | type?: string 23 | url?: string 24 | directory?: string 25 | } 26 | bugs?: { 27 | url?: string 28 | } 29 | scripts?: Record 30 | dependencies?: Record 31 | devDependencies?: Record 32 | } 33 | 34 | export interface PackageData { 35 | displayName: string 36 | description: string 37 | npmPackageName: string 38 | keywords: string 39 | license: string 40 | homepage: string 41 | repositoryUrl: string 42 | npmUrl: string 43 | bugsUrl: string 44 | usageSection: string 45 | } 46 | -------------------------------------------------------------------------------- /builder/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": "src", 5 | "rootDir": "src", 6 | "outDir": "dist" 7 | }, 8 | "include": ["src"], 9 | } 10 | -------------------------------------------------------------------------------- /builder/tsup.config.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { defineConfig } from 'tsup' 5 | 6 | export default defineConfig({ 7 | entry: ['src/index.ts'], 8 | splitting: false, 9 | sourcemap: false, 10 | clean: true, 11 | dts: true, 12 | format: 'esm', 13 | }) 14 | -------------------------------------------------------------------------------- /library/crypto/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [1.1.0](https://github.com/w3ux/w3ux-library/compare/crypto-source-v1.0.2...crypto-source-v1.1.0) (2025-06-07) 4 | 5 | 6 | ### Features 7 | 8 | * Add `@w3ux/crypto` package ([#138](https://github.com/w3ux/w3ux-library/issues/138)) ([bd683b7](https://github.com/w3ux/w3ux-library/commit/bd683b7a6ed149d2778274ddb92d5694ade2a5bc)) 9 | * **refactor:** Migrate from yarn to pnpm ([#206](https://github.com/w3ux/w3ux-library/issues/206)) ([93d2a40](https://github.com/w3ux/w3ux-library/commit/93d2a40cc0c455936022ef6a89bc18999d7928e5)) 10 | * **refactor:** Migrate to ESLint 9 ([#207](https://github.com/w3ux/w3ux-library/issues/207)) ([9f8c3ef](https://github.com/w3ux/w3ux-library/commit/9f8c3ef4c5a3ff23c5ad7d5885fd0dad0ee75c7b)) 11 | * **refactor:** Simplify builder api, add CI ([#260](https://github.com/w3ux/w3ux-library/issues/260)) ([146bd31](https://github.com/w3ux/w3ux-library/commit/146bd313b23711d08c5af92dd63ec615e937b050)) 12 | * **refactor:** tsconfig optimizations, fixes ([#268](https://github.com/w3ux/w3ux-library/issues/268)) ([34d5fcb](https://github.com/w3ux/w3ux-library/commit/34d5fcbadc461295fd8642f70fc0d4a3aaa43c25)) 13 | * Rewrite and improve Polkicon - `@w3ux/react-polkicon` ([#139](https://github.com/w3ux/w3ux-library/issues/139)) ([b16c7e7](https://github.com/w3ux/w3ux-library/commit/b16c7e7cfd5be4ffa0384bbe9e5406b330dbf0a3)) 14 | * Simplified builder, add exports configs to packages ([#221](https://github.com/w3ux/w3ux-library/issues/221)) ([26801d9](https://github.com/w3ux/w3ux-library/commit/26801d94abe6524efc053085b89f6a359ec6316b)) 15 | 16 | ## 1.0.0 (2024-11-02) 17 | 18 | 19 | ### Features 20 | 21 | * Add `@w3ux/crypto` package ([#138](https://github.com/w3ux/w3ux-library/issues/138)) ([bd683b7](https://github.com/w3ux/w3ux-library/commit/bd683b7a6ed149d2778274ddb92d5694ade2a5bc)) 22 | * Rewrite and improve Polkicon - `@w3ux/react-polkicon` ([#139](https://github.com/w3ux/w3ux-library/issues/139)) ([b16c7e7](https://github.com/w3ux/w3ux-library/commit/b16c7e7cfd5be4ffa0384bbe9e5406b330dbf0a3)) 23 | -------------------------------------------------------------------------------- /library/crypto/README.md: -------------------------------------------------------------------------------- 1 | # Crypto 2 | 3 | Cryptographic utilities for Dapps 4 | 5 | ## Installation 6 | 7 | ```bash 8 | npm install @w3ux/crypto 9 | ``` 10 | 11 | or 12 | 13 | ```bash 14 | yarn add @w3ux/crypto 15 | ``` 16 | 17 | or 18 | 19 | ```bash 20 | pnpm add @w3ux/crypto 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```typescript 26 | import { /* your imports */ } from '@w3ux/crypto' 27 | ``` 28 | 29 | ### Utility Functions 30 | 31 | This package provides utility functions that can be used in any JavaScript/TypeScript project: 32 | 33 | ```typescript 34 | import { /* specific function */ } from '@w3ux/crypto' 35 | 36 | // Use the utility functions 37 | const result = /* call your function */ 38 | ``` 39 | 40 | ## Documentation 41 | 42 | For comprehensive documentation and examples, visit the [w3ux documentation](https://w3ux.org/library/crypto). 43 | 44 | ## Keywords 45 | 46 | `w3ux`, `polkadot`, `web3`, `crypto`, `cryptography`, `typescript` 47 | 48 | ## Repository 49 | 50 | - **Source**: [GitHub](https://github.com/w3ux/w3ux-library) 51 | - **Package**: [npm](https://www.npmjs.com/package/@w3ux/crypto) 52 | - **Issues**: [GitHub Issues](https://github.com/w3ux/w3ux-library/issues) 53 | 54 | ## License 55 | 56 | This package is licensed under the GPL-3.0-only. 57 | 58 | --- 59 | 60 | Part of the [w3ux library](https://github.com/w3ux/w3ux-library) - A collection of packages for building Web3 applications. 61 | -------------------------------------------------------------------------------- /library/crypto/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@w3ux/crypto-source", 3 | "description": "Cryptographic utilities for Dapps", 4 | "version": "1.1.0", 5 | "license": "GPL-3.0-only", 6 | "type": "module", 7 | "keywords": [ 8 | "w3ux", 9 | "polkadot", 10 | "web3", 11 | "crypto", 12 | "cryptography", 13 | "typescript" 14 | ], 15 | "homepage": "https://w3ux.org/library/crypto", 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/w3ux/w3ux-library.git", 19 | "directory": "library/crypto" 20 | }, 21 | "bugs": { 22 | "url": "https://github.com/w3ux/w3ux-library/issues" 23 | }, 24 | "scripts": { 25 | "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo", 26 | "build": "tsup src/**/* --format esm,cjs --target es2022 --dts --no-splitting", 27 | "compile": "builder -t crypto" 28 | }, 29 | "dependencies": { 30 | "blakejs": "^1.2.1" 31 | }, 32 | "devDependencies": { 33 | "@types/node": "^22.15.29", 34 | "builder": "workspace:*", 35 | "tsup": "^8.4.0" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /library/crypto/packageInfo.yml: -------------------------------------------------------------------------------- 1 | directory: 2 | - name: Crypto 3 | description: Cryptographic utilities for Dapps 4 | -------------------------------------------------------------------------------- /library/crypto/pkg.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bundler": "tsup", 3 | "exports": { 4 | ".": { 5 | "import": "./index.js", 6 | "require": "./index.cjs" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /library/crypto/src/index.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { blake2b } from 'blakejs' 5 | 6 | /** 7 | * Creates a BLAKE2b hash of the input data and returns it as a Uint8Array. 8 | * 9 | * @param data - The input data to hash, as a string, Uint8Array, or Buffer. 10 | * @param bitLength - The bit length of the hash output (default 256). 11 | * @returns The BLAKE2b hash output as a Uint8Array. 12 | */ 13 | export const blake2AsU8a = ( 14 | data: Uint8Array | string | Buffer, 15 | bitLength = 256 16 | ): Uint8Array => { 17 | // Convert input to Uint8Array if it's a string 18 | const input = typeof data === 'string' ? new TextEncoder().encode(data) : data 19 | 20 | // Calculate byte length from bit length (256 bits => 32 bytes) 21 | const byteLength = bitLength / 8 22 | 23 | // Generate the hash using blake2b with the specified output length 24 | const hash = blake2b(input, undefined, byteLength) 25 | 26 | return new Uint8Array(hash) 27 | } 28 | -------------------------------------------------------------------------------- /library/crypto/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": "src", 5 | "rootDir": "src", 6 | "outDir": "dist" 7 | }, 8 | "include": ["./**/*"], 9 | } 10 | -------------------------------------------------------------------------------- /library/crypto/tsup.config.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { defineConfig } from 'tsup' 5 | 6 | export default defineConfig({ 7 | entry: ['src/index.ts'], 8 | splitting: false, 9 | sourcemap: false, 10 | clean: true, 11 | dts: true, 12 | format: 'esm', 13 | }) 14 | -------------------------------------------------------------------------------- /library/extension-assets/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [2.2.0](https://github.com/w3ux/w3ux-library/compare/extension-assets-source-v2.1.0...extension-assets-source-v2.2.0) (2025-06-07) 4 | 5 | 6 | ### Features 7 | 8 | * react 19 alpha support ([c7c0ee8](https://github.com/w3ux/w3ux-library/commit/c7c0ee87ba9fbbde54ab581027a2e2189972a65d)) 9 | * **refactor:** Migrate from yarn to pnpm ([#206](https://github.com/w3ux/w3ux-library/issues/206)) ([93d2a40](https://github.com/w3ux/w3ux-library/commit/93d2a40cc0c455936022ef6a89bc18999d7928e5)) 10 | * **refactor:** Remove ChainSafe Snap ([#145](https://github.com/w3ux/w3ux-library/issues/145)) ([d46b8ee](https://github.com/w3ux/w3ux-library/commit/d46b8ee33de0012a3d74c02487442456d939c34c)) 11 | * **refactor:** Simplify builder api, add CI ([#260](https://github.com/w3ux/w3ux-library/issues/260)) ([146bd31](https://github.com/w3ux/w3ux-library/commit/146bd313b23711d08c5af92dd63ec615e937b050)) 12 | * **refactor:** tsconfig optimizations, fixes ([#268](https://github.com/w3ux/w3ux-library/issues/268)) ([34d5fcb](https://github.com/w3ux/w3ux-library/commit/34d5fcbadc461295fd8642f70fc0d4a3aaa43c25)) 13 | 14 | ## 1.0.0 (2024-12-01) 15 | 16 | 17 | ### Features 18 | 19 | * **refactor:** Remove ChainSafe Snap ([#145](https://github.com/w3ux/w3ux-library/issues/145)) ([d46b8ee](https://github.com/w3ux/w3ux-library/commit/d46b8ee33de0012a3d74c02487442456d939c34c)) 20 | -------------------------------------------------------------------------------- /library/extension-assets/README.md: -------------------------------------------------------------------------------- 1 | # Web3 Extension Assets 2 | 3 | A list of popular Web3 wallet extensions with metadata and icons 4 | 5 | ## Installation 6 | 7 | ```bash 8 | npm install @w3ux/extension-assets 9 | ``` 10 | 11 | or 12 | 13 | ```bash 14 | yarn add @w3ux/extension-assets 15 | ``` 16 | 17 | or 18 | 19 | ```bash 20 | pnpm add @w3ux/extension-assets 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```typescript 26 | import { /* your imports */ } from '@w3ux/extension-assets' 27 | ``` 28 | 29 | ## Documentation 30 | 31 | For comprehensive documentation and examples, visit the [w3ux documentation](https://w3ux.org/library/extension-assets). 32 | 33 | ## Keywords 34 | 35 | `w3ux`, `polkadot`, `web3`, `extensions`, `wallets`, `assets`, `icons`, `react`, `typescript` 36 | 37 | ## Repository 38 | 39 | - **Source**: [GitHub](https://github.com/w3ux/w3ux-library) 40 | - **Package**: [npm](https://www.npmjs.com/package/@w3ux/extension-assets) 41 | - **Issues**: [GitHub Issues](https://github.com/w3ux/w3ux-library/issues) 42 | 43 | ## License 44 | 45 | This package is licensed under the GPL-3.0-only. 46 | 47 | --- 48 | 49 | Part of the [w3ux library](https://github.com/w3ux/w3ux-library) - A collection of packages for building Web3 applications. 50 | -------------------------------------------------------------------------------- /library/extension-assets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@w3ux/extension-assets-source", 3 | "description": "A list of popular Web3 wallet extensions with metadata and icons", 4 | "version": "2.2.5", 5 | "license": "GPL-3.0-only", 6 | "type": "module", 7 | "keywords": [ 8 | "w3ux", 9 | "polkadot", 10 | "web3", 11 | "extensions", 12 | "wallets", 13 | "assets", 14 | "icons", 15 | "react", 16 | "typescript" 17 | ], 18 | "homepage": "https://w3ux.org/library/extension-assets", 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/w3ux/w3ux-library.git", 22 | "directory": "library/extension-assets" 23 | }, 24 | "bugs": { 25 | "url": "https://github.com/w3ux/w3ux-library/issues" 26 | }, 27 | "scripts": { 28 | "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo", 29 | "build": "pnpm compile", 30 | "compile": "builder -t extension-assets" 31 | }, 32 | "peerDependencies": { 33 | "react": "^19" 34 | }, 35 | "devDependencies": { 36 | "@types/react": "^19.0.12", 37 | "builder": "workspace:*", 38 | "react": "^19.1.0", 39 | "tsup": "^8.4.0" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /library/extension-assets/packageInfo.yml: -------------------------------------------------------------------------------- 1 | directory: 2 | - name: Web3 Extension Assets 3 | description: A list of popular Web3 wallet extensions with metadata and icons 4 | -------------------------------------------------------------------------------- /library/extension-assets/pkg.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bundler": "custom" 3 | } 4 | -------------------------------------------------------------------------------- /library/extension-assets/src/Enkrypt/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /library/extension-assets/src/Enkrypt/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "enkrypt", 3 | "title": "Enkrypt", 4 | "website": "enkrypt.com", 5 | "category": "web-extension", 6 | "features": "*", 7 | "otherEcosystems": ["ethereum"] 8 | } 9 | -------------------------------------------------------------------------------- /library/extension-assets/src/FearlessWallet/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 29 | 30 | 31 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /library/extension-assets/src/FearlessWallet/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "fearless-wallet", 3 | "title": "Fearless Wallet", 4 | "website": "fearlesswallet.io", 5 | "category": "web-extension", 6 | "features": "*" 7 | } 8 | -------------------------------------------------------------------------------- /library/extension-assets/src/Ledger/icon-square.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /library/extension-assets/src/Ledger/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /library/extension-assets/src/Ledger/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "ledger", 3 | "title": "Ledger", 4 | "website": "ledger.com", 5 | "category": "hardware", 6 | "features": [], 7 | "additionalAssets": [ 8 | { 9 | "input": "icon-square.svg", 10 | "outputFilename": "LedgerSquare" 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /library/extension-assets/src/NovaWallet/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | -------------------------------------------------------------------------------- /library/extension-assets/src/NovaWallet/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "nova-wallet", 3 | "title": "Nova Wallet", 4 | "website": "novawallet.io", 5 | "category": "mobile", 6 | "features": "*" 7 | } 8 | -------------------------------------------------------------------------------- /library/extension-assets/src/PolkaGate/icon.svg: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | 16 | -------------------------------------------------------------------------------- /library/extension-assets/src/PolkaGate/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "polkagate", 3 | "title": "PolkaGate", 4 | "website": "polkagate.xyz", 5 | "category": "web-extension", 6 | "features": "*" 7 | } 8 | -------------------------------------------------------------------------------- /library/extension-assets/src/PolkadotJs/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /library/extension-assets/src/PolkadotJs/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "polkadot-js", 3 | "title": "Polkadot JS", 4 | "website": "polkadot.js.org/extension", 5 | "category": "web-extension", 6 | "features": "*" 7 | } 8 | -------------------------------------------------------------------------------- /library/extension-assets/src/PolkadotVault/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /library/extension-assets/src/PolkadotVault/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "polkadotvault", 3 | "title": "Polkadot Vault", 4 | "website": "https://vault.novasama.io/", 5 | "category": "hardware", 6 | "features": [] 7 | } 8 | -------------------------------------------------------------------------------- /library/extension-assets/src/SubWalletJs/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /library/extension-assets/src/SubWalletJs/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "subwallet-js", 3 | "title": "SubWallet", 4 | "website": "subwallet.app", 5 | "category": "web-extension", 6 | "features": "*" 7 | } 8 | -------------------------------------------------------------------------------- /library/extension-assets/src/Talisman/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 12 | 13 | -------------------------------------------------------------------------------- /library/extension-assets/src/Talisman/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "talisman", 3 | "title": "Talisman", 4 | "website": "talisman.xyz", 5 | "category": "web-extension", 6 | "features": "*" 7 | } 8 | -------------------------------------------------------------------------------- /library/extension-assets/src/WalletConnect/icon.svg: -------------------------------------------------------------------------------- 1 | 6 | 10 | -------------------------------------------------------------------------------- /library/extension-assets/src/WalletConnect/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "walletconnect", 3 | "title": "WalletConnect", 4 | "website": "walletconnect.com", 5 | "category": "hardware", 6 | "features": [] 7 | } 8 | -------------------------------------------------------------------------------- /library/extension-assets/src/index.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | // NOTE: placeholder to surpress `tsconfig.json` no input warning. 5 | -------------------------------------------------------------------------------- /library/extension-assets/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": "src", 5 | "rootDir": ".", 6 | "outDir": "dist" 7 | }, 8 | "include": ["./**/*"], 9 | } 10 | -------------------------------------------------------------------------------- /library/factories/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [2.1.0](https://github.com/w3ux/w3ux-library/compare/factories-source-v2.0.2...factories-source-v2.1.0) (2025-06-07) 4 | 5 | 6 | ### Features 7 | 8 | * Add `@w3ux/crypto` package ([#138](https://github.com/w3ux/w3ux-library/issues/138)) ([bd683b7](https://github.com/w3ux/w3ux-library/commit/bd683b7a6ed149d2778274ddb92d5694ade2a5bc)) 9 | * Enable strict mode ([#270](https://github.com/w3ux/w3ux-library/issues/270)) ([2c2c460](https://github.com/w3ux/w3ux-library/commit/2c2c4603988fc13d986116311542adef65b9b583)) 10 | * init `factories` package with `withProviders` ([#137](https://github.com/w3ux/w3ux-library/issues/137)) ([0864d68](https://github.com/w3ux/w3ux-library/commit/0864d68f305208f9fa46537efd49a0245a8e9e4b)) 11 | * Initiate `observables-connect` package ([#218](https://github.com/w3ux/w3ux-library/issues/218)) ([a5ade6b](https://github.com/w3ux/w3ux-library/commit/a5ade6bf6238da2f3e31e67cb1668b28b70c0cca)) 12 | * react 19 alpha support ([c7c0ee8](https://github.com/w3ux/w3ux-library/commit/c7c0ee87ba9fbbde54ab581027a2e2189972a65d)) 13 | * **refactor:** Extension accounts observables & refactors, extensions re-write ([#219](https://github.com/w3ux/w3ux-library/issues/219)) ([25122d1](https://github.com/w3ux/w3ux-library/commit/25122d19e830961d6210f06ab169f02ef8200120)) 14 | * **refactor:** Migrate from yarn to pnpm ([#206](https://github.com/w3ux/w3ux-library/issues/206)) ([93d2a40](https://github.com/w3ux/w3ux-library/commit/93d2a40cc0c455936022ef6a89bc18999d7928e5)) 15 | * **refactor:** Migrate to ESLint 9 ([#207](https://github.com/w3ux/w3ux-library/issues/207)) ([9f8c3ef](https://github.com/w3ux/w3ux-library/commit/9f8c3ef4c5a3ff23c5ad7d5885fd0dad0ee75c7b)) 16 | * **refactor:** move high level connect-kit types to `types` package ([#202](https://github.com/w3ux/w3ux-library/issues/202)) ([c8b324e](https://github.com/w3ux/w3ux-library/commit/c8b324ea6671e3ae842719bdbd74b1703cdf09a1)) 17 | * **refactor:** Simplify builder api, add CI ([#260](https://github.com/w3ux/w3ux-library/issues/260)) ([146bd31](https://github.com/w3ux/w3ux-library/commit/146bd313b23711d08c5af92dd63ec615e937b050)) 18 | * **refactor:** tsconfig optimizations, fixes ([#268](https://github.com/w3ux/w3ux-library/issues/268)) ([34d5fcb](https://github.com/w3ux/w3ux-library/commit/34d5fcbadc461295fd8642f70fc0d4a3aaa43c25)) 19 | * Simplified builder, add exports configs to packages ([#221](https://github.com/w3ux/w3ux-library/issues/221)) ([26801d9](https://github.com/w3ux/w3ux-library/commit/26801d94abe6524efc053085b89f6a359ec6316b)) 20 | 21 | ## 1.0.0 (2024-11-02) 22 | 23 | 24 | ### Features 25 | 26 | * Add `@w3ux/crypto` package ([#138](https://github.com/w3ux/w3ux-library/issues/138)) ([bd683b7](https://github.com/w3ux/w3ux-library/commit/bd683b7a6ed149d2778274ddb92d5694ade2a5bc)) 27 | * init `factories` package with `withProviders` ([#137](https://github.com/w3ux/w3ux-library/issues/137)) ([0864d68](https://github.com/w3ux/w3ux-library/commit/0864d68f305208f9fa46537efd49a0245a8e9e4b)) 28 | -------------------------------------------------------------------------------- /library/factories/README.md: -------------------------------------------------------------------------------- 1 | # Factories 2 | 3 | A collection of general purpose TypeScript factories 4 | 5 | ## Installation 6 | 7 | ```bash 8 | npm install @w3ux/factories 9 | ``` 10 | 11 | or 12 | 13 | ```bash 14 | yarn add @w3ux/factories 15 | ``` 16 | 17 | or 18 | 19 | ```bash 20 | pnpm add @w3ux/factories 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```typescript 26 | import { /* your imports */ } from '@w3ux/factories' 27 | ``` 28 | 29 | ## Documentation 30 | 31 | For comprehensive documentation and examples, visit the [w3ux documentation](https://w3ux.org/library/factories/overview). 32 | 33 | ## Keywords 34 | 35 | `w3ux`, `polkadot`, `web3`, `factories`, `typescript`, `patterns` 36 | 37 | ## Repository 38 | 39 | - **Source**: [GitHub](https://github.com/w3ux/w3ux-library) 40 | - **Package**: [npm](https://www.npmjs.com/package/@w3ux/factories) 41 | - **Issues**: [GitHub Issues](https://github.com/w3ux/w3ux-library/issues) 42 | 43 | ## License 44 | 45 | This package is licensed under the GPL-3.0-only. 46 | 47 | --- 48 | 49 | Part of the [w3ux library](https://github.com/w3ux/w3ux-library) - A collection of packages for building Web3 applications. 50 | -------------------------------------------------------------------------------- /library/factories/gulpfile.js: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { dest, series } from 'gulp' 5 | import sourcemaps from 'gulp-sourcemaps' 6 | import ts from 'gulp-typescript' 7 | import merge from 'merge-stream' 8 | 9 | // Buld CommonJS module. 10 | const buildCommonJs = () => 11 | doBuild( 12 | ts.createProject('tsconfig.json', { 13 | module: 'commonjs', 14 | target: 'es2015', 15 | removeComments: true, 16 | }), 17 | 'cjs' 18 | ) 19 | 20 | // Build ES module. 21 | const buildEsm = () => 22 | doBuild( 23 | ts.createProject('tsconfig.json', { 24 | module: 'esnext', 25 | target: 'esnext', 26 | removeComments: true, 27 | }), 28 | 'mjs' 29 | ) 30 | 31 | // Build package with provided Typescript project. 32 | const doBuild = (tsProject, outDir) => { 33 | var tsResult = tsProject.src().pipe(sourcemaps.init()).pipe(tsProject()) 34 | 35 | return merge(tsResult, tsResult.js) 36 | .pipe(sourcemaps.write('.')) 37 | .pipe(dest(`dist/${outDir}`)) 38 | } 39 | 40 | export default series(buildCommonJs, buildEsm) 41 | -------------------------------------------------------------------------------- /library/factories/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@w3ux/factories-source", 3 | "description": "A collection of general purpose TypeScript factories", 4 | "version": "2.1.1", 5 | "license": "GPL-3.0-only", 6 | "type": "module", 7 | "keywords": [ 8 | "w3ux", 9 | "polkadot", 10 | "web3", 11 | "factories", 12 | "typescript", 13 | "patterns" 14 | ], 15 | "homepage": "https://w3ux.org/library/factories/overview", 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/w3ux/w3ux-library.git", 19 | "directory": "library/factories" 20 | }, 21 | "bugs": { 22 | "url": "https://github.com/w3ux/w3ux-library/issues" 23 | }, 24 | "scripts": { 25 | "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo", 26 | "build": "gulp --silent", 27 | "compile": "builder -t factories" 28 | }, 29 | "peerDependencies": { 30 | "react": "^19" 31 | }, 32 | "devDependencies": { 33 | "@types/react": "^19.0.12", 34 | "@w3ux/types": "^2.3.0", 35 | "builder": "workspace:*", 36 | "gulp": "^5.0.0", 37 | "gulp-sourcemaps": "^3.0.0", 38 | "gulp-strip-comments": "^2.6.0", 39 | "gulp-typescript": "6.0.0-alpha.1", 40 | "merge-stream": "^2.0.0", 41 | "react": "^19.1.0", 42 | "typescript": "^5.8.2" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /library/factories/packageInfo.yml: -------------------------------------------------------------------------------- 1 | directory: 2 | - name: Factories 3 | description: A collection of general purpose TypeScript factories 4 | -------------------------------------------------------------------------------- /library/factories/pkg.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bundler": "gulp", 3 | "exports": { 4 | ".": { 5 | "import": "./mjs/index.js", 6 | "require": "./cjs/index.js" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /library/factories/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export * from './withProviders' 5 | -------------------------------------------------------------------------------- /library/factories/src/withProviders.tsx: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { FC } from 'react' 5 | 6 | // `providers` accepts standalone functional components or an array of a functional component and its props. 7 | export type Provider = FC | [FC, T] 8 | 9 | // A higher-order component that wraps a specified React component (Wrapped) with multiple context 10 | // providers. Each provider can either be a standalone component or a component with specified 11 | // props. The first provider in the array becomes the outermost wrapper in the rendered output. 12 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 13 | export const withProviders = (providers: Provider[], Wrapped: FC) => 14 | providers.reduceRight( 15 | (acc, prov) => { 16 | if (Array.isArray(prov)) { 17 | const Provider = prov[0] 18 | return {acc} 19 | } 20 | const Provider = prov 21 | return {acc} 22 | }, 23 | 24 | ) 25 | -------------------------------------------------------------------------------- /library/factories/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": "src", 5 | "rootDir": "src", 6 | "outDir": "dist" 7 | }, 8 | "include": ["src/**/*"], 9 | } 10 | -------------------------------------------------------------------------------- /library/hooks/README.md: -------------------------------------------------------------------------------- 1 | # Hooks 2 | 3 | A collection of general purpose React hooks 4 | 5 | ## Installation 6 | 7 | ```bash 8 | npm install @w3ux/hooks 9 | ``` 10 | 11 | or 12 | 13 | ```bash 14 | yarn add @w3ux/hooks 15 | ``` 16 | 17 | or 18 | 19 | ```bash 20 | pnpm add @w3ux/hooks 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```typescript 26 | import { /* your imports */ } from '@w3ux/hooks' 27 | ``` 28 | 29 | ### React Usage 30 | 31 | This package provides React hooks and components. Here's a basic example: 32 | 33 | ```tsx 34 | import React from 'react' 35 | import { /* specific hook or component */ } from '@w3ux/hooks' 36 | 37 | function MyComponent() { 38 | // Use the imported hooks or components here 39 | return
Your component content
40 | } 41 | ``` 42 | 43 | ## Documentation 44 | 45 | For comprehensive documentation and examples, visit the [w3ux documentation](https://w3ux.org/library/hooks/overview). 46 | 47 | ## Keywords 48 | 49 | `w3ux`, `polkadot`, `web3`, `react`, `hooks`, `typescript` 50 | 51 | ## Repository 52 | 53 | - **Source**: [GitHub](https://github.com/w3ux/w3ux-library) 54 | - **Package**: [npm](https://www.npmjs.com/package/@w3ux/hooks) 55 | - **Issues**: [GitHub Issues](https://github.com/w3ux/w3ux-library/issues) 56 | 57 | ## License 58 | 59 | This package is licensed under the GPL-3.0-only. 60 | 61 | --- 62 | 63 | Part of the [w3ux library](https://github.com/w3ux/w3ux-library) - A collection of packages for building Web3 applications. 64 | -------------------------------------------------------------------------------- /library/hooks/gulpfile.js: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { dest, series } from 'gulp' 5 | import sourcemaps from 'gulp-sourcemaps' 6 | import ts from 'gulp-typescript' 7 | import merge from 'merge-stream' 8 | 9 | // Buld CommonJS module. 10 | const buildCommonJs = () => 11 | doBuild( 12 | ts.createProject('tsconfig.json', { 13 | module: 'commonjs', 14 | target: 'es2015', 15 | removeComments: true, 16 | }), 17 | 'cjs' 18 | ) 19 | 20 | // Build ES module. 21 | const buildEsm = () => 22 | doBuild( 23 | ts.createProject('tsconfig.json', { 24 | module: 'esnext', 25 | target: 'esnext', 26 | removeComments: true, 27 | }), 28 | 'mjs' 29 | ) 30 | 31 | // Build package with provided Typescript project. 32 | const doBuild = (tsProject, outDir) => { 33 | var tsResult = tsProject.src().pipe(sourcemaps.init()).pipe(tsProject()) 34 | 35 | return merge(tsResult, tsResult.js) 36 | .pipe(sourcemaps.write('.')) 37 | .pipe(dest(`dist/${outDir}`)) 38 | } 39 | 40 | export default series(buildCommonJs, buildEsm) 41 | -------------------------------------------------------------------------------- /library/hooks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@w3ux/hooks-source", 3 | "description": "A collection of general purpose React hooks", 4 | "version": "2.2.2", 5 | "license": "GPL-3.0-only", 6 | "type": "module", 7 | "keywords": [ 8 | "w3ux", 9 | "polkadot", 10 | "web3", 11 | "react", 12 | "hooks", 13 | "typescript" 14 | ], 15 | "homepage": "https://w3ux.org/library/hooks/overview", 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/w3ux/w3ux-library.git", 19 | "directory": "library/hooks" 20 | }, 21 | "bugs": { 22 | "url": "https://github.com/w3ux/w3ux-library/issues" 23 | }, 24 | "scripts": { 25 | "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo", 26 | "build": "gulp --silent", 27 | "compile": "builder -t hooks" 28 | }, 29 | "peerDependencies": { 30 | "react": "^19" 31 | }, 32 | "devDependencies": { 33 | "@types/react": "^19.0.12", 34 | "@w3ux/types": "^2.3.0", 35 | "builder": "workspace:*", 36 | "gulp": "^5.0.0", 37 | "gulp-sourcemaps": "^3.0.0", 38 | "gulp-strip-comments": "^2.6.0", 39 | "gulp-typescript": "6.0.0-alpha.1", 40 | "merge-stream": "^2.0.0", 41 | "react": "^19.1.0", 42 | "typescript": "^5.8.2" 43 | }, 44 | "dependencies": { 45 | "@w3ux/utils": "^2.1.0", 46 | "date-fns": "^4.1.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /library/hooks/packageInfo.yml: -------------------------------------------------------------------------------- 1 | directory: 2 | - name: Hooks 3 | description: A collection of general purpose React hooks 4 | -------------------------------------------------------------------------------- /library/hooks/pkg.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bundler": "gulp", 3 | "exports": { 4 | ".": { 5 | "import": "./mjs/index.js", 6 | "require": "./cjs/index.js" 7 | }, 8 | "./util": { 9 | "import": "./mjs/util.js", 10 | "require": "./cjs/util.js" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /library/hooks/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export * from './useEffectIgnoreInitial' 5 | export * from './useOnResize' 6 | export * from './useOutsideAlerter' 7 | export * from './useSafeContext' 8 | export * from './useSize' 9 | export * from './useTimeLeft' 10 | -------------------------------------------------------------------------------- /library/hooks/src/useEffectIgnoreInitial.tsx: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { useEffect, useRef } from 'react' 5 | 6 | export const useEffectIgnoreInitial = (fn: T, deps: U[]) => { 7 | const isInitial = useRef(true) 8 | 9 | useEffect( 10 | () => { 11 | if (!isInitial.current) { 12 | if (typeof fn === 'function') { 13 | fn() 14 | } 15 | } 16 | isInitial.current = false 17 | }, 18 | deps ? [...deps] : undefined 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /library/hooks/src/useOnResize.tsx: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { RefObject } from 'react' 5 | import { useEffect, useRef } from 'react' 6 | 7 | interface UseOnResizeOptions { 8 | outerElement?: RefObject 9 | throttle?: number 10 | } 11 | 12 | /** 13 | * Custom hook that triggers a callback function when the specified element 14 | * or the window is resized. 15 | * 16 | * @param callback - The function to be executed on resize. 17 | * @param options - Optional parameters to customize the behavior: 18 | * - outerElement: A ref to an HTMLElement to listen for resize events. 19 | * - throttle: Optional duration in milliseconds to throttle the callback execution. 20 | * Default is 100 milliseconds. 21 | */ 22 | export const useOnResize = ( 23 | callback: () => void, 24 | options: UseOnResizeOptions = {} 25 | ) => { 26 | const { outerElement, throttle: throttleDuration = 100 } = options 27 | const lastExecutedRef = useRef(0) 28 | 29 | // Throttled resize handler to limit the frequency of callback execution. 30 | const handleResize = () => { 31 | const now = Date.now() 32 | 33 | // Check if the callback can be executed based on the throttle duration. 34 | if (now - lastExecutedRef.current < throttleDuration) { 35 | return 36 | } 37 | 38 | lastExecutedRef.current = now 39 | callback() 40 | } 41 | 42 | useEffect(() => { 43 | // Determine the target for the resize event listener. 44 | const target = outerElement?.current || window 45 | 46 | // Add the resize event listener when the component mounts. 47 | target.addEventListener('resize', handleResize) 48 | 49 | // Clean up the event listener when the component unmounts. 50 | return () => { 51 | target.removeEventListener('resize', handleResize) 52 | } 53 | }, [throttleDuration, callback]) 54 | } 55 | -------------------------------------------------------------------------------- /library/hooks/src/useOutsideAlerter.tsx: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { useEffect, type RefObject } from 'react' 5 | 6 | // A hook that alerts clicks outside of the passed ref. 7 | export const useOutsideAlerter = ( 8 | ref: RefObject, 9 | callback: () => void, 10 | ignore: string[] = [] 11 | ) => { 12 | useEffect(() => { 13 | const handleClickOutside = (ev: MouseEvent) => { 14 | if (ev) { 15 | if (ref.current && !ref.current.contains(ev.target as Node)) { 16 | const target = ev.target as HTMLElement 17 | // Ignore tags with a name of `ignore`, or if there is a class of `ignore` in the parent 18 | // tree. 19 | const tagName = target.tagName.toLowerCase() 20 | const ignored = ignore.some( 21 | (i) => 22 | i.toLowerCase() === tagName || target.closest(`.${i}`) !== null 23 | ) 24 | 25 | if (!ignored) { 26 | callback() 27 | } 28 | } 29 | } 30 | } 31 | document.addEventListener('mousedown', handleClickOutside) 32 | return () => { 33 | document.removeEventListener('mousedown', handleClickOutside) 34 | } 35 | }, [ref]) 36 | } 37 | -------------------------------------------------------------------------------- /library/hooks/src/useSafeContext.tsx: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { Context } from 'react' 5 | import { createContext, useContext } from 'react' 6 | 7 | export const useSafeContext = (ctx: T | null | undefined): T => { 8 | if (ctx === null || ctx === undefined) { 9 | throw new Error( 10 | 'Context value is null or undefined. Please ensure the context Provider is used correctly.' 11 | ) 12 | } 13 | return ctx 14 | } 15 | 16 | export const createSafeContext = (): [Context, () => T] => { 17 | const Context = createContext(null) 18 | const useHook = () => useSafeContext(useContext(Context)) 19 | return [Context, useHook] 20 | } 21 | -------------------------------------------------------------------------------- /library/hooks/src/useSize.tsx: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { RefObject } from 'react' 5 | import { useEffect, useRef, useState } from 'react' 6 | 7 | // Define the type for the options parameter. 8 | interface UseSizeOptions { 9 | outerElement?: RefObject 10 | throttle?: number 11 | } 12 | 13 | // Custom hook to get the width and height of a specified element. Updates the `size` state when the 14 | // specified "outer element" (or the window by default) resizes. 15 | export const useSize = ( 16 | element: RefObject, 17 | options: UseSizeOptions = {} 18 | ) => { 19 | const { outerElement, throttle: throttleDuration = 100 } = options 20 | 21 | // Helper function to retrieve the width and height of an element 22 | // If no element is found, default dimensions are set to 0. 23 | const getSize = (el: HTMLElement | null = null) => { 24 | const width = el?.offsetWidth || 0 25 | const height = el?.offsetHeight || 0 26 | return { width, height } 27 | } 28 | 29 | // Ref to store the last execution time of the `resizeThrottle` handler. 30 | const lastExecutedRef = useRef(0) 31 | 32 | // State to store the current width and height of the specified element. 33 | const [size, setSize] = useState<{ width: number; height: number }>( 34 | getSize(element?.current) 35 | ) 36 | 37 | // Throttle the resize event handler to limit how often size updates occur. 38 | const handleResize = () => { 39 | const now = Date.now() 40 | if (now - lastExecutedRef.current < throttleDuration) { 41 | return 42 | } // Exit if `throttleDuration` has not passed. 43 | 44 | lastExecutedRef.current = now // Update last execution time. 45 | 46 | setSize(getSize(element?.current)) 47 | } 48 | 49 | // Set up the resize event listener on mount and clean it up on unmount. 50 | useEffect(() => { 51 | // Determine the target for the resize event listener. 52 | // If `outerElement` is provided, listen to its resize events; otherwise, listen to the window's. 53 | const listenFor = outerElement?.current || window 54 | 55 | listenFor.addEventListener('resize', handleResize) 56 | 57 | // Clean up event listener when the component unmounts to avoid memory leaks. 58 | return () => { 59 | listenFor.removeEventListener('resize', handleResize) 60 | } 61 | }, [outerElement?.current]) 62 | 63 | // Return the current size of the element. 64 | return size 65 | } 66 | -------------------------------------------------------------------------------- /library/hooks/src/useTimeLeft/defaults.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { TimeleftDuration } from '@w3ux/types' 5 | 6 | export const defaultDuration: TimeleftDuration = { 7 | days: 0, 8 | hours: 0, 9 | minutes: 0, 10 | seconds: 0, 11 | lastMinute: false, 12 | } 13 | 14 | export const defaultRefreshInterval = 60 15 | -------------------------------------------------------------------------------- /library/hooks/src/util.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { TimeleftDuration } from '@w3ux/types' 5 | import { differenceInDays, getUnixTime, intervalToDuration } from 'date-fns' 6 | import { defaultDuration } from './useTimeLeft/defaults.js' 7 | 8 | // calculates the current timeleft duration. 9 | export const getDuration = (toDate: Date | null): TimeleftDuration => { 10 | if (!toDate) { 11 | return defaultDuration 12 | } 13 | if (getUnixTime(toDate) <= getUnixTime(new Date())) { 14 | return defaultDuration 15 | } 16 | 17 | toDate.setSeconds(toDate.getSeconds()) 18 | const d = intervalToDuration({ 19 | start: Date.now(), 20 | end: toDate, 21 | }) 22 | 23 | const days = differenceInDays(toDate, Date.now()) 24 | const hours = d?.hours || 0 25 | const minutes = d?.minutes || 0 26 | const seconds = d?.seconds || 0 27 | const lastHour = days === 0 && hours === 0 28 | const lastMinute = lastHour && minutes === 0 29 | 30 | return { 31 | days, 32 | hours, 33 | minutes, 34 | seconds, 35 | lastMinute, 36 | } 37 | } 38 | 39 | // Helper: Adds `seconds` to the current time and returns the resulting date. 40 | export const secondsFromNow = (seconds: number): Date => { 41 | const end = new Date() 42 | end.setSeconds(end.getSeconds() + seconds) 43 | return end 44 | } 45 | 46 | // Helper: Calculates the duration between the current time and the provided date. 47 | export const getDurationFromNow = (toDate: Date | null): TimeleftDuration => { 48 | if (!toDate) { 49 | return defaultDuration 50 | } 51 | if (getUnixTime(toDate) <= getUnixTime(new Date())) { 52 | return defaultDuration 53 | } 54 | 55 | toDate.setSeconds(toDate.getSeconds()) 56 | const d = intervalToDuration({ 57 | start: Date.now(), 58 | end: toDate, 59 | }) 60 | 61 | const days = differenceInDays(toDate, Date.now()) 62 | const hours = d?.hours || 0 63 | const minutes = d?.minutes || 0 64 | const seconds = d?.seconds || 0 65 | const lastHour = days === 0 && hours === 0 66 | const lastMinute = lastHour && minutes === 0 67 | 68 | return { 69 | days, 70 | hours, 71 | minutes, 72 | seconds, 73 | lastMinute, 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /library/hooks/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": "src", 5 | "rootDir": "src", 6 | "outDir": "dist" 7 | }, 8 | "include": ["src/**/*"], 9 | } 10 | -------------------------------------------------------------------------------- /library/observables-connect/README.md: -------------------------------------------------------------------------------- 1 | # Observables Connect 2 | 3 | Observables for extensions and accounts discovery 4 | 5 | ## Installation 6 | 7 | ```bash 8 | npm install @w3ux/observables-connect 9 | ``` 10 | 11 | or 12 | 13 | ```bash 14 | yarn add @w3ux/observables-connect 15 | ``` 16 | 17 | or 18 | 19 | ```bash 20 | pnpm add @w3ux/observables-connect 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```typescript 26 | import { /* your imports */ } from '@w3ux/observables-connect' 27 | ``` 28 | 29 | ### Observables 30 | 31 | This package provides RxJS observables for reactive programming: 32 | 33 | ```typescript 34 | import { /* specific observable */ } from '@w3ux/observables-connect' 35 | 36 | // Subscribe to observables 37 | /* your observable */.subscribe(value => { 38 | console.log(value) 39 | }) 40 | ``` 41 | 42 | ## Documentation 43 | 44 | For comprehensive documentation and examples, visit the [w3ux documentation](https://github.com/w3ux/w3ux-library#readme). 45 | 46 | ## Keywords 47 | 48 | `w3ux`, `polkadot`, `web3`, `observables`, `rxjs`, `extensions`, `accounts`, `typescript` 49 | 50 | ## Repository 51 | 52 | - **Source**: [GitHub](https://github.com/w3ux/w3ux-library) 53 | - **Package**: [npm](https://www.npmjs.com/package/@w3ux/observables-connect) 54 | - **Issues**: [GitHub Issues](https://github.com/w3ux/w3ux-library/issues) 55 | 56 | ## License 57 | 58 | This package is licensed under the GPL-3.0-only. 59 | 60 | --- 61 | 62 | Part of the [w3ux library](https://github.com/w3ux/w3ux-library) - A collection of packages for building Web3 applications. 63 | -------------------------------------------------------------------------------- /library/observables-connect/gulpfile.js: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { dest, series } from 'gulp' 5 | import sourcemaps from 'gulp-sourcemaps' 6 | import ts from 'gulp-typescript' 7 | import merge from 'merge-stream' 8 | 9 | // Build ES module 10 | const buildEsm = () => 11 | doBuild( 12 | ts.createProject('tsconfig.json', { 13 | module: 'esnext', 14 | target: 'esnext', 15 | removeComments: true, 16 | }), 17 | '.' 18 | ) 19 | 20 | // Build package with provided Typescript project 21 | const doBuild = (tsProject, outDir) => { 22 | var tsResult = tsProject.src().pipe(sourcemaps.init()).pipe(tsProject()) 23 | 24 | return merge(tsResult, tsResult.js) 25 | .pipe(sourcemaps.write('.')) 26 | .pipe(dest(`dist/${outDir}`)) 27 | } 28 | 29 | export default series(buildEsm) 30 | -------------------------------------------------------------------------------- /library/observables-connect/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@w3ux/observables-connect", 3 | "description": "Observables for extensions and accounts discovery", 4 | "version": "0.9.44", 5 | "license": "GPL-3.0-only", 6 | "type": "module", 7 | "keywords": [ 8 | "w3ux", 9 | "polkadot", 10 | "web3", 11 | "observables", 12 | "rxjs", 13 | "extensions", 14 | "accounts", 15 | "typescript" 16 | ], 17 | "homepage": "https://github.com/w3ux/w3ux-library#readme", 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/w3ux/w3ux-library.git", 21 | "directory": "library/observables-connect" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/w3ux/w3ux-library/issues" 25 | }, 26 | "scripts": { 27 | "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo", 28 | "build": "gulp --silent", 29 | "compile": "builder -t observables-connect" 30 | }, 31 | "dependencies": { 32 | "@w3ux/extension-assets": "^2.2.5", 33 | "@w3ux/utils": "^2.1.0" 34 | }, 35 | "devDependencies": { 36 | "@w3ux/types": "^2.3.0", 37 | "builder": "workspace:*", 38 | "gulp": "^5.0.0", 39 | "gulp-sourcemaps": "^3.0.0", 40 | "gulp-strip-comments": "^2.6.0", 41 | "gulp-typescript": "6.0.0-alpha.1", 42 | "merge-stream": "^2.0.0", 43 | "react": "^19.1.0", 44 | "typescript": "^5.8.2" 45 | }, 46 | "peerDependencies": { 47 | "rxjs": "^7.8.2" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /library/observables-connect/packageInfo.yml: -------------------------------------------------------------------------------- 1 | directory: 2 | - name: Observables Connect 3 | description: Observables for extensions and accounts discovery 4 | -------------------------------------------------------------------------------- /library/observables-connect/pkg.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bundler": "gulp", 3 | "exports": { 4 | ".": "./index.js", 5 | "./accounts": "./accounts/index.js", 6 | "./extensions": "./extensions/index.js" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /library/observables-connect/src/accounts/get.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { ExtensionAccount, ExtensionEnableResults } from '@w3ux/types' 5 | import { formatExtensionAccounts } from './util' 6 | 7 | // Connects to provided extensions and gets all accounts 8 | export const getAccountsFromExtensions = async ( 9 | extensions: ExtensionEnableResults, 10 | ss58: number 11 | ): Promise => { 12 | try { 13 | const results = await Promise.allSettled( 14 | Array.from(extensions.values()).map(({ extension }) => 15 | extension!.accounts.get() 16 | ) 17 | ) 18 | 19 | const allAccounts: ExtensionAccount[] = [] 20 | const extensionEntries = Array.from(extensions.entries()) 21 | for (let i = 0; i < results.length; i++) { 22 | const result = results[i] 23 | const source = extensionEntries[i][0] 24 | const signer = extensionEntries[i][1].extension!.signer 25 | 26 | if (result.status === 'fulfilled' && signer) { 27 | const { value } = result 28 | 29 | // This is duplicating what `handleExtensionAccountsUpdate` is doing to accounts: -- 30 | const accounts = formatExtensionAccounts(value, ss58) 31 | .filter( 32 | ({ address }) => !allAccounts.find((a) => address === a.address) 33 | ) 34 | .map(({ address, name }) => ({ 35 | address, 36 | name, 37 | source, 38 | signer, 39 | })) 40 | allAccounts.push(...accounts) 41 | } 42 | } 43 | return allAccounts 44 | } catch (e) { 45 | console.error('Error during account formatting: ', e) 46 | return [] 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /library/observables-connect/src/accounts/index.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export * from './get' 5 | export * from './unsubs' 6 | export * from './util' 7 | -------------------------------------------------------------------------------- /library/observables-connect/src/accounts/unsubs.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | // Extension account subscription unsubs 5 | export const unsubs: Record void> = {} 6 | 7 | // Add an extension id to unsub state 8 | export const addUnsub = (id: string, unsub: () => void) => { 9 | unsubs[id] = unsub 10 | } 11 | 12 | // Unsubscribe to all unsubs 13 | export const unsubAll = () => { 14 | Object.values(unsubs).forEach((unsub) => { 15 | unsub() 16 | }) 17 | } 18 | -------------------------------------------------------------------------------- /library/observables-connect/src/accounts/util.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { 5 | ExtensionAccount, 6 | ProcessExtensionAccountsResult, 7 | } from '@w3ux/types' 8 | import { formatAccountSs58, isValidAddress } from '@w3ux/utils' 9 | import { DefaultProcessExtensionResult } from '../consts' 10 | import { _extensionAccounts } from '../subjects' 11 | 12 | // Gets accounts to be imported and commits them to state 13 | 14 | interface Config { 15 | source: string 16 | ss58: number 17 | } 18 | export const processExtensionAccounts = ( 19 | config: Config, 20 | signer: unknown, 21 | newAccounts: ExtensionAccount[] 22 | ): ProcessExtensionAccountsResult => { 23 | const { source, ss58 } = config 24 | if (!newAccounts.length) { 25 | return DefaultProcessExtensionResult 26 | } 27 | 28 | // Get valid accounts from extension 29 | newAccounts = formatExtensionAccounts(newAccounts, ss58) 30 | 31 | // Find any accounts that have been removed from this extension 32 | const removedAccounts = _extensionAccounts 33 | .getValue() 34 | .filter((j) => j.source === source) 35 | .filter((j) => !newAccounts.find((i) => i.address === j.address)) 36 | 37 | // Remove accounts that have already been imported 38 | newAccounts = newAccounts.filter( 39 | ({ address }) => 40 | !_extensionAccounts.getValue().find((j) => j.address === address) 41 | ) 42 | 43 | // Format accounts properties 44 | newAccounts = newAccounts.map(({ address, name }) => ({ 45 | address, 46 | name, 47 | source, 48 | signer, 49 | })) 50 | 51 | // Update observable state 52 | updateAccounts({ 53 | add: newAccounts, 54 | remove: removedAccounts, 55 | }) 56 | 57 | return { 58 | newAccounts, 59 | removedAccounts: [...removedAccounts], 60 | } 61 | } 62 | 63 | // Formats accounts to correct ss58 and removes invalid accounts 64 | export const formatExtensionAccounts = ( 65 | accounts: ExtensionAccount[], 66 | ss58: number 67 | ) => { 68 | accounts = accounts 69 | // Remove accounts that do not contain correctly formatted addresses 70 | .filter(({ address }) => isValidAddress(address)) 71 | // Reformat addresses to ensure default ss58 format 72 | .map((account) => { 73 | const formattedAddress = formatAccountSs58(account.address, ss58) 74 | if (!formattedAddress) { 75 | return null 76 | } 77 | account.address = formattedAddress 78 | return account 79 | }) 80 | // Remove null entries resulting from invalid formatted addresses 81 | .filter((account) => account !== null) 82 | 83 | return accounts 84 | } 85 | 86 | // Updates accounts observable based on removed and added accounts 87 | export const updateAccounts = ({ 88 | add, 89 | remove, 90 | }: { 91 | add: ExtensionAccount[] 92 | remove: ExtensionAccount[] 93 | }) => { 94 | const newAccounts = [..._extensionAccounts.getValue()] 95 | .concat(add) 96 | .filter((a) => remove.find((s) => s.address === a.address) === undefined) 97 | _extensionAccounts.next(newAccounts) 98 | } 99 | -------------------------------------------------------------------------------- /library/observables-connect/src/consts.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { ProcessExtensionAccountsResult } from '@w3ux/types' 5 | 6 | export const DefaultProcessExtensionResult: ProcessExtensionAccountsResult = { 7 | newAccounts: [], 8 | removedAccounts: [], 9 | } 10 | 11 | // Local storage active extensions key 12 | export const ActiveExtensionsKey = 'active_extensions' 13 | export const HardwareAccountsKey = 'hardware_accounts' 14 | -------------------------------------------------------------------------------- /library/observables-connect/src/extensions/connect.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { ExtensionAccount, ExtensionInterface } from '@w3ux/types' 5 | import { addUnsub } from '../accounts/unsubs' 6 | import { processExtensionAccounts } from '../accounts/util' 7 | import { canConnect } from '../util' 8 | import { initExtensions } from './index' 9 | 10 | // Handles accounts from a single extension 11 | const handleAccounts = ( 12 | ss58: number, 13 | id: string, 14 | extension: ExtensionInterface, 15 | accounts: ExtensionAccount[] 16 | ) => { 17 | processExtensionAccounts( 18 | { 19 | source: id, 20 | ss58, 21 | }, 22 | extension.signer, 23 | accounts 24 | ) 25 | } 26 | 27 | // Connects to a single extension and processes its accounts 28 | export const connectExtension = async ( 29 | dappName: string, 30 | ss58: number, 31 | id: string 32 | ): Promise => { 33 | if (canConnect(id)) { 34 | const { connected } = await initExtensions(dappName, [id]) 35 | if (connected.size === 0) { 36 | return false 37 | } 38 | const result = connected.get(id) 39 | const extension = result?.extension 40 | const canSubscribe = 41 | !!extension && typeof extension.accounts.subscribe === 'function' 42 | 43 | // If account subscriptions are not supported, simply get the account(s) from the extension, 44 | // otherwise, subscribe to accounts 45 | if (extension) { 46 | if (!canSubscribe) { 47 | const accounts = await extension.accounts.get() 48 | handleAccounts(ss58, id, extension, accounts) 49 | } else { 50 | const unsub = extension.accounts.subscribe((accounts) => { 51 | handleAccounts(ss58, id, extension, accounts) 52 | }) 53 | addUnsub(id, unsub) 54 | } 55 | } 56 | return true 57 | } 58 | return false 59 | } 60 | -------------------------------------------------------------------------------- /library/observables-connect/src/extensions/discover.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import extensions from '@w3ux/extension-assets' 5 | import { _extensionsStatus, _gettingExtensions } from '../subjects' 6 | 7 | // Gets extensions from injectedWeb3 8 | export const getExtensions = async () => { 9 | _gettingExtensions.next(true) 10 | let injectedWeb3Interval: ReturnType | undefined = 11 | undefined 12 | 13 | // Format installed extensions 14 | const formatInstalled = () => 15 | Object.keys(extensions).reduce( 16 | (acc, key) => { 17 | acc[key] = 18 | window?.injectedWeb3?.[key] !== undefined ? 'installed' : acc[key] 19 | return acc 20 | }, 21 | { ..._extensionsStatus.getValue() } 22 | ) 23 | 24 | // Handle completed interval check 25 | const handleCompleted = async (foundExtensions: boolean) => { 26 | clearInterval(injectedWeb3Interval) 27 | if (foundExtensions) { 28 | _extensionsStatus.next(formatInstalled()) 29 | } 30 | _gettingExtensions.next(false) 31 | } 32 | 33 | const interval = 200 34 | const maxChecks = 10 35 | const minVerifications = 2 36 | 37 | // Getter for the currently installed extensions 38 | let counter = 0 39 | let verifications = 0 40 | injectedWeb3Interval = setInterval(() => { 41 | counter++ 42 | if (counter === maxChecks) { 43 | handleCompleted(false) 44 | } else { 45 | const injected = window?.injectedWeb3 46 | 47 | // Check if injected exists and all extensions have a valid enable function 48 | const ready = 49 | injected !== undefined && 50 | Object.entries(injected).every( 51 | ([, ext]) => ext && typeof ext.enable === 'function' 52 | ) 53 | 54 | // Increment verifications if the extensions are ready 55 | if (ready) { 56 | verifications++ 57 | } else { 58 | verifications = 0 59 | } 60 | 61 | if (counter > 2 && verifications >= minVerifications) { 62 | handleCompleted(true) 63 | } 64 | } 65 | }, interval) 66 | } 67 | -------------------------------------------------------------------------------- /library/observables-connect/src/extensions/enable.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { 5 | ExtensionEnableResult, 6 | ExtensionEnableResults, 7 | ExtensionInterface, 8 | } from '@w3ux/types' 9 | import { withTimeoutThrow } from '@w3ux/utils' 10 | 11 | // Get extensions and enable them 12 | export const enableExtensions = async (ids: string[], dappName: string) => { 13 | const extensionIds = getExtensionsById(ids) 14 | const enableResults = await doEnable(extensionIds, dappName) 15 | 16 | return formatEnabledExtensions(extensionIds, enableResults) 17 | } 18 | 19 | // Gets extensions from injectedWeb3 by their ids 20 | const getExtensionsById = (ids: string[]) => { 21 | const validIds: string[] = [] 22 | ids.forEach((id) => { 23 | const enable = window.injectedWeb3?.[id]?.enable 24 | if (enable !== undefined && typeof enable === 'function') { 25 | validIds.push(id) 26 | } 27 | }) 28 | return validIds 29 | } 30 | 31 | // Calls enable for the provided extensions 32 | const doEnable = async ( 33 | extensionIds: string[], 34 | dappName: string 35 | ): Promise[]> => 36 | await Promise.allSettled( 37 | Array.from(extensionIds).map( 38 | (id) => 39 | withTimeoutThrow( 40 | 1000, 41 | window.injectedWeb3![id].enable(dappName) 42 | ) as Promise 43 | ) 44 | ) 45 | 46 | const formatEnabledExtensions = ( 47 | extensionIds: string[], 48 | enabledResults: PromiseSettledResult[] 49 | ): ExtensionEnableResults => { 50 | const extensionsState = new Map() 51 | 52 | for (let i = 0; i < enabledResults.length; i++) { 53 | const result = enabledResults[i] 54 | const id = extensionIds[i] 55 | 56 | if (result.status === 'fulfilled') { 57 | extensionsState.set(id, { 58 | extension: result.value, 59 | connected: true, 60 | }) 61 | } else if (result.status === 'rejected') { 62 | extensionsState.set(id, { 63 | extension: null, 64 | connected: false, 65 | error: result.reason, 66 | }) 67 | } 68 | } 69 | return extensionsState 70 | } 71 | -------------------------------------------------------------------------------- /library/observables-connect/src/extensions/index.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export * from './connect' 5 | export * from './discover' 6 | export * from './enable' 7 | export * from './init' 8 | export * from './reconnect' 9 | -------------------------------------------------------------------------------- /library/observables-connect/src/extensions/init.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { ExtensionEnableResults } from '@w3ux/types' 5 | import { addExtensionToLocal, removeExtensionFromLocal } from '../local' 6 | import { _extensionsStatus, _initialisedExtensions } from '../subjects' 7 | import { enableExtensions } from './enable' 8 | 9 | // Connects to previously connected extensions, or to a specific set of extensions 10 | export const initExtensions = async ( 11 | dappName: string, 12 | extensionIds: string[] 13 | ): Promise<{ connected: ExtensionEnableResults }> => { 14 | if (!extensionIds.length) { 15 | return { 16 | connected: new Map(), 17 | } 18 | } 19 | // Get extensions and enable them 20 | const enableResults = await enableExtensions(extensionIds, dappName) 21 | 22 | // Determine which extensions are connected and which have errors 23 | const [connected, withError] = [ 24 | filterConnectedExtensions(enableResults), 25 | filterFailedExtensions(enableResults), 26 | ] 27 | 28 | // Manage local storage depending on connection status 29 | Array.from(connected.keys()).forEach((id) => addExtensionToLocal(id)) 30 | Array.from(withError.keys()).forEach((id) => removeExtensionFromLocal(id)) 31 | 32 | // Handle new extension statuses 33 | const newStatus = { ..._extensionsStatus.getValue() } 34 | Array.from(connected.keys()).forEach((id) => { 35 | newStatus[id] = 'connected' 36 | }) 37 | Array.from(withError.entries()).forEach(([id, { error }]) => { 38 | if (error?.startsWith('Error')) { 39 | // Extension not found - remove from state 40 | if (error.substring(0, 17) === 'NotInstalledError') { 41 | delete newStatus[id] 42 | } else { 43 | // Assume extension not authenticated 44 | newStatus[id] = 'not_authenticated' 45 | } 46 | } 47 | }) 48 | 49 | // Record initialised extensions 50 | const newInitialised = [..._initialisedExtensions.getValue()] 51 | extensionIds.forEach((id) => { 52 | if (!newInitialised.includes(id)) { 53 | newInitialised.push(id) 54 | } 55 | }) 56 | 57 | // Commit updates to observables 58 | _extensionsStatus.next(newStatus) 59 | _initialisedExtensions.next(newInitialised) 60 | 61 | return { connected } 62 | } 63 | 64 | // Filter successfully connected extensions 65 | const filterConnectedExtensions = ( 66 | extensions: ExtensionEnableResults 67 | ): ExtensionEnableResults => 68 | new Map( 69 | Array.from(extensions.entries()).filter(([, state]) => state.connected) 70 | ) 71 | 72 | // Filter extensions that failed to connect 73 | const filterFailedExtensions = ( 74 | extensions: ExtensionEnableResults 75 | ): ExtensionEnableResults => 76 | new Map( 77 | Array.from(extensions.entries()).filter(([, state]) => !state.connected) 78 | ) 79 | -------------------------------------------------------------------------------- /library/observables-connect/src/extensions/reconnect.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { initExtensions } from '.' 5 | import { 6 | addUnsub, 7 | getAccountsFromExtensions, 8 | processExtensionAccounts, 9 | updateAccounts, 10 | } from '../accounts/index' 11 | import { getActiveExtensionsLocal } from '../local' 12 | import { setReconnectSync } from '../util' 13 | 14 | export const reconnectExtensions = async (dappName: string, ss58: number) => { 15 | setReconnectSync('syncing') 16 | const { connected } = await initExtensions( 17 | dappName, 18 | getActiveExtensionsLocal() 19 | ) 20 | if (connected.size > 0) { 21 | // Perform initial account state update 22 | updateAccounts({ 23 | add: await getAccountsFromExtensions(connected, ss58), 24 | remove: [], 25 | }) 26 | 27 | // If available, subscribe to accounts for each connected extension 28 | for (const [id, { extension }] of Array.from(connected.entries())) { 29 | if (typeof extension!.accounts.subscribe === 'function') { 30 | const unsub = extension!.accounts.subscribe((accounts) => { 31 | processExtensionAccounts( 32 | { 33 | source: id, 34 | ss58, 35 | }, 36 | extension!.signer, 37 | accounts 38 | ) 39 | }) 40 | addUnsub(id, unsub) 41 | } 42 | } 43 | } 44 | setReconnectSync('synced') 45 | } 46 | -------------------------------------------------------------------------------- /library/observables-connect/src/index.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export * from './consts' 5 | export * from './local' 6 | export * from './observables' 7 | export * from './util' 8 | -------------------------------------------------------------------------------- /library/observables-connect/src/local.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { HardwareAccount } from '@w3ux/types' 5 | import { localStorageOrDefault } from '@w3ux/utils' 6 | import { ActiveExtensionsKey, HardwareAccountsKey } from './consts' 7 | 8 | // Gets all active extensions from local storage 9 | export const getActiveExtensionsLocal = (): string[] => { 10 | const current = localStorageOrDefault(ActiveExtensionsKey, [], true) 11 | return Array.isArray(current) ? current : [] 12 | } 13 | 14 | // Check if an extension exists in local storage 15 | export const isExtensionLocal = (id: string): boolean => 16 | getActiveExtensionsLocal().includes(id) 17 | 18 | // Adds an extension to local storage 19 | export const addExtensionToLocal = (id: string): void => { 20 | const current = getActiveExtensionsLocal() 21 | if (!current.includes(id)) { 22 | localStorage.setItem(ActiveExtensionsKey, JSON.stringify([...current, id])) 23 | } 24 | } 25 | 26 | // Removes extension from local storage 27 | export const removeExtensionFromLocal = (id: string): void => { 28 | const current = getActiveExtensionsLocal() 29 | localStorage.setItem( 30 | ActiveExtensionsKey, 31 | JSON.stringify(current.filter((localId) => localId !== id)) 32 | ) 33 | } 34 | 35 | // Gets imported hardware accounts from local storage 36 | export const getHardwareAccountsLocal = (): HardwareAccount[] => { 37 | const accounts = localStorageOrDefault( 38 | HardwareAccountsKey, 39 | [], 40 | true 41 | ) as HardwareAccount[] 42 | 43 | return accounts 44 | } 45 | -------------------------------------------------------------------------------- /library/observables-connect/src/observables.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { 5 | _extensionAccounts, 6 | _extensionsStatus, 7 | _gettingExtensions, 8 | _hardwareAccounts, 9 | _initialisedExtensions, 10 | _reconnectSync, 11 | } from './subjects' 12 | 13 | // Discovered extensions along with their status 14 | export const extensionsStatus$ = _extensionsStatus.asObservable() 15 | 16 | // Whether extensions are being checked 17 | export const gettingExtensions$ = _gettingExtensions.asObservable() 18 | 19 | // Extensions that have successfully connected 20 | export const initialisedExtensions$ = _initialisedExtensions.asObservable() 21 | 22 | // Sync status of reconnecting to previously enabled extensions 23 | export const reconnectSync$ = _reconnectSync.asObservable() 24 | 25 | // Imported extension accounts 26 | export const extensionAccounts$ = _extensionAccounts.asObservable() 27 | 28 | // Imported hardware accounts 29 | export const hardwareAccounts$ = _hardwareAccounts.asObservable() 30 | -------------------------------------------------------------------------------- /library/observables-connect/src/subjects.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { 5 | ExtensionAccount, 6 | ExtensionsStatus, 7 | HardwareAccount, 8 | Sync, 9 | } from '@w3ux/types' 10 | import { BehaviorSubject } from 'rxjs' 11 | import { getHardwareAccountsLocal } from './local' 12 | 13 | // NOTE: These subjects stay private to the package and are not exported 14 | 15 | export const _extensionsStatus = new BehaviorSubject({}) 16 | export const _gettingExtensions = new BehaviorSubject(true) 17 | export const _initialisedExtensions = new BehaviorSubject([]) 18 | export const _reconnectSync = new BehaviorSubject('unsynced') 19 | export const _extensionAccounts = new BehaviorSubject([]) 20 | export const _hardwareAccounts = new BehaviorSubject( 21 | getHardwareAccountsLocal() 22 | ) 23 | -------------------------------------------------------------------------------- /library/observables-connect/src/types.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { ExtensionInjected } from '@w3ux/types' 5 | 6 | declare global { 7 | interface Window { 8 | injectedWeb3?: Record 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /library/observables-connect/src/util.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { ExtensionStatus, HardwareAccount, Sync } from '@w3ux/types' 5 | import { 6 | _extensionAccounts, 7 | _extensionsStatus, 8 | _hardwareAccounts, 9 | _reconnectSync, 10 | } from './subjects' 11 | 12 | // Gets an extension status 13 | export const getStatus = (id: string): ExtensionStatus => 14 | _extensionsStatus.getValue()[id] || undefined 15 | 16 | // Sets an extension status 17 | export const setStatus = (id: string, status: ExtensionStatus) => { 18 | const newValue = { ..._extensionsStatus.getValue() } 19 | newValue[id] = status 20 | _extensionsStatus.next(newValue) 21 | } 22 | 23 | // Removes an extension status 24 | export const removeStatus = (id: string) => { 25 | const { [id]: _, ...rest } = _extensionsStatus.getValue() 26 | _extensionsStatus.next(rest) 27 | } 28 | 29 | // Whether an extension can be connected 30 | export const canConnect = (id: string) => 31 | ![undefined, 'connected'].includes(_extensionsStatus.getValue()[id]) 32 | 33 | // Reset accounts 34 | export const resetAccounts = () => { 35 | _extensionAccounts.next([]) 36 | } 37 | 38 | // Get previously enabled extension reconnect sync status 39 | export const getReconnectSync = () => _reconnectSync.getValue() 40 | 41 | // Set previously enabled extension reconnect sync status 42 | export const setReconnectSync = (sync: Sync) => { 43 | _reconnectSync.next(sync) 44 | } 45 | 46 | // Get hardware accounts 47 | export const getHardwareAccounts = () => _hardwareAccounts.getValue() 48 | 49 | // Set hardware accounts 50 | export const setHardwareAccounts = (accounts: HardwareAccount[]) => { 51 | _hardwareAccounts.next(accounts) 52 | } 53 | -------------------------------------------------------------------------------- /library/observables-connect/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": "src", 5 | "rootDir": "src", 6 | "outDir": "dist" 7 | }, 8 | "include": ["src/**/*"], 9 | } 10 | -------------------------------------------------------------------------------- /library/react-connect-kit/README.md: -------------------------------------------------------------------------------- 1 | # Connect Kit 2 | 3 | Providers and hooks for connecting to web3 wallets and interacting with accounts 4 | 5 | ## Installation 6 | 7 | ```bash 8 | npm install @w3ux/react-connect-kit 9 | ``` 10 | 11 | or 12 | 13 | ```bash 14 | yarn add @w3ux/react-connect-kit 15 | ``` 16 | 17 | or 18 | 19 | ```bash 20 | pnpm add @w3ux/react-connect-kit 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```typescript 26 | import { /* your imports */ } from '@w3ux/react-connect-kit' 27 | ``` 28 | 29 | ### React Usage 30 | 31 | This package provides React hooks and components. Here's a basic example: 32 | 33 | ```tsx 34 | import React from 'react' 35 | import { /* specific hook or component */ } from '@w3ux/react-connect-kit' 36 | 37 | function MyComponent() { 38 | // Use the imported hooks or components here 39 | return
Your component content
40 | } 41 | ``` 42 | 43 | ## Documentation 44 | 45 | For comprehensive documentation and examples, visit the [w3ux documentation](https://w3ux.org/library/react-connect-kit/overview). 46 | 47 | ## Keywords 48 | 49 | `w3ux`, `polkadot`, `web3`, `react`, `hooks`, `wallet`, `connect`, `typescript` 50 | 51 | ## Repository 52 | 53 | - **Source**: [GitHub](https://github.com/w3ux/w3ux-library) 54 | - **Package**: [npm](https://www.npmjs.com/package/@w3ux/react-connect-kit) 55 | - **Issues**: [GitHub Issues](https://github.com/w3ux/w3ux-library/issues) 56 | 57 | ## License 58 | 59 | This package is licensed under the GPL-3.0-only. 60 | 61 | --- 62 | 63 | Part of the [w3ux library](https://github.com/w3ux/w3ux-library) - A collection of packages for building Web3 applications. 64 | -------------------------------------------------------------------------------- /library/react-connect-kit/gulpfile.js: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { dest, series } from 'gulp' 5 | import sourcemaps from 'gulp-sourcemaps' 6 | import ts from 'gulp-typescript' 7 | import merge from 'merge-stream' 8 | 9 | // Build ES module. 10 | const buildEsm = () => 11 | doBuild( 12 | ts.createProject('tsconfig.json', { 13 | module: 'esnext', 14 | target: 'esnext', 15 | removeComments: true, 16 | }), 17 | '.' 18 | ) 19 | 20 | // Build package with provided Typescript project. 21 | const doBuild = (tsProject, outDir) => { 22 | var tsResult = tsProject.src().pipe(sourcemaps.init()).pipe(tsProject()) 23 | 24 | return merge(tsResult, tsResult.js) 25 | .pipe(sourcemaps.write('.')) 26 | .pipe(dest(`dist/${outDir}`)) 27 | } 28 | 29 | export default series(buildEsm) 30 | -------------------------------------------------------------------------------- /library/react-connect-kit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@w3ux/react-connect-kit-source", 3 | "description": "Providers and hooks for connecting to web3 wallets and interacting with accounts", 4 | "version": "3.5.4", 5 | "license": "GPL-3.0-only", 6 | "type": "module", 7 | "keywords": [ 8 | "w3ux", 9 | "polkadot", 10 | "web3", 11 | "react", 12 | "hooks", 13 | "wallet", 14 | "connect", 15 | "typescript" 16 | ], 17 | "homepage": "https://w3ux.org/library/react-connect-kit/overview", 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/w3ux/w3ux-library.git", 21 | "directory": "library/react-connect-kit" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/w3ux/w3ux-library/issues" 25 | }, 26 | "scripts": { 27 | "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo", 28 | "build": "gulp --silent", 29 | "compile": "builder -t react-connect-kit" 30 | }, 31 | "dependencies": { 32 | "@w3ux/hooks": "^2.2.2", 33 | "@w3ux/observables-connect": "^0.9.44", 34 | "@w3ux/utils": "^2.1.0" 35 | }, 36 | "devDependencies": { 37 | "@types/react": "^19.0.12", 38 | "@w3ux/types": "^2.3.0", 39 | "builder": "workspace:*", 40 | "gulp": "^5.0.0", 41 | "gulp-sourcemaps": "^3.0.0", 42 | "gulp-strip-comments": "^2.6.0", 43 | "gulp-typescript": "6.0.0-alpha.1", 44 | "merge-stream": "^2.0.0", 45 | "react": "^19.1.0", 46 | "typescript": "^5.8.2" 47 | }, 48 | "peerDependencies": { 49 | "rxjs": "^7.8.2" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /library/react-connect-kit/packageInfo.yml: -------------------------------------------------------------------------------- 1 | directory: 2 | - name: Connect Kit 3 | description: Providers and hooks for connecting to web3 wallets and interacting with accounts 4 | -------------------------------------------------------------------------------- /library/react-connect-kit/pkg.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bundler": "gulp", 3 | "exports": { 4 | ".": "./index.js" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /library/react-connect-kit/src/Extensions/Connect.tsx: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { createSafeContext } from '@w3ux/hooks' 5 | import { 6 | canConnect, 7 | extensionsStatus$, 8 | getStatus, 9 | gettingExtensions$, 10 | removeStatus, 11 | setStatus, 12 | } from '@w3ux/observables-connect' 13 | import { getExtensions } from '@w3ux/observables-connect/extensions' 14 | import type { ExtensionsStatus, ExtensionStatus } from '@w3ux/types' 15 | import { type ReactNode, useEffect, useState } from 'react' 16 | import { combineLatest } from 'rxjs' 17 | import type { ExtensionsConnectContextInterface } from './types' 18 | 19 | export const [ExtensionsConnectContext, useExtensions] = 20 | createSafeContext() 21 | 22 | export const ExtensionsConnectProvider = ({ 23 | children, 24 | }: { 25 | children: ReactNode 26 | }) => { 27 | // Store whether extensions are being fetched 28 | const [gettingExtensions, setGettingExtensions] = useState(true) 29 | 30 | // Store discovered extensions along with their status 31 | const [extensionsStatus, setExtensionsStatus] = useState({}) 32 | 33 | // Setter for an extension status 34 | const setExtensionStatus = (id: string, status: ExtensionStatus) => { 35 | setStatus(id, status) 36 | } 37 | 38 | // Removes an extension status 39 | const removeExtensionStatus = (id: string) => { 40 | removeStatus(id) 41 | } 42 | 43 | // Checks if an extension has been installed 44 | const extensionInstalled = (id: string): boolean => 45 | getStatus(id) !== undefined 46 | 47 | // Checks whether an extension can be connected to 48 | const extensionCanConnect = (id: string): boolean => canConnect(id) 49 | 50 | // Subscribes to observables and updates state 51 | useEffect(() => { 52 | getExtensions() 53 | const sub = combineLatest([ 54 | gettingExtensions$, 55 | extensionsStatus$, 56 | ]).subscribe(([getting, status]) => { 57 | setGettingExtensions(getting) 58 | setExtensionsStatus(status) 59 | }) 60 | return () => { 61 | sub.unsubscribe() 62 | } 63 | }, []) 64 | 65 | return ( 66 | 76 | {children} 77 | 78 | ) 79 | } 80 | -------------------------------------------------------------------------------- /library/react-connect-kit/src/Extensions/Provider.tsx: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { ExtensionAccountsProvider } from './Accounts' 5 | import { ExtensionsConnectProvider } from './Connect' 6 | import type { ExtensionsProviderProps } from './types' 7 | 8 | export const ExtensionsProvider = ({ 9 | ss58, 10 | dappName, 11 | children, 12 | }: ExtensionsProviderProps) => ( 13 | 14 | 15 | {children} 16 | 17 | 18 | ) 19 | -------------------------------------------------------------------------------- /library/react-connect-kit/src/Extensions/index.tsx: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export { ExtensionsProvider } from './Provider' 5 | 6 | export { useExtensionAccounts } from './Accounts' 7 | export { useExtensions } from './Connect' 8 | -------------------------------------------------------------------------------- /library/react-connect-kit/src/Extensions/types.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { 5 | Account, 6 | ExtensionAccount, 7 | ExtensionStatus, 8 | Sync, 9 | } from '@w3ux/types' 10 | import type { ReactNode } from 'react' 11 | 12 | export interface ExtensionsConnectContextInterface { 13 | gettingExtensions: boolean 14 | extensionsStatus: Record 15 | setExtensionStatus: (id: string, status: ExtensionStatus) => void 16 | removeExtensionStatus: (id: string) => void 17 | extensionInstalled: (id: string) => boolean 18 | extensionCanConnect: (id: string) => boolean 19 | } 20 | 21 | export interface ExtensionAccountsContextInterface { 22 | extensionsInitialised: string[] 23 | connectExtension: (id: string) => Promise 24 | extensionsSynced: Sync 25 | getExtensionAccount: (address: string) => ExtensionAccount | undefined 26 | getExtensionAccounts: (ss58: number) => Account[] 27 | } 28 | 29 | export interface ExtensionsProviderProps { 30 | children: ReactNode 31 | ss58: number 32 | dappName: string 33 | } 34 | -------------------------------------------------------------------------------- /library/react-connect-kit/src/Hardware/types.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { HardwareAccount, HardwareAccountSource } from '@w3ux/types' 5 | 6 | export interface HardwareAccountsContextInterface { 7 | hardwareAccountExists: ( 8 | source: HardwareAccountSource, 9 | network: string, 10 | a: string 11 | ) => boolean 12 | addHardwareAccount: ( 13 | source: HardwareAccountSource, 14 | network: string, 15 | address: string, 16 | index: number, 17 | callback?: () => void 18 | ) => HardwareAccount | null 19 | removeHardwareAccount: ( 20 | source: HardwareAccountSource, 21 | network: string, 22 | address: string, 23 | callback?: () => void 24 | ) => void 25 | renameHardwareAccount: ( 26 | source: HardwareAccountSource, 27 | network: string, 28 | address: string, 29 | name: string 30 | ) => void 31 | getHardwareAccount: ( 32 | source: HardwareAccountSource, 33 | network: string, 34 | address: string 35 | ) => HardwareAccount | null 36 | getHardwareAccounts: ( 37 | source: HardwareAccountSource, 38 | network: string 39 | ) => HardwareAccount[] 40 | } 41 | -------------------------------------------------------------------------------- /library/react-connect-kit/src/index.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export * from './Extensions' 5 | export * from './Hardware' 6 | -------------------------------------------------------------------------------- /library/react-connect-kit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "moduleResolution": "bundler", 5 | "baseUrl": "src", 6 | "rootDir": "src", 7 | "outDir": "dist" 8 | }, 9 | "include": ["src/**/*"], 10 | } 11 | -------------------------------------------------------------------------------- /library/react-odometer/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [2.1.0](https://github.com/w3ux/w3ux-library/compare/react-odometer-source-v2.0.1...react-odometer-source-v2.1.0) (2025-06-07) 4 | 5 | 6 | ### Features 7 | 8 | * Enable strict mode ([#270](https://github.com/w3ux/w3ux-library/issues/270)) ([2c2c460](https://github.com/w3ux/w3ux-library/commit/2c2c4603988fc13d986116311542adef65b9b583)) 9 | * react 19 alpha support ([c7c0ee8](https://github.com/w3ux/w3ux-library/commit/c7c0ee87ba9fbbde54ab581027a2e2189972a65d)) 10 | * **refactor:** Migrate from yarn to pnpm ([#206](https://github.com/w3ux/w3ux-library/issues/206)) ([93d2a40](https://github.com/w3ux/w3ux-library/commit/93d2a40cc0c455936022ef6a89bc18999d7928e5)) 11 | * **refactor:** Migrate to ESLint 9 ([#207](https://github.com/w3ux/w3ux-library/issues/207)) ([9f8c3ef](https://github.com/w3ux/w3ux-library/commit/9f8c3ef4c5a3ff23c5ad7d5885fd0dad0ee75c7b)) 12 | * **refactor:** Simplify builder api, add CI ([#260](https://github.com/w3ux/w3ux-library/issues/260)) ([146bd31](https://github.com/w3ux/w3ux-library/commit/146bd313b23711d08c5af92dd63ec615e937b050)) 13 | * **refactor:** tsconfig optimizations, fixes ([#268](https://github.com/w3ux/w3ux-library/issues/268)) ([34d5fcb](https://github.com/w3ux/w3ux-library/commit/34d5fcbadc461295fd8642f70fc0d4a3aaa43c25)) 14 | * Simplified builder, add exports configs to packages ([#221](https://github.com/w3ux/w3ux-library/issues/221)) ([26801d9](https://github.com/w3ux/w3ux-library/commit/26801d94abe6524efc053085b89f6a359ec6316b)) 15 | -------------------------------------------------------------------------------- /library/react-odometer/README.md: -------------------------------------------------------------------------------- 1 | # Odometer 2 | 3 | An odometer effect used for number and balance transitions 4 | 5 | ## Installation 6 | 7 | ```bash 8 | npm install @w3ux/react-odometer 9 | ``` 10 | 11 | or 12 | 13 | ```bash 14 | yarn add @w3ux/react-odometer 15 | ``` 16 | 17 | or 18 | 19 | ```bash 20 | pnpm add @w3ux/react-odometer 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```typescript 26 | import { /* your imports */ } from '@w3ux/react-odometer' 27 | ``` 28 | 29 | ### React Usage 30 | 31 | This package provides React hooks and components. Here's a basic example: 32 | 33 | ```tsx 34 | import React from 'react' 35 | import { /* specific hook or component */ } from '@w3ux/react-odometer' 36 | 37 | function MyComponent() { 38 | // Use the imported hooks or components here 39 | return
Your component content
40 | } 41 | ``` 42 | 43 | ## Documentation 44 | 45 | For comprehensive documentation and examples, visit the [w3ux documentation](https://w3ux.org/library/react-odometer). 46 | 47 | ## Keywords 48 | 49 | `w3ux`, `polkadot`, `web3`, `react`, `odometer`, `animation`, `transitions`, `typescript` 50 | 51 | ## Repository 52 | 53 | - **Source**: [GitHub](https://github.com/w3ux/w3ux-library) 54 | - **Package**: [npm](https://www.npmjs.com/package/@w3ux/react-odometer) 55 | - **Issues**: [GitHub Issues](https://github.com/w3ux/w3ux-library/issues) 56 | 57 | ## License 58 | 59 | This package is licensed under the GPL-3.0-only. 60 | 61 | --- 62 | 63 | Part of the [w3ux library](https://github.com/w3ux/w3ux-library) - A collection of packages for building Web3 applications. 64 | -------------------------------------------------------------------------------- /library/react-odometer/gulpfile.js: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { dest, series, src } from 'gulp' 5 | import sassFrom from 'gulp-sass' 6 | import sourcemaps from 'gulp-sourcemaps' 7 | import ts from 'gulp-typescript' 8 | import merge from 'merge-stream' 9 | import * as sass from 'sass' 10 | 11 | const gulpSass = sassFrom(sass) 12 | 13 | // Buld CommonJS module. 14 | const buildCommonJs = () => 15 | doBuild( 16 | ts.createProject('tsconfig.json', { 17 | module: 'commonjs', 18 | target: 'es2015', 19 | removeComments: true, 20 | }), 21 | 'cjs' 22 | ) 23 | 24 | // Build ES module. 25 | const buildEsm = () => 26 | doBuild( 27 | ts.createProject('tsconfig.json', { 28 | module: 'esnext', 29 | target: 'esnext', 30 | removeComments: true, 31 | }), 32 | 'mjs' 33 | ) 34 | 35 | // Build CSS CommonJS. 36 | const buildSassCommonJs = () => 37 | src('./src/**/*.css') 38 | .pipe(gulpSass({ outputStyle: 'compressed' })) 39 | .pipe(dest('dist/cjs')) 40 | 41 | // Build CSS ES module. 42 | const buildSassEsm = () => 43 | src('./src/**/*.css') 44 | .pipe(gulpSass({ outputStyle: 'compressed' })) 45 | .pipe(dest('dist/mjs')) 46 | 47 | // Build package with provided Typescript project. 48 | const doBuild = (tsProject, outDir) => { 49 | var tsResult = tsProject.src().pipe(sourcemaps.init()).pipe(tsProject()) 50 | 51 | return merge(tsResult, tsResult.js) 52 | .pipe(sourcemaps.write('.')) 53 | .pipe(dest(`dist/${outDir}`)) 54 | } 55 | 56 | export default series(buildCommonJs, buildEsm, buildSassCommonJs, buildSassEsm) 57 | -------------------------------------------------------------------------------- /library/react-odometer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@w3ux/react-odometer-source", 3 | "description": "An odometer effect used for number and balance transitions", 4 | "version": "2.1.0", 5 | "license": "GPL-3.0-only", 6 | "type": "module", 7 | "keywords": [ 8 | "w3ux", 9 | "polkadot", 10 | "web3", 11 | "react", 12 | "odometer", 13 | "animation", 14 | "transitions", 15 | "typescript" 16 | ], 17 | "homepage": "https://w3ux.org/library/react-odometer", 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/w3ux/w3ux-library.git", 21 | "directory": "library/react-odometer" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/w3ux/w3ux-library/issues" 25 | }, 26 | "scripts": { 27 | "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo", 28 | "build": "gulp --silent", 29 | "compile": "builder -t react-odometer" 30 | }, 31 | "devDependencies": { 32 | "@types/react": "^19.0.12", 33 | "builder": "workspace:*", 34 | "gulp": "^5.0.0", 35 | "gulp-sass": "^6.0.1", 36 | "gulp-sourcemaps": "^3.0.0", 37 | "gulp-strip-comments": "^2.6.0", 38 | "gulp-typescript": "6.0.0-alpha.1", 39 | "merge-stream": "^2.0.0", 40 | "react": "^19.1.0", 41 | "sass": "^1.89.1", 42 | "typescript": "^5.8.2" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /library/react-odometer/packageInfo.yml: -------------------------------------------------------------------------------- 1 | directory: 2 | - name: Odometer 3 | description: An odometer effect used for number and balance transitions 4 | -------------------------------------------------------------------------------- /library/react-odometer/pkg.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bundler": "gulp", 3 | "exports": { 4 | ".": { 5 | "import": "./mjs/index.js", 6 | "require": "./cjs/index.js" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /library/react-odometer/src/types.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { RefObject } from 'react' 5 | 6 | export interface Props { 7 | value: number | string 8 | wholeColor?: string 9 | decimalColor?: string 10 | spaceBefore?: string | number 11 | spaceAfter?: string | number 12 | zeroDecimals?: number 13 | } 14 | 15 | export type Digit = 16 | | 'comma' 17 | | 'dot' 18 | | '0' 19 | | '1' 20 | | '2' 21 | | '3' 22 | | '4' 23 | | '5' 24 | | '6' 25 | | '7' 26 | | '8' 27 | | '9' 28 | 29 | export type DigitRef = RefObject 30 | 31 | export type Status = 'new' | 'inactive' | 'transition' | 'finished' 32 | 33 | export type Direction = 'down' | 'none' 34 | -------------------------------------------------------------------------------- /library/react-odometer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": "src", 5 | "rootDir": "src", 6 | "outDir": "dist" 7 | }, 8 | "include": ["src/**/*"], 9 | } 10 | -------------------------------------------------------------------------------- /library/react-polkicon/README.md: -------------------------------------------------------------------------------- 1 | # Polkicon 2 | 3 | A light-weight and customisable Polkadot Icon 4 | 5 | ## Installation 6 | 7 | ```bash 8 | npm install @w3ux/react-polkicon 9 | ``` 10 | 11 | or 12 | 13 | ```bash 14 | yarn add @w3ux/react-polkicon 15 | ``` 16 | 17 | or 18 | 19 | ```bash 20 | pnpm add @w3ux/react-polkicon 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```typescript 26 | import { /* your imports */ } from '@w3ux/react-polkicon' 27 | ``` 28 | 29 | ### React Usage 30 | 31 | This package provides React hooks and components. Here's a basic example: 32 | 33 | ```tsx 34 | import React from 'react' 35 | import { /* specific hook or component */ } from '@w3ux/react-polkicon' 36 | 37 | function MyComponent() { 38 | // Use the imported hooks or components here 39 | return
Your component content
40 | } 41 | ``` 42 | 43 | ## Documentation 44 | 45 | For comprehensive documentation and examples, visit the [w3ux documentation](https://w3ux.org/library/react-polkicon). 46 | 47 | ## Keywords 48 | 49 | `w3ux`, `polkadot`, `web3`, `react`, `icon`, `identicon`, `avatar`, `typescript` 50 | 51 | ## Repository 52 | 53 | - **Source**: [GitHub](https://github.com/w3ux/w3ux-library) 54 | - **Package**: [npm](https://www.npmjs.com/package/@w3ux/react-polkicon) 55 | - **Issues**: [GitHub Issues](https://github.com/w3ux/w3ux-library/issues) 56 | 57 | ## License 58 | 59 | This package is licensed under the GPL-3.0-only. 60 | 61 | --- 62 | 63 | Part of the [w3ux library](https://github.com/w3ux/w3ux-library) - A collection of packages for building Web3 applications. 64 | -------------------------------------------------------------------------------- /library/react-polkicon/gulpfile.js: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { dest, series } from 'gulp' 5 | import sourcemaps from 'gulp-sourcemaps' 6 | import ts from 'gulp-typescript' 7 | import merge from 'merge-stream' 8 | 9 | // Buld CommonJS module. 10 | const buildCommonJs = () => 11 | doBuild( 12 | ts.createProject('tsconfig.json', { 13 | module: 'commonjs', 14 | target: 'es2015', 15 | removeComments: true, 16 | }), 17 | 'cjs' 18 | ) 19 | 20 | // Build ES module. 21 | const buildEsm = () => 22 | doBuild( 23 | ts.createProject('tsconfig.json', { 24 | module: 'esnext', 25 | target: 'esnext', 26 | removeComments: true, 27 | }), 28 | 'mjs' 29 | ) 30 | 31 | // Build package with provided Typescript project. 32 | const doBuild = (tsProject, outDir) => { 33 | var tsResult = tsProject.src().pipe(sourcemaps.init()).pipe(tsProject()) 34 | 35 | return merge(tsResult, tsResult.js) 36 | .pipe(sourcemaps.write('.')) 37 | .pipe(dest(`dist/${outDir}`)) 38 | } 39 | 40 | export default series(buildCommonJs, buildEsm) 41 | -------------------------------------------------------------------------------- /library/react-polkicon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@w3ux/react-polkicon-source", 3 | "description": "A light-weight and customisable Polkadot Icon", 4 | "version": "3.2.1", 5 | "license": "GPL-3.0-only", 6 | "type": "module", 7 | "keywords": [ 8 | "w3ux", 9 | "polkadot", 10 | "web3", 11 | "react", 12 | "icon", 13 | "identicon", 14 | "avatar", 15 | "typescript" 16 | ], 17 | "homepage": "https://w3ux.org/library/react-polkicon", 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/w3ux/w3ux-library.git", 21 | "directory": "library/react-polkicon" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/w3ux/w3ux-library/issues" 25 | }, 26 | "scripts": { 27 | "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo", 28 | "build": "gulp --silent", 29 | "compile": "builder -t react-polkicon" 30 | }, 31 | "dependencies": { 32 | "@w3ux/crypto": "^1.1.0", 33 | "@w3ux/utils": "^2.1.0", 34 | "dedot": "^0.13.0" 35 | }, 36 | "devDependencies": { 37 | "@types/node": "^22.15.29", 38 | "@types/react": "^19.0.12", 39 | "builder": "workspace:*", 40 | "gulp": "^5.0.0", 41 | "gulp-sourcemaps": "^3.0.0", 42 | "gulp-strip-comments": "^2.6.0", 43 | "gulp-typescript": "6.0.0-alpha.1", 44 | "merge-stream": "^2.0.0", 45 | "react": "^19.1.0", 46 | "typescript": "^5.8.2" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /library/react-polkicon/packageInfo.yml: -------------------------------------------------------------------------------- 1 | directory: 2 | - name: Polkicon 3 | description: A light-weight and customisable Polkadot Icon 4 | -------------------------------------------------------------------------------- /library/react-polkicon/pkg.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bundler": "gulp", 3 | "exports": { 4 | ".": { 5 | "import": "./mjs/index.js", 6 | "require": "./cjs/index.js" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /library/react-polkicon/src/consts.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { Scheme } from './types' 5 | 6 | // Size of the Polkicon in pixels. 7 | export const PolkiconSize = 64 8 | 9 | // Center coordinate of the Polkicon. 10 | export const PolkiconCenter = PolkiconSize / 2 11 | 12 | // Radius of a Polkicon circle. 13 | export const CircleRadius = 5 14 | 15 | // Schemas for the Polkicon. 16 | export const SCHEMA: Record = { 17 | target: { 18 | colors: [0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 1], 19 | freq: 1, 20 | }, 21 | cube: { 22 | colors: [0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 5], 23 | freq: 20, 24 | }, 25 | quazar: { 26 | colors: [1, 2, 3, 1, 2, 4, 5, 5, 4, 1, 2, 3, 1, 2, 4, 5, 5, 4, 0], 27 | freq: 16, 28 | }, 29 | flower: { 30 | colors: [0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 3], 31 | freq: 32, 32 | }, 33 | cyclic: { 34 | colors: [0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 6], 35 | freq: 32, 36 | }, 37 | vmirror: { 38 | colors: [0, 1, 2, 3, 4, 5, 3, 4, 2, 0, 1, 6, 7, 8, 9, 7, 8, 6, 10], 39 | freq: 128, 40 | }, 41 | hmirror: { 42 | colors: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 8, 6, 7, 5, 3, 4, 2, 11], 43 | freq: 128, 44 | }, 45 | } 46 | -------------------------------------------------------------------------------- /library/react-polkicon/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { isValidAddress } from '@w3ux/utils' 5 | import { useEffect, useState } from 'react' 6 | import { CircleRadius, PolkiconCenter, PolkiconSize } from './consts' 7 | import type { Circle, Coordinate, PolkiconProps } from './types' 8 | import { generateCssTransform, getCircleCoordinates, getColors } from './utils' 9 | 10 | export const Polkicon = ({ 11 | address, 12 | background, 13 | inactive, 14 | transform: propTransform, 15 | fontSize, 16 | }: PolkiconProps) => { 17 | // The colors of the Polkicon and inner circles. 18 | const [colors, setColors] = useState([]) 19 | 20 | // The coordinates of the Polkicon circles. 21 | const [coords, setCoords] = useState() 22 | 23 | // Renders the outer circle of the Polkicon. 24 | const renderOuterCircle = (fill: string): Circle => ({ 25 | cx: PolkiconCenter, 26 | cy: PolkiconCenter, 27 | fill, 28 | r: PolkiconCenter, 29 | }) 30 | 31 | // Renders a circle element of the Polkicon. 32 | const renderCircle = ({ cx, cy, fill, r }: Circle, key: number) => ( 33 | 34 | ) 35 | 36 | const transform = propTransform 37 | ? generateCssTransform(propTransform) 38 | : undefined 39 | 40 | // Generate Polkicon coordinates and colors based on the address validity and inactivity status. 41 | // Re-renders on `address` change. 42 | useEffect(() => { 43 | // Generate Polkicon coordinates. 44 | const circleXy = getCircleCoordinates() 45 | // Get the amount of Polkicon circles. 46 | const length = circleXy.length 47 | // Generate the colors of the Polkicon. 48 | const cols = 49 | isValidAddress(address) && !inactive 50 | ? getColors(address) 51 | : Array.from({ length }, () => 'var(--background-invert)') 52 | 53 | setCoords(circleXy) 54 | setColors(cols) 55 | }, [address]) 56 | 57 | return ( 58 | coords && ( 59 | 70 | 77 | {[renderOuterCircle(background || 'var(--background-default)')] 78 | .concat( 79 | coords.map(([cx, cy], index) => ({ 80 | cx, 81 | cy, 82 | fill: colors[index], 83 | r: CircleRadius, 84 | })) 85 | ) 86 | .map(renderCircle)} 87 | 88 | 89 | ) 90 | ) 91 | } 92 | -------------------------------------------------------------------------------- /library/react-polkicon/src/types.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | // Metadata of a Polkicon cirlce. 5 | export interface Circle { 6 | cx: number 7 | cy: number 8 | fill: string 9 | r: number 10 | } 11 | 12 | // Metadata of a Polkicon scheme. 13 | export interface Scheme { 14 | freq: number 15 | colors: number[] 16 | } 17 | 18 | // A Polkicon shape coordinate. 19 | export type Coordinate = [number, number] 20 | 21 | export interface PolkiconProps { 22 | address: string 23 | background?: string 24 | inactive?: boolean 25 | transform?: TransformProp 26 | fontSize?: number | string 27 | } 28 | 29 | export type TransformProp = 30 | | 'grow-1' 31 | | 'grow-2' 32 | | 'grow-3' 33 | | 'grow-4' 34 | | 'grow-5' 35 | | 'grow-6' 36 | | 'grow-7' 37 | | 'grow-8' 38 | | 'grow-9' 39 | | 'grow-10' 40 | | 'shrink-1' 41 | | 'shrink-2' 42 | | 'shrink-3' 43 | | 'shrink-4' 44 | | 'shrink-5' 45 | | 'shrink-6' 46 | | 'shrink-7' 47 | | 'shrink-8' 48 | | 'shrink-9' 49 | | 'shrink-10' 50 | -------------------------------------------------------------------------------- /library/react-polkicon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": "src", 5 | "rootDir": "src", 6 | "outDir": "dist" 7 | }, 8 | "include": ["src/**/*"], 9 | } 10 | -------------------------------------------------------------------------------- /library/types/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [2.3.0](https://github.com/w3ux/w3ux-library/compare/types-source-v2.2.1...types-source-v2.3.0) (2025-06-07) 4 | 5 | 6 | ### Features 7 | 8 | * Add `useTimeleft` hook and utils to `@w3ux/hooks` ([#143](https://github.com/w3ux/w3ux-library/issues/143)) ([093b309](https://github.com/w3ux/w3ux-library/commit/093b309326f3e015edd0cb0019adb1bf17e81b19)) 9 | * Enable strict mode ([#270](https://github.com/w3ux/w3ux-library/issues/270)) ([2c2c460](https://github.com/w3ux/w3ux-library/commit/2c2c4603988fc13d986116311542adef65b9b583)) 10 | * Initiate `observables-connect` package ([#218](https://github.com/w3ux/w3ux-library/issues/218)) ([a5ade6b](https://github.com/w3ux/w3ux-library/commit/a5ade6bf6238da2f3e31e67cb1668b28b70c0cca)) 11 | * react 19 alpha support ([c7c0ee8](https://github.com/w3ux/w3ux-library/commit/c7c0ee87ba9fbbde54ab581027a2e2189972a65d)) 12 | * **refactor:** Extension accounts observables & refactors, extensions re-write ([#219](https://github.com/w3ux/w3ux-library/issues/219)) ([25122d1](https://github.com/w3ux/w3ux-library/commit/25122d19e830961d6210f06ab169f02ef8200120)) 13 | * **refactor:** Migrate from yarn to pnpm ([#206](https://github.com/w3ux/w3ux-library/issues/206)) ([93d2a40](https://github.com/w3ux/w3ux-library/commit/93d2a40cc0c455936022ef6a89bc18999d7928e5)) 14 | * **refactor:** Migrate to ESLint 9 ([#207](https://github.com/w3ux/w3ux-library/issues/207)) ([9f8c3ef](https://github.com/w3ux/w3ux-library/commit/9f8c3ef4c5a3ff23c5ad7d5885fd0dad0ee75c7b)) 15 | * **refactor:** Minimise hardware account providers, unify APIs ([#220](https://github.com/w3ux/w3ux-library/issues/220)) ([8270b27](https://github.com/w3ux/w3ux-library/commit/8270b2767df0acb3860b34f4c09fb0a9eda23f69)) 16 | * **refactor:** move high level connect-kit types to `types` package ([#202](https://github.com/w3ux/w3ux-library/issues/202)) ([c8b324e](https://github.com/w3ux/w3ux-library/commit/c8b324ea6671e3ae842719bdbd74b1703cdf09a1)) 17 | * **refactor:** Simplify builder api, add CI ([#260](https://github.com/w3ux/w3ux-library/issues/260)) ([146bd31](https://github.com/w3ux/w3ux-library/commit/146bd313b23711d08c5af92dd63ec615e937b050)) 18 | * **refactor:** tsconfig optimizations, fixes ([#268](https://github.com/w3ux/w3ux-library/issues/268)) ([34d5fcb](https://github.com/w3ux/w3ux-library/commit/34d5fcbadc461295fd8642f70fc0d4a3aaa43c25)) 19 | * Simplified builder, add exports configs to packages ([#221](https://github.com/w3ux/w3ux-library/issues/221)) ([26801d9](https://github.com/w3ux/w3ux-library/commit/26801d94abe6524efc053085b89f6a359ec6316b)) 20 | 21 | ## 1.0.0 (2024-12-01) 22 | 23 | 24 | ### Features 25 | 26 | * Add `useTimeleft` hook and utils to `@w3ux/hooks` ([#143](https://github.com/w3ux/w3ux-library/issues/143)) ([093b309](https://github.com/w3ux/w3ux-library/commit/093b309326f3e015edd0cb0019adb1bf17e81b19)) 27 | -------------------------------------------------------------------------------- /library/types/README.md: -------------------------------------------------------------------------------- 1 | # Types 2 | 3 | Common types used throughout the w3ux library 4 | 5 | ## Installation 6 | 7 | ```bash 8 | npm install @w3ux/types 9 | ``` 10 | 11 | or 12 | 13 | ```bash 14 | yarn add @w3ux/types 15 | ``` 16 | 17 | or 18 | 19 | ```bash 20 | pnpm add @w3ux/types 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```typescript 26 | import { /* your imports */ } from '@w3ux/types' 27 | ``` 28 | 29 | ### Type Definitions 30 | 31 | This package provides TypeScript type definitions: 32 | 33 | ```typescript 34 | import type { /* specific types */ } from '@w3ux/types' 35 | 36 | // Use the types in your code 37 | interface MyInterface extends /* your type */ { 38 | // Your interface definition 39 | } 40 | ``` 41 | 42 | ## Documentation 43 | 44 | For comprehensive documentation and examples, visit the [w3ux documentation](https://w3ux.org/library/types). 45 | 46 | ## Keywords 47 | 48 | `w3ux`, `polkadot`, `web3`, `typescript`, `types`, `definitions` 49 | 50 | ## Repository 51 | 52 | - **Source**: [GitHub](https://github.com/w3ux/w3ux-library) 53 | - **Package**: [npm](https://www.npmjs.com/package/@w3ux/types) 54 | - **Issues**: [GitHub Issues](https://github.com/w3ux/w3ux-library/issues) 55 | 56 | ## License 57 | 58 | This package is licensed under the GPL-3.0-only. 59 | 60 | --- 61 | 62 | Part of the [w3ux library](https://github.com/w3ux/w3ux-library) - A collection of packages for building Web3 applications. 63 | -------------------------------------------------------------------------------- /library/types/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@w3ux/types-source", 3 | "description": "Common types used throughout the w3ux library", 4 | "version": "2.3.0", 5 | "license": "GPL-3.0-only", 6 | "type": "module", 7 | "keywords": [ 8 | "w3ux", 9 | "polkadot", 10 | "web3", 11 | "typescript", 12 | "types", 13 | "definitions" 14 | ], 15 | "homepage": "https://w3ux.org/library/types", 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/w3ux/w3ux-library.git", 19 | "directory": "library/types" 20 | }, 21 | "bugs": { 22 | "url": "https://github.com/w3ux/w3ux-library/issues" 23 | }, 24 | "scripts": { 25 | "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo", 26 | "build": "tsup src/**/* --format esm,cjs --target es2022 --dts --no-splitting", 27 | "compile": "builder -t types" 28 | }, 29 | "devDependencies": { 30 | "@types/react": "^19.0.12", 31 | "builder": "workspace:*", 32 | "react": "^19.1.0", 33 | "tsup": "^8.4.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /library/types/packageInfo.yml: -------------------------------------------------------------------------------- 1 | directory: 2 | - name: Types 3 | description: Common types used throughout the w3ux library 4 | -------------------------------------------------------------------------------- /library/types/pkg.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bundler": "tsup", 3 | "exports": { 4 | ".": { 5 | "import": "./index.js", 6 | "require": "./index.cjs" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /library/types/src/accounts.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export type HardwareAccountSource = 'ledger' | 'vault' | 'wallet_connect' 5 | 6 | export type Account = ExtensionAccount | HardwareAccount 7 | 8 | export type ExtensionAccount = AccountCommon & { 9 | signer?: unknown 10 | } 11 | 12 | export type HardwareAccount = AccountCommon & { 13 | network: string 14 | index: number 15 | } 16 | 17 | export interface AccountCommon { 18 | address: string 19 | name: string 20 | source: string 21 | } 22 | -------------------------------------------------------------------------------- /library/types/src/common.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | // An optional string. 5 | export type MaybeString = string | null 6 | 7 | // A general purpose sync status, tracking whether an item is not synced, in progress, or completed 8 | // syncing. Useful for tracking async function progress, used as React refs, etc. 9 | export type Sync = 'synced' | 'unsynced' | 'syncing' 10 | 11 | // A funtion with no arguments and no return value. 12 | export type VoidFn = () => void 13 | -------------------------------------------------------------------------------- /library/types/src/extensions.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import type { FunctionComponent, SVGProps } from 'react' 5 | import type { ExtensionAccount } from './accounts' 6 | import type { VoidFn } from './common' 7 | 8 | export type ExtensionStatus = 'installed' | 'not_authenticated' | 'connected' 9 | 10 | export type ExtensionsStatus = Record 11 | 12 | export interface ExtensionInjected extends ExtensionConfig { 13 | id: string 14 | enable: (n?: string) => Promise 15 | } 16 | 17 | export interface ExtensionInterface { 18 | accounts: { 19 | subscribe: (a: (b: ExtensionAccount[]) => void) => VoidFn 20 | get: () => Promise 21 | } 22 | provider: unknown 23 | metadata: unknown 24 | signer: unknown 25 | } 26 | 27 | export interface ExtensionConfig { 28 | id: string 29 | title: string 30 | icon: FunctionComponent< 31 | SVGProps & { title?: string | undefined } 32 | > 33 | url: string 34 | } 35 | 36 | export type RawExtensionEnable = (name?: string) => Promise 37 | 38 | export type RawExtensions = Map 39 | 40 | export type ExtensionEnableStatus = 41 | | 'valid' 42 | | 'extension_not_found' 43 | | 'enable_invalid' 44 | 45 | export type ExtensionEnableResults = Map 46 | 47 | export interface ExtensionEnableResult { 48 | extension: ExtensionInterface | null 49 | connected: boolean 50 | error?: string 51 | } 52 | 53 | export interface ProcessExtensionAccountsResult { 54 | newAccounts: ExtensionAccount[] 55 | removedAccounts: ExtensionAccount[] 56 | } 57 | -------------------------------------------------------------------------------- /library/types/src/index.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export * from './accounts' 5 | export * from './common' 6 | export * from './extensions' 7 | export * from './time' 8 | -------------------------------------------------------------------------------- /library/types/src/time.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export interface UseTimeleftProps { 5 | // Dependencies to trigger re-calculation of timeleft. 6 | depsTimeleft: unknown[] 7 | // Dependencies to trigger re-render of timeleft, e.g. if language switching occurs. 8 | depsFormat: unknown[] 9 | } 10 | 11 | export interface TimeleftDuration { 12 | days: number 13 | hours: number 14 | minutes: number 15 | seconds: number 16 | lastMinute: boolean 17 | } 18 | 19 | export interface TimeLeftRaw { 20 | days: number 21 | hours: number 22 | minutes: number 23 | seconds?: number 24 | } 25 | 26 | export interface TimeLeftFormatted { 27 | days: [number, string] 28 | hours: [number, string] 29 | minutes: [number, string] 30 | seconds?: [number, string] 31 | } 32 | 33 | export interface TimeLeftAll { 34 | raw: TimeLeftRaw 35 | } 36 | 37 | export interface TimeleftHookProps { 38 | refreshInterval: number 39 | } 40 | -------------------------------------------------------------------------------- /library/types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": "src", 5 | "rootDir": "src", 6 | "outDir": "dist" 7 | }, 8 | "include": ["src/**/*"], 9 | } 10 | -------------------------------------------------------------------------------- /library/types/tsup.config.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { defineConfig } from 'tsup' 5 | 6 | export default defineConfig({ 7 | entry: ['./src/index.ts'], 8 | splitting: false, 9 | sourcemap: false, 10 | clean: true, 11 | dts: true, 12 | format: 'esm', 13 | }) 14 | -------------------------------------------------------------------------------- /library/utils/README.md: -------------------------------------------------------------------------------- 1 | # Base 2 | 3 | A collection of reusable utilities for manipulating data 4 | 5 | ## Installation 6 | 7 | ```bash 8 | npm install @w3ux/utils 9 | ``` 10 | 11 | or 12 | 13 | ```bash 14 | yarn add @w3ux/utils 15 | ``` 16 | 17 | or 18 | 19 | ```bash 20 | pnpm add @w3ux/utils 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```typescript 26 | import { /* your imports */ } from '@w3ux/utils' 27 | ``` 28 | 29 | ### Utility Functions 30 | 31 | This package provides utility functions that can be used in any JavaScript/TypeScript project: 32 | 33 | ```typescript 34 | import { /* specific function */ } from '@w3ux/utils' 35 | 36 | // Use the utility functions 37 | const result = /* call your function */ 38 | ``` 39 | 40 | ## Documentation 41 | 42 | For comprehensive documentation and examples, visit the [w3ux documentation](https://w3ux.org/library/utils). 43 | 44 | ## Keywords 45 | 46 | `w3ux`, `polkadot`, `web3`, `utilities`, `typescript`, `data-manipulation` 47 | 48 | ## Repository 49 | 50 | - **Source**: [GitHub](https://github.com/w3ux/w3ux-library) 51 | - **Package**: [npm](https://www.npmjs.com/package/@w3ux/utils) 52 | - **Issues**: [GitHub Issues](https://github.com/w3ux/w3ux-library/issues) 53 | 54 | ## License 55 | 56 | This package is licensed under the GPL-3.0-only. 57 | 58 | --- 59 | 60 | Part of the [w3ux library](https://github.com/w3ux/w3ux-library) - A collection of packages for building Web3 applications. 61 | -------------------------------------------------------------------------------- /library/utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@w3ux/utils-source", 3 | "description": "A collection of reusable utilities for manipulating data", 4 | "version": "2.1.0", 5 | "license": "GPL-3.0-only", 6 | "type": "module", 7 | "keywords": [ 8 | "w3ux", 9 | "polkadot", 10 | "web3", 11 | "utilities", 12 | "typescript", 13 | "data-manipulation" 14 | ], 15 | "homepage": "https://w3ux.org/library/utils", 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/w3ux/w3ux-library.git", 19 | "directory": "library/utils" 20 | }, 21 | "bugs": { 22 | "url": "https://github.com/w3ux/w3ux-library/issues" 23 | }, 24 | "scripts": { 25 | "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo", 26 | "test": "vitest run", 27 | "build": "tsup src/**/* --format esm,cjs --target es2022 --dts --no-splitting", 28 | "compile": "builder -t utils" 29 | }, 30 | "dependencies": { 31 | "dedot": "^0.13.0" 32 | }, 33 | "devDependencies": { 34 | "@types/react": "^19.0.12", 35 | "builder": "workspace:*", 36 | "react": "^19.1.0", 37 | "tsup": "^8.4.0", 38 | "vitest": "^3.1.1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /library/utils/packageInfo.yml: -------------------------------------------------------------------------------- 1 | directory: 2 | - name: Base 3 | description: A collection of reusable utilities for manipulating data 4 | -------------------------------------------------------------------------------- /library/utils/pkg.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bundler": "tsup", 3 | "exports": { 4 | ".": { 5 | "import": "./index.js", 6 | "require": "./index.cjs" 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /library/utils/src/convert.ts: -------------------------------------------------------------------------------- 1 | // /* @license Copyright 2024 w3ux authors & contributors 2 | // SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | /** 5 | * Concatenates multiple Uint8Array instances into a single Uint8Array. 6 | * 7 | * @param {Uint8Array[]} u8as - An array of Uint8Array instances to concatenate. 8 | * @returns {Uint8Array} A new Uint8Array containing all the input arrays concatenated. 9 | */ 10 | export const u8aConcat = (...u8as: Uint8Array[]): Uint8Array => { 11 | // Calculate the total length of the resulting Uint8Array 12 | const totalLength = u8as.reduce((sum, u8a) => sum + u8a.length, 0) 13 | 14 | // Create a new Uint8Array with the total length 15 | const result = new Uint8Array(totalLength) 16 | 17 | let offset = 0 // Initialize the offset for placing elements 18 | for (const u8a of u8as) { 19 | result.set(u8a, offset) // Set the current Uint8Array at the current offset 20 | offset += u8a.length // Update the offset for the next Uint8Array 21 | } 22 | 23 | return result 24 | } 25 | -------------------------------------------------------------------------------- /library/utils/src/index.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | export * from './base' 5 | export * from './convert' 6 | export * from './unit' 7 | -------------------------------------------------------------------------------- /library/utils/src/types.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 5 | export type AnyObject = any 6 | -------------------------------------------------------------------------------- /library/utils/tests/convert.test.ts: -------------------------------------------------------------------------------- 1 | // /* @license Copyright 2024 w3ux authors & contributors 2 | // SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { describe, expect, test } from 'vitest' 5 | import * as fn from '../src/index' 6 | 7 | describe('u8aConcat', () => { 8 | test('should concatenate multiple Uint8Array instances', () => { 9 | const u8a1 = new Uint8Array([1, 2, 3]) 10 | const u8a2 = new Uint8Array([4, 5, 6]) 11 | const u8a3 = new Uint8Array([7, 8]) 12 | 13 | const result = fn.u8aConcat(u8a1, u8a2, u8a3) 14 | expect(result).toEqual(new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8])) 15 | }) 16 | 17 | test('should handle an empty Uint8Array', () => { 18 | const u8a1 = new Uint8Array([1, 2, 3]) 19 | const u8a2 = new Uint8Array([]) // Empty array 20 | 21 | const result = fn.u8aConcat(u8a1, u8a2) 22 | expect(result).toEqual(new Uint8Array([1, 2, 3])) // Should return the first array 23 | }) 24 | 25 | test('should handle multiple empty Uint8Arrays', () => { 26 | const u8a1 = new Uint8Array([]) 27 | const u8a2 = new Uint8Array([]) 28 | 29 | const result = fn.u8aConcat(u8a1, u8a2) 30 | expect(result).toEqual(new Uint8Array([])) // Should return an empty array 31 | }) 32 | 33 | test('should handle single Uint8Array', () => { 34 | const u8a1 = new Uint8Array([9, 10, 11]) 35 | 36 | const result = fn.u8aConcat(u8a1) 37 | expect(result).toEqual(u8a1) // Should return the same array 38 | }) 39 | 40 | test('should handle concatenation of different lengths', () => { 41 | const u8a1 = new Uint8Array([1, 2]) 42 | const u8a2 = new Uint8Array([3]) 43 | const u8a3 = new Uint8Array([4, 5, 6]) 44 | 45 | const result = fn.u8aConcat(u8a1, u8a2, u8a3) 46 | expect(result).toEqual(new Uint8Array([1, 2, 3, 4, 5, 6])) // Should return concatenated result 47 | }) 48 | 49 | test('should handle Uint8Arrays with non-consecutive values', () => { 50 | const u8a1 = new Uint8Array([0, 255]) 51 | const u8a2 = new Uint8Array([128, 64]) 52 | 53 | const result = fn.u8aConcat(u8a1, u8a2) 54 | expect(result).toEqual(new Uint8Array([0, 255, 128, 64])) // Should concatenate properly 55 | }) 56 | }) 57 | -------------------------------------------------------------------------------- /library/utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": "src", 5 | "rootDir": "src", 6 | "outDir": "dist" 7 | }, 8 | "include": ["./**/*"], 9 | } 10 | -------------------------------------------------------------------------------- /library/utils/tsup.config.ts: -------------------------------------------------------------------------------- 1 | /* @license Copyright 2024 w3ux authors & contributors 2 | SPDX-License-Identifier: GPL-3.0-only */ 3 | 4 | import { defineConfig } from 'tsup' 5 | 6 | export default defineConfig({ 7 | entry: ['src/index.ts'], 8 | splitting: false, 9 | sourcemap: false, 10 | clean: true, 11 | dts: true, 12 | format: 'esm', 13 | }) 14 | -------------------------------------------------------------------------------- /library/validator-assets/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [1.1.0](https://github.com/w3ux/w3ux-library/compare/validator-assets-source-v1.0.0...validator-assets-source-v1.1.0) (2025-06-07) 4 | 5 | 6 | ### Features 7 | 8 | * react 19 alpha support ([c7c0ee8](https://github.com/w3ux/w3ux-library/commit/c7c0ee87ba9fbbde54ab581027a2e2189972a65d)) 9 | * **refactor:** Migrate from yarn to pnpm ([#206](https://github.com/w3ux/w3ux-library/issues/206)) ([93d2a40](https://github.com/w3ux/w3ux-library/commit/93d2a40cc0c455936022ef6a89bc18999d7928e5)) 10 | * **refactor:** Migrate to ESLint 9 ([#207](https://github.com/w3ux/w3ux-library/issues/207)) ([9f8c3ef](https://github.com/w3ux/w3ux-library/commit/9f8c3ef4c5a3ff23c5ad7d5885fd0dad0ee75c7b)) 11 | * **refactor:** Simplify builder api, add CI ([#260](https://github.com/w3ux/w3ux-library/issues/260)) ([146bd31](https://github.com/w3ux/w3ux-library/commit/146bd313b23711d08c5af92dd63ec615e937b050)) 12 | * **refactor:** tsconfig optimizations, fixes ([#268](https://github.com/w3ux/w3ux-library/issues/268)) ([34d5fcb](https://github.com/w3ux/w3ux-library/commit/34d5fcbadc461295fd8642f70fc0d4a3aaa43c25)) 13 | -------------------------------------------------------------------------------- /library/validator-assets/README.md: -------------------------------------------------------------------------------- 1 | ## Adding A Validator Operator 2 | 3 | To add an operator, open a PR with the following additions: 4 | 5 | - An operator icon to the `src` folder. 6 | - Operator details to the `ValidatorCommunity` list, in `src/index.ts`. 7 | 8 | ### Structure 9 | 10 | The following table outlines the structure of a `ValidatorCommunity` entry: 11 | 12 | | Element | Key | Required | Notes | Example | 13 | | -------------- | ------------ | -------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------- | 14 | | Operator Name | `name` | Yes | The chosen name of the operator. | `Operator` | 15 | | Icon Filename | `icon` | Yes | The name of your SVG component file. | _See Below_ | 16 | | Bio | `bio` | No | A short description of your entity. Maximum 300 characters. | `Summing up my validator identity in a sentence or so.` | 17 | | Email Address | `email` | No | A public email address representing the operator. | `operator@polkadot.network` | 18 | | X Handle | `x` | No | The X handle representing the operator. | `@polkadot` | 19 | | Website URL | `website` | No | A live and vlid secure URL to your website. | `https://polkadot.network` | 20 | | Validator List | `validators` | Yes | A list of validators grouped by network. At least 1 validator in 1 network must be defined. | _See Below_ | 21 | 22 | 23 | ### Guidelines 24 | 25 | | Subject | Note | 26 | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 27 | | __Icon__ | Upload your SVG icon as a JSX component. Look at the existing icons for examples, or use the [SVGR Playground](https://react-svgr.com/playground/) to convert your raw SVG file into a component. | 28 | | __Accuracy__ | Operator contact details must be working and valid. | 29 | | __Liveness__ | All submitted validator addresses must be discoverable as a validator on the network in question - whether Polkadot or Kusama. | 30 | | __Ordering__ | Please place your operator in alphabetical order within `ValidatorCommunity`. | 31 | 32 | ### Questions 33 | 34 | Please submit an issue for any queries around adding your operator details and we'll be happy to help. 35 | -------------------------------------------------------------------------------- /library/validator-assets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@w3ux/validator-assets-source", 3 | "description": "A list of Polkadot validator operators with metadata and icons", 4 | "version": "1.1.1", 5 | "license": "GPL-3.0-only", 6 | "type": "module", 7 | "keywords": [ 8 | "w3ux", 9 | "polkadot", 10 | "validators", 11 | "assets", 12 | "icons", 13 | "operators", 14 | "react", 15 | "typescript" 16 | ], 17 | "homepage": "https://w3ux.org/library/validator-assets", 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/w3ux/w3ux-library.git", 21 | "directory": "library/validator-assets" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/w3ux/w3ux-library/issues" 25 | }, 26 | "scripts": { 27 | "clear": "rm -rf node_modules dist tsconfig.tsbuildinfo", 28 | "build": "tsup src/**/*{.ts,.tsx} --format esm,cjs --target es2022 --dts --no-splitting", 29 | "compile": "builder -t validator-assets" 30 | }, 31 | "peerDependencies": { 32 | "react": "^19" 33 | }, 34 | "devDependencies": { 35 | "@types/react": "^19.0.12", 36 | "builder": "workspace:*", 37 | "react": "^19.1.0", 38 | "tsup": "^8.4.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /library/validator-assets/packageInfo.yml: -------------------------------------------------------------------------------- 1 | directory: 2 | - name: Validator Operators 3 | description: A list of Polkadot validator operators with metadata and icons 4 | -------------------------------------------------------------------------------- /library/validator-assets/pkg.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bundler": null 3 | } 4 | -------------------------------------------------------------------------------- /library/validator-assets/src/Amforc.tsx: -------------------------------------------------------------------------------- 1 | const Amforc = () => ( 2 | 3 | 4 | 13 | 14 | 15 | 16 | 17 | 18 | 22 | 26 | 27 | 28 | 32 | 33 | 37 | 41 | 45 | 49 | 50 | ) 51 | 52 | export default Amforc 53 | -------------------------------------------------------------------------------- /library/validator-assets/src/ApertureMining.tsx: -------------------------------------------------------------------------------- 1 | const ApertureMining = () => ( 2 | 3 | 4 | 5 | 6 | 7 | ) 8 | 9 | export default ApertureMining 10 | -------------------------------------------------------------------------------- /library/validator-assets/src/Blockshard.tsx: -------------------------------------------------------------------------------- 1 | const Blockshard = () => ( 2 | 3 | 4 | 8 | 9 | 10 | 14 | 15 | ) 16 | 17 | export default Blockshard 18 | -------------------------------------------------------------------------------- /library/validator-assets/src/CoinbaseCloud.tsx: -------------------------------------------------------------------------------- 1 | const CoinbaseCloud = () => ( 2 | 3 | 4 | 8 | 9 | ) 10 | 11 | export default CoinbaseCloud 12 | -------------------------------------------------------------------------------- /library/validator-assets/src/Decentradot.tsx: -------------------------------------------------------------------------------- 1 | const Decentradot = () => ( 2 | 3 | 4 | 8 | 9 | ) 10 | 11 | export default Decentradot 12 | -------------------------------------------------------------------------------- /library/validator-assets/src/Dozenodes.tsx: -------------------------------------------------------------------------------- 1 | const Dozenodes = () => ( 2 | 3 | 4 | 5 | 6 | ) 7 | 8 | export default Dozenodes 9 | -------------------------------------------------------------------------------- /library/validator-assets/src/DragonStake.tsx: -------------------------------------------------------------------------------- 1 | const DragonStake = () => ( 2 | 3 | 7 | 11 | 12 | ) 13 | 14 | export default DragonStake 15 | -------------------------------------------------------------------------------- /library/validator-assets/src/Frog.tsx: -------------------------------------------------------------------------------- 1 | const Frog = () => ( 2 | 3 | 7 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ) 24 | 25 | export default Frog 26 | -------------------------------------------------------------------------------- /library/validator-assets/src/Gatotech.tsx: -------------------------------------------------------------------------------- 1 | const Gatotech = () => ( 2 | 3 | 9 | 19 | 29 | 30 | 31 | 32 | 38 | 46 | 54 | 55 | 56 | 57 | ) 58 | 59 | export default Gatotech 60 | -------------------------------------------------------------------------------- /library/validator-assets/src/Gdot.tsx: -------------------------------------------------------------------------------- 1 | const Gdot = () => ( 2 | 3 | 4 | 8 | 9 | ) 10 | 11 | export default Gdot 12 | -------------------------------------------------------------------------------- /library/validator-assets/src/GenericChain.tsx: -------------------------------------------------------------------------------- 1 | const GenericChain = () => ( 2 | 3 | 4 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 29 | 33 | 37 | 41 | 42 | 43 | ) 44 | 45 | export default GenericChain 46 | -------------------------------------------------------------------------------- /library/validator-assets/src/GoOpen.tsx: -------------------------------------------------------------------------------- 1 | const GoOpen = () => ( 2 | 3 | 4 | 8 | 9 | 13 | 14 | 15 | ) 16 | 17 | export default GoOpen 18 | -------------------------------------------------------------------------------- /library/validator-assets/src/Helikon.tsx: -------------------------------------------------------------------------------- 1 | const Helikon = () => ( 2 | 3 | 4 | 5 | ) 6 | 7 | export default Helikon 8 | -------------------------------------------------------------------------------- /library/validator-assets/src/Metaspan.tsx: -------------------------------------------------------------------------------- 1 | const Metaspan = () => ( 2 | 3 | 4 | 10 | 16 | 17 | ) 18 | 19 | export default Metaspan 20 | -------------------------------------------------------------------------------- /library/validator-assets/src/P2POrg.tsx: -------------------------------------------------------------------------------- 1 | const P2POrg = () => ( 2 | 3 | 4 | 10 | 14 | 20 | 24 | 25 | ) 26 | 27 | export default P2POrg 28 | -------------------------------------------------------------------------------- /library/validator-assets/src/PDP.tsx: -------------------------------------------------------------------------------- 1 | const PDP = () => ( 2 | 3 | 4 | 8 | 9 | ) 10 | 11 | export default PDP 12 | -------------------------------------------------------------------------------- /library/validator-assets/src/Paranodes.tsx: -------------------------------------------------------------------------------- 1 | const Paranodes = () => ( 2 | 3 | 4 | 8 | 9 | ) 10 | 11 | export default Paranodes 12 | -------------------------------------------------------------------------------- /library/validator-assets/src/PioneerStake.tsx: -------------------------------------------------------------------------------- 1 | const PionerStake = () => ( 2 | 7 | 8 | 13 | 17 | 18 | 23 | 27 | 28 | 33 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 59 | 65 | 71 | 75 | 76 | 77 | ) 78 | 79 | export default PionerStake 80 | -------------------------------------------------------------------------------- /library/validator-assets/src/Polkachu.tsx: -------------------------------------------------------------------------------- 1 | const Polkachu = () => ( 2 | 3 | 7 | 11 | 12 | ) 13 | 14 | export default Polkachu 15 | -------------------------------------------------------------------------------- /library/validator-assets/src/Polkadotters.tsx: -------------------------------------------------------------------------------- 1 | const Polkadotters = () => ( 2 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | ) 58 | 59 | export default Polkadotters 60 | -------------------------------------------------------------------------------- /library/validator-assets/src/ProStakers.tsx: -------------------------------------------------------------------------------- 1 | const ProStakers = () => ( 2 | 3 | 4 | 12 | 💎 13 | 14 | 15 | ) 16 | 17 | export default ProStakers 18 | -------------------------------------------------------------------------------- /library/validator-assets/src/Saxemberg.tsx: -------------------------------------------------------------------------------- 1 | const Saxemberg = () => ( 2 | 3 | 4 | 5 | ) 6 | export default Saxemberg 7 | -------------------------------------------------------------------------------- /library/validator-assets/src/Stakely.tsx: -------------------------------------------------------------------------------- 1 | const Stakely = () => ( 2 | 3 | 8 | 13 | 14 | ) 15 | 16 | export default Stakely 17 | -------------------------------------------------------------------------------- /library/validator-assets/src/Stakepile.tsx: -------------------------------------------------------------------------------- 1 | const Stakepile = () => ( 2 | 3 | 4 | 10 | 11 | 17 | 23 | 24 | 30 | 36 | 37 | 43 | 49 | 50 | 56 | 57 | ) 58 | 59 | export default Stakepile 60 | -------------------------------------------------------------------------------- /library/validator-assets/src/StakingFacilities.tsx: -------------------------------------------------------------------------------- 1 | const StakingFacilities = () => ( 2 | 3 | 4 | 11 | 12 | 13 | 14 | 15 | 21 | 25 | 29 | 33 | 37 | 41 | 42 | ) 43 | 44 | export default StakingFacilities 45 | -------------------------------------------------------------------------------- /library/validator-assets/src/TurboFlakes.tsx: -------------------------------------------------------------------------------- 1 | const TurboFlakes = () => ( 2 | 3 | 4 | 5 | 9 | 10 | ) 11 | 12 | export default TurboFlakes 13 | -------------------------------------------------------------------------------- /library/validator-assets/src/bLdNodes.tsx: -------------------------------------------------------------------------------- 1 | const IconBldnodes = () => ( 2 | 3 | 4 | 5 | ) 6 | 7 | export default IconBldnodes 8 | -------------------------------------------------------------------------------- /library/validator-assets/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": "src", 5 | "rootDir": "src", 6 | "outDir": "dist" 7 | }, 8 | "include": ["./**/*"], 9 | } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "w3ux-library-source", 3 | "version": "1.0.0", 4 | "license": "GPL-3.0-only", 5 | "description": "w3ux library source code", 6 | "homepage": "https://github.com/w3ux/w3ux-library", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/w3ux/w3ux-library.git" 10 | }, 11 | "keywords": [ 12 | "w3ux" 13 | ], 14 | "scripts": { 15 | "build:directory": "builder -t directory", 16 | "build:readmes": "builder -t package-readmes", 17 | "clear": "pnpm -r --if-present clear && rm -rf node_modules coverage", 18 | "lint": "eslint './**' --fix && npx prettier --write .", 19 | "build": "pnpm -r --if-present run build", 20 | "compile": "pnpm -r --if-present run compile" 21 | }, 22 | "devDependencies": { 23 | "@eslint/js": "^9.23.0", 24 | "@typescript-eslint/eslint-plugin": "^8.29.1", 25 | "@typescript-eslint/parser": "^8.29.1", 26 | "autoprefixer": "^10.4.21", 27 | "builder": "workspace:*", 28 | "eslint": "^9.23.0", 29 | "eslint-config-prettier": "^10.1.1", 30 | "eslint-import-resolver-typescript": "^4.3.1", 31 | "eslint-plugin-import": "^2.31.0", 32 | "eslint-plugin-prefer-arrow": "^1.2.3", 33 | "eslint-plugin-prefer-arrow-functions": "^3.6.2", 34 | "eslint-plugin-prettier": "^5.2.5", 35 | "eslint-plugin-react": "^7.37.4", 36 | "eslint-plugin-react-hooks": "^5.2.0", 37 | "eslint-plugin-unused-imports": "^4.1.4", 38 | "globals": "^16.0.0", 39 | "minimist": "^1.2.8", 40 | "postcss": "^8.5.3", 41 | "prettier": "^3.5.3", 42 | "prettier-plugin-organize-imports": "^4.1.0", 43 | "tsc": "^2.0.4", 44 | "tslib": "^2.8.1", 45 | "typescript": "^5.8.2", 46 | "typescript-eslint": "^8.29.0", 47 | "yaml": "^2.8.0" 48 | }, 49 | "prettier": { 50 | "arrowParens": "always", 51 | "trailingComma": "es5", 52 | "tabWidth": 2, 53 | "semi": false, 54 | "singleQuote": true, 55 | "endOfLine": "auto", 56 | "plugins": [ 57 | "prettier-plugin-organize-imports" 58 | ] 59 | }, 60 | "pnpm": { 61 | "overrides": { 62 | "eslint-plugin-prefer-arrow-functions>eslint": "8.57.1", 63 | "@typescript-eslint/utils>typescript": "5.8.2", 64 | "@typescript-eslint/typescript-estree>typescript": "5.8.2" 65 | }, 66 | "onlyBuiltDependencies": [ 67 | "@parcel/watcher", 68 | "es5-ext", 69 | "esbuild", 70 | "unrs-resolver" 71 | ] 72 | }, 73 | "packageManager": "pnpm@10.7.0" 74 | } 75 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - builder 3 | - library/* 4 | onlyBuiltDependencies: 5 | - '@parcel/watcher' 6 | - es5-ext 7 | - esbuild 8 | -------------------------------------------------------------------------------- /release-please-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "last-release-sha": "c5f552b302fd33c11afc86d153dcfe64f3e4444e", 3 | "include-component-in-tag": true, 4 | "packages": { 5 | "library/extension-assets": {}, 6 | "library/factories": {}, 7 | "library/hooks": {}, 8 | "library/react-connect-kit": {}, 9 | "library/react-odometer": {}, 10 | "library/react-polkicon": {}, 11 | "library/types": {}, 12 | "library/utils": {}, 13 | "library/crypto": {}, 14 | "library/validator-assets": {} 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 7 | "jsx": "react-jsx", 8 | "sourceMap": false, 9 | "declaration": true, 10 | "declarationMap": false, 11 | "resolveJsonModule": true, 12 | "esModuleInterop": true, 13 | "allowSyntheticDefaultImports": true, 14 | "strict": true 15 | }, 16 | "exclude": ["**/node_modules", "**/dist", "vite.config.js"] 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "rootDir": ".", 6 | "noEmitOnError": true, 7 | "skipLibCheck": true, 8 | "resolveJsonModule": true, 9 | }, 10 | "include": [ 11 | "library/**/*", "builder/**/*", "./eslint.config.mjs" 12 | ], 13 | "exclude": [ 14 | "**/*/node_modules", 15 | "**/*/dist", 16 | "vite.config.js", 17 | ], 18 | } --------------------------------------------------------------------------------