8000 Small refactoring around token selector · jscriptcoder/DEX-Aggregator@c4e98d0 · GitHub
[go: up one dir, main page]
Skip to content

Commit c4e98d0

Browse files
jscriptcoderjscriptcoder
committed
Small refactoring around token selector
1 parent 42d3f69 commit c4e98d0

File tree

6 files changed

+78
-39
lines changed

6 files changed

+78
-39
lines changed

‎src/app.config.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@ export const notificarionConfig = {
1515
duration: 5000,
1616
}
1717

18-
export const etherToken = {
19-
name: 'Ether',
20-
symbol: 'ETH',
21-
decimals: 18,
22-
logoURI: 'https://etherscan.io/images/ethereum-icon.png',
18+
export const tokenLogo: Record<string, string> = {
19+
ETH: 'https://cryptologos.cc/logos/ethereum-eth-logo.svg',
20+
MATIC: 'https://cryptologos.cc/logos/polygon-matic-logo.svg',
2321
}

‎src/components/ChainDropdown/ChainDropdown.svelte

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script lang="ts">
22
import { network } from '../../stores/network'
33
import { account } from '../../stores/account'
4-
import { mainnet } from '@wagmi/core'
54
import ChainItem from '../ChainItem'
65
import { chains } from '../../libs/web3/chains'
76
import selectNetwork from '../utils/selectNetwork'
@@ -21,7 +20,6 @@
2120
<li>
2221
<!-- TODO: support multiple chains -->
2322
<button
24-
disabled={chain.id !== mainnet.id}
2523
class="btn btn-ghost w-full justify-between flex items-center space-x-2"
2624
on:click={() => selectNetwork(chain)}>
2725
<ChainItem value={chain} />

‎src/components/Header/Header.svelte

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99
<div class="mask mask-squircle">
1010
<img src="/dex-logo.png" alt="logo" title="DEX Aggregator" />
1111
</div>
12-
<h1>DEX <span class="hidden md:inline">Aggregator</span></h1>
12+
<h1>
13+
<span>DEX</span>
14+
<span class="hidden md:inline">Aggregator</span>
15+
</h1>
1316
</div>
1417

1518
<div class="flex items-center space-x-2">

‎src/components/SupportedChainModal/SupportedChainModal.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script>
2-
import { mainnet } from 'viem/chains'
32
import { chains } from '../../libs/web3/chains'
43
import ChainItem from '../ChainItem'
54
import selectNetwork from '../utils/selectNetwork'
65
import { network } from '../../stores/network'
6+
import { isChainSupported } from '../../libs/web3/wagmi'
77
8-
$: showDiablog = $network && $network.id !== mainnet.id
8+
$: showDiablog = $network ? !isChainSupported($network.id) : false
99
</script>
1010

1111
<dialog class="modal modal-bottom md:modal-middle" class:modal-open={showDiablog}>
@@ -19,7 +19,7 @@
1919
{#each chains as chain (chain.id)}
2020
<li>
2121
<!-- TODO: support multiple chains -->
22-
<button disabled={chain.id !== mainnet.id} class="btn btn-ghost" on:click={() => selectNetwork(chain)}>
22+
<button class="btn btn-ghost" on:click={() => selectNetwork(chain)}>
2323
<ChainItem value={chain} layout="column" iconSize="large" />
2424
</button>
2525
</li>

‎src/components/Swap/TokenItem.svelte

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script lang="ts">
2+
import type { Token } from '../../libs/token/types'
3+
4+
export let value: Token
5+
export let disabled = false
6+
export let onSelect: (token: Token) => void
7+
</script>
8+
9+
<li>
10+
<button {disabled} class="btn btn-ghost" on:click={() => onSelect?.(value)}>
11+
<div class="avatar w-6">
12+
{#if value.logoURI}
13+
<img src={value.logoURI} alt={value.name} />
14+
{:else}
15+
<div class="mask mask-hexagon-2">
16+
<span>{value.name.at(0)}</span>
17+
</div>
18+
{/if}
19+
</div>
20+
21+
<div class="flex flex-col items-start">
22+
<span class="capitalize">{value.name}</span>
23+
<span class="text-[10px] uppercase">{value.symbol}</span>
24+
</div>
25+
</button>
26+
</li>
27+
28+
<style lang="postcss">
29+
button {
30+
@apply w-full justify-start flex items-center space-x-2;
31+
}
32+
33+
.avatar > div {
34+
@apply w-full h-full !flex justify-center items-center bg-slate-600;
35+
}
36+
</style>

‎src/components/Swap/TokenSelector.svelte

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@
33
</script>
44
55
<script lang="ts">
6-
import { onMount } from 'svelte'
76
import debounce from 'debounce'
87
import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
98
import fetchAllTokens from '../../libs/token/fetchAllTokens'
109
import type { Token } from '../../libs/token/types'
1110
import Loading from '../Loading'
12-
import { etherToken, inputConfig, tokenSelectorConfig } from '../../app.config'
13-
import { mainnet } from 'viem/chains'
11+
import { tokenLogo, inputConfig, tokenSelectorConfig } from '../../app.config'
12+
import { network } from '../../stores/network'
13+
import TokenItem from './TokenItem.svelte'
14+
import type { Chain } from 'viem'
1415
1516
export let value: Token
1617
export let onSelect: OnTokenSelect
@@ -72,18 +73,26 @@
7273
closeModal()
7374
}
7475
75-
onMount(async () => {
76+
async function fetchTokens(chain?: Chain) {
7677
try {
7778
fetching = true
7879
const responseData = await fetchAllTokens()
7980
80-
tokens = filteredTokens = responseData.tokens
81-
82-
// We want to add ETH in our list of tokens as the first token
83-
tokens.unshift({
84-
...etherToken,
85-
chainId: mainnet.id, // TODO: other chains?
86-
})
81+
// If we are connected to a chan, we only want to display the tokens
82+
// that are available on that chain
83+
tokens = filteredTokens = chain
84+
? responseData.tokens.filter((token) => token.chainId === chain.id)
85+
: responseData.tokens
86+
87+
if (chain) {
88+
// We want to add the native currency to the list as the first token
89+
const { nativeCurrency } = chain
90+
tokens.unshift({
91+
...nativeCurrency,
92+
chainId: chain.id,
93+
logoURI: tokenLogo[nativeCurrency.symbol],
94+
})
95+
}
8796
8897
// Creates a map to quickly look up tokens based
8998
// on their name, symbol or address, by combining
@@ -104,7 +113,12 @@
104113
} finally {
105114
fetching = false
106115
}
107-
})
116+
}
117+
118+
// We want to fetch the tokens supported by the current network. Currently
119+
// we only have one source, but we might add more in the future that depends
120+
// on the network, otherwise we can run this logic when the component is mounted
121+
$: fetchTokens($network)
108122
</script>
109123

110124
<div class="TokenSelector">
@@ -117,7 +131,10 @@
117131
<span class="token-label">{value.symbol}</span>
118132
</div>
119133
{:else}
120-
<span class="token-label capitalize">Select token</span>
134+
<span class="token-label capitalize">
135+
<span class="hidden md:inline">Select</span>
136+
<span>Token</span>
137+
</span>
121138
{/if}
122139
</button>
123140

@@ -139,26 +156,13 @@
139156
<Loading text="Loading tokens…" />
140157
{:else if noTokens}
141158
<div class="f-center flex-col w-full space-y-4">
142-
<span>No tokens founds</span>
159+
<span>No tokens founds {$network ? `on ${$network?.name}` : ''}</span>
143160
<span>¯\_(ツ)_/¯</span>
144161
</div>
145162
{:else}
146163
<ul class="w-full h-full overflow-auto space-y-2">
147164
{#each displayTokens as token (token.address)}
148-
<li>
149-
<button
150-
disabled={token.address === disableValue?.address}
151-
class="btn btn-ghost w-full justify-start flex items-center space-x-2"
152-
on:click={() => selectToken(token)}>
153-
<div class="avatar w-6">
154-
<img src={token.logoURI} alt={token.name} />
155-
</div>
156-
<div class="flex flex-col items-start">
157-
<span class="capitalize">{token.name}</span>
158-
<span class="text-[10px] uppercase">{token.symbol}</span>
159-
</div>
160-
</button>
161-
</li>
165+
<TokenItem value={token} onSelect={selectToken} disabled={token.symbol === disableValue?.symbol} />
162166
{/each}
163167

164168
{#if isMore}

0 commit comments

Comments
 (0)
0