From 9f1c59349f2370db1670a98a611c4f332e998a70 Mon Sep 17 00:00:00 2001 From: Stanley Yuen <102275989+stanleyyconsensys@users.noreply.github.com> Date: Tue, 14 Nov 2023 12:29:53 +0800 Subject: [PATCH] feat: simplify dialog text render method (#170) * feat: simplify dialog text render metho * feat: apply addDialogTxt method --- packages/starknet-snap/src/addErc20Token.ts | 14 +- packages/starknet-snap/src/createAccount.ts | 10 +- packages/starknet-snap/src/sendTransaction.ts | 4 +- packages/starknet-snap/src/signMessage.ts | 16 +-- packages/starknet-snap/src/utils/snapUtils.ts | 136 +++++++----------- .../test/src/signMessage.test.ts | 2 +- 6 files changed, 74 insertions(+), 108 deletions(-) diff --git a/packages/starknet-snap/src/addErc20Token.ts b/packages/starknet-snap/src/addErc20Token.ts index a04b62c6..4a265456 100644 --- a/packages/starknet-snap/src/addErc20Token.ts +++ b/packages/starknet-snap/src/addErc20Token.ts @@ -6,10 +6,11 @@ import { upsertErc20Token, getValidNumber, validateAddErc20TokenParams, + getAddTokenText, } from './utils/snapUtils'; import { DEFAULT_DECIMAL_PLACES } from './utils/constants'; import { DialogType } from '@metamask/rpc-methods'; -import { heading, panel, text, copyable } from '@metamask/snaps-ui'; +import { heading, panel } from '@metamask/snaps-ui'; export async function addErc20Token(params: ApiParams) { try { @@ -36,16 +37,7 @@ export async function addErc20Token(params: ApiParams) { type: DialogType.Confirmation, content: panel([ heading('Do you want to add this token?'), - text('**Token Address:**'), - copyable(tokenAddress), - text('**Token Name:**'), - copyable(tokenName), - text('**Token Symbol:**'), - copyable(tokenSymbol), - text('**Token Decimals:**'), - copyable(tokenDecimals.toString()), - text('**Network:**'), - copyable(network.name), + ...getAddTokenText(tokenAddress, tokenName, tokenSymbol, tokenDecimals, network), ]), }, }); diff --git a/packages/starknet-snap/src/createAccount.ts b/packages/starknet-snap/src/createAccount.ts index 61d9c79b..68ae0653 100644 --- a/packages/starknet-snap/src/createAccount.ts +++ b/packages/starknet-snap/src/createAccount.ts @@ -13,6 +13,7 @@ import { getValidNumber, upsertAccount, upsertTransaction, + addDialogTxt, } from './utils/snapUtils'; import { AccContract, VoyagerTransactionType, Transaction, TransactionStatus } from './types/snapState'; import { ApiParams, CreateAccountRequestParams } from './types/snapApi'; @@ -52,6 +53,11 @@ export async function createAccount(params: ApiParams, silentMode = false) { if (deploy) { if (!silentMode) { + const components = []; + addDialogTxt(components, 'Address', contractAddress); + addDialogTxt(components, 'Public Key', publicKey); + addDialogTxt(components, 'Address Index', addressIndex.toString()); + const response = await wallet.request({ method: 'snap_dialog', params: { @@ -59,9 +65,7 @@ export async function createAccount(params: ApiParams, silentMode = false) { content: panel([ heading('Do you want to sign this deploy account transaction ?'), text(`It will be signed with address: ${contractAddress}`), - text( - `Account Info:\n\nAddress: ${contractAddress}\n\nPublic Key: ${publicKey}\n\nAddress Index: ${addressIndex}`, - ), + ...components, ]), }, }); diff --git a/packages/starknet-snap/src/sendTransaction.ts b/packages/starknet-snap/src/sendTransaction.ts index e1e8f3d2..12011166 100644 --- a/packages/starknet-snap/src/sendTransaction.ts +++ b/packages/starknet-snap/src/sendTransaction.ts @@ -3,7 +3,7 @@ import { num, constants } from 'starknet'; import { validateAndParseAddress } from '../src/utils/starknetUtils'; import { estimateFee } from './estimateFee'; import { Transaction, TransactionStatus, VoyagerTransactionType } from './types/snapState'; -import { getNetworkFromChainId, getSigningTxnText, upsertTransaction } from './utils/snapUtils'; +import { getNetworkFromChainId, getSendTxnText, upsertTransaction } from './utils/snapUtils'; import { getKeysFromAddress, getCallDataArray, executeTxn, isAccountDeployed } from './utils/starknetUtils'; import { ApiParams, SendTransactionRequestParams } from './types/snapApi'; import { createAccount } from './createAccount'; @@ -51,7 +51,7 @@ export async function sendTransaction(params: ApiParams) { maxFee = num.toBigInt(suggestedMaxFee); } - const signingTxnComponents = getSigningTxnText( + const signingTxnComponents = getSendTxnText( state, contractAddress, contractFuncName, diff --git a/packages/starknet-snap/src/signMessage.ts b/packages/starknet-snap/src/signMessage.ts index 7afaa0ae..3f114451 100644 --- a/packages/starknet-snap/src/signMessage.ts +++ b/packages/starknet-snap/src/signMessage.ts @@ -1,11 +1,11 @@ import { toJson } from './utils/serializer'; import typedDataExample from './typedData/typedDataExample.json'; import { getTypedDataMessageSignature, getKeysFromAddress } from './utils/starknetUtils'; -import { getNetworkFromChainId } from './utils/snapUtils'; +import { getNetworkFromChainId, addDialogTxt } from './utils/snapUtils'; import { ApiParams, SignMessageRequestParams } from './types/snapApi'; import { validateAndParseAddress } from '../src/utils/starknetUtils'; import { DialogType } from '@metamask/rpc-methods'; -import { heading, panel, copyable, text } from '@metamask/snaps-ui'; +import { heading, panel } from '@metamask/snaps-ui'; import { logger } from './utils/logger'; export async function signMessage(params: ApiParams) { @@ -33,17 +33,15 @@ export async function signMessage(params: ApiParams) { logger.log(`signMessage:\nsignerAddress: ${signerAddress}\ntypedDataMessage: ${toJson(typedDataMessage)}`); + const components = []; + addDialogTxt(components, 'Message', toJson(typedDataMessage)); + addDialogTxt(components, 'Signer Address', signerAddress); + const response = await wallet.request({ method: 'snap_dialog', params: { type: DialogType.Confirmation, - content: panel([ - heading('Do you want to sign this message ?'), - text(`**Message:**`), - copyable(toJson(typedDataMessage)), - text(`**Signer address:**`), - copyable(`${signerAddress}`), - ]), + content: panel([heading('Do you want to sign this message ?'), ...components]), }, }); if (!response) return false; diff --git a/packages/starknet-snap/src/utils/snapUtils.ts b/packages/starknet-snap/src/utils/snapUtils.ts index 0dcbc735..4e072cbb 100644 --- a/packages/starknet-snap/src/utils/snapUtils.ts +++ b/packages/starknet-snap/src/utils/snapUtils.ts @@ -175,6 +175,11 @@ export const getValidNumber = ( return obj === '' || isNaN(toNum) || toNum > maxVal || toNum < minVal ? defaultValue : toNum; }; +export function addDialogTxt(components: Array, label: string, value: string) { + components.push(text(`**${label}:**`)); + components.push(copyable(value)); +} + export function getTxnSnapTxt( senderAddress: string, network: Network, @@ -183,33 +188,26 @@ export function getTxnSnapTxt( invocationsDetails?: InvocationsDetails, ) { const components = []; - components.push(text('**Network:**')); - components.push(copyable(network.name)); - components.push(text('**Signer Address:**')); - components.push(copyable(senderAddress)); - components.push(text('**Transaction Invocation:**')); - components.push(copyable(JSON.stringify(txnInvocation, null, 2))); + addDialogTxt(components, 'Network', network.name); + addDialogTxt(components, 'Signer Address', senderAddress); + addDialogTxt(components, 'Transaction Invocation', JSON.stringify(txnInvocation, null, 2)); if (abis && abis.length > 0) { - components.push(text('**Abis:**')); - components.push(copyable(JSON.stringify(abis, null, 2))); + addDialogTxt(components, 'Abis', JSON.stringify(abis, null, 2)); } if (invocationsDetails?.maxFee) { - components.push(text('**Max Fee(ETH):**')); - components.push(copyable(convert(invocationsDetails.maxFee, 'wei', 'ether'))); + addDialogTxt(components, 'Max Fee(ETH)', convert(invocationsDetails.maxFee, 'wei', 'ether')); } if (invocationsDetails?.nonce) { - components.push(text('**Nonce:**')); - components.push(copyable(invocationsDetails.nonce.toString())); + addDialogTxt(components, 'Nonce', invocationsDetails.nonce.toString()); } if (invocationsDetails?.version) { - components.push(text('**Version:**')); - components.push(copyable(invocationsDetails.version.toString())); + addDialogTxt(components, 'Version', invocationsDetails.version.toString()); } return components; } -export function getSigningTxnText( +export function getSendTxnText( state: SnapState, contractAddress: string, contractFuncName: string, @@ -220,8 +218,13 @@ export function getSigningTxnText( ): Array { // Retrieve the ERC-20 token from snap state for confirmation display purpose const token = getErc20Token(state, contractAddress, network.chainId); - const tokenTransferComponents1 = []; - const tokenTransferComponents2 = []; + const components = []; + addDialogTxt(components, 'Signer Address', senderAddress); + addDialogTxt(components, 'Contract', contractAddress); + addDialogTxt(components, 'Call Data', `[${contractCallData.join(', ')}]`); + addDialogTxt(components, 'Estimated Gas Fee(ETH)', convert(maxFee, 'wei', 'ether')); + addDialogTxt(components, 'Network', network.name); + if (token && contractFuncName === 'transfer') { try { let amount = ''; @@ -230,28 +233,15 @@ export function getSigningTxnText( } else { amount = (Number(contractCallData[1]) * Math.pow(10, -1 * token.decimals)).toFixed(token.decimals); } - tokenTransferComponents2.push(text('**Sender Address:**')); - tokenTransferComponents2.push(copyable(senderAddress)); - tokenTransferComponents2.push(text('**Recipient Address:**')); - tokenTransferComponents2.push(copyable(contractCallData[0])); - tokenTransferComponents2.push(text(`**Amount(${token.symbol}):**`)); - tokenTransferComponents2.push(copyable(amount)); + addDialogTxt(components, 'Sender Address', senderAddress); + addDialogTxt(components, 'Recipient Address', contractCallData[0]); + addDialogTxt(components, `Amount(${token.symbol})`, amount); } catch (err) { logger.error(`getSigningTxnText: error found in amount conversion: ${err}`); } } - tokenTransferComponents1.push(text('**Signer Address:**')); - tokenTransferComponents1.push(copyable(senderAddress)); - tokenTransferComponents1.push(text('**Contract:**')); - tokenTransferComponents1.push(copyable(contractAddress)); - tokenTransferComponents1.push(text('**Call Data:**')); - tokenTransferComponents1.push(copyable(`[${contractCallData.join(', ')}]`)); - tokenTransferComponents1.push(text('**Estimated Gas Fee(ETH):**')); - tokenTransferComponents1.push(copyable(convert(maxFee, 'wei', 'ether'))); - tokenTransferComponents1.push(text('**Network:**')); - tokenTransferComponents1.push(copyable(network.name)); - return tokenTransferComponents1.concat(tokenTransferComponents2); + return components; } export function getSignTxnTxt( @@ -262,45 +252,34 @@ export function getSignTxnTxt( abis?: Abi[], ) { const components = []; - components.push(text('**Network:**')); - components.push(copyable(network.name)); - components.push(text('**Signer Address:**')); - components.push(copyable(senderAddress)); - - components.push(text('**Transaction Invocation:**')); - components.push(copyable(JSON.stringify(txnInvocation, null, 2))); + addDialogTxt(components, 'Network', network.name); + addDialogTxt(components, 'Signer Address', senderAddress); + addDialogTxt(components, 'Transaction Invocation', JSON.stringify(txnInvocation, null, 2)); if (abis && abis.length > 0) { - components.push(text('**Abis:**')); - components.push(copyable(JSON.stringify(abis, null, 2))); + addDialogTxt(components, 'Abis', JSON.stringify(abis, null, 2)); } if (invocationsDetails?.maxFee !== undefined) { - components.push(text('**Max Fee(ETH):**')); - components.push(copyable(convert(invocationsDetails.maxFee, 'wei', 'ether'))); + addDialogTxt(components, 'Max Fee(ETH)', convert(invocationsDetails.maxFee, 'wei', 'ether')); } if (invocationsDetails?.nonce !== undefined) { - components.push(text('**Nonce:**')); - components.push(copyable(invocationsDetails.nonce.toString())); + addDialogTxt(components, 'Nonce', invocationsDetails.nonce.toString()); } if (invocationsDetails?.version !== undefined) { - components.push(text('**Version:**')); - components.push(copyable(invocationsDetails.version.toString())); + addDialogTxt(components, 'Version', invocationsDetails.version.toString()); } if (invocationsDetails?.walletAddress !== undefined) { - components.push(text('**walletAddress:**')); - components.push(copyable(invocationsDetails.walletAddress.toString())); + addDialogTxt(components, 'Wallet Address', invocationsDetails.walletAddress.toString()); } if (invocationsDetails?.chainId !== undefined) { - components.push(text('**chainId:**')); - components.push(copyable(invocationsDetails.chainId.toString())); + addDialogTxt(components, 'Chain Id', invocationsDetails.chainId.toString()); } if (invocationsDetails?.cairoVersion !== undefined) { - components.push(text('**cairoVersion:**')); - components.push(copyable(invocationsDetails.cairoVersion.toString())); + addDialogTxt(components, 'Cairo Version', invocationsDetails.cairoVersion.toString()); } return components; @@ -313,46 +292,33 @@ export function getDeclareSnapTxt( invocationsDetails?: InvocationsDetails, ) { const components = []; - components.push(text('**Network:**')); - components.push(copyable(network.name)); - components.push(text('**Signer Address:**')); - components.push(copyable(senderAddress)); + addDialogTxt(components, 'Network', network.name); + addDialogTxt(components, 'Signer Address', senderAddress); if (contractPayload.contract) { - components.push(text('**Contract:**')); - if (typeof contractPayload.contract === 'string' || contractPayload.contract instanceof String) { - components.push(copyable(contractPayload.contract.toString())); - } else { - components.push(copyable(JSON.stringify(contractPayload.contract, null, 2))); - } + const _contractPayload = + typeof contractPayload.contract === 'string' || contractPayload.contract instanceof String + ? contractPayload.contract.toString() + : JSON.stringify(contractPayload.contract, null, 2); + addDialogTxt(components, 'Contract', _contractPayload); } - if (contractPayload.compiledClassHash) { - components.push(text('**Complied Class Hash:**')); - components.push(copyable(contractPayload.compiledClassHash)); + addDialogTxt(components, 'Complied Class Hash', contractPayload.compiledClassHash); } - if (contractPayload.classHash) { - components.push(text('**Class Hash:**')); - components.push(copyable(contractPayload.classHash)); + addDialogTxt(components, 'Class Hash', contractPayload.classHash); } - if (contractPayload.casm) { - components.push(text('**Casm:**')); - components.push(copyable(JSON.stringify(contractPayload.casm, null, 2))); + addDialogTxt(components, 'Casm', JSON.stringify(contractPayload.casm, null, 2)); } - if (invocationsDetails?.maxFee !== undefined) { - components.push(text('**Max Fee(ETH):**')); - components.push(copyable(convert(invocationsDetails.maxFee, 'wei', 'ether'))); + addDialogTxt(components, 'Max Fee(ETH)', convert(invocationsDetails.maxFee, 'wei', 'ether')); } if (invocationsDetails?.nonce !== undefined) { - components.push(text('**Nonce:**')); - components.push(copyable(invocationsDetails.nonce.toString())); + addDialogTxt(components, 'Nonce', invocationsDetails.nonce.toString()); } if (invocationsDetails?.version !== undefined) { - components.push(text('**Version:**')); - components.push(copyable(invocationsDetails.version.toString())); + addDialogTxt(components, 'Version', invocationsDetails.version.toString()); } return components; } @@ -364,7 +330,13 @@ export function getAddTokenText( tokenDecimals: number, network: Network, ) { - return `Token Address: ${tokenAddress}\n\nToken Name: ${tokenName}\n\nToken Symbol: ${tokenSymbol}\n\nToken Decimals: ${tokenDecimals}\n\nNetwork: ${network.name}`; + const components = []; + addDialogTxt(components, 'Network', network.name); + addDialogTxt(components, 'Token Address', tokenAddress); + addDialogTxt(components, 'Token Name', tokenName); + addDialogTxt(components, 'Token Symbol', tokenSymbol); + addDialogTxt(components, 'Token Decimals', tokenDecimals.toString()); + return components; } export function getAccount(state: SnapState, accountAddress: string, chainId: string) { diff --git a/packages/starknet-snap/test/src/signMessage.test.ts b/packages/starknet-snap/test/src/signMessage.test.ts index ae85b905..aeb0c579 100644 --- a/packages/starknet-snap/test/src/signMessage.test.ts +++ b/packages/starknet-snap/test/src/signMessage.test.ts @@ -67,7 +67,7 @@ describe('Test function: signMessage', function () { }, { type: 'text', - value: `**Signer address:**`, + value: `**Signer Address:**`, }, { type: 'copyable',