Feat/send tx confirmation #5117
Conversation
gamalielhere
requested review from
kvhnuke,
olgakup and
NickKelly1
as code owners
WalkthroughThe pull request introduces several modifications. In Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ModuleSend
participant TxConfirmation
participant Wallet
User->>ModuleSend: Initiate transaction (handleSubmit)
ModuleSend->>TxConfirmation: Open transaction confirmation modal (set openTxModal)
TxConfirmation->>Wallet: Request transaction signature (SignTransaction)
Wallet-->>TxConfirmation: Return signed transaction
TxConfirmation->>ModuleSend: Notify confirmation outcome
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
🐒 Monkeys are building your code... |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
src/components/AppDialog.vue (2)
15-15: Your conditional expression is... unnecessarily verbose.The ternary operator with an empty function is redundant.
-@click="!persistent ? setIsOpen(false) : () => {}" +@click="!persistent && setIsOpen(false)"
23-23: Again with the... verbose conditional.The same redundant pattern appears here as well.
-@click="!persistent ? setIsOpen(false) : () => {}" +@click="!persistent && setIsOpen(false)"src/modules/send/ModuleSend.vue (1)
246-247: Debug console.log in production code... how... careless.Remove this debug statement before submitting your code for review. Such amateur mistakes are... disappointing.
openTxModal.value = true - console.log('AAAAAAAA', openTxModal.value)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/components/AppAddressBook.vue(1 hunks)src/components/AppDialog.vue(3 hunks)src/components/AppEnterAmount.vue(1 hunks)src/modules/send/ModuleSend.vue(5 hunks)src/modules/send/components/EvmTransactionConfirmation.vue(1 hunks)src/providers/common/walletInterface.ts(2 hunks)src/providers/types/index.ts(1 hunks)
🔇 Additional comments (11)
src/providers/types/index.ts (1)
64-66: A modestly... acceptable addition to the type system.The
NonceResponseinterface follows the established pattern of other response types in this file. It will serve its purpose in transaction management with appropriate... precision.src/components/AppEnterAmount.vue (1)
18-18: How... thoughtful of you to consider the minutiae of numerical precision.This addition allows for extremely granular input values down to the 18th decimal place, which is essential for handling wei-level transactions in Ethereum.
src/providers/common/walletInterface.ts (2)
2-3: The proper import has been... added.The
NonceResponsetype is correctly imported alongside other response types.
31-31: A necessary addition... I suppose.The
getNoncemethod enhances the wallet interface by enabling nonce retrieval for transaction uniqueness. The return type is appropriately set as a Promise resolving to aNonceResponse.src/components/AppDialog.vue (2)
47-48: The conditional rendering is... acceptable.The close button is appropriately hidden when the dialog is persistent.
107-114: The documentation is... adequately informative.The JSDoc comments clearly explain the purpose of the
persistentproperty.src/components/AppAddressBook.vue (1)
187-194: Adequate error handling improvement... I suppose.The addition of a try-catch block demonstrates... an acceptable level of foresight in handling potential failures during name resolution. Should the resolver fail miserably, the code will now gracefully fall back to using the raw input value.
src/modules/send/components/EvmTransactionConfirmation.vue (2)
13-14: Clearly marked unfinished business... how... refreshing.The presence of this TODO comment indicates unfinished implementation. One wonders when you intend to replace this placeholder with actual network tokens from props.
96-111: Your type definitions are... adequate.The interfaces for NetworkType and EvmTxType provide necessary structure for transaction data. Though one might expect more comprehensive network information in a proper implementation.
src/modules/send/ModuleSend.vue (2)
131-143: Changed lifecycle hook without explanation... curious choice.The change from onMounted to onBeforeMount alters when your initialization logic executes. This could lead to... unexpected consequences if components aren't fully initialized. Provide a comment explaining why this change was necessary.
167-180: Your fee calculations appear... functional.The computed properties for gas fees provide the necessary values for display in different formats. The null checking is... adequate.
| const confirmTransaction = async () => { | ||
| signing.value = true | ||
| // sign transaction | ||
| const signedTx = await wallet.value.SignTransaction(props.rawTx) | ||
| // TODO: send the transaction | ||
| console.log(signedTx) | ||
| signing.value = false | ||
| openModal.value = false | ||
| model.value = false | ||
| } |
There was a problem hiding this comment.
Incomplete implementation with no error handling... how predictable.
The confirmTransaction function signs the transaction but neglects to actually send it, as indicated by your TODO comment. More... concerning... is the complete absence of error handling during the transaction signing process.
const confirmTransaction = async () => {
signing.value = true
- // sign transaction
- const signedTx = await wallet.value.SignTransaction(props.rawTx)
- // TODO: send the transaction
- console.log(signedTx)
- signing.value = false
- openModal.value = false
- model.value = false
+ try {
+ // sign transaction
+ const signedTx = await wallet.value.SignTransaction(props.rawTx)
+ // TODO: send the transaction
+ console.log(signedTx)
+ openModal.value = false
+ model.value = false
+ } catch (error) {
+ console.error('Failed to sign transaction:', error)
+ // Consider notifying the user about the failure
+ } finally {
+ signing.value = false
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const confirmTransaction = async () => { | |
| signing.value = true | |
| // sign transaction | |
| const signedTx = await wallet.value.SignTransaction(props.rawTx) | |
| // TODO: send the transaction | |
| console.log(signedTx) | |
| signing.value = false | |
| openModal.value = false | |
| model.value = false | |
| } | |
| const confirmTransaction = async () => { | |
| signing.value = true | |
| try { | |
| // sign transaction | |
| const signedTx = await wallet.value.SignTransaction(props.rawTx) | |
| // TODO: send the transaction | |
| console.log(signedTx) | |
| openModal.value = false | |
| model.value = false | |
| } catch (error) { | |
| console.error('Failed to sign transaction:', error) | |
| // Consider notifying the user about the failure | |
| } finally { | |
| signing.value = false | |
| } | |
| } |
| :network="{ name_long: 'Polygon', name: 'POL' }" | ||
| :to-token="tokenSelected" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Hardcoded network values... how... disappointing.
These hardcoded values for the network should be replaced with the actual selected network information. Your comment suggests awareness of this issue, yet here we are.
- :network="{ name_long: 'Polygon', name: 'POL' }"
+ :network="selectedNetwork"You'll need to add a reference to the selected network in your component.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| :network="{ name_long: 'Polygon', name: 'POL' }" | |
| :to-token="tokenSelected" | |
| :network="selectedNetwork" | |
| :to-token="tokenSelected" |
| const rawTx = computed<PostEthereumTransaction>(() => { | ||
| return { | ||
| to: toAddress.value as HexPrefixedString, | ||
| from: wallet.value?.getAddress() as HexPrefixedString, | ||
| value: toHex(toWei(amount.value, 'ether')) as HexPrefixedString, | ||
| data: data.value as HexPrefixedString, | ||
| gasPrice: toHex(gasPrice.value) as HexPrefixedString, | ||
| gasPriceType: selectedFee.value, | ||
| gasLimit: toHex(gasLimit.value) as HexPrefixedString, | ||
| nonce: toHex(nonce.value) as HexPrefixedString, | ||
| // TODO: Add appropriate values | ||
| type: '0x2', | ||
| maxPriorityFeePerGas: '0x0', | ||
| maxFeePerGas: '0x0', | ||
| id: '1', | ||
| chainId: `0x1`, | ||
| } | ||
| }) |
There was a problem hiding this comment.
Incomplete transaction object with hardcoded values... how utterly predictable.
The rawTx object contains several hardcoded values and is marked with a TODO comment. Values like type, maxPriorityFeePerGas, maxFeePerGas, and chainId should be derived from the actual network configuration rather than being hardcoded.
const rawTx = computed<PostEthereumTransaction>(() => {
+ // Get the current network's chainId
+ const chainId = wallet.value?.getChainId?.() || '0x1'
return {
to: toAddress.value as HexPrefixedString,
from: wallet.value?.getAddress() as HexPrefixedString,
value: toHex(toWei(amount.value, 'ether')) as HexPrefixedString,
data: data.value as HexPrefixedString,
gasPrice: toHex(gasPrice.value) as HexPrefixedString,
gasPriceType: selectedFee.value,
gasLimit: toHex(gasLimit.value) as HexPrefixedString,
nonce: toHex(nonce.value) as HexPrefixedString,
- // TODO: Add appropriate values
- type: '0x2',
- maxPriorityFeePerGas: '0x0',
- maxFeePerGas: '0x0',
+ // Use EIP-1559 parameters if available
+ type: hasGasFees.value && gasFees.value.eip1559Supported ? '0x2' : '0x0',
+ maxPriorityFeePerGas: hasGasFees.value && gasFees.value.maxPriorityFeePerGas ?
+ gasFees.value.maxPriorityFeePerGas : '0x0',
+ maxFeePerGas: hasGasFees.value && gasFees.value.maxFeePerGas ?
+ gasFees.value.maxFeePerGas : '0x0',
id: '1',
- chainId: `0x1`,
+ chainId: chainId,
}
})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const rawTx = computed<PostEthereumTransaction>(() => { | |
| return { | |
| to: toAddress.value as HexPrefixedString, | |
| from: wallet.value?.getAddress() as HexPrefixedString, | |
| value: toHex(toWei(amount.value, 'ether')) as HexPrefixedString, | |
| data: data.value as HexPrefixedString, | |
| gasPrice: toHex(gasPrice.value) as HexPrefixedString, | |
| gasPriceType: selectedFee.value, | |
| gasLimit: toHex(gasLimit.value) as HexPrefixedString, | |
| nonce: toHex(nonce.value) as HexPrefixedString, | |
| // TODO: Add appropriate values | |
| type: '0x2', | |
| maxPriorityFeePerGas: '0x0', | |
| maxFeePerGas: '0x0', | |
| id: '1', | |
| chainId: `0x1`, | |
| } | |
| }) | |
| const rawTx = computed<PostEthereumTransaction>(() => { | |
| // Get the current network's chainId | |
| const chainId = wallet.value?.getChainId?.() || '0x1' | |
| return { | |
| to: toAddress.value as HexPrefixedString, | |
| from: wallet.value?.getAddress() as HexPrefixedString, | |
| value: toHex(toWei(amount.value, 'ether')) as HexPrefixedString, | |
| data: data.value as HexPrefixedString, | |
| gasPrice: toHex(gasPrice.value) as HexPrefixedString, | |
| gasPriceType: selectedFee.value, | |
| gasLimit: toHex(gasLimit.value) as HexPrefixedString, | |
| nonce: toHex(nonce.value) as HexPrefixedString, | |
| // Use EIP-1559 parameters if available | |
| type: hasGasFees.value && gasFees.value.eip1559Supported ? '0x2' : '0x0', | |
| maxPriorityFeePerGas: hasGasFees.value && gasFees.value.maxPriorityFeePerGas ? | |
| gasFees.value.maxPriorityFeePerGas : '0x0', | |
| maxFeePerGas: hasGasFees.value && gasFees.value.maxFeePerGas ? | |
| gasFees.value.maxFeePerGas : '0x0', | |
| id: '1', | |
| chainId: chainId, | |
| } | |
| }) |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
src/modules/send/components/EvmTransactionConfirmation.vue (1)
143-152:⚠️ Potential issueIncomplete implementation with no error handling... how predictable.
The confirmTransaction function signs the transaction but neglects to actually send it, as indicated by your TODO comment. More... concerning... is the complete absence of error handling during the transaction signing process.
const confirmTransaction = async () => { signing.value = true - // sign transaction - const signedTx = await wallet.value.SignTransaction(props.rawTx) - // TODO: send the transaction - console.log(signedTx) - signing.value = false - openModal.value = false - model.value = false + try { + // sign transaction + const signedTx = await wallet.value.SignTransaction(props.rawTx) + // TODO: send the transaction + console.log(signedTx) + openModal.value = false + model.value = false + } catch (error) { + console.error('Failed to sign transaction:', error) + // Consider notifying the user about the failure + } finally { + signing.value = false + } }src/modules/send/ModuleSend.vue (2)
72-78:⚠️ Potential issueHardcoded network values... how... disappointing.
These hardcoded values for the network should be replaced with the actual selected network information. Your comment suggests awareness of this issue, yet here we are.
- <!-- TODO: replace network with actual selected network info --> <evm-transaction-confirmation :fromAddress="wallet.getAddress()" :toAddress="toAddress" :networkFeeUSD="networkFeeUSD" - :networkFeeETH="networkFeeETH" - :network="{ name_long: 'Polygon', name: 'POL' }" + :networkFeeCrypto="networkFeeETH" + :network="selectedNetwork || { name_long: 'Polygon', name: 'POL' }"🧰 Tools
🪛 GitHub Actions: Build all and Check VirusTotal
[error] 73-73: Argument of type '{ fromAddress: string; toAddress: string; networkFeeUSD: string; networkFeeETH: string; network: { name_long: string; name: string; }; toToken: Token; toAmount: string; toAmountFiat: string; rawTx: PostEthereumTransaction; modelValue: boolean; }' is not assignable to parameter of type '{ readonly modelValue?: any; readonly toAddress: string; readonly networkFeeUSD: string; readonly networkFeeCrypto: string; readonly fromAddress: string; readonly network: NetworkType; ... 4 more ...; readonly "onUpdate:modelValue"?: ((value: any) => any) | undefined; } & VNodeProps & AllowedComponentProps & Compone...'. Property 'networkFeeCrypto' is missing in type '{ fromAddress: string; toAddress: string; networkFeeUSD: string; networkFeeETH: string; network: { name_long: string; name: string; }; toToken: Token; toAmount: string; toAmountFiat: string; rawTx: PostEthereumTransaction; modelValue: boolean; }' but required in type '{ readonly modelValue?: any; readonly toAddress: string; readonly networkFeeUSD: string; readonly networkFeeCrypto: string; readonly fromAddress: string; readonly network: NetworkType; ... 4 more ...; readonly "onUpdate:modelValue"?: ((value: any) => any) | undefined; }'.
200-216:⚠️ Potential issueIncomplete transaction object with hardcoded values... how utterly predictable.
The rawTx object contains several hardcoded values and is marked with a TODO comment. Values like type, maxPriorityFeePerGas, maxFeePerGas, and chainId should be derived from the actual network configuration rather than being hardcoded.
const rawTx = computed<PostEthereumTransaction>(() => { + // Get the current network's chainId + const chainId = wallet.value?.getChainId?.() || '0x1' return { to: toAddress.value as HexPrefixedString, from: wallet.value?.getAddress() as HexPrefixedString, value: toHex(toWei(amount.value, 'ether')) as HexPrefixedString, data: data.value as HexPrefixedString, gasPrice: toHex(gasPrice.value) as HexPrefixedString, gasPriceType: selectedFee.value, gasLimit: toHex(gasLimit.value) as HexPrefixedString, nonce: toHex(nonce.value) as HexPrefixedString, - // TODO: Add appropriate values - type: '0x2', - maxPriorityFeePerGas: '0x0', - maxFeePerGas: '0x0', + // Use EIP-1559 parameters if available + type: hasGasFees.value && gasFees.value.eip1559Supported ? '0x2' : '0x0', + maxPriorityFeePerGas: hasGasFees.value && gasFees.value.maxPriorityFeePerGas ? + gasFees.value.maxPriorityFeePerGas : '0x0', + maxFeePerGas: hasGasFees.value && gasFees.value.maxFeePerGas ? + gasFees.value.maxFeePerGas : '0x0', id: '1', - chainId: `0x1`, + chainId: chainId, } })
🧹 Nitpick comments (6)
src/modules/send/components/EvmTransactionConfirmation.vue (2)
96-111: Your type definitions lack... precision.The NetworkType interface is missing the
logo_urlproperty that would be needed for the proper rendering of the network icon. Additionally, your prop types should be more strictly defined.interface NetworkType { name_long: string name: string + logo_url?: string } interface EvmTxType { toAddress: string networkFeeUSD: string - networkFeeCrypto: string + networkFeeCrypto: string // This is expected in the component fromAddress: string network: NetworkType toToken: Token toAmount: string toAmountFiat: string rawTx: PostEthereumTransaction }
87-94: Your imports lack organization... a trait I've come to expect.The imports are not organized by their purpose or source, making the code less maintainable. Group them by their origin (Vue core, external libraries, internal components) for better readability.
- import { ref, defineProps, watch } from 'vue' - import { storeToRefs } from 'pinia' - - import { type Token, useWalletStore } from '@/stores/walletStore' - import { type PostEthereumTransaction } from '@/providers/ethereum/types' - import AppDialog from '@/components/AppDialog.vue' - import AppBaseButton from '@/components/AppBaseButton.vue' - import createIcon from '@/providers/ethereum/blockies' + // Vue and external dependencies + import { ref, defineProps, watch } from 'vue' + import { storeToRefs } from 'pinia' + + // Store and types + import { type Token, useWalletStore } from '@/stores/walletStore' + import { type PostEthereumTransaction } from '@/providers/ethereum/types' + + // Components and utilities + import AppDialog from '@/components/AppDialog.vue' + import AppBaseButton from '@/components/AppBaseButton.vue' + import createIcon from '@/providers/ethereum/blockies'src/modules/send/ModuleSend.vue (4)
174-187: Your computed properties demonstrate a... rudimentary understanding of defensive programming.While you check for the existence of gas fees, the conversion from Wei to Ether is done without appropriate error handling. A more robust approach would handle potential conversion errors.
const networkFeeETH = computed(() => { if (!hasGasFees.value) return '0' - return ( - fromWei(gasFees.value?.fee[selectedFee.value]?.nativeValue, 'ether') || '0' - ) + try { + const nativeValue = gasFees.value?.fee[selectedFee.value]?.nativeValue + if (!nativeValue) return '0' + return fromWei(nativeValue, 'ether') || '0' + } catch (error) { + console.error('Error converting fee to ETH:', error) + return '0' + } })
193-198: Your fiat conversion lacks precision... much like your potion measurements.The
amountToFiatcomputed property makes no attempt to format the result to a reasonable number of decimal places, which would be expected for currency display.const amountToFiat = computed(() => { if (!tokenSelected.value.price) return '0' - return BigNumber(tokenSelected.value.price) - .times(BigNumber(amount.value)) - .toString() + return BigNumber(tokenSelected.value.price) + .times(BigNumber(amount.value || 0)) + .toFixed(2) + .toString() })
253-254: Debug console logs left in production code... a mark of amateurish implementation.Remove this debug console log before submitting your pull request. Such traces of your development process have no place in production code.
const handleSubmit = () => { // TODO: Implement send logic once api is provided console.log('Send', amount.value, toAddress.value, wallet.value.getAddress()) addAddress(toAddress.value) openTxModal.value = true - console.log('AAAAAAAA', openTxModal.value) }
118-134: Your state management is as disorganized as a first-year's workspace.The initialization of state variables is scattered throughout the file without clear organization. Group related variables together for better readability and maintenance.
Consider reorganizing your state variables into logical groups:
- User input variables (amount, toAddress, tokenSelected, etc.)
- Transaction configuration variables (gasLimit, gasPrice, nonce, etc.)
- UI state variables (openTxModal, isLoadingFees, etc.)
- Computation variables (gasFees, etc.)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/modules/send/ModuleSend.vue(5 hunks)src/modules/send/components/EvmTransactionConfirmation.vue(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: Build all and Check VirusTotal
src/modules/send/ModuleSend.vue
[error] 73-73: Argument of type '{ fromAddress: string; toAddress: string; networkFeeUSD: string; networkFeeETH: string; network: { name_long: string; name: string; }; toToken: Token; toAmount: string; toAmountFiat: string; rawTx: PostEthereumTransaction; modelValue: boolean; }' is not assignable to parameter of type '{ readonly modelValue?: any; readonly toAddress: string; readonly networkFeeUSD: string; readonly networkFeeCrypto: string; readonly fromAddress: string; readonly network: NetworkType; ... 4 more ...; readonly "onUpdate:modelValue"?: ((value: any) => any) | undefined; } & VNodeProps & AllowedComponentProps & Compone...'. Property 'networkFeeCrypto' is missing in type '{ fromAddress: string; toAddress: string; networkFeeUSD: string; networkFeeETH: string; network: { name_long: string; name: string; }; toToken: Token; toAmount: string; toAmountFiat: string; rawTx: PostEthereumTransaction; modelValue: boolean; }' but required in type '{ readonly modelValue?: any; readonly toAddress: string; readonly networkFeeUSD: string; readonly networkFeeCrypto: string; readonly fromAddress: string; readonly network: NetworkType; ... 4 more ...; readonly "onUpdate:modelValue"?: ((value: any) => any) | undefined; }'.
🔇 Additional comments (1)
src/modules/send/ModuleSend.vue (1)
136-150: Your lifecycle hook choice is... curious.You've changed from
onMountedtoonBeforeMount, which occurs before the component is mounted to the DOM. This means you're initiating network requests earlier, which might lead to race conditions if dependent DOM elements aren't ready.Consider whether this is truly necessary or if
onMountedwould be more appropriate for fetching gas fees, since it ensures that all DOM elements are ready.
| <div class="border border-grey-30 border-b-0 rounded-t-lg p-4 flex"> | ||
| <!-- TODO: replace with actual network token from props later once networks are established --> | ||
| <img | ||
| src="@/assets/icons/tokens/eth.svg" | ||
| alt="Ethereum" | ||
| class="w-10 h-10 mr-3" | ||
| /> | ||
| <div> | ||
| <p class="text-sm">Network</p> | ||
| <p class="text-grey-50 font-semibold">Ethereum</p> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Even a first-year could see this hardcoded network information.
The network information is hardcoded to Ethereum rather than being dynamically populated from the provided network prop. This shows a... disappointing lack of foresight.
<div class="border border-grey-30 border-b-0 rounded-t-lg p-4 flex">
- <!-- TODO: replace with actual network token from props later once networks are established -->
<img
- src="@/assets/icons/tokens/eth.svg"
+ :src="network.logo_url || '@/assets/icons/tokens/eth.svg'"
alt="Ethereum"
class="w-10 h-10 mr-3"
/>
<div>
<p class="text-sm">Network</p>
- <p class="text-grey-50 font-semibold">Ethereum</p>
+ <p class="text-grey-50 font-semibold">{{ network.name_long }}</p>
</div>
</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div class="border border-grey-30 border-b-0 rounded-t-lg p-4 flex"> | |
| <!-- TODO: replace with actual network token from props later once networks are established --> | |
| <img | |
| src="@/assets/icons/tokens/eth.svg" | |
| alt="Ethereum" | |
| class="w-10 h-10 mr-3" | |
| /> | |
| <div> | |
| <p class="text-sm">Network</p> | |
| <p class="text-grey-50 font-semibold">Ethereum</p> | |
| </div> | |
| </div> | |
| <div class="border border-grey-30 border-b-0 rounded-t-lg p-4 flex"> | |
| <img | |
| :src="network.logo_url || '@/assets/icons/tokens/eth.svg'" | |
| alt="Ethereum" | |
| class="w-10 h-10 mr-3" | |
| /> | |
| <div> | |
| <p class="text-sm">Network</p> | |
| <p class="text-grey-50 font-semibold">{{ network.name_long }}</p> | |
| </div> | |
| </div> |
Summary by CodeRabbit