How to use the @polkadot/ui-settings.prefix function in @polkadot/ui-settings

api.rpc.system.chain(),
      api.rpc.system.name(),
      api.rpc.system.version(),
      web3Accounts().then((accounts): InjectedAccountExt[] =>
        accounts.map(({ address, meta }): InjectedAccountExt => ({
          address,
          meta: {
            ...meta,
            name: `${meta.name} (${meta.source === 'polkadot-js' ? 'extension' : meta.source})`
          }
        }))
      )
    ]);
    const ss58Format = uiSettings.prefix === -1
      ? properties.ss58Format.unwrapOr(DEFAULT_SS58).toNumber()
      : uiSettings.prefix;
    const tokenSymbol = properties.tokenSymbol.unwrapOr('DEV').toString();
    const tokenDecimals = properties.tokenDecimals.unwrapOr(DEFAULT_DECIMALS).toNumber();
    const systemChain = _systemChain
      ? _systemChain.toString()
      : '';
    const isDevelopment = isTestChain(systemChain);

    console.log('api: found chain', systemChain, JSON.stringify(properties));

    // first setup the UI helpers
    formatBalance.setDefaults({
      decimals: tokenDecimals,
      unit: tokenSymbol
    });
    TokenUnit.setAbbr(tokenSymbol);

const [properties, _systemChain, _systemName, _systemVersion, injectedAccounts] = await Promise.all([
      api.rpc.system.properties(),
      api.rpc.system.chain(),
      api.rpc.system.name(),
      api.rpc.system.version(),
      web3Accounts().then((accounts): InjectedAccountExt[] =>
        accounts.map(({ address, meta }): InjectedAccountExt => ({
          address,
          meta: {
            ...meta,
            name: `${meta.name} (${meta.source === 'polkadot-js' ? 'extension' : meta.source})`
          }
        }))
      )
    ]);
    const ss58Format = uiSettings.prefix === -1
      ? properties.ss58Format.unwrapOr(DEFAULT_SS58).toNumber()
      : uiSettings.prefix;
    const tokenSymbol = properties.tokenSymbol.unwrapOr('DEV').toString();
    const tokenDecimals = properties.tokenDecimals.unwrapOr(DEFAULT_DECIMALS).toNumber();
    const systemChain = _systemChain
      ? _systemChain.toString()
      : '';
    const isDevelopment = isTestChain(systemChain);

    console.log('api: found chain', systemChain, JSON.stringify(properties));

    // first setup the UI helpers
    formatBalance.setDefaults({
      decimals: tokenDecimals,
      unit: tokenSymbol
    });

function recodeAddress (address: string, accounts: AccountJson[], genesisHash?: string | null): [string, AccountJson | null, Chain] {
  // decode and create a shortcut for the encoded address
  const publicKey = decodeAddress(address);

  // find our account using the actual publicKey, and then find the associated chain
  const account = findAccount(accounts, publicKey);
  const chain = findChain((account && account.genesisHash) || genesisHash);

  return [
    // always allow the actual settings to override the display
    encodeAddress(publicKey, settings.prefix === -1 ? chain.ss58Format : settings.prefix),
    account,
    chain
  ];
}

export default function Settings (): React.ReactElement<{}> {
  const [camera, setCamera] = useState(settings.camera);
  const [prefix, setPrefix] = useState(`${settings.prefix}`);

  const _onChangeCamera = (camera: string): void => {
    setCamera(camera);

    settings.set({ camera });
  };

  // FIXME check against index, we need a better solution
  const _onChangePrefix = (value: string): void => {
    const prefix = parseInt(value, 10);

    setSS58Format(prefix === -1 ? 42 : prefix);
    setPrefix(value);

    settings.set({ prefix });
  };