How to use @polkadot/extension-dapp - 5 common examples

if (pair) {
      const { address, meta: { isExternal, isHardware, isInjected, source } } = pair;

      queueSetTxStatus(id, 'signing');

      // set the signer
      if (isHardware) {
        api.setSigner(ledgerSigner);
        params.push(address);
      } else if (isExternal) {
        queueSetTxStatus(id, 'qr');
        api.setSigner({ signPayload: this.signQrPayload });
        params.push(address);
      } else if (isInjected) {
        const injected = await web3FromSource(source);

        assert(injected, `Unable to find a signer for ${address}`);

        api.setSigner(injected.signer);
        params.push(address);
      } else {
        params.push(pair);
      }
    }

    if (isV2 && tip) {
      params.push({ tip } as Partial);
    }

    if (isFunction(txStartCb)) {
      txStartCb();

const isUsable = !(isExternal || isHardware || isInjected);

    setAccountState({ isExternal, isHardware, isInjected });
    setIsLocked(
      isInjected
        ? false
        : currentPair?.isLocked || false
    );
    setSignature('');
    setSigner({ isUsable, signer: null });

    // for injected, retrieve the signer
    if (currentPair && isInjected) {
      const { meta: { source } } = currentPair;

      web3FromSource(source)
        .catch((): null => null)
        .then((injected): void => setSigner({
          isUsable: isFunction(injected?.signer?.signRaw),
          signer: injected?.signer || null
        }));
    }
  }, [currentPair]);

isHardware,
      isInjected
    });
    setIsLocked(
      isInjected
        ? false
        : currentPair?.isLocked || false
    );
    setSignature('');
    setSigner({ isUsable, signer: null });

    // for injected, retrieve the signer
    if (currentPair && isInjected) {
      const { meta: { source } } = currentPair;

      web3FromSource(source)
        .catch((): null => null)
        .then((injected): void => setSigner({
          isUsable: isFunction(injected?.signer?.signRaw),
          signer: injected?.signer || null
        }));
    }
  }, [currentPair]);

private async loadOnReady (api: ApiPromise): Promise {
    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()

interface State extends ApiProps {
  chain?: string | null;
}

interface InjectedAccountExt {
  address: string;
  meta: {
    name: string;
    source: string;
  };
}

const DEFAULT_DECIMALS = createType(registry, 'u32', 12);
const DEFAULT_SS58 = createType(registry, 'u32', addressDefaults.prefix);
const injectedPromise = web3Enable('polkadot-js/apps');
let api: ApiPromise;

export { api };

export default class Api extends React.PureComponent {
  public state: State = {} as unknown as State;

  constructor (props: Props) {
    super(props);

    const { queuePayload, queueSetTxStatus, url } = props;
    const provider = new WsProvider(url);
    const signer = new ApiSigner(queuePayload, queueSetTxStatus);

    const setApi = (provider: ProviderInterface): void => {
      api = this.createApi(provider, signer);