fixup! Add more data to pass into the marketplace child application.

README.md

@@ -47,9 +47,9 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_NETWORK_TYPE | `string` | Network type (used as first part of the base path) | `xdai` |
 | NEXT_PUBLIC_NETWORK_SUBTYPE | `string` | Network subtype (used as second part of the base path) | `mainnet` |
 | NEXT_PUBLIC_NETWORK_ID | `number` | Chain id, see [https://chainlist.org/](https://chainlist.org/) for the reference | `99` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | Network currencyName name | `xDAI` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | Network currencyName symbol | `xDAI` |
-| NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | Network currencyName decimals | `18` |
+| NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | Network currency name | `Ether` |
+| NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | Network currency symbol | `ETH` |
+| NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | Network currency decimals | `18` |
 | NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS | `string` | Address of network's native token | `0x029a799563238d0e75e20be2f4bda0ea68d00172` |
 | NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME | `string` *(optional)* | Network name for constructing url of token logos according to template `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${assetsNamePath}/assets/${tokenAddress}/logo.png`. It should match network name in TrustWallet assets repo, see the full list [here](https://github.com/trustwallet/assets/tree/master/blockchains). If not provided, the network type will be used as its assets path part | `ethereum` |
 | NEXT_PUBLIC_NETWORK_LOGO | `string` *(optional)* | Network logo; if not provided, will fallback to logo predefined in the project; if the project doesn't have logo for such network then the common placeholder will be shown; *Note* that logo height should be 20px and width less than 120px | `https://www.fillmurray.com/240/40` |

deploy/values/e2e/values.yaml

@@ -310,7 +310,7 @@ frontend:
     NEXT_PUBLIC_NETWORK_ID:
       _default: 77
     NEXT_PUBLIC_NETWORK_CURRENCY_NAME:
-      _default: SPOA
+      _default: POA Network Sokol
     NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL:
       _default: SPOA
     NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS:

deploy/values/main/values.yaml

@@ -305,8 +305,12 @@ frontend:
       _default: sokol
     NEXT_PUBLIC_NETWORK_ID:
       _default: 77
-    NEXT_PUBLIC_NETWORK_CURRENCY:
+    NEXT_PUBLIC_NETWORK_CURRENCY_NAME:
+      _default: POA Network Sokol
+    NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL:
       _default: SPOA
+    NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS:
+      _default: 18
     NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED:
       _default: 'true'
     NEXT_PUBLIC_FEATURED_NETWORKS:

deploy/values/review/values.yaml

@@ -306,7 +306,7 @@ frontend:
     NEXT_PUBLIC_NETWORK_ID:
       _default: 77
     NEXT_PUBLIC_NETWORK_CURRENCY_NAME:
-      _default: SPOA
+      _default: POA Network Sokol
     NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL:
       _default: SPOA
     NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS:

ui/block/BlockDetails.tsx

@@ -115,7 +115,7 @@ const BlockDetails = () => {
         columnGap={ 1 }
       >
         <AddressLink hash={ data.miner.hash }/>
-        { data.miner.name && (<Text>Miner: { data.miner.name }</Text>) }
+        { data.miner.name && <Text>(Miner: { data.miner.name })</Text> }
         { /* api doesn't return the block processing time yet */ }
         { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
       </DetailsInfoItem>
@@ -123,12 +123,12 @@ const BlockDetails = () => {
         <DetailsInfoItem
           title="Block reward"
           hint={
-            `For each block, the miner is rewarded with a finite amount of ${ appConfig.network.currency.name || 'native token' }
+            `For each block, the miner is rewarded with a finite amount of ${ appConfig.network.currency.symbol || 'native token' }
           on top of the fees paid for all transactions in the block.`
           }
           columnGap={ 1 }
         >
-          <Text>{ totalReward.dividedBy(WEI).toFixed() } { appConfig.network.currency.name }</Text>
+          <Text>{ totalReward.dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }</Text>
           { (!txFees.isEqualTo(ZERO) || !burntFees.isEqualTo(ZERO)) && (
             <Text variant="secondary" whiteSpace="break-spaces">(
               <Tooltip label="Static block reward">
@@ -181,7 +181,7 @@ const BlockDetails = () => {
           title="Base fee per gas"
           hint="Minimum fee required per unit of gas. Fee adjusts based on network congestion."
         >
-          <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { appConfig.network.currency.name } </Text>
+          <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol } </Text>
           <Text variant="secondary" whiteSpace="pre">
             { space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } Gwei)
           </Text>
@@ -190,13 +190,13 @@ const BlockDetails = () => {
       <DetailsInfoItem
         title="Burnt fees"
         hint={
-          `Amount of ${ appConfig.network.currency.name || 'native token' } burned from transactions included in the block.
+          `Amount of ${ appConfig.network.currency.symbol || 'native token' } burned from transactions included in the block.
 
           Equals Block Base Fee per Gas * Gas Used.`
         }
       >
         <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
-        <Text ml={ 1 }>{ burntFees.dividedBy(WEI).toFixed() } { appConfig.network.currency.name }</Text>
+        <Text ml={ 1 }>{ burntFees.dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }</Text>
         { !txFees.isEqualTo(ZERO) && (
           <Tooltip label="Burnt fees / Txn fees * 100%">
             <Box>
@@ -213,7 +213,7 @@ const BlockDetails = () => {
           title="Priority fee / Tip"
           hint="User-defined tips sent to validator for transaction priority/inclusion."
         >
-          { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { appConfig.network.currency.name }
+          { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }
         </DetailsInfoItem>
       ) }
       { /* api doesn't support extra data yet */ }
@@ -302,7 +302,7 @@ const BlockDetails = () => {
                 title={ type }
                 hint="Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees."
               >
-                { BigNumber(reward).dividedBy(WEI).toFixed() } { appConfig.network.currency.name }
+                { BigNumber(reward).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }
               </DetailsInfoItem>
             )) }
         </>

ui/blocks/BlocksListItem.tsx

@@ -59,7 +59,7 @@ const BlocksListItem = ({ data, isPending }: Props) => {
         </Flex>
       </Box>
       <Flex columnGap={ 2 }>
-        <Text fontWeight={ 500 }>Reward { appConfig.network.currency.name }</Text>
+        <Text fontWeight={ 500 }>Reward { appConfig.network.currency.symbol }</Text>
         <Text variant="secondary">{ totalReward.div(WEI).toFixed() }</Text>
       </Flex>
       <Flex>

ui/blocks/BlocksTable.tsx

@@ -22,8 +22,8 @@ const BlocksTable = ({ data }: Props) => {
             <Th width="21%" minW="144px">Miner</Th>
             <Th width="64px" isNumeric>Txn</Th>
             <Th width="35%">Gas used</Th>
-            <Th width="22%">Reward { appConfig.network.currency.name }</Th>
-            <Th width="22%">Burnt fees { appConfig.network.currency.name }</Th>
+            <Th width="22%">Reward { appConfig.network.currency.symbol }</Th>
+            <Th width="22%">Burnt fees { appConfig.network.currency.symbol }</Th>
           </Tr>
         </Thead>
         <Tbody>

ui/pages/MarketplaceApp.tsx

@@ -39,6 +39,7 @@ const MarketplaceApp = ({ app, isLoading }: Props) => {
         blockscoutRootUrl: link('network_index'),
         blockscoutAddressExplorerUrl: link('address_index'),
         blockscoutTransactionExplorerUrl: link('tx'),
+        blockscoutNetworkName: appConfig.network.name,
         blockscoutNetworkId: Number(appConfig.network.id),
         blockscoutNetworkCurrency: appConfig.network.currency,
         blockscoutNetworkRpc: jsonRpcUrlResponse?.json_rpc_url,

ui/tx/TxDetails.tsx

@@ -185,7 +185,7 @@ const TxDetails = () => {
         title="Value"
         hint="Value sent in the native token (and USD) if applicable."
       >
-        <CurrencyValue value={ data.value } currency={ appConfig.network.currency.name } exchangeRate={ data.exchange_rate }/>
+        <CurrencyValue value={ data.value } currency={ appConfig.network.currency.symbol } exchangeRate={ data.exchange_rate }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Transaction fee"
@@ -193,7 +193,7 @@ const TxDetails = () => {
       >
         <CurrencyValue
           value={ data.fee.value }
-          currency={ appConfig.network.currency.name }
+          currency={ appConfig.network.currency.symbol }
           exchangeRate={ data.exchange_rate }
           flexWrap="wrap"
         />
@@ -202,7 +202,7 @@ const TxDetails = () => {
         title="Gas price"
         hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage."
       >
-        <Text mr={ 1 }>{ BigNumber(data.gas_price).dividedBy(WEI).toFixed() } { appConfig.network.currency.name }</Text>
+        <Text mr={ 1 }>{ BigNumber(data.gas_price).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }</Text>
         <Text variant="secondary">({ BigNumber(data.gas_price).dividedBy(WEI_IN_GWEI).toFixed() } Gwei)</Text>
       </DetailsInfoItem>
       <DetailsInfoItem
@@ -245,12 +245,12 @@ const TxDetails = () => {
       { data.tx_burnt_fee && (
         <DetailsInfoItem
           title="Burnt fees"
-          hint={ `Amount of ${ appConfig.network.currency.name } burned for this transaction. Equals Block Base Fee per Gas * Gas Used.` }
+          hint={ `Amount of ${ appConfig.network.currency.symbol } burned for this transaction. Equals Block Base Fee per Gas * Gas Used.` }
         >
           <Icon as={ flameIcon } mr={ 1 } boxSize={ 5 } color="gray.500"/>
           <CurrencyValue
             value={ String(data.tx_burnt_fee) }
-            currency={ appConfig.network.currency.name }
+            currency={ appConfig.network.currency.symbol }
             exchangeRate={ data.exchange_rate }
             flexWrap="wrap"
           />

ui/tx/internals/TxInternalsListItem.tsx

@@ -35,7 +35,7 @@ const TxInternalsListItem = ({ type, from, to, value, success, error }: Props) =
         </Address>
       </Box>
       <HStack spacing={ 3 }>
-        <Text fontSize="sm" fontWeight={ 500 }>Value { appConfig.network.currency.name }</Text>
+        <Text fontSize="sm" fontWeight={ 500 }>Value { appConfig.network.currency.symbol }</Text>
         <Text fontSize="sm" variant="secondary">{ value }</Text>
       </HStack>
       { /* no gas limit in api yet */ }

ui/tx/internals/TxInternalsTable.tsx

@@ -29,7 +29,7 @@ const TxInternalsTable = ({ data, sort, onSortToggle }: Props) => {
             <Th width="16%" isNumeric>
               <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ onSortToggle('value') } columnGap={ 1 }>
                 { sort?.includes('value') && <Icon as={ arrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> }
-                Value { appConfig.network.currency.name }
+                Value { appConfig.network.currency.symbol }
               </Link>
             </Th>
             { /* no gas limit in api yet */ }

ui/tx/state/TxStateListItem.tsx

@@ -64,7 +64,7 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
                 <Link>{ miner }</Link>
               </Box>
               <Box>
-                <Text as="span">Before { appConfig.network.currency.name } </Text>
+                <Text as="span">Before { appConfig.network.currency.symbol } </Text>
                 <Text as="span" variant="secondary">{ before.balance }</Text>
               </Box>
               { typeof before.nonce !== 'undefined' && (
@@ -74,7 +74,7 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
                 </Box>
               ) }
               <Box>
-                <Text as="span">After { appConfig.network.currency.name } </Text>
+                <Text as="span">After { appConfig.network.currency.symbol } </Text>
                 <Text as="span" variant="secondary">{ after.balance }</Text>
               </Box>
               { typeof after.nonce !== 'undefined' && (
@@ -83,7 +83,7 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
                   <Text as="span" fontWeight={ 600 }>{ nbsp }{ after.nonce }</Text>
                 </Box>
               ) }
-              <Text>State difference { appConfig.network.currency.name }</Text>
+              <Text>State difference { appConfig.network.currency.symbol }</Text>
               <Stat>
                 { diff }
                 <StatArrow ml={ 2 } type={ Number(diff) > 0 ? 'increase' : 'decrease' }/>

ui/tx/state/TxStateTable.tsx

@@ -21,9 +21,9 @@ const TxStateTable = () => {
             <Th width="92px">Storage</Th>
             <Th width="146px">Address</Th>
             <Th width="120px">Miner</Th>
-            <Th width="33%" isNumeric>{ `After ${ appConfig.network.currency.name }` }</Th>
-            <Th width="33%" isNumeric>{ `Before ${ appConfig.network.currency.name }` }</Th>
-            <Th width="33%" isNumeric>{ `State difference ${ appConfig.network.currency.name }` }</Th>
+            <Th width="33%" isNumeric>{ `After ${ appConfig.network.currency.symbol }` }</Th>
+            <Th width="33%" isNumeric>{ `Before ${ appConfig.network.currency.symbol }` }</Th>
+            <Th width="33%" isNumeric>{ `State difference ${ appConfig.network.currency.symbol }` }</Th>
           </Tr>
         </Thead>
         <Tbody>

ui/txs/TxAdditionalInfo.tsx

@@ -34,7 +34,7 @@ const TxAdditionalInfo = ({ tx }: { tx: Transaction }) => {
         <Flex>
           <CurrencyValue
             value={ tx.fee.value }
-            currency={ appConfig.network.currency.name }
+            currency={ appConfig.network.currency.symbol }
             exchangeRate={ tx.exchange_rate }
             accuracyUsd={ 2 }
           />

ui/txs/TxsListItem.tsx

@@ -112,11 +112,11 @@ const TxsListItem = ({ tx }: {tx: Transaction}) => {
           </Address>
         </Flex>
         <Box mt={ 2 }>
-          <Text as="span">Value { appConfig.network.currency.name } </Text>
+          <Text as="span">Value { appConfig.network.currency.symbol } </Text>
           <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).toFormat() }</Text>
         </Box>
         <Box mt={ 2 } mb={ 3 }>
-          <Text as="span">Fee { appConfig.network.currency.name } </Text>
+          <Text as="span">Fee { appConfig.network.currency.symbol } </Text>
           <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).toFormat() }</Text>
         </Box>
       </Box>

ui/txs/TxsTable.tsx

@@ -33,14 +33,14 @@ const TxsTable = ({ txs, sort, sorting }: Props) => {
               <Link onClick={ sort('val') } display="flex" justifyContent="end">
                 { sorting === 'val-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
                 { sorting === 'val-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }
-                { `Value ${ appConfig.network.currency.name }` }
+                { `Value ${ appConfig.network.currency.symbol }` }
               </Link>
             </Th>
             <Th width="18%" isNumeric pr={ 5 }>
               <Link onClick={ sort('fee') } display="flex" justifyContent="end">
                 { sorting === 'fee-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
                 { sorting === 'fee-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }
-                { `Fee ${ appConfig.network.currency.name }` }
+                { `Fee ${ appConfig.network.currency.symbol }` }
               </Link>
             </Th>
           </Tr>

ui/watchlist/AddressModal/AddressFormNotifications.tsx

@@ -8,7 +8,7 @@ import CheckboxInput from 'ui/shared/CheckboxInput';
 
 // does it depend on the network?
 const NOTIFICATIONS = [ 'native', 'ERC-20', 'ERC-721' ] as const;
-const NOTIFICATIONS_NAMES = [ appConfig.network.currency.name, 'ERC-20', 'ERC-721, ERC-1155 (NFT)' ];
+const NOTIFICATIONS_NAMES = [ appConfig.network.currency.symbol, 'ERC-20', 'ERC-721, ERC-1155 (NFT)' ];
 
 type Props<Inputs extends FieldValues> = {
   control: Control<Inputs>;

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -25,7 +25,7 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
       <HStack spacing={ 0 } fontSize="sm" h={ 6 } pl={ infoItemsPaddingLeft }>
         { appConfig.network.nativeTokenAddress &&
           <TokenLogo hash={ appConfig.network.nativeTokenAddress } name={ appConfig.network.name } boxSize={ 4 } mr="10px"/> }
-        <Text color={ mainTextColor }>{ `${ appConfig.network.currency.name } balance:${ nbsp }` + nativeBalance }</Text>
+        <Text color={ mainTextColor }>{ `${ appConfig.network.currency.symbol } balance:${ nbsp }` + nativeBalance }</Text>
         <Text variant="secondary">{ `${ nbsp }(${ nativeBalanceUSD })` }</Text>
       </HStack>
       { item.tokens_count && (