Skip to content
This repository was archived by the owner on Jan 9, 2026. It is now read-only.

Commit 5568a97

Browse files
isaozlerisaozler
committed
Fix/UI changes mobile desktop monospace (#15)
* Minor updates to UI/UX * Feedback implementation + display dynamic string fix * Social images and icons fixed
1 parent 04c91ad commit 5568a97

File tree

17 files changed

+83
-38
lines changed

17 files changed

+83
-38
lines changed

‎pages/_document.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,6 @@ class MyDocument extends Document {
5252
) }
5353

5454
{ /* FAVICON */ }
55-
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png"/>
56-
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png"/>
57-
<link rel="icon" type="image/png" sizes="48x48" href="/assets/favicon/favicon-48x48.png"/>
5855
<link rel="shortcut icon" href="/assets/favicon/favicon.ico"/>
5956
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon-180x180.png"/>
6057
<link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-chrome-192x192.png"/>

‎public/assets/favicon/android-chrome-192x192.png‎

-154 Bytes
Loading

‎public/assets/favicon/apple-touch-icon-180x180.png‎

-79 Bytes
Loading

‎public/assets/favicon/favicon.ico‎

74.9 KB
Binary file not shown.

‎public/assets/favicon/logo-icon.png‎

-833 Bytes
Loading

‎public/static/kadena_evm_og_image.png‎

793 KB
Loading

‎public/static/og_placeholder.png‎

229 KB
Loading

‎toolkit/theme/globalCss.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import addressEntity from './globals/address-entity';
44
import entity from './globals/entity';
55
import recaptcha from './globals/recaptcha';
66
import scrollbar from './globals/scrollbar';
7+
import txEntity from './globals/tx-entity';
78

89
const webkitAutofillOverrides = {
910
WebkitTextFillColor: 'var(--chakra-colors-input-fg)',
@@ -54,6 +55,7 @@ const globalCss: SystemConfig['globalCss'] = {
5455
...scrollbar,
5556
...entity,
5657
...addressEntity,
58+
...txEntity,
5759
};
5860

5961
export default globalCss;

‎toolkit/theme/globals/tx-entity.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const styles = {
2+
'.tx-entity-mono, .tx-entity-mono > a': {
3+
flex: 1,
4+
},
5+
};
6+
7+
export default styles;

‎ui/block/BlockDetails.tsx‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,8 @@ const BlockDetails = ({ query }: Props) => {
116116
const txsNum = (() => {
117117
const blockTxsNum = (
118118
<Link href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'txs' } }, multichainContext) }>
119-
{ data.transactions_count } txn{ data.transactions_count === 1 ? '' : 's' }
119+
<Text fontFamily="var(--kda-typography-family-monospace-font)">{ data.transactions_count }</Text>&nbsp;
120+
<Text>txn{ data.transactions_count === 1 ? '' : 's' }</Text>
120121
</Link>
121122
);
122123

@@ -158,7 +159,7 @@ const BlockDetails = ({ query }: Props) => {
158159
{ blockTypeLabel } height
159160
</DetailedInfo.ItemLabel>
160161
<DetailedInfo.ItemValue>
161-
<Skeleton loading={ isPlaceholderData }>
162+
<Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
162163
{ data.height }
163164
</Skeleton>
164165
{ data.height === 0 && <Text whiteSpace="pre"> - Genesis Block</Text> }
@@ -196,7 +197,7 @@ const BlockDetails = ({ query }: Props) => {
196197
</DetailedInfo.ItemLabel>
197198
<DetailedInfo.ItemValue>
198199
{ data.arbitrum.batch_number ?
199-
<BatchEntityL2 isLoading={ isPlaceholderData } number={ data.arbitrum.batch_number }/> :
200+
<BatchEntityL2 isLoading={ isPlaceholderData } number={ data.arbitrum.batch_number } fontFamily="var(--kda-typography-family-monospace-font)"/> :
200201
<Skeleton loading={ isPlaceholderData }>Pending</Skeleton> }
201202
</DetailedInfo.ItemValue>
202203
</>
@@ -212,7 +213,7 @@ const BlockDetails = ({ query }: Props) => {
212213
</DetailedInfo.ItemLabel>
213214
<DetailedInfo.ItemValue columnGap={ 3 }>
214215
{ data.optimism.number ?
215-
<BatchEntityL2 isLoading={ isPlaceholderData } number={ data.optimism.number }/> :
216+
<BatchEntityL2 isLoading={ isPlaceholderData } number={ data.optimism.number } fontFamily="var(--kda-typography-family-monospace-font)"/> :
216217
<Skeleton loading={ isPlaceholderData }>Pending</Skeleton> }
217218
{ data.optimism.batch_data_container && (
218219
<OptimisticL2TxnBatchDA
@@ -231,7 +232,7 @@ const BlockDetails = ({ query }: Props) => {
231232
Size
232233
</DetailedInfo.ItemLabel>
233234
<DetailedInfo.ItemValue>
234-
<Skeleton loading={ isPlaceholderData }>
235+
<Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
235236
{ data.size.toLocaleString() }
236237
</Skeleton>
237238
</DetailedInfo.ItemValue>
@@ -267,7 +268,7 @@ const BlockDetails = ({ query }: Props) => {
267268
Withdrawals
268269
</DetailedInfo.ItemLabel>
269270
<DetailedInfo.ItemValue>
270-
<Skeleton loading={ isPlaceholderData }>
271+
<Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
271272
<Link href={ route({ pathname: '/block/[height_or_hash]', query: { height_or_hash: heightOrHash, tab: 'withdrawals' } }, multichainContext) }>
272273
{ data.withdrawals_count } withdrawal{ data.withdrawals_count === 1 ? '' : 's' }
273274
</Link>
@@ -286,7 +287,7 @@ const BlockDetails = ({ query }: Props) => {
286287
</DetailedInfo.ItemLabel>
287288
<DetailedInfo.ItemValue>
288289
{ data.zksync.batch_number ?
289-
<BatchEntityL2 isLoading={ isPlaceholderData } number={ data.zksync.batch_number }/> :
290+
<BatchEntityL2 isLoading={ isPlaceholderData } number={ data.zksync.batch_number } fontFamily="var(--kda-typography-family-monospace-font)"/> :
290291
<Skeleton loading={ isPlaceholderData }>Pending</Skeleton> }
291292
</DetailedInfo.ItemValue>
292293
</>
@@ -381,7 +382,7 @@ const BlockDetails = ({ query }: Props) => {
381382
Block reward
382383
</DetailedInfo.ItemLabel>
383384
<DetailedInfo.ItemValue columnGap={ 1 }>
384-
<Skeleton loading={ isPlaceholderData }>
385+
<Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
385386
{ totalReward.dividedBy(WEI).toFixed() } { currencyUnits.ether }
386387
</Skeleton>
387388
{ rewardBreakDown }
@@ -398,7 +399,7 @@ const BlockDetails = ({ query }: Props) => {
398399
>
399400
{ type }
400401
</DetailedInfo.ItemLabel>
401-
<DetailedInfo.ItemValue>
402+
<DetailedInfo.ItemValue fontFamily="var(--kda-typography-family-monospace-font)">
402403
{ BigNumber(reward).dividedBy(WEI).toFixed() } { currencyUnits.ether }
403404
</DetailedInfo.ItemValue>
404405
</React.Fragment>
@@ -414,7 +415,7 @@ const BlockDetails = ({ query }: Props) => {
414415
View
415416
</DetailedInfo.ItemLabel>
416417
<DetailedInfo.ItemValue>
417-
<Skeleton loading={ isPlaceholderData }>
418+
<Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
418419
{ data.zilliqa.view }
419420
</Skeleton>
420421
</DetailedInfo.ItemValue>
@@ -432,7 +433,7 @@ const BlockDetails = ({ query }: Props) => {
432433
Gas used
433434
</DetailedInfo.ItemLabel>
434435
<DetailedInfo.ItemValue>
435-
<Skeleton loading={ isPlaceholderData }>
436+
<Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
436437
{ BigNumber(data.gas_used || 0).toFormat() }
437438
</Skeleton>
438439
<BlockGasUsed
@@ -451,7 +452,7 @@ const BlockDetails = ({ query }: Props) => {
451452
Gas limit
452453
</DetailedInfo.ItemLabel>
453454
<DetailedInfo.ItemValue>
454-
<Skeleton loading={ isPlaceholderData }>
455+
<Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
455456
{ BigNumber(data.gas_limit).toFormat() }
456457
</Skeleton>
457458
</DetailedInfo.ItemValue>
@@ -465,7 +466,7 @@ const BlockDetails = ({ query }: Props) => {
465466
Minimum gas price
466467
</DetailedInfo.ItemLabel>
467468
<DetailedInfo.ItemValue>
468-
<Skeleton loading={ isPlaceholderData }>
469+
<Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
469470
{ BigNumber(data.minimum_gas_price).dividedBy(GWEI).toFormat() } { currencyUnits.gwei }
470471
</Skeleton>
471472
</DetailedInfo.ItemValue>
@@ -485,8 +486,10 @@ const BlockDetails = ({ query }: Props) => {
485486
<Skeleton loading={ isPlaceholderData } h="20px" maxW="380px" w="100%"/>
486487
) : (
487488
<>
488-
<Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether } </Text>
489-
<Text color="text.secondary" whiteSpace="pre">
489+
<Text fontFamily="var(--kda-typography-family-monospace-font)">
490+
{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { currencyUnits.ether }
491+
</Text>
492+
<Text color="text.secondary" whiteSpace="pre" fontFamily="var(--kda-typography-family-monospace-font)">
490493
{ space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })
491494
</Text>
492495
</>
@@ -508,7 +511,7 @@ const BlockDetails = ({ query }: Props) => {
508511
</DetailedInfo.ItemLabel>
509512
<DetailedInfo.ItemValue>
510513
<IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
511-
<Skeleton loading={ isPlaceholderData } ml={ 2 }>
514+
<Skeleton loading={ isPlaceholderData } ml={ 2 } fontFamily="var(--kda-typography-family-monospace-font)">
512515
{ burntFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
513516
</Skeleton>
514517
{ !txFees.isEqualTo(ZERO) && (
@@ -517,6 +520,7 @@ const BlockDetails = ({ query }: Props) => {
517520
ml={ 4 }
518521
value={ burntFees.dividedBy(txFees).toNumber() }
519522
isLoading={ isPlaceholderData }
523+
fontFamily="var(--kda-typography-family-monospace-font)"
520524
/>
521525
</Tooltip>
522526
) }
@@ -533,7 +537,7 @@ const BlockDetails = ({ query }: Props) => {
533537
Priority fee / Tip
534538
</DetailedInfo.ItemLabel>
535539
<DetailedInfo.ItemValue>
536-
<Skeleton loading={ isPlaceholderData }>
540+
<Skeleton loading={ isPlaceholderData } fontFamily="var(--kda-typography-family-monospace-font)">
537541
{ BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { currencyUnits.ether }
538542
</Skeleton>
539543
</DetailedInfo.ItemValue>
@@ -689,7 +693,7 @@ const BlockDetails = ({ query }: Props) => {
689693
>
690694
Send count
691695
</DetailedInfo.ItemLabel>
692-
<DetailedInfo.ItemValue>
696+
<DetailedInfo.ItemValue fontFamily="var(--kda-typography-family-monospace-font)">
693697
{ data.arbitrum.send_count.toLocaleString() }
694698
</DetailedInfo.ItemValue>
695699

@@ -699,7 +703,7 @@ const BlockDetails = ({ query }: Props) => {
699703
>
700704
Send root
701705
</DetailedInfo.ItemLabel>
702-
<DetailedInfo.ItemValue>
706+
<DetailedInfo.ItemValue fontFamily="var(--kda-typography-family-monospace-font)">
703707
{ data.arbitrum.send_root }
704708
</DetailedInfo.ItemValue>
705709

@@ -709,7 +713,7 @@ const BlockDetails = ({ query }: Props) => {
709713
>
710714
Delayed messages
711715
</DetailedInfo.ItemLabel>
712-
<DetailedInfo.ItemValue>
716+
<DetailedInfo.ItemValue fontFamily="var(--kda-typography-family-monospace-font)">
713717
{ data.arbitrum.delayed_messages.toLocaleString() }
714718
</DetailedInfo.ItemValue>
715719
</>
@@ -722,7 +726,7 @@ const BlockDetails = ({ query }: Props) => {
722726
>
723727
Nonce
724728
</DetailedInfo.ItemLabel>
725-
<DetailedInfo.ItemValue>
729+
<DetailedInfo.ItemValue fontFamily="var(--kda-typography-family-monospace-font)">
726730
{ data.nonce }
727731
</DetailedInfo.ItemValue>
728732
</>

0 commit comments

Comments
 (0)