@polkadot/api/types#SubmittableExtrinsicFunction TypeScript Examples

The following examples show how to use @polkadot/api/types#SubmittableExtrinsicFunction. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: SelectMethod.tsx From crust-apps with Apache License 2.0

6 votes

function SelectMethod ({ api, className = '', isError, onChange, options, value }: Props): React.ReactElement<Props> | null {
  const transform = useCallback(
    (method: string): SubmittableExtrinsicFunction<'promise'> =>
      api.tx[value.section][method],
    [api, value]
  );

  if (!options.length) {
    return null;
  }

  return (
    <Dropdown
      className={`ui--DropdownLinked-Items ${className}`}
      isError={isError}
      onChange={onChange}
      options={options}
      transform={transform}
      value={value.method}
      withLabel={false}
    />
  );
}

Example #2

Source File: Call.tsx From crust-apps with Apache License 2.0

6 votes

function Call ({ className = '', isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
  const { api, apiDefaultTx } = useApi();

  const defaultValue = ((): SubmittableExtrinsicFunction<'promise'> => {
    try {
      return api.tx.system.setCode;
    } catch (error) {
      return apiDefaultTx;
    }
  })();

  return (
    <Extrinsic
      className={className}
      defaultValue={defaultValue}
      isDisabled={isDisabled}
      isError={isError}
      isPrivate={false}
      label={label}
      onChange={onChange}
      onEnter={onEnter}
      onEscape={onEscape}
      withLabel={withLabel}
    />
  );
}

Example #3

Source File: SelectMethod.tsx From subscan-multisig-react with Apache License 2.0

6 votes

function SelectMethod({
  api,
  className = '',
  defaultValue,
  isDisabled,
  isError,
  onChange,
  options,
  value,
}: Props): React.ReactElement<Props> | null {
  const transform = useCallback(
    (method: string): SubmittableExtrinsicFunction<'promise'> => api.tx[value.section][method],
    [api, value]
  );

  if (!options.length) {
    return null;
  }

  return (
    <Dropdown
      className={`ui--DropdownLinked-Items ${className}`}
      defaultValue={defaultValue}
      isDisabled={isDisabled}
      isError={isError}
      onChange={onChange}
      options={options}
      transform={transform}
      value={value.method}
      withLabel={false}
    />
  );
}

Example #4

Source File: Call.tsx From subscan-multisig-react with Apache License 2.0

6 votes

function Call({
  className = '',
  isDisabled,
  isError,
  label,
  onChange,
  onEnter,
  onEscape,
  withLabel,
}: Props): React.ReactElement<Props> {
  const { api, apiDefaultTx } = useApi();

  const defaultValue = ((): SubmittableExtrinsicFunction<'promise'> => {
    try {
      return api.tx.balances.transfer;
    } catch (error) {
      return apiDefaultTx;
    }
  })();

  return (
    <Extrinsic
      className={className}
      defaultValue={defaultValue}
      isDisabled={isDisabled}
      isError={isError}
      isPrivate={false}
      label={label}
      onChange={onChange}
      onEnter={onEnter}
      onEscape={onEscape}
      withLabel={withLabel}
    />
  );
}

Example #5

Source File: Extrinsic.tsx From crust-apps with Apache License 2.0

5 votes

function getParams ({ meta }: SubmittableExtrinsicFunction<'promise'>): { name: string; type: TypeDef }[] {
  return GenericCall.filterOrigin(meta).map((arg): { name: string; type: TypeDef } => ({
    name: arg.name.toString(),
    type: getTypeDef(arg.type.toString())
  }));
}

Example #6

Source File: Extrinsic.tsx From crust-apps with Apache License 2.0

5 votes

function ExtrinsicDisplay ({ defaultValue, isDisabled, isError, isPrivate, label, onChange, onEnter, onError, onEscape, withLabel }: Props): React.ReactElement<Props> {
  const [extrinsic, setCall] = useState<CallState>({ fn: defaultValue, params: getParams(defaultValue) });
  const [values, setValues] = useState<RawParam[]>([]);

  useEffect((): void => {
    setValues([]);
  }, [extrinsic]);

  useEffect((): void => {
    const isValid = values.reduce((isValid, value): boolean =>
      isValid &&
      !isUndefined(value) &&
      !isUndefined(value.value) &&
      value.isValid, extrinsic.params.length === values.length
    );

    let method;

    if (isValid) {
      try {
        method = extrinsic.fn(...values.map(({ value }): any => value));
      } catch (error) {
        onError && onError(error);
      }
    } else {
      onError && onError(null);
    }

    onChange(method);
  }, [extrinsic, onChange, onError, values]);

  const _onChangeMethod = useCallback(
    (fn: SubmittableExtrinsicFunction<'promise'>): void => setCall({ fn, params: getParams(fn) }),
    []
  );

  const { fn: { meta, method, section }, params } = extrinsic;

  return (
    <div className='extrinsics--Extrinsic'>
      <InputExtrinsic
        defaultValue={defaultValue}
        help={meta?.documentation.join(' ')}
        isDisabled={isDisabled}
        isError={isError}
        isPrivate={isPrivate}
        label={label}
        onChange={_onChangeMethod}
        withLabel={withLabel}
      />
      <Params
        key={`${section}.${method}:params` /* force re-render on change */}
        onChange={setValues}
        onEnter={onEnter}
        onEscape={onEscape}
        overrides={paramComponents}
        params={params}
      />
    </div>
  );
}

Example #7

Source File: index.tsx From crust-apps with Apache License 2.0

5 votes

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

  const _onKeyChange = useCallback(
    (newValue: SubmittableExtrinsicFunction<'promise'>): void => {
      if (value.section === newValue.section && value.method === newValue.method) {
        return;
      }

      // set this via callback, since the we are setting a function (alternatively... we have issues)
      setValue((): SubmittableExtrinsicFunction<'promise'> => newValue);
      onChange(newValue);
    },
    [onChange, value]
  );

  const _onSectionChange = useCallback(
    (section: string): void => {
      if (section === value.section) {
        return;
      }

      const optionsMethod = methodOptions(api, section);

      setOptionsMethod(optionsMethod);
      _onKeyChange(api.tx[section][optionsMethod[0].value]);
    },
    [_onKeyChange, api, value]
  );

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

Example #8

Source File: Extrinsic.tsx From subscan-multisig-react with Apache License 2.0

5 votes

function getParams({ meta }: SubmittableExtrinsicFunction<'promise'>): { name: string; type: TypeDef }[] {
  return meta.args.map((arg): { name: string; type: TypeDef } => ({
    name: arg.name.toString(),
    type: getTypeDef(arg.type.toString()),
  }));
}

Example #9

Source File: Extrinsic.tsx From subscan-multisig-react with Apache License 2.0

5 votes

function ExtrinsicDisplay({
  defaultValue,
  isDisabled,
  isError,
  isPrivate,
  label,
  onChange,
  onEnter,
  onError,
  onEscape,
  withLabel,
}: Props): React.ReactElement<Props> {
  const [extrinsic, setCall] = useState<CallState>({ fn: defaultValue, params: getParams(defaultValue) });
  const [values, setValues] = useState<RawParam[]>([]);

  useEffect((): void => {
    setValues([]);
  }, [extrinsic]);

  // eslint-disable-next-line complexity
  useEffect((): void => {
    const isValid = values.reduce(
      (isValid, value): boolean => isValid && !isUndefined(value) && !isUndefined(value.value) && value.isValid,
      extrinsic.params.length === values.length
    );

    let method;

    if (isValid) {
      try {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        method = extrinsic.fn(...values.map(({ value }): any => value));
      } catch (error: unknown) {
        if (error instanceof Error) {
          // eslint-disable-next-line
          onError && onError(error);
        }
      }
    } else {
      // eslint-disable-next-line
      onError && onError(null);
    }

    onChange(method);
  }, [extrinsic, onChange, onError, values]);

  const _onChangeMethod = useCallback(
    (fn: SubmittableExtrinsicFunction<'promise'>): void => setCall({ fn, params: getParams(fn) }),
    []
  );

  const {
    fn: { meta, method, section },
    params,
  } = extrinsic;

  return (
    <div className="extrinsics--Extrinsic">
      <InputExtrinsic
        defaultValue={defaultValue}
        help={meta?.docs.join(' ')}
        isDisabled={isDisabled}
        isError={isError}
        isPrivate={isPrivate}
        label={label}
        onChange={_onChangeMethod}
        withLabel={withLabel}
      />
      <Params
        key={`${section}.${method}:params` /* force re-render on change */}
        onChange={setValues}
        onEnter={onEnter}
        onEscape={onEscape}
        overrides={paramComponents}
        params={params}
      />
    </div>
  );
}

Example #10

Source File: index.tsx From subscan-multisig-react with Apache License 2.0

5 votes

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

  const _onKeyChange = useCallback(
    (newValue: SubmittableExtrinsicFunction<'promise'>): void => {
      if (value.section === newValue.section && value.method === newValue.method) {
        return;
      }

      // set this via callback, since the we are setting a function (alternatively... we have issues)
      setValue((): SubmittableExtrinsicFunction<'promise'> => newValue);
      // eslint-disable-next-line
      onChange && onChange(newValue);
    },
    [onChange, value]
  );

  const _onSectionChange = useCallback(
    (section: string): void => {
      if (section === value.section) {
        return;
      }

      // eslint-disable-next-line @typescript-eslint/no-shadow
      const optionsMethod = methodOptions(api, section);

      setOptionsMethod(optionsMethod);
      _onKeyChange(api.tx[section][optionsMethod[0].value]);
    },
    [_onKeyChange, api, value]
  );

  return (
    <LinkedWrapper className={className} help={help} label={label} withLabel={withLabel}>
      <SelectSection
        className="small"
        defaultValue={isDisabled ? value.section : undefined}
        isDisabled={isDisabled}
        onChange={isDisabled ? undefined : _onSectionChange}
        options={optionsSection}
        value={value}
      />
      <SelectMethod
        api={api}
        className="large"
        defaultValue={isDisabled ? value.method : undefined}
        isDisabled={isDisabled}
        onChange={isDisabled ? undefined : _onKeyChange}
        options={optionsMethod}
        value={value}
      />
    </LinkedWrapper>
  );
}