I'm trying to add a custom component to a fork of polkadot apps: https://github.com/polkadot-js/apps

The component looks like:

import type { KeyringPair } from '@polkadot/keyring/types';
import { keyring } from '@polkadot/ui-keyring';
import React, { useState } from 'react';

function GetSLON(): React.ReactElement {
  const [currentPair, setCurrentPair] = useState<KeyringPair | null>(() => keyring.getPairs()[0] || null);
  return (

export default GetSLON;

I'm getting an error:

Uncaught Error: Keyring should be initialised via 'loadAll' before use
    at get keyring [as keyring] (bundle.js_+_11_modules:352:15)
    at Keyring.getPairs (bundle.js_+_11_modules:366:21)
    at eval (index.tsx_+_72_modules:2566:83)
    at mountState (react-dom.development.js:16986:20)
    at Object.useState (react-dom.development.js:17699:16)
    at useState (react.development.js:1623:21)
    at GetSLON (index.tsx_+_72_modules:2566:61)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20069:13)
    at beginWork (react-dom.development.js:21582:16)

Please help.

  • Hi @denis-reshetov, you can check how to initialize the module here polkadot.js.org/docs/ui-keyring/start/init. Thx!
    – pepoviola
    Commented Oct 27, 2023 at 18:09
  • @pepoviola thank you for prompt reply, unfortunately keyring is already initialized as the component is used within polkadot.js apps. I tried to reinitialized it as you suggested but it throws an error, that it can't be initialized twice. Commented Oct 28, 2023 at 2:56
  • How are you initializating it?
    – Alex Bean
    Commented Oct 30, 2023 at 8:30
  • I use a keyring from polkadot.js - it's already initialized there Commented Oct 31, 2023 at 10:57


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.