From 18f41bfe2777ef8d1f3daab3349ec7cebd388a74 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Wed, 17 Feb 2021 09:02:48 +0100 Subject: [PATCH] Fix send via JS app (#4678) * Fix send via JS app * Remove debug log --- .../src/snippets/extrinsics-examples.ts | 2 +- .../react-components/src/Status/Queue.tsx | 79 ++++++++++--------- packages/react-components/src/Status/types.ts | 4 +- .../react-signer/src/signers/ApiSigner.ts | 2 +- 4 files changed, 46 insertions(+), 41 deletions(-) diff --git a/packages/page-js/src/snippets/extrinsics-examples.ts b/packages/page-js/src/snippets/extrinsics-examples.ts index 858bea00ad..702a3b65cf 100644 --- a/packages/page-js/src/snippets/extrinsics-examples.ts +++ b/packages/page-js/src/snippets/extrinsics-examples.ts @@ -22,7 +22,7 @@ const randomAmount = Math.floor((Math.random() * 100000) + 1); const transfer = api.tx.balances.transfer(BOB, randomAmount); // Sign and Send the transaction -transfer.signAndSend(ALICE, ({ events = [], status }) => { +await transfer.signAndSend(ALICE, ({ events = [], status }) => { if (status.isInBlock) { console.log('Successful transfer of ' + randomAmount + ' with hash ' + status.asInBlock.toHex()); } else { diff --git a/packages/react-components/src/Status/Queue.tsx b/packages/react-components/src/Status/Queue.tsx index 417f71a592..f7e18aaaae 100644 --- a/packages/react-components/src/Status/Queue.tsx +++ b/packages/react-components/src/Status/Queue.tsx @@ -4,13 +4,12 @@ import type { SubmittableExtrinsic } from '@polkadot/api/promise/types'; import type { Bytes } from '@polkadot/types'; import type { DispatchError } from '@polkadot/types/interfaces'; -import type { ITuple, SignerPayloadJSON } from '@polkadot/types/types'; +import type { ITuple, Registry, SignerPayloadJSON } from '@polkadot/types/types'; import type { ActionStatus, ActionStatusPartial, PartialQueueTxExtrinsic, PartialQueueTxRpc, QueueStatus, QueueTx, QueueTxExtrinsic, QueueTxRpc, QueueTxStatus, SignerCallback } from './types'; import React, { useCallback, useRef, useState } from 'react'; import { SubmittableResult } from '@polkadot/api'; -import { useApi } from '@polkadot/react-hooks'; import jsonrpc from '@polkadot/types/interfaces/jsonrpc'; import { getContractAbi } from '../util'; @@ -145,7 +144,6 @@ function extractEvents (result?: SubmittableResult): ActionStatus[] { } function Queue ({ children }: Props): React.ReactElement { - const { api } = useApi(); const [stqueue, _setStQueue] = useState([]); const [txqueue, _setTxQueue] = useState([]); const stRef = useRef(stqueue); @@ -158,6 +156,7 @@ function Queue ({ children }: Props): React.ReactElement { }, [] ); + const setTxQueue = useCallback( (tx: QueueTx[]): void => { txRef.current = tx; @@ -165,15 +164,17 @@ function Queue ({ children }: Props): React.ReactElement { }, [] ); + const addToTxQueue = useCallback( (value: QueueTxExtrinsic | QueueTxRpc | QueueTx): void => { const id = ++nextId; - const removeItem = (): void => - setTxQueue([...txRef.current.map((item): QueueTx => + const removeItem = () => setTxQueue([ + ...txRef.current.map((item): QueueTx => item.id === id ? { ...item, status: 'completed' } : item - )]); + ) + ]); setTxQueue([...txRef.current, { ...value, @@ -185,6 +186,7 @@ function Queue ({ children }: Props): React.ReactElement { }, [setTxQueue] ); + const queueAction = useCallback( (_status: ActionStatus | ActionStatus[]): void => { const status = Array.isArray(_status) ? _status : [_status]; @@ -209,52 +211,55 @@ function Queue ({ children }: Props): React.ReactElement { }, [setStQueue] ); + const queueExtrinsic = useCallback( - (value: PartialQueueTxExtrinsic): void => - addToTxQueue({ ...value }), + (value: PartialQueueTxExtrinsic) => addToTxQueue({ ...value }), [addToTxQueue] ); + const queuePayload = useCallback( - (payload: SignerPayloadJSON, signerCb: SignerCallback): void => + (registry: Registry, payload: SignerPayloadJSON, signerCb: SignerCallback): void => { addToTxQueue({ accountId: payload.address, - // this is not great, but the Extrinsic we don't need a submittable - extrinsic: api.createType('Extrinsic', - { method: api.createType('Call', payload.method) }, + // this is not great, but the Extrinsic doesn't need a submittable + extrinsic: registry.createType('Extrinsic', + { method: registry.createType('Call', payload.method) }, { version: payload.version } ) as unknown as SubmittableExtrinsic, payload, signerCb - }), - [api, addToTxQueue] - ); - const queueRpc = useCallback( - (value: PartialQueueTxRpc): void => - addToTxQueue({ ...value }), + }); + }, [addToTxQueue] ); + + const queueRpc = useCallback( + (value: PartialQueueTxRpc) => addToTxQueue({ ...value }), + [addToTxQueue] + ); + const queueSetTxStatus = useCallback( (id: number, status: QueueTxStatus, result?: SubmittableResult, error?: Error): void => { - setTxQueue([...txRef.current.map((item): QueueTx => - item.id === id - ? { - ...item, - error: error === undefined - ? item.error - : error, - result: result === undefined - ? item.result as SubmittableResult - : result, - status: item.status === 'completed' - ? item.status - : status - } - : item - )]); + setTxQueue([ + ...txRef.current.map((item): QueueTx => + item.id === id + ? { + ...item, + error: error === undefined + ? item.error + : error, + result: result === undefined + ? item.result as SubmittableResult + : result, + status: item.status === 'completed' + ? item.status + : status + } + : item + ) + ]); - queueAction( - extractEvents(result) - ); + queueAction(extractEvents(result)); if (STATUS_COMPLETE.includes(status)) { setTimeout((): void => { diff --git a/packages/react-components/src/Status/types.ts b/packages/react-components/src/Status/types.ts index d017c8e4a1..bb34782b41 100644 --- a/packages/react-components/src/Status/types.ts +++ b/packages/react-components/src/Status/types.ts @@ -5,7 +5,7 @@ import type { SubmittableResult } from '@polkadot/api'; import type { SubmittableExtrinsic } from '@polkadot/api/promise/types'; import type { SignerResult } from '@polkadot/api/types'; import type { AccountId, Address } from '@polkadot/types/interfaces'; -import type { DefinitionRpcExt, SignerPayloadJSON } from '@polkadot/types/types'; +import type { DefinitionRpcExt, Registry, SignerPayloadJSON } from '@polkadot/types/types'; export type Actions = 'create' | 'edit' | 'restore' | 'forget' | 'backup' | 'changePassword' | 'transfer'; @@ -98,7 +98,7 @@ export type QueueTxRpcAdd = (value: PartialQueueTxRpc) => void; export type QueueTxExtrinsicAdd = (value: PartialQueueTxExtrinsic) => void; -export type QueueTxPayloadAdd = (payload: SignerPayloadJSON, signerCb: SignerCallback) => void; +export type QueueTxPayloadAdd = (registry: Registry, payload: SignerPayloadJSON, signerCb: SignerCallback) => void; export type QueueTxMessageSetStatus = (id: number, status: QueueTxStatus, result?: any, error?: Error) => void; diff --git a/packages/react-signer/src/signers/ApiSigner.ts b/packages/react-signer/src/signers/ApiSigner.ts index 2c1a9d0aec..862995d3ea 100644 --- a/packages/react-signer/src/signers/ApiSigner.ts +++ b/packages/react-signer/src/signers/ApiSigner.ts @@ -22,7 +22,7 @@ export default class ApiSigner implements Signer { public async signPayload (payload: SignerPayloadJSON): Promise { return new Promise((resolve, reject): void => { - this.#queuePayload(payload, (id: number, result: SignerResult | null): void => { + this.#queuePayload(this.#registry, payload, (id: number, result: SignerResult | null): void => { if (result) { resolve(result); } else {