{"version":3,"file":"TokenSelectorButton.BAvTpWjj.js","sources":["../../../../../../src/lib/components/swap/swap_ui/TokenSelectorModal.svelte","../../../../../../src/lib/components/swap/swap_ui/TokenSelectorButton.svelte"],"sourcesContent":["<script lang=\"ts\">\n  import Modal from \"$lib/components/common/Modal.svelte\";\n  import TokenRow from \"$lib/components/sidebar/TokenRow.svelte\";\n  import { formattedTokens, tokenStore } from \"$lib/services/tokens/tokenStore\";\n  import { auth } from '$lib/services/auth';\n  import { tokenLogoStore, getTokenLogo } from '$lib/services/tokens/tokenLogos';\n    import { AnonymousIdentity } from \"@dfinity/agent\";\n\n  export let show = false;\n  export let onSelect: (token: FE.Token) => void;\n  export let onClose: () => void;\n  export let currentToken: FE.Token;\n\n  let searchQuery = \"\";\n  let standardFilter = \"all\";\n\n  // Get current wallet ID for favorites\n  $: walletId = $auth?.account?.owner?.toString() || new AnonymousIdentity();\n\n  $: filteredTokens = $formattedTokens\n    .filter((token) => {\n      if (!token) return false;\n      if(!token?.symbol || !token?.name) return false;\n      \n      // Check if search query matches canister ID\n      if (searchQuery.toLowerCase() === token.canister_id.toLowerCase()) {\n        return true;\n      }\n\n      const matchesSearch =\n        token.symbol.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        token.name.toLowerCase().includes(searchQuery.toLowerCase());\n\n      if (!matchesSearch) return false;\n\n      switch (standardFilter) {\n        case \"ck\":\n          return token.symbol.toLowerCase().startsWith(\"ck\");\n        case \"favorites\":\n          return $tokenStore.favoriteTokens[walletId]?.includes(token.canister_id);\n        case \"all\":\n        default:\n          return true;\n      }\n    });\n\n  // Load logos when filtered tokens change\n  $: {\n    if (filteredTokens) {\n      filteredTokens.forEach(async (token) => {\n        if (!$tokenLogoStore[token.canister_id]) {\n          await getTokenLogo(token.canister_id);\n        }\n      });\n    }\n  }\n\n  function handleSelect(token: FE.Token) {\n    onSelect(token);\n    onClose();\n  }\n\n  async function handleFavoriteClick(event: MouseEvent, canisterId: string) {\n    event.stopPropagation();\n    tokenStore.toggleFavorite(canisterId);\n  }\n\n  async function handlePaste() {\n    try {\n      const text = await navigator.clipboard.readText();\n      searchQuery = text.trim();\n    } catch (err) {\n      console.error('Failed to read clipboard:', err);\n    }\n  }\n\n  // Get favorite count for the button label\n  $: favoriteCount = $tokenStore.favoriteTokens[walletId]?.length || 0;\n</script>\n\n<Modal {show} title=\"Select Token\" {onClose} variant=\"green\">\n  <div class=\"space-y-4\">\n    <div class=\"w-full\">\n      <label for=\"token-search\" class=\"sr-only\">Search tokens</label>\n      <div class=\"flex gap-2\">\n        <input\n          id=\"token-search\"\n          type=\"text\"\n          bind:value={searchQuery}\n          placeholder=\"Search tokens...\"\n          class=\"flex-1 bg-black/30 border-2 border-white/10 rounded-xl px-4 py-2 text-white text-lg font-medium \n                 placeholder-white/60 transition-all duration-100 \n                 hover:border-white/20 focus:border-yellow-300/50 focus:outline-none\"\n          aria-label=\"Search tokens\"\n        />\n        <button\n          on:click={handlePaste}\n          class=\"px-4 py-2 bg-black/30 border-2 border-white/10 rounded-xl text-white/80 font-medium\n                 transition-all duration-100 hover:border-white/20 hover:text-white\n                 focus:border-yellow-300/50 focus:outline-none\"\n          aria-label=\"Paste from clipboard\"\n        >\n          Paste\n        </button>\n      </div>\n      <div class=\"flex flex-wrap gap-1 mt-2\">\n        <button\n          class=\"px-3 py-1.5 rounded-lg bg-black/30 border-2 border-white/10 text-white/80 text-sm font-medium\n                 transition-all duration-100 hover:border-white/20 hover:text-white\n                 {standardFilter === 'all' ? 'border-yellow-300/50 text-yellow-300 bg-black/50' : ''}\"\n          on:click={() => (standardFilter = \"all\")}\n        >\n          All\n        </button>\n        <button\n          class=\"px-3 py-1.5 rounded-lg bg-black/30 border-2 border-white/10 text-white/80 text-sm font-medium\n                 transition-all duration-100 hover:border-white/20 hover:text-white\n                 {standardFilter === 'favorites' ? 'border-yellow-300/50 text-yellow-300 bg-black/50' : ''}\"\n          on:click={() => (standardFilter = \"favorites\")}\n        >\n          Favorites {favoriteCount > 0 ? `(${favoriteCount})` : ''}\n        </button>\n        <button\n          class=\"px-3 py-1.5 rounded-lg bg-black/30 border-2 border-white/10 text-white/80 text-sm font-medium\n                 transition-all duration-100 hover:border-white/20 hover:text-white\n                 {standardFilter === 'ck' ? 'border-yellow-300/50 text-yellow-300 bg-black/50' : ''}\"\n          on:click={() => (standardFilter = \"ck\")}\n        >\n          ckTokens\n        </button>\n      </div>\n    </div>\n\n    <div class=\"flex-1 overflow-y-auto overflow-x-hidden py-1 space-y-2 token-list\" role=\"listbox\" aria-label=\"Token list\">\n      {#each filteredTokens as token}\n        <div class=\"flex items-center px-4 rounded-lg transition-all duration-100 hover:bg-white/5\">\n          <button\n            class=\"flex-1 py-2 bg-transparent border-none cursor-pointer transition-all duration-100 text-left\n                   hover:translate-x-1 min-w-0\"\n            on:click={() => handleSelect(token)}\n            role=\"option\"\n            aria-selected={token.canister_id === currentToken?.canister_id}\n          >\n            <TokenRow {token} />\n          </button>\n          <button\n            class=\"p-2 bg-transparent border-none cursor-pointer text-white/50 transition-all duration-100\n                   hover:text-yellow-300 hover:scale-110 flex items-center justify-center\"\n            on:click={(e) => handleFavoriteClick(e, token.canister_id)}\n            aria-label={$tokenStore.favoriteTokens[walletId]?.includes(token.canister_id) \n              ? \"Remove from favorites\" \n              : \"Add to favorites\"}\n          >\n            <span class=\"text-xl leading-none outline-none\n                       {$tokenStore.favoriteTokens[walletId]?.includes(token.canister_id) \n                         ? 'text-yellow-300' \n                         : 'opacity-70'}\">\n              {$tokenStore.favoriteTokens[walletId]?.includes(token.canister_id) ? '★' : '☆'}\n            </span>\n          </button>\n        </div>\n      {/each}\n    </div>\n  </div>\n</Modal>\n\n<style lang=\"postcss\">\n  /* Custom scrollbar styles - can't be done with Tailwind */\n  .token-list {\n    scrollbar-width: thin;\n    \n    &::-webkit-scrollbar {\n      @apply w-1.5;\n    }\n    \n    &::-webkit-scrollbar-track {\n      @apply bg-transparent;\n    }\n    \n    &::-webkit-scrollbar-thumb {\n      @apply bg-white/20 rounded-full;\n      \n      &:hover {\n        @apply bg-white/30;\n      }\n    }\n  }\n\n  /* Screen reader only utility */\n  .sr-only {\n    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;\n    clip: rect(0, 0, 0, 0);\n  }\n</style>\n","<script lang=\"ts\">\n  import Button from \"$lib/components/common/Button.svelte\";\n  import { formattedTokens } from \"$lib/services/tokens/tokenStore\";\n  import { getTokenLogo, tokenLogoStore } from '$lib/services/tokens/tokenLogos';\n\n  export let token: FE.Token;\n  export let onClick: () => void;\n  export let disabled: boolean;\n\n  let tokenInfo: FE.Token | null = null;\n  let logoUrl = '/tokens/not_verified.webp';\n\n  $: tokenInfo = $formattedTokens.find(t => t.canister_id === token?.canister_id);\n  \n  $: {\n    if (tokenInfo?.canister_id) {\n      if ($tokenLogoStore[tokenInfo.canister_id]) {\n        logoUrl = $tokenLogoStore[tokenInfo.canister_id];\n      } else {\n        getTokenLogo(tokenInfo.canister_id).then(url => {\n          if (url) logoUrl = url;\n        });\n      }\n    }\n  }\n</script>\n\n<Button\n  variant=\"yellow\"\n  size=\"big\"\n  {onClick}\n  {disabled}\n  className=\"token-selector-button\"\n>\n  <div class=\"token-button-content\">\n    <img\n      src={logoUrl}\n      alt={tokenInfo?.symbol}\n      class=\"token-logo\"\n      on:error={(e) => {\n        // @ts-ignore\n        e.currentTarget.src = \"/tokens/not_verified.webp\";\n      }}\n    />\n    <span class=\"token-symbol\">{tokenInfo?.symbol}</span>\n  </div>\n</Button>\n\n<style>\n  .token-button-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 0 4px;\n    width: 100%;\n  }\n\n  .token-logo {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    object-fit: contain;\n    flex-shrink: 0;\n  }\n\n  .token-symbol {\n    font-weight: 600;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: center;\n  }\n\n  .selector-icon {\n    font-size: 0.8em;\n    opacity: 0.7;\n  }\n\n  :global(.token-selector-button) {\n    min-width: 160px;\n    width: 100%;\n    max-width: 200px;\n  }\n</style>\n"],"names":["show","onSelect","$.prop","$$props","onClose","currentToken","searchQuery","standardFilter","handleSelect","token","handleFavoriteClick","event","canisterId","tokenStore","handlePaste","text","err","walletId","_c","_b","_a","$auth","AnonymousIdentity","$.set","filteredTokens","$formattedTokens","$.get","$tokenStore","$tokenLogoStore","getTokenLogo","favoriteCount","$.each","div_4","$.template_effect","$.set_attribute","button_5","$.set_text","text_2","button_4","$.event","e","text_1","$.bind_value","input","$$value","button_1","button_2","button_3","onClick","disabled","tokenInfo","logoUrl","t","url","img"],"mappings":"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"}