wip

jscriptcoder · jscriptcoder · commit 2ec518794892 · 2023-10-11T17:39:57.000+02:00
diff --git a/src/components/LoadingText/LoadingText.svelte b/src/components/LoadingText/LoadingText.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  export let mask = 'loading'
+
+  let maskElem: HTMLSpanElement
+  let classes = classNames('animate-pulse rounded-md', $$props.class)
+
+  onMount(() => {
+    // The idea is to use same background color as text color
+    const textColor = globalThis.getComputedStyle(maskElem).getPropertyValue('color')
+    maskElem.style.backgroundColor = textColor
+  })
+</script>
+
+<span class={classes} bind:this={maskElem}>{mask}</span>
diff --git a/src/components/LoadingText/index.ts b/src/components/LoadingText/index.ts
diff --git a/src/components/Swap/TokenAmount.svelte b/src/components/Swap/TokenAmount.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { formatUnits, parseUnits } from 'viem'
+  import { formatUnits, parseUnits, type Address } from 'viem'
   import type { Token } from '../../libs/token/types'
   import TokenSelector from './TokenSelector.svelte'
   import { debounce } from 'debounce'
@@ -11,6 +11,7 @@
   import { account } from '../../stores/account'
   import { network } from '../../stores/network'
   import { NoAccountAddressError, NotConnectedError } from '../../libs/error'
+  import type { FetchBalanceResult } from '@wagmi/core'
 
   export let token: Token
   export let amount: bigint
@@ -20,9 +21,11 @@
 
   let inputElem: HTMLInputElement
   let insufficientBalance = false
+  let tokenBalance: FetchBalanceResult
 
   $: value = amount ? formatUnits(amount, token.decimals) : ''
   $: isTokenSelected = Boolean(token)
+  $: balance = tokenBalance ? `${tokenBalance.formatted} ${tokenBalance.symbol}` : ''
 
   function onTokenSelect(_token: Token) {
     token = _token
@@ -39,16 +42,22 @@
     insufficientBalance = false
 
     // Do we have enough balance to cover the amount?
+    if (amount > tokenBalance.value) {
+      insufficientBalance = true
+    }
+  }
+
+  const debouncedOnInput = debounce(onInput, inputConfig.debounceWait)
+
+  async function fetchBalance(token?: Token, chainId?: number, address?: Address) {
+    if (!token || !chainId || !address) return
+
     try {
-      const balanceResult = await getBalance({
-        token: token.address,
-        address: $account.address,
-        chainId: $network?.id,
+      tokenBalance = await getBalance({
+        address,
+        chainId,
+        token: token?.address,
       })
-
-      if (amount > balanceResult.value) {
-        insufficientBalance = true
-      }
     } catch (err) {
       console.error(err)
 
@@ -65,12 +74,16 @@
     }
   }
 
-  const debouncedOnInput = debounce(onInput, inputConfig.debounceWait)
+  $: fetchBalance(token, $network?.id, $account?.address)
 </script>
 
 <div class="TokenAmount" class:error={insufficientBalance}>
   <TokenSelector value={token} onSelect={onTokenSelect} disableValue={disableToken} />
   <div class="flex flex-col relative">
+    {#if balance}
+      <div class="balance">Balance: {balance}</div>
+    {/if}
+
     <input
       type="number"
       placeholder="0.0"
@@ -96,6 +109,13 @@
 </div>
 
 <style lang="postcss">
+  .balance {
+    @apply absolute 
+      text-sm 
+      top-[-1rem] 
+      right-0;
+  }
+
   .TokenAmount {
     @apply relative
       flex 
@@ -132,6 +152,7 @@
   [role='alert'] {
     @apply absolute 
       flex 
+      text-sm 
       items-center 
       space-x-2 
       text-red-400 
diff --git a/src/libs/utils/truncateDecimal.ts b/src/libs/utils/truncateDecimal.ts
@@ -0,0 +1,4 @@
+export function truncateDecimal(num: number, decimalPlaces: number) {
+  const factor = 10 ** decimalPlaces;
+  return Math.floor(num * factor) / factor;
+}
diff --git a/src/libs/utils/truncateString.ts b/src/libs/utils/truncateString.ts
@@ -0,0 +1,3 @@
+export function truncateString(str: string, maxlength: number, strBoundary = '…') {
+  return str.length > maxlength ? `${str.substring(0, maxlength)}${strBoundary}` : str;
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function truncateString(str: string, maxlength: number, strBoundary = '…') {`
	`2`	+ return str.length > maxlength ? `${str.substring(0, maxlength)}${strBoundary}` : str;
	`3`	`+}`