@polkadot/api/types#QueryableStorageEntry TypeScript Examples

export default function usePolkadotPreclaims (): string[] {
  const { allAccounts } = useAccounts();
  const { api } = useApi();
  const mountedRef = useIsMountedRef();
  const [needsAttest, setNeedsAttest] = useState<string[]>([]);

  // find all own preclaims
  const preclaims = useCall<[string, EthereumAddress][]>(api.query.claims?.preclaims?.multi, [allAccounts], {
    transform: (preclaims: Option<EthereumAddress>[]) =>
      preclaims
        .map((opt, index): [string, Option<EthereumAddress>] => [allAccounts[index], opt])
        .filter(([, opt]) => opt.isSome)
        .map(([address, opt]) => [address, opt.unwrap()])
  });

  // Filter the accounts that need attest. They are accounts that
  // - already preclaimed
  // - has a balance, either vested or normal
  useEffect((): void => {
    preclaims && api.queryMulti(
      preclaims.reduce((result: [QueryableStorageEntry<'promise'>, EthereumAddress][], [, ethAddr]) =>
        result.concat([
          [api.query.claims.claims, ethAddr],
          [api.query.claims.vesting, ethAddr]
        ]),
      []), (opts: Option<Codec>[]): void => {
        // filter the cases where either claims or vesting has a value
        mountedRef.current && setNeedsAttest(
          preclaims
            .filter((_, index) => opts[index * 2].isSome || opts[(index * 2) + 1].isSome)
            .map(([address]) => address)
        );
      }
    );
  }, [api, allAccounts, mountedRef, preclaims]);

  return needsAttest;
}

function keyToName (isConst: boolean, _key: Uint8Array | QueryableStorageEntry<'promise'> | ConstValue): string {
  if (isConst) {
    const key = _key as ConstValue;

    return `const ${key.section}.${key.method}`;
  }

  const key = _key as Uint8Array | QueryableStorageEntry<'promise'>;

  if (isU8a(key)) {
    const [, u8a] = compactStripLength(key);

    // If the string starts with `:`, handle it as a pure string
    return u8a[0] === 0x3a
      ? u8aToString(u8a)
      : u8aToHex(u8a);
  }

  return `${key.creator.section}.${key.creator.method}`;
}

function areParamsValid ({ creator: { meta: { type } } }: QueryableStorageEntry<'promise'>, values: RawParams): boolean {
  return values.reduce((isValid: boolean, value): boolean => {
    return isValid &&
      !isUndefined(value) &&
      !isUndefined(value.value) &&
      value.isValid;
  }, (
    type.isDoubleMap
      ? values.length === 2
      : values.length === (type.isMap ? 1 : 0)
  ));
}

function expandKey (api: ApiPromise, key: QueryableStorageEntry<'promise'>): KeyState {
  const { creator: { meta: { type }, section } } = key;
  const isIterable = checkIterable(type);

  return {
    defaultValues: section === 'session' && type.isDoubleMap
      ? [{ isValid: true, value: api.consts.session.dedupKeyPrefix.toHex() }]
      : null,
    isIterable,
    key,
    params: expandParams(type, isIterable)
  };
}

export function useMapEntries<T = any>(
  entry?: QueryableStorageEntry<'promise'> | null | false,
  { at, transform }: Options<T> = {}
): T | undefined {
  const [state, setState] = useState<T | undefined>();

  useEffect((): void => {
    // eslint-disable-next-line
    entry &&
      (at && at !== '0' ? entry.entriesAt(at) : entry.entries())
        .then((entries) => setState(transform ? transform(entries) : (entries as unknown as T)))
        .catch(console.error);
  }, [at, entry, transform]);

  return state;
}

export function useMapKeys<T = any>(
  entry?: QueryableStorageEntry<'promise'> | null | false,
  { at, transform }: Options<T> = {}
): T[] | undefined {
  const [state, setState] = useState<T[] | undefined>();

  useEffect((): void => {
    // eslint-disable-next-line
    entry &&
      (at && at !== '0' ? entry.keysAt(at) : entry.keys())
        .then((keys) => setState(transform ? transform(keys) : (keys as unknown as T[])))
        .catch(console.error);
  }, [at, entry, transform]);

  return state;
}

function typeToString ({ creator: { meta: { modifier, type } } }: QueryableStorageEntry<'promise'>): string {
  const _type = unwrapStorageType(type);

  return modifier.isOptional
    ? `Option<${_type}>`
    : _type;
}

function Query ({ className = '', onRemove, value }: Props): React.ReactElement<Props> | null {
  const [{ Component }, callName, callType] = useMemo(
    () => [
      getCachedComponent(value),
      keyToName(value.isConst, value.key),
      value.isConst
        ? (value.key as unknown as ConstValue).meta.type.toString()
        : isU8a(value.key)
          ? 'Raw'
          : typeToString(value.key as QueryableStorageEntry<'promise'>)
    ],
    [value]
  );

  const _onRemove = useCallback(
    (): void => {
      delete cache[value.id];

      onRemove(value.id);
    },
    [onRemove, value]
  );

  if (!Component) {
    return null;
  }

  return (
    <div className={`storage--Query storage--actionrow ${className}`}>
      <div className='storage--actionrow-value'>
        <Labelled
          label={
            <div className='storage--actionrow-label'>
              {callName}: {callType}
            </div>
          }
        >
          <Component />
        </Labelled>
      </div>
      <div className='storage--actionrow-buttons'>
        <Button
          icon='times'
          key='close'
          onClick={_onRemove}
        />
      </div>
    </div>
  );
}

function Modules ({ onAdd }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();
  const { api } = useApi();
  const [{ defaultValues, isIterable, key, params }, setKey] = useState<KeyState>({ defaultValues: undefined, isIterable: false, key: api.query.timestamp.now, params: [] });
  const [{ isValid, values }, setValues] = useState<ValState>({ isValid: true, values: [] });

  const _onAdd = useCallback(
    (): void => {
      isValid && onAdd({
        isConst: false,
        key,
        params: values.filter(({ value }, index) => !isIterable || (index !== values.length - 1) || !isNull(value))
      });
    },
    [isIterable, isValid, key, onAdd, values]
  );

  const _onChangeValues = useCallback(
    (values: RawParams) => setValues({
      isValid: areParamsValid(key, values),
      values
    }),
    [key]
  );

  const _onChangeKey = useCallback(
    (key: QueryableStorageEntry<'promise'>): void => {
      setKey(expandKey(api, key));
      _onChangeValues([]);
    },
    [_onChangeValues, api]
  );

  const { creator: { meta, method, section } } = key;

  return (
    <section className='storage--actionrow'>
      <div className='storage--actionrow-value'>
        <InputStorage
          defaultValue={api.query.timestamp.now}
          help={meta?.documentation.join(' ')}
          label={t<string>('selected state query')}
          onChange={_onChangeKey}
        />
        <Params
          key={`${section}.${method}:params` /* force re-render on change */}
          onChange={_onChangeValues}
          onEnter={_onAdd}
          params={params}
          values={defaultValues}
        />
      </div>
      <div className='storage--actionrow-buttons'>
        <Button
          icon='plus'
          isDisabled={!isValid}
          onClick={_onAdd}
        />
      </div>
    </section>
  );
}

function transform (api: ApiPromise, { value }: Props): (method: string) => QueryableStorageEntry<'promise'> {
  return function (method: string): QueryableStorageEntry<'promise'> {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
    return api.query[value.creator.section]
      ? api.query[value.creator.section][method] as any
      : value;
  };
}

function InputStorage ({ className = '', defaultValue, help, label, onChange, withLabel }: Props): React.ReactElement<Props> {
  const { api } = useApi();
  const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(() => keyOptions(api, defaultValue.creator.section));
  const [optionsSection] = useState<DropdownOptions>(() => sectionOptions(api));
  const [value, setValue] = useState<QueryableStorageEntry<'promise'>>(() => defaultValue);

  const _onKeyChange = useCallback(
    (newValue: QueryableStorageEntry<'promise'>): void => {
      if (value.creator.section !== newValue.creator.section || value.creator.method !== newValue.creator.method) {
        // set via callback
        setValue(() => newValue);
        onChange && onChange(newValue);
      }
    },
    [onChange, value]
  );

  const _onSectionChange = useCallback(
    (section: string): void => {
      if (section !== value.creator.section) {
        const optionsMethod = keyOptions(api, section);

        setOptionsMethod(optionsMethod);
        _onKeyChange(api.query[section][optionsMethod[0].value] as any);
      }
    },
    [_onKeyChange, api, value]
  );

  return (
    <LinkedWrapper
      className={className}
      help={help}
      label={label}
      withLabel={withLabel}
    >
      <SelectSection
        className='small'
        onChange={_onSectionChange}
        options={optionsSection}
        value={value}
      />
      <SelectKey
        className='large'
        onChange={_onKeyChange}
        options={optionsMethod}
        value={value}
      />
    </LinkedWrapper>
  );
}

function transform(api: ApiPromise, { value }: Props): (method: string) => QueryableStorageEntry<'promise'> {
  return function (method: string): QueryableStorageEntry<'promise'> {
    // eslint-disable-next-line
    return api.query[value.creator.section] ? (api.query[value.creator.section][method] as any) : value;
  };
}

function InputStorage({
  className = '',
  defaultValue,
  help,
  label,
  onChange,
  withLabel,
}: Props): React.ReactElement<Props> {
  const { api } = useApi();
  const [optionsMethod, setOptionsMethod] = useState<DropdownOptions>(() =>
    keyOptions(api, defaultValue.creator.section)
  );
  const [optionsSection] = useState<DropdownOptions>(() => sectionOptions(api));
  const [value, setValue] = useState<QueryableStorageEntry<'promise'>>(() => defaultValue);

  const _onKeyChange = useCallback(
    (newValue: QueryableStorageEntry<'promise'>): void => {
      if (value.creator.section !== newValue.creator.section || value.creator.method !== newValue.creator.method) {
        // set via callback
        setValue(() => newValue);
        // eslint-disable-next-line
        onChange && onChange(newValue);
      }
    },
    [onChange, value]
  );

  const _onSectionChange = useCallback(
    (section: string): void => {
      if (section !== value.creator.section) {
        const res = keyOptions(api, section);

        setOptionsMethod(res);
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        _onKeyChange(api.query[section][res[0].value] as any);
      }
    },
    [_onKeyChange, api, value]
  );

  return (
    <LinkedWrapper className={className} help={help} label={label} withLabel={withLabel}>
      <SelectSection className="small" onChange={_onSectionChange} options={optionsSection} value={value} />
      <SelectKey className="large" onChange={_onKeyChange} options={optionsMethod} value={value} />
    </LinkedWrapper>
  );
}