Skip to content
This repository was archived by the owner on Nov 10, 2024. It is now read-only.

Commit 39e2ab8

Browse files
V00D00-childV00D00-child
authored
Feat/remove txhashes from snap state (#56)
* feat: remove txHashes from snap state
1 parent cef1ebd commit 39e2ab8

File tree

14 files changed

+115
-409
lines changed

14 files changed

+115
-409
lines changed

Diff for: ‎packages/site/src/components/Account.tsx

+94-122
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { MetaMaskContext, MetamaskActions, useAcount } from '../hooks';
22
import styled from 'styled-components';
3-
import { connectSnap, convertToEth, filterPendingRequests, getMMProvider, getSnap, handleCopyToClipboard, storeTxHash, trimAccount } from '../utils';
3+
import { connectSnap, convertToEth, filterPendingRequests, getSnap, handleCopyToClipboard, trimAccount } from '../utils';
44
import { FaCloudDownloadAlt, FaRegLightbulb } from 'react-icons/fa';
55
import { InstallFlaskButton, ConnectSnapButton, SimpleButton } from './Buttons';
6-
import { AccountActivity, AccountActivityType, SupportedChainIdMap, UserOperation } from '../types';
6+
import { AccountActivity, SupportedChainIdMap, UserOperation } from '../types';
77
import { useContext, useState } from 'react';
88
import { KeyringAccount, KeyringRequest } from "@metamask/keyring-api";
99
import { BlockieAccountModal } from './Blockie-Icon';
@@ -226,7 +226,8 @@ export const AccountModalDropdown = ({
226226
closeModal();
227227
await selectKeyringSnapAccount(account);
228228
await getSmartAccount(account.id);
229-
await getAccountActivity(account.id);
229+
// TODO: Add account activity
230+
// await getAccountActivity(account.id);
230231
}
231232

232233
const handleCreateAccount = async (event: any) => {
@@ -670,128 +671,99 @@ export const AccountActivityDisplay = () => {
670671
const [state] = useContext(MetaMaskContext);
671672

672673
const renderAccountActivityItem = (item: AccountActivity) => {
673-
switch (item.type) {
674-
case AccountActivityType.SmartContract:
675-
if (item.userOperationReceipt === null) {
676-
return (
677-
<>
678-
<ActivityItem>
679-
<p>Status:</p>
680-
<p><ActivityPending>Pending</ActivityPending></p>
681-
</ActivityItem>
682-
683-
<ActivityItem>
684-
<p>UserOp hash:</p>
685-
<FlexRowNoMargin>
686-
<p>{trimAccount(item.userOpHash)}</p>
687-
<ActivityCopy onClick={e => handleCopyToClipboard(e, item.userOpHash)}>
688-
<FaCopy />
689-
</ActivityCopy>
690-
</FlexRowNoMargin>
691-
</ActivityItem>
692-
</>
693-
)
694-
} else {
695-
const sender = item.userOperationReceipt.sender;
696-
const receipt = item.userOperationReceipt.receipt;
674+
if (item.userOperationReceipt === null) {
675+
return (
676+
<>
677+
<ActivityItem>
678+
<p>Status:</p>
679+
<p><ActivityPending>Pending</ActivityPending></p>
680+
</ActivityItem>
681+
682+
<ActivityItem>
683+
<p>UserOp hash:</p>
684+
<FlexRowNoMargin>
685+
<p>{trimAccount(item.userOpHash)}</p>
686+
<ActivityCopy onClick={e => handleCopyToClipboard(e, item.userOpHash)}>
687+
<FaCopy />
688+
</ActivityCopy>
689+
</FlexRowNoMargin>
690+
</ActivityItem>
691+
</>
692+
)
693+
} else {
694+
const sender = item.userOperationReceipt.sender;
695+
const receipt = item.userOperationReceipt.receipt;
697696

698-
return (
699-
<>
700-
<ActivityItem>
701-
<p>Status:</p>
702-
<p>{item.userOperationReceipt.success? <ActivitySuccess>Confirmed</ActivitySuccess>: <ActivityFailed>Failed</ActivityFailed>}</p>
703-
</ActivityItem>
704-
705-
{!item.userOperationReceipt.success && item.userOperationReceipt.reason && (
706-
<ActivityItem>
707-
<p>Revert:</p>
708-
<p>{item.userOperationReceipt.reason}</p>
709-
</ActivityItem>
710-
)}
711-
712-
<ActivityItem>
713-
<p>Sender:</p>
714-
<FlexRowNoMargin>
715-
<p>eth:{trimAccount(item.userOperationReceipt.sender)}</p>
716-
<ActivityCopy onClick={e => handleCopyToClipboard(e, sender)}>
717-
<FaCopy />
718-
</ActivityCopy>
719-
</FlexRowNoMargin>
720-
</ActivityItem>
721-
722-
<ActivityItem>
723-
<p>To:</p>
724-
<FlexRowNoMargin>
725-
<p>eth:{trimAccount(item.userOperationReceipt.receipt.to)}</p>
726-
<ActivityCopy onClick={e => handleCopyToClipboard(e, receipt.to)}>
727-
<FaCopy />
728-
</ActivityCopy>
729-
</FlexRowNoMargin>
730-
</ActivityItem>
731-
732-
<ActivityItem>
733-
<p>Nonce:</p>
734-
<p>{BigNumber.from(item.userOperationReceipt.nonce).toNumber()}</p>
735-
</ActivityItem>
736-
737-
<ActivityItem>
738-
<p>Actual Gas Used(units):</p>
739-
<p>{BigNumber.from(item.userOperationReceipt.actualGasUsed).toNumber()}</p>
740-
</ActivityItem>
741-
742-
<ActivityItem>
743-
<p>Actual Gas Cost:</p>
744-
<p>{convertToEth(BigNumber.from(item.userOperationReceipt.actualGasCost).toString())} ETH</p>
745-
</ActivityItem>
746-
747-
<ActivityItem>
748-
<p>UserOp hash:</p>
749-
<FlexRowNoMargin>
750-
<p>{trimAccount(item.userOperationReceipt.userOpHash)}</p>
751-
<ActivityCopy onClick={e => handleCopyToClipboard(e, item.userOpHash)}>
752-
<FaCopy />
753-
</ActivityCopy>
754-
</FlexRowNoMargin>
755-
</ActivityItem>
756-
757-
<ActivityItem>
758-
<p>Transaction hash:</p>
759-
<FlexRowNoMargin>
760-
<p>{trimAccount(receipt.transactionHash)}</p>
761-
<ActivityCopy onClick={e => handleCopyToClipboard(e, receipt.transactionHash)}>
762-
<FaCopy />
763-
</ActivityCopy>
764-
</FlexRowNoMargin>
765-
</ActivityItem>
766-
</>
767-
)
768-
}
697+
return (
698+
<>
699+
<ActivityItem>
700+
<p>Status:</p>
701+
<p>{item.userOperationReceipt.success? <ActivitySuccess>Confirmed</ActivitySuccess>: <ActivityFailed>Failed</ActivityFailed>}</p>
702+
</ActivityItem>
769703

770-
case AccountActivityType.EOA:
771-
const txHash = item.txHash ? item.txHash : '';
772-
return (
773-
<>
704+
{!item.userOperationReceipt.success && item.userOperationReceipt.reason && (
774705
<ActivityItem>
775-
<p>Status:</p>
776-
<p>{<ActivitySuccess>Confirmed</ActivitySuccess>}</p>
706+
<p>Revert:</p>
707+
<p>{item.userOperationReceipt.reason}</p>
777708
</ActivityItem>
778-
779-
<ActivityItem>
780-
<p>Transaction hash:</p>
781-
<FlexRowNoMargin>
782-
<p>{trimAccount(txHash)}</p>
783-
<ActivityCopy onClick={e => handleCopyToClipboard(e, txHash)}>
784-
<FaCopy />
785-
</ActivityCopy>
786-
</FlexRowNoMargin>
787-
</ActivityItem>
788-
</>
789-
)
790-
default:
791-
return (
792-
<>
793-
</>
794-
);
709+
)}
710+
711+
<ActivityItem>
712+
<p>Sender:</p>
713+
<FlexRowNoMargin>
714+
<p>eth:{trimAccount(item.userOperationReceipt.sender)}</p>
715+
<ActivityCopy onClick={e => handleCopyToClipboard(e, sender)}>
716+
<FaCopy />
717+
</ActivityCopy>
718+
</FlexRowNoMargin>
719+
</ActivityItem>
720+
721+
<ActivityItem>
722+
<p>To:</p>
723+
<FlexRowNoMargin>
724+
<p>eth:{trimAccount(item.userOperationReceipt.receipt.to)}</p>
725+
<ActivityCopy onClick={e => handleCopyToClipboard(e, receipt.to)}>
726+
<FaCopy />
727+
</ActivityCopy>
728+
</FlexRowNoMargin>
729+
</ActivityItem>
730+
731+
<ActivityItem>
732+
<p>Nonce:</p>
733+
<p>{BigNumber.from(item.userOperationReceipt.nonce).toNumber()}</p>
734+
</ActivityItem>
735+
736+
<ActivityItem>
737+
<p>Actual Gas Used(units):</p>
738+
<p>{BigNumber.from(item.userOperationReceipt.actualGasUsed).toNumber()}</p>
739+
</ActivityItem>
740+
741+
<ActivityItem>
742+
<p>Actual Gas Cost:</p>
743+
<p>{convertToEth(BigNumber.from(item.userOperationReceipt.actualGasCost).toString())} ETH</p>
744+
</ActivityItem>
745+
746+
<ActivityItem>
747+
<p>UserOp hash:</p>
748+
<FlexRowNoMargin>
749+
<p>{trimAccount(item.userOperationReceipt.userOpHash)}</p>
750+
<ActivityCopy onClick={e => handleCopyToClipboard(e, item.userOpHash)}>
751+
<FaCopy />
752+
</ActivityCopy>
753+
</FlexRowNoMargin>
754+
</ActivityItem>
755+
756+
<ActivityItem>
757+
<p>Transaction hash:</p>
758+
<FlexRowNoMargin>
759+
<p>{trimAccount(receipt.transactionHash)}</p>
760+
<ActivityCopy onClick={e => handleCopyToClipboard(e, receipt.transactionHash)}>
761+
<FaCopy />
762+
</ActivityCopy>
763+
</FlexRowNoMargin>
764+
</ActivityItem>
765+
</>
766+
)
795767
}
796768
}
797769

@@ -802,7 +774,7 @@ export const AccountActivityDisplay = () => {
802774
<ActivityItemContainer key={index}>
803775
<ActivityItem>
804776
<TextBold>Type:</TextBold>
805-
<TextBold>{item.type === AccountActivityType.SmartContract ? 'Withdraw': 'Deposit'}</TextBold>
777+
<TextBold>Withdraw</TextBold>
806778
</ActivityItem>
807779
{renderAccountActivityItem(item)}
808780
</ActivityItemContainer>

Diff for: ‎packages/site/src/components/Card.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ const BlockExplorerLink = styled.a`
111111
margin-top: auto;
112112
margin-bottom: 0;
113113
margin-right: 1rem;
114-
color: black;
114+
color: ${(props) => props.theme.colors.primary.default};
115115
116116
&:hover {
117117
color: ${(props) => props.theme.colors.text.default};

Diff for: ‎packages/site/src/components/Transaction.tsx

+13-14
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { AccountRequestDisplay } from './Account';
88
import { convertToEth, convertToWei, estimateGas, trimAccount } from '../utils/eth';
99
import { BlockieAccountModal } from './Blockie-Icon';
1010
import { BigNumber, ethers } from 'ethers';
11-
import { calcPreVerificationGas, estimatCreationGas, estimateUserOperationGas, getDummySignature, getMMProvider, getUserOpCallData, handleCopyToClipboard, notify, storeTxHash } from '../utils';
11+
import { calcPreVerificationGas, estimatCreationGas, estimateUserOperationGas, getDummySignature, getMMProvider, getUserOpCallData, handleCopyToClipboard, notify } from '../utils';
1212
import { EntryPoint__factory } from '@account-abstraction/contracts';
1313
import { UserOperation } from '../types';
1414
import { FaCopy } from "react-icons/fa";
@@ -107,6 +107,7 @@ enum Stage {
107107
Loading = 'Loading',
108108
Success = 'Success',
109109
Failed = 'Failed',
110+
UserConfirmation = 'User Confirmation',
110111
}
111112

112113
export enum TransactionType {
@@ -129,8 +130,6 @@ export const EthereumTransactionModalComponent = ({
129130
const {
130131
sendRequestSync,
131132
getSmartAccount,
132-
getAccountActivity,
133-
getKeyringSnapAccounts,
134133
} = useAcount();
135134

136135
const handleDepositSubmit = async () => {
@@ -154,13 +153,12 @@ export const EthereumTransactionModalComponent = ({
154153
);
155154

156155
// check the selected account is connected
157-
console.log(state)
158156
if (!state.isSelectedSnapKeyringAccountConnected) {
159157
throw new Error('The selected account is not connected. Please connect the account using Settings page.')
160158
}
161159

162160
// send transaction
163-
const res = await getMMProvider().request({
161+
const txHash = await getMMProvider().request({
164162
method: 'eth_sendTransaction',
165163
params: [
166164
{
@@ -176,16 +174,11 @@ export const EthereumTransactionModalComponent = ({
176174
}) as string
177175

178176
// show success message
179-
await getSmartAccount(state.selectedSnapKeyringAccount.id);
180-
await storeTxHash(
181-
state.selectedSnapKeyringAccount.id,
182-
res,
183-
state.chainId,
184-
);
185177
setAmount('');
186178
setSuccessMessage(`${amount} ETH successfully depoisted to entry point contract.`);
187179
setStatus(Stage.Success);
188-
// notify('Deposit Transaction sent (txHash)', 'View activity for details.', res)
180+
notify('Transaction sent (txHash)', 'Check wallet activity for details.', txHash)
181+
await getSmartAccount(state.selectedSnapKeyringAccount.id);
189182
}
190183

191184
const handleWithdrawSubmit = async () => {
@@ -258,11 +251,11 @@ export const EthereumTransactionModalComponent = ({
258251
try {
259252
e.preventDefault();
260253

261-
setStatus(Stage.Loading);
262-
263254
if (transactionType === TransactionType.Deposit) {
255+
setStatus(Stage.UserConfirmation);
264256
await handleDepositSubmit();
265257
} else if (transactionType === TransactionType.Withdraw) {
258+
setStatus(Stage.Loading);
266259
await handleWithdrawSubmit();
267260
} else {
268261
throw new Error('Invalid transaction type');
@@ -391,6 +384,12 @@ export const EthereumTransactionModalComponent = ({
391384
<ClipLoader color="#8093ff" size={50} />
392385
</SpinnerContainer>
393386
);
387+
case Stage.UserConfirmation:
388+
return (
389+
<SpinnerContainer>
390+
<ClipLoader color="#8093ff" size={50} />
391+
</SpinnerContainer>
392+
);
394393
case Stage.Failed:
395394
return (
396395
<Container>

0 commit comments

Comments
 (0)