fix send/receive colors & show busiest chain name

Author: xdeq

components/modules/ibc/ChainsTable.vue

@@ -76,7 +76,7 @@ const handleNextPage = () => {
 						<td>
 							<NuxtLink :to="`/ibc/chain/${chain.chain}`">
 								<Flex align="center" gap="6">
-									<Icon name="arrow-narrow-up-right-circle" size="14" color="green" />
+									<Icon name="arrow-narrow-up-right-circle" size="14" color="purple" />
 									<Text size="13" weight="600" color="primary" mono>
 										{{ abbreviate(chain.sent / 1_000_000) }} <Text color="secondary">TIA</Text>
 									</Text>
@@ -89,7 +89,7 @@ const handleNextPage = () => {
 						<td>
 							<NuxtLink :to="`/ibc/chain/${chain.chain}`">
 								<Flex align="center" gap="6">
-									<Icon name="arrow-narrow-up-right-circle" size="14" color="purple" style="transform: scale(1, -1)" />
+									<Icon name="arrow-narrow-up-right-circle" size="14" color="brand" style="transform: scale(1, -1)" />
 									<Text size="13" weight="600" color="primary" mono>
 										{{ abbreviate(chain.received / 1_000_000) }} <Text color="tertiary">TIA</Text>
 									</Text>

components/modules/ibc/LargestChainsTable.vue

@@ -53,7 +53,7 @@ const largestChains = computed(() => props.chainsStats.slice(0, 5))
 							<td>
 								<NuxtLink>
 									<Flex align="center" gap="6">
-										<Icon name="arrow-narrow-up-right-circle" size="14" color="green" />
+										<Icon name="arrow-narrow-up-right-circle" size="14" color="purple" />
 										<Text size="13" weight="600" color="primary" mono>
 											{{ abbreviate(chain.sent / 1_000_000) }} <Text color="secondary">TIA</Text>
 										</Text>
@@ -66,12 +66,7 @@ const largestChains = computed(() => props.chainsStats.slice(0, 5))
 							<td>
 								<NuxtLink>
 									<Flex align="center" gap="6">
-										<Icon
-											name="arrow-narrow-up-right-circle"
-											size="14"
-											color="purple"
-											style="transform: scale(1, -1)"
-										/>
+										<Icon name="arrow-narrow-up-right-circle" size="14" color="brand" style="transform: scale(1, -1)" />
 										<Text size="13" weight="600" color="primary" mono>
 											{{ abbreviate(chain.received / 1_000_000) }} <Text color="tertiary">TIA</Text>
 										</Text>

components/modules/ibc/NotableStats.vue

@@ -96,7 +96,10 @@ const getChainName = (target) => {
 				<Text size="12" weight="600" color="tertiary">{{ DateTime.now().toFormat("MMMM") }}</Text>
 			</Flex>
 
-			<Text size="15" weight="600" color="primary">{{ busiestChannel.channel_id }}</Text>
+			<Text size="15" weight="600" color="primary">
+				{{ busiestChannel.channel_id }}
+				<Text size="12" color="tertiary">{{ IbcChainName[busiestChannel.chain_id] ?? "Unknown" }}</Text>
+			</Text>
 
 			<Text size="13" weight="500" color="support">
 				<Text color="tertiary" mono>{{ comma(busiestChannel.transfers_count) }} transfers</Text>