Added "To:" and "From:" along with checks of EOA to EOA or contract interaction #17
Conversation
There was a problem hiding this comment.
@PoulavBhowmick03 almost there, please move your client-side logic to server-side using my requested changes comment to get this PR merged.
| const TransactionDetails = ({ transaction }: { transaction: Transaction }) => { | ||
| const [isContract, setIsContract] = useState<boolean | null>(null); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
While the logic is good, we don't want it to happen client-side because we want to mirror how the explorer will work when the accompanying indexer is ready.
Move your logic server-side by adding an optional isContractInteraction property in the Transaction type declared in @/lib/types.
Populate this computed property using your client-side logic in the top-level Page component and pass the updated transaction object to this TransactionDetails component.
Do not display "Contract interaction" or "EOA transfer" next to the to address, instead modify the label to display "Interacted With (To):" in case of contract interaction.
|
Okay! Will make these changes |
|
@saimeunt Can you check the changes that I made, moved the isContractInteraction to lib/types.ts |
There was a problem hiding this comment.
@PoulavBhowmick03 I don't get it, you completely removed the contract detection logic on the to address which was correct, it just needed to be put one level up in the root component, which is a React Server Component so we can compute the isContractInteraction prop server-side in one go.
Please reintroduce the correct behavior.
| @@ -10,6 +10,7 @@ export type Transaction = { | |||
| value: bigint; | |||
| gasPrice?: bigint; | |||
| timestamp: bigint; | |||
| isContractInteraction?: boolean; | |||
There was a problem hiding this comment.
You can remove this, we'll stick with the transaction interface provided by JSON-RPC which doesn't involve an isContractInteraction property.
| </CardContent> | ||
| </Card> | ||
| ); | ||
| const TransactionDetails = ({ transaction }: { transaction: Transaction }) => { |
There was a problem hiding this comment.
Add a top-level isContractInteraction prop here on the TransactionDetails component that will be computed one level up in the root component: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/tx/index.tsx#L6-L7
Compute the property and pass it to this component along with the transaction.
Replicate the logic you wrote before by calling getCode on the to address of the tx.
|
@PoulavBhowmick03 Hey do you plan to finish this before the end of the hack? |
Addresses #14
Closes #14
This is how the tx/[hash].tsx looks like now, after the changes
Changes made
This is how I have implemented the changes to this. Let me know if this is good enough or there has to be any other changes made