{"version":3,"file":"SelectTokenModal-b579a1d2.js","sources":["../../src/components/lists/TokenListItem.vue","../../src/components/modals/SelectTokenModal/SelectTokenModal.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"animateRef\"\n    :class=\"[\n      `flex items-center py-3 border border-transparent ml-4 mr-2 px-2 text-base\n  leading-5 opacity-0 highlight hover:bg-blue-50 dark:hover:bg-blue-900\n  rounded-lg transition-colors ease-in duration-300`,\n      {\n        'bg-blue-50 dark:bg-blue-900 border-blue-200 dark:border-blue-500':\n          focussed,\n      },\n    ]\"\n  >\n    <BalAsset\n      :address=\"token.address\"\n      :iconURI=\"token.logoURI\"\n      :size=\"34\"\n      class=\"mr-3\"\n    />\n    <div\n      :class=\"['flex-auto', { 'text-blue-500 dark:text-blue-200': focussed }]\"\n    >\n      {{ token.symbol }}\n      <div class=\"w-40 md:w-60 text-sm truncate text-gray\">\n        {{ token.name }}\n      </div>\n    </div>\n    <span\n      v-if=\"!hideBalance\"\n      class=\"flex flex-col items-end font-medium text-right\"\n    >\n      <BalLoadingBlock v-if=\"balanceLoading\" class=\"w-14 h-4\" />\n      <template v-else>\n        <template v-if=\"balance > 0\">\n          <template v-if=\"balance >= 0.0001\">\n            {{ fNum(balance, FNumFormats.token) }}\n          </template>\n          <template v-else> &#60; 0.0001 </template>\n        </template>\n        <div v-if=\"value > 0\" class=\"text-sm font-normal text-secondary\">\n          {{ fNum(value, FNumFormats.fiat) }}\n        </div>\n      </template>\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport anime from 'animejs';\nimport { computed, onMounted, onUnmounted, PropType, ref } from 'vue';\n\nimport useNumbers, { FNumFormats } from '@/composables/useNumbers';\nimport { useTokens } from '@/providers/tokens.provider';\nimport { TokenInfo } from '@/types/TokenList';\n\nexport default {\n  name: 'TokenListItem',\n\n  props: {\n    token: { type: Object as PropType<TokenInfo>, required: true },\n    balanceLoading: { type: Boolean, default: true },\n    hideBalance: { type: Boolean, default: false },\n    focussed: { type: Boolean, default: false },\n  },\n\n  setup(props) {\n    /**\n     * COMPOSABLES\n     */\n    const { fNum } = useNumbers();\n    const animateRef = ref();\n    const { priceFor, balanceFor } = useTokens();\n\n    /**\n     * COMPUTED\n     */\n    const balance = computed(() => Number(balanceFor(props.token.address)));\n    const value = computed(() => balance.value * priceFor(props.token.address));\n\n    /**\n     * CALLBACKS\n     */\n    onMounted(() => {\n      anime({\n        opacity: 1,\n        targets: animateRef.value,\n        delay: anime.stagger(100),\n      });\n    });\n\n    onUnmounted(() => {\n      anime({\n        opacity: 0,\n        targets: animateRef.value,\n      });\n    });\n\n    return {\n      fNum,\n      FNumFormats,\n      animateRef,\n      balance,\n      value,\n    };\n  },\n};\n</script>\n","<script setup lang=\"ts\">\nimport { orderBy } from 'lodash';\nimport { computed, reactive, toRef, watch, watchEffect } from 'vue';\nimport { useI18n } from 'vue-i18n';\n\nimport TokenListItem from '@/components/lists/TokenListItem.vue';\nimport { useTokens } from '@/providers/tokens.provider';\nimport { TokenInfoMap } from '@/types/TokenList';\nimport { useMagicKeys } from '@vueuse/core';\n\ninterface Props {\n  open?: boolean;\n  excludedTokens?: string[];\n  subset?: string[];\n  includeEther?: boolean;\n  disableInjection?: boolean;\n  hideTokenLists?: boolean;\n  ignoreBalances?: boolean;\n  notFoundContent?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  open: false,\n  excludedTokens: () => [],\n  subset: () => [],\n  includeEther: false,\n  disableInjection: false,\n  hideTokenLists: false,\n  ignoreBalances: false,\n});\n\nconst emit = defineEmits(['close', 'selectTokenlist', 'select']);\n\ninterface ComponentState {\n  loading: boolean;\n  selectTokenList: boolean;\n  query: string;\n  results: TokenInfoMap;\n  focussedToken: number;\n}\n\n/**\n * STATE\n */\nconst state: ComponentState = reactive({\n  loading: false,\n  selectTokenList: false,\n  query: '',\n  results: {},\n  focussedToken: 0,\n});\n\n/**\n * COMPOSABLES\n */\nconst {\n  getToken,\n  searchTokens,\n  priceFor,\n  balanceFor,\n  dynamicDataLoading,\n  nativeAsset,\n  injectTokens,\n} = useTokens();\nconst { t } = useI18n();\n\n/**\n * COMPUTED\n */\nconst title = computed(() => {\n  if (state.selectTokenList) return t('manageLists');\n  return t('tokenSearch');\n});\n\nconst tokens = computed(() => {\n  const tokensWithValues = Object.values(state.results).map(token => {\n    const balance = balanceFor(token.address);\n    const price = priceFor(token.address);\n    const value = Number(balance) * price;\n    return {\n      ...token,\n      price,\n      balance,\n      value,\n    };\n  });\n\n  if (props.ignoreBalances) return tokensWithValues;\n  else return orderBy(tokensWithValues, ['value', 'balance'], ['desc', 'desc']);\n});\n\nconst excludedTokens = computed(() => [\n  ...props.excludedTokens,\n  ...(props.includeEther ? [] : [nativeAsset.address]),\n]);\n\nconst focussedTokenAddress = computed((): string => {\n  console.log(state.results, state.focussedToken);\n  const key = Object.keys(tokens.value)[state.focussedToken];\n  return tokens.value[key].address;\n});\n\n/**\n * METHODS\n */\nasync function onSelectToken(token: string): Promise<void> {\n  if (!getToken(token)) {\n    await injectTokens([token]);\n  }\n\n  emit('select', token);\n  emit('close');\n}\n\n/**\n * WATCHERS\n */\nwatch(\n  toRef(state, 'query'),\n  async newQuery => {\n    state.loading = true;\n    state.results = await searchTokens(newQuery, {\n      excluded: excludedTokens.value,\n      disableInjection: props.disableInjection,\n      subset: props.subset,\n    }).finally(() => {\n      state.loading = false;\n    });\n  },\n  { immediate: true }\n);\n\nconst { ArrowDown, ArrowUp, Enter, Tab } = useMagicKeys();\nwatchEffect(() => {\n  if (\n    ArrowDown.value &&\n    state.focussedToken < Object.keys(state.results).length\n  )\n    state.focussedToken++;\n  if (Tab.value && state.focussedToken < Object.keys(state.results).length)\n    state.focussedToken++;\n\n  if (ArrowUp.value && state.focussedToken > 0) state.focussedToken--;\n\n  if (Enter.value) onSelectToken(focussedTokenAddress.value);\n});\n</script>\n\n<template>\n  <BalModal show noContentPad @close=\"$emit('close')\">\n    <template #header>\n      <div class=\"flex justify-between items-center w-full\">\n        <div class=\"flex items-center\">\n          <h5>{{ title }}</h5>\n        </div>\n      </div>\n    </template>\n\n    <div class=\"flex px-4 pt-2 pb-3 mr-2\">\n      <BalTextInput\n        v-model=\"state.query\"\n        name=\"tokenSearchInput\"\n        :placeholder=\"$t('searchBy')\"\n        size=\"sm\"\n        class=\"w-full\"\n        autoFocus\n      >\n        <template #prepend>\n          <div class=\"flex justify-center items-center w-8 h-full\">\n            <BalIcon name=\"search\" size=\"sm\" class=\"mr-2 text-gray-500\" />\n          </div>\n        </template>\n      </BalTextInput>\n    </div>\n    <div class=\"overflow-hidden\">\n      <RecycleScroller\n        v-if=\"tokens.length > 0\"\n        v-slot=\"{ item: token, index }\"\n        class=\"overflow-y-scroll list-height\"\n        :items=\"tokens\"\n        :itemSize=\"70\"\n        keyField=\"address\"\n        :buffer=\"100\"\n      >\n        <a @click=\"onSelectToken(token.address)\">\n          <TokenListItem\n            :token=\"token\"\n            :hideBalance=\"ignoreBalances\"\n            :balanceLoading=\"dynamicDataLoading\"\n            :focussed=\"index == state.focussedToken\"\n            tabIndex=\"0\"\n          />\n        </a>\n      </RecycleScroller>\n      <div\n        v-else-if=\"state.loading\"\n        class=\"flex justify-center items-center h-96\"\n      >\n        <BalLoadingIcon />\n      </div>\n      <div\n        v-else\n        class=\"p-12 h-96 text-center text-secondary\"\n        v-html=\"notFoundContent ? notFoundContent : $t('errorNoTokens')\"\n      />\n    </div>\n  </BalModal>\n</template>\n\n<style scoped>\n.list-height {\n  height: 70vh;\n}\n</style>\n\n\n"],"names":["_sfc_main$1","props","fNum","useNumbers","animateRef","ref","priceFor","balanceFor","useTokens","balance","computed","value","onMounted","anime","onUnmounted","FNumFormats","__unplugin_components_1","_openBlock","_createElementBlock","$props","_createElementVNode","_createTextVNode","_toDisplayString","_createBlock","_component_BalLoadingBlock","$setup","_Fragment","_hoisted_3","_createCommentVNode","state","reactive","getToken","searchTokens","dynamicDataLoading","nativeAsset","injectTokens","t","useI18n","title","tokens","tokensWithValues","token","price","orderBy","excludedTokens","focussedTokenAddress","key","onSelectToken","emit","watch","toRef","newQuery","ArrowDown","ArrowUp","Enter","Tab","useMagicKeys","watchEffect"],"mappings":"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"}