toeasy-front/src/lib/components/trading/BuyPanel.svelte

<script>
  import { createEventDispatcher } from 'svelte';
  export let referencePrice;
  export let tokens = [];

  const dispatch = createEventDispatcher();

  let tab = 'market';
  let amountFiat = '';
  let limitPrice = '';
  let selectedTokenId = tokens?.[0]?.id ?? null;

  function formatBRL(n) {
    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(n || 0));
  }
  function formatEasyToken(n) {
    return new Intl.NumberFormat('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(Math.floor(Number(n || 0)));
  }

  $: selectedToken = tokens.find(t => t.id === selectedTokenId);
  $: refPriceByToken = selectedToken?.price ?? referencePrice;
  $: priceUsed = tab === 'limit' ? Number(limitPrice) : Number(refPriceByToken);
  $: computedEasyTokenRaw = (Number(amountFiat) && priceUsed) ? Number(amountFiat) / priceUsed : 0;
  $: computedEasyToken = Math.floor(computedEasyTokenRaw);

  function confirm() {
    const price = priceUsed;
    const total = Number(amountFiat);
    if (!price || !total) return;
    const amount = computedEasyToken;
    if (!amount) return;
    dispatch('confirm', { type: tab, price, amount, total, tokenId: selectedToken?.id });
    amountFiat = '';
    limitPrice = '';
  }
</script>

<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
  <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
    <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100">Comprar</h3>
    <div class="inline-flex rounded-md border border-gray-200 dark:border-gray-600 overflow-hidden">
      <button class={`px-3 py-1.5 text-sm ${tab === 'market' ? 'bg-green-600 text-white' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300'}`} on:click={() => (tab = 'market')}>Mercado</button>
      <button class={`px-3 py-1.5 text-sm border-l border-gray-200 dark:border-gray-600 ${tab === 'limit' ? 'bg-green-600 text-white' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300'}`} on:click={() => (tab = 'limit')}>Limitada</button>
    </div>
  </div>
  <div class="p-5 space-y-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tipo de EasyToken</label>
      <select bind:value={selectedTokenId} class="mt-1 block w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
        {#each tokens as t}
          <option value={t.id}>{t.label || t.name}</option>
        {/each}
      </select>
    </div>

    {#if tab === 'limit'}
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Preço limite (R$)</label>
        <input type="number" min="0" step="0.01" bind:value={limitPrice} class="mt-1 block w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />
      </div>
    {/if}

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">EasyCoin (R$)</label>
        <input type="number" min="0" step="0.01" bind:value={amountFiat} class="mt-1 block w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">EasyToken (inteiros)</label>
        <input value={formatEasyToken(computedEasyToken || 0)} readonly class="mt-1 block w-full rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 text-gray-900 dark:text-gray-200 px-3 py-2" />
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">EasyToken a receber</label>
        <input value={formatEasyToken(computedEasyToken || 0)} readonly class="mt-1 block w-full rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 text-gray-900 dark:text-gray-200 px-3 py-2" />
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Preço de referência</label>
        <input value={refPriceByToken ? formatBRL(refPriceByToken) : '—'} readonly class="mt-1 block w-full rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 text-gray-900 dark:text-gray-200 px-3 py-2" />
      </div>
    </div>

    <div class="flex justify-end">
      <button class="px-4 py-2 rounded bg-green-600 hover:bg-green-700 text-white focus:outline-none focus:ring-2 focus:ring-green-500" on:click={confirm}>Confirmar</button>
    </div>
  </div>
</div>