Skip to content

Commit

Permalink
feat: simplify dialog text render method (#170)
Browse files Browse the repository at this point in the history 
* feat: simplify dialog text render metho

* feat: apply addDialogTxt method
  • Loading branch information
@stanleyyconsensys
stanleyyconsensys authored Nov 14, 2023
1 parent b44a110 commit 9f1c593
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 108 deletions.
14 changes: 3 additions & 11 deletions packages/starknet-snap/src/addErc20Token.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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),
]),
},
});
Expand Down
10 changes: 7 additions & 3 deletions packages/starknet-snap/src/createAccount.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -52,16 +53,19 @@ 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: {
type: DialogType.Confirmation,
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,
]),
},
});
Expand Down
4 changes: 2 additions & 2 deletions packages/starknet-snap/src/sendTransaction.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -51,7 +51,7 @@ export async function sendTransaction(params: ApiParams) {
maxFee = num.toBigInt(suggestedMaxFee);
}

const signingTxnComponents = getSigningTxnText(
const signingTxnComponents = getSendTxnText(
state,
contractAddress,
contractFuncName,
Expand Down
16 changes: 7 additions & 9 deletions packages/starknet-snap/src/signMessage.ts
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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;
Expand Down
136 changes: 54 additions & 82 deletions packages/starknet-snap/src/utils/snapUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,11 @@ export const getValidNumber = (
return obj === '' || isNaN(toNum) || toNum > maxVal || toNum < minVal ? defaultValue : toNum;
};

export function addDialogTxt(components: Array<Component>, label: string, value: string) {
components.push(text(`**${label}:**`));
components.push(copyable(value));
}

export function getTxnSnapTxt(
senderAddress: string,
network: Network,
Expand All @@ -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,
Expand All @@ -220,8 +218,13 @@ export function getSigningTxnText(
): Array<Component> {
// 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 = '';
Expand All @@ -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(
Expand All @@ -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;
Expand All @@ -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;
}
Expand All @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion packages/starknet-snap/test/src/signMessage.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ describe('Test function: signMessage', function () {
},
{
type: 'text',
value: `**Signer address:**`,
value: `**Signer Address:**`,
},
{
type: 'copyable',
Expand Down

0 comments on commit 9f1c593

Please sign in to comment.