wip

jscriptcoder · jscriptcoder · commit 0eb481b8ccd5 · 2023-10-10T17:06:30.000+02:00
diff --git a/src/app.config.ts b/src/app.config.ts
@@ -1,3 +1,5 @@
+import { zeroAddress } from "viem"
+
 export const apiConfig = {
   tokensUrl: 'https://tokens.coingecko.com/uniswap/all.json',
   // tokensUrl: 'https://erc20.cmc.eth.link/',
@@ -14,3 +16,11 @@ export const tokenSelectorConfig = {
 export const notificarionConfig = {
   duration: 5000,
 }
+
+export const ethTokenConfig = {
+  address: zeroAddress,
+  name: 'Ether',
+  symbol: 'ETH',
+  decimals: 18,
+  logoURI: 'https://etherscan.io/images/ethereum-icon.png',
+}
diff --git a/src/components/Swap/TokenSelector.svelte b/src/components/Swap/TokenSelector.svelte
@@ -9,7 +9,8 @@
   import fetchAllTokens from '../../libs/token/fetchAllTokens'
   import type { Token } from '../../libs/token/types'
   import Loading from '../Loading'
-  import { inputConfig, tokenSelectorConfig } from '../../app.config'
+  import { ethTokenConfig, inputConfig, tokenSelectorConfig } from '../../app.config'
+  import { mainnet } from 'viem/chains'
 
   export let value: Token
   export let onSelect: OnTokenSelect
@@ -75,8 +76,19 @@
     try {
       fetching = true
       const responseData = await fetchAllTokens()
+
       tokens = filteredTokens = responseData.tokens
 
+      // We want to add ETH in our list of tokens as the first token
+      tokens.unshift({
+        chainId: mainnet.id, // TODO: other chains?
+        address: ethTokenConfig.address,
+        name: ethTokenConfig.name,
+        symbol: ethTokenConfig.symbol,
+        decimals: ethTokenConfig.decimals,
+        logoURI: ethTokenConfig.logoURI,
+      })
+
       // Creates a map to quickly look up tokens based
       // on their name, symbol or address, by combining
       // them all into an unique index
@@ -103,7 +115,7 @@
   <button class="btn dark:btn-neutral btn-sm md:btn-md md:min-w-[140px]" on:click={openModal}>
     {#if value}
       <div class="flex items-center space-x-2">
-        <div class="avatar">
+        <div class="avatar w-6">
           <img src={value.logoURI} alt={value.name} />
         </div>
         <span class="token-label">{value.symbol}</span>
@@ -142,7 +154,7 @@
                   disabled={token.address === disableValue?.address}
                   class="btn btn-ghost w-full justify-start flex items-center space-x-2"
                   on:click={() => selectToken(token)}>
-                  <div class="avatar w-[25px]">
+                  <div class="avatar w-6">
                     <img src={token.logoURI} alt={token.name} />
                   </div>
                   <div class="flex flex-col items-start">
diff --git a/src/libs/api/0x.ts b/src/libs/api/0x.ts
@@ -1,11 +1,15 @@
+import { zeroAddress } from 'viem'
 import type { GetPriceArgs, GetQuoteArgs, OxApiArgs, PriceResponseData, QuoteResponseData } from './types'
 
 async function OxApi({ apiCall, sellToken, buyToken, sellAmount, chainId }: OxApiArgs) {
   if (!apiCall || !sellToken || !buyToken || !sellAmount || !chainId) throw new Error('Missing arguments')
 
   const queryParams = new URLSearchParams({
     apiCall,
-    sellToken,
+
+    // For Ether, which uses the zero address, we use the symbol instead of the address
+    sellToken: sellToken === zeroAddress ? 'ETH' : sellToken,
+    
     buyToken,
     sellAmount,
     chainId,
