{"version":3,"file":"SelectTokenModal-2195f0e3.js","sources":["../../src/components/lists/TokenListsListItem.vue","../../src/components/modals/SelectTokenModal/SelectTokenModal.vue"],"sourcesContent":["<template>\n  <div class=\"flex items-center py-3 px-4 text-base token-item\">\n    <img\n      :src=\"url(tokenlist.logoURI)\"\n      class=\"inline-block p-1 mr-3 align-middle bg-white rounded-full\"\n      width=\"34\"\n      height=\"34\"\n    />\n    <div class=\"flex-auto\">\n      {{ tokenlist.name }}\n      <div class=\"flex items-center text-sm text-gray\">\n        {{\n          fNum(tokenlist.tokens.length, {\n            style: 'decimal',\n            maximumFractionDigits: 1,\n            abbreviate: true,\n          })\n        }}\n        {{ $t('tokensLowerCase') }}\n        <BalLink :href=\"listUrl\" external class=\"flex items-center\">\n          <BalIcon\n            name=\"arrow-up-right\"\n            size=\"sm\"\n            class=\"ml-1 text-gray-500 hover:text-blue-500 transition-colors\"\n          />\n        </BalLink>\n      </div>\n    </div>\n    <BalToggle\n      v-if=\"notBalancer\"\n      name=\"active\"\n      :checked=\"isActive\"\n      @toggle=\"$emit('toggle')\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { PropType, reactive, toRefs } from 'vue';\n\nimport useNumbers from '@/composables/useNumbers';\nimport useUrls from '@/composables/useUrls';\nimport { TokenList } from '@/types/TokenList';\n\nexport default {\n  name: 'TokenListsListItem',\n\n  props: {\n    tokenlist: {\n      type: Object as PropType<TokenList>,\n      required: true,\n    },\n    uri: {\n      type: String,\n      required: true,\n    },\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: ['toggle'],\n\n  setup(props) {\n    /**\n     * COMPOSABLES\n     */\n    const { fNum } = useNumbers();\n    const { resolve } = useUrls();\n\n    /**\n     * STATE\n     */\n    const state = reactive({\n      notBalancer: props.tokenlist?.name !== 'Balancer',\n      listUrl: resolve(props.uri),\n    });\n\n    function url(url) {\n      if (!url) return '';\n      return url\n        .replace('ipfs://', `https://${import.meta.env.VITE_IPFS_NODE}/ipfs/`)\n        .replace('ipns://', `https://${import.meta.env.VITE_IPFS_NODE}/ipns/`);\n    }\n\n    return {\n      ...toRefs(state),\n      url,\n      fNum,\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 TokenListsListItem from '@/components/lists/TokenListsListItem.vue';\nimport { useTokenLists } from '@/providers/token-lists.provider';\nimport { useTokens } from '@/providers/tokens.provider';\nimport useUrls from '@/composables/useUrls';\nimport { TokenInfoMap, TokenList } 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}\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 { activeTokenLists, approvedTokenLists, toggleTokenList, isActiveList } =\n  useTokenLists();\nconst {\n  getToken,\n  searchTokens,\n  priceFor,\n  balanceFor,\n  dynamicDataLoading,\n  nativeAsset,\n  injectTokens,\n} = useTokens();\nconst { t } = useI18n();\nconst { resolve } = useUrls();\n\n/**\n * COMPUTED\n */\nconst title = computed(() => {\n  if (state.selectTokenList) return t('manageLists');\n  return t('tokenSearch');\n});\n\nconst tokenLists = computed<Record<string, TokenList>>(() => {\n  const query = state.query.toLowerCase();\n  const tokenListArray = Object.entries(approvedTokenLists.value);\n  const results = tokenListArray.filter(([, tokenList]) =>\n    tokenList.name.toLowerCase().includes(query)\n  );\n  return Object.fromEntries(results);\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\nasync function onToggleList(uri: string): Promise<void> {\n  toggleTokenList(uri);\n  state.results = await searchTokens(state.query, {\n    excluded: excludedTokens.value,\n    disableInjection: props.disableInjection,\n    subset: props.subset,\n  });\n}\n\nfunction onListExit(): void {\n  state.selectTokenList = false;\n  state.query = '';\n}\n\nfunction toggleSelectTokenList(): void {\n  state.selectTokenList = !state.selectTokenList;\n  state.query = '';\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    <div class=\"px-4 pt-3 pb-3 mr-2\">\n      <BalStack\n        horizontal\n        align=\"center\"\n        spacing=\"xs\"\n        class=\"justify-between mb-4\"\n      >\n        <h4 class=\"text-[24px] font-[600]\">\n          {{ title }}\n        </h4>\n        <button class=\"flex close-button-modal\" @click=\"$emit('close')\">\n          Close\n        </button>\n      </BalStack>\n      <!-- <div class=\"flex items-center\">\n          <BalBtn\n            v-if=\"state.selectTokenList\"\n            color=\"gray\"\n            size=\"xs\"\n            class=\"mr-2\"\n            flat\n            circle\n            @click=\"onListExit\"\n          >\n            <BalIcon name=\"arrow-left\" size=\"sm\" />\n          </BalBtn>\n          <h5>{{ title }}</h5>\n        </div> -->\n      <!-- <div\n          v-if=\"!state.selectTokenList && !hideTokenLists\"\n          class=\"flex items-center mr-2 cursor-pointer group\"\n          @click=\"toggleSelectTokenList\"\n        >\n          <span class=\"text-xs text-secondary\">{{ $t('tokenLists') }}</span>\n          <div class=\"flex items-center ml-2\">\n            <span class=\"mr-1\">\n              <img\n                v-for=\"(tokenlist, i) in activeTokenLists\"\n                :key=\"i\"\n                :src=\"resolve(tokenlist.logoURI || '')\"\n                class=\"inline-block w-6 h-6 bg-white rounded-full shadow\"\n              />\n            </span>\n            <BalIcon\n              name=\"chevron-down\"\n              size=\"sm\"\n              class=\"ml-1 text-blue-500 transition-all duration-200 ease-out group-hover:text-pink-500 group-focus:text-pink-500 dark:text-blue-400\"\n            />\n          </div>\n        </div> -->\n    </div>\n    <template v-if=\"state.selectTokenList\">\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('searchByName')\"\n          size=\"sm\"\n          class=\"w-full\"\n          autoFocus\n          :fontSize=\"18\"\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>\n        <div\n          v-if=\"Object.keys(tokenLists).length > 0\"\n          class=\"overflow-y-scroll list-height\"\n        >\n          <TokenListsListItem\n            v-for=\"(tokenList, uri) in tokenLists\"\n            :key=\"uri\"\n            :isActive=\"isActiveList(uri.toString())\"\n            :tokenlist=\"tokenList\"\n            :uri=\"uri\"\n            @toggle=\"onToggleList(uri.toString())\"\n          />\n        </div>\n        <div\n          v-else\n          class=\"flex justify-center items-center h-96\"\n          v-text=\"$t('errorNoLists')\"\n        />\n      </div>\n    </template>\n    <template v-else>\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          :fontSize=\"18\"\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-text=\"$t('errorNoTokens')\"\n        />\n      </div>\n    </template>\n  </BalModal>\n</template>\n\n<style scoped>\n.list-height {\n  height: 70vh;\n}\n.dark .close-button-modal {\n  border: 0.9px solid #8b8dfc;\n  background: #34355f;\n  border-radius: 25px;\n  padding: 4px;\n  font-size: 14px;\n  height: 35px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-width: 80px;\n}\n.close-button-modal {\n  border: 1px solid #4e529c;\n  background: rgba(229, 230, 255, 0.4);\n  border-radius: 25px;\n  padding: 4px;\n  font-size: 14px;\n  height: 35px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-width: 80px;\n}\n</style>\n\n\n"],"names":["_sfc_main$1","props","fNum","useNumbers","resolve","useUrls","state","reactive","_a","url","url2","toRefs","_hoisted_1","_hoisted_2","_component_BalToggle","__unplugin_components_2","_createElementVNode","$setup","$props","_createTextVNode","_toDisplayString","_hoisted_4","_ctx","_createVNode","_component_BalLink","_component_BalIcon","activeTokenLists","approvedTokenLists","toggleTokenList","isActiveList","useTokenLists","getToken","searchTokens","priceFor","balanceFor","dynamicDataLoading","nativeAsset","injectTokens","useTokens","t","useI18n","title","computed","tokenLists","query","results","tokenList","tokens","tokensWithValues","token","balance","price","value","orderBy","excludedTokens","focussedTokenAddress","key","onSelectToken","emit","onToggleList","uri","watch","toRef","newQuery","ArrowDown","ArrowUp","Enter","Tab","useMagicKeys","watchEffect"],"mappings":"wdA4CA,MAAAA,GAAA,CAAe,KAAA,qBACP,MAAA,CAEC,UAAA,CACM,KAAA,OACH,SAAA,EACI,EACZ,IAAA,CACK,KAAA,OACG,SAAA,EACI,EACZ,SAAA,CACU,KAAA,QACF,QAAA,EACG,CACX,EACF,MAAA,CAAA,QAAA,EAEgB,MAAAC,EAAA,OAMd,KAAA,CAAA,KAAAC,GAAAC,IACA,CAAA,QAAAC,GAAAC,KAKAC,EAAAC,EAAA,CAAuB,cAAAC,EAAAP,EAAA,YAAA,YAAAO,EAAA,QAAA,WACkB,QAAAJ,EAAAH,EAAA,GAAA,CACb,CAAA,EAG5B,SAAAQ,EAAAC,EAAA,CACE,OAAAA,EACAA,EAAA,QAAA,UAAA,WAAA,CAAA,EAAA,cAAA,QAAA,EAAA,QAAA,UAAA,WAAA,CAAA,EAAA,cAAA,QAAA,EADU,EAG6D,CAGzE,MAAA,CAAO,GAAAC,EAAAL,CAAA,EACU,IAAAG,EACf,KAAAP,CACA,CACF,CAEJ,EApFSU,GAAA,CAAA,MAAA,oDAEEC,GAAA,CAAA,KAAA,kHATTC,EAAAC,0BAE+BC,EAAA,MAAA,CACrB,IAAAC,EAAA,IAAAC,EAAA,UAAA,OAAA,EACI,MAAA,2DACJ,MAAA,KAER,OAAA,IAAA,EAAA,KAAA,EAAAL,EAAA,cAkBQM,EAAAC,EAAAF,EAAA,UAAA,IAAA,EAAA,IAAA,CAAA,EAdaF,EAAA,MAAAK,GAAA,uDAMjB,sBAAA,EAAA,WAAA,EAOU,CAAA,CAAA,EAAA,IAAAD,EAAAE,EAAA,GAAA,iBAAA,CAAA,EAAA,IAAA,CAAA,EANaC,EAAAC,EAAA,CAAU,KAAAF,EAAA,QAAO,SAAA,8CAE/BC,EAAAE,EAAA,CACI,KAAA,iBACJ,KAAA,0FAML,CAAA,CAAA,CAAA,0BACO,IAAA,EACZ,KAAA,SACA,QAAAP,EAAA,+5BCcPZ,EAAAC,EAAA,CAAuC,QAAA,GAC5B,gBAAA,GACQ,MAAA,GACV,QAAA,CAAA,EACG,cAAA,CACK,CAAA,EAMjB,CAAA,iBAAAmB,EAAA,mBAAAC,EAAA,gBAAAC,EAAA,aAAAC,CAAA,EAAAC,KAEA,CAAM,SAAAC,EACJ,aAAAC,EACA,SAAAC,EACA,WAAAC,EACA,mBAAAC,EACA,YAAAC,EACA,aAAAC,CACA,EAAAC,GAAA,EAEF,CAAA,EAAAC,GAAAC,KAMAC,EAAAC,EAAA,IACEpC,EAAA,gBAA2BiC,EAAA,aAAA,EAC3BA,EAAA,aAAA,CAAsB,EAGxBI,EAAAD,EAAA,IAAA,CACE,MAAAE,EAAAtC,EAAA,MAAA,YAAA,EAEAuC,EADA,OAAA,QAAAlB,EAAA,KAAA,EACA,OAA+B,CAAA,CAAA,CAAAmB,CAAA,IAAAA,EAAA,KAAA,YAAA,EAAA,SAAAF,CAAA,CACc,EAE7C,OAAA,OAAA,YAAAC,CAAA,CAAiC,CAAA,EAGnCE,EAAAL,EAAA,IAAA,CACE,MAAAM,EAAA,OAAA,OAAA1C,EAAA,OAAA,EAAA,IAAA2C,GAAA,CACE,MAAAC,EAAAhB,EAAAe,EAAA,OAAA,EACAE,EAAAlB,EAAAgB,EAAA,OAAA,EACAG,EAAA,OAAAF,CAAA,EAAAC,EACA,MAAA,CAAO,GAAAF,EACF,MAAAE,EACH,QAAAD,EACA,MAAAE,CACA,CACF,CAAA,EAGF,OAAAnD,EAAA,eAA0B+C,EACrBK,GAAA,QAAAL,EAAA,CAAA,QAAA,SAAA,EAAA,CAAA,OAAA,MAAA,CAAA,CAAuE,CAAA,EAG9EM,EAAAZ,EAAA,IAAA,CAAsC,GAAAzC,EAAA,eAC3B,GAAAA,EAAA,aAAA,CAAA,EAAA,CAAAmC,EAAA,OAAA,CACyC,CAAA,EAGpDmB,EAAAb,EAAA,IAAA,CACE,QAAA,IAAApC,EAAA,QAAAA,EAAA,aAAA,EACA,MAAAkD,EAAA,OAAA,KAAAT,EAAA,KAAA,EAAAzC,EAAA,aAAA,EACA,OAAAyC,EAAA,MAAAS,CAAA,EAAA,OAAyB,CAAA,EAM3B,eAAAC,EAAAR,EAAA,CACElB,EAAAkB,CAAA,GACE,MAAAZ,EAAA,CAAAY,CAAA,CAAA,EAGFS,EAAA,SAAAT,CAAA,EACAS,EAAA,OAAA,CAAY,CAGd,eAAAC,EAAAC,EAAA,CACEhC,EAAAgC,CAAA,EACAtD,EAAA,QAAA,MAAA0B,EAAA1B,EAAA,MAAA,CAAgD,SAAAgD,EAAA,MACrB,iBAAArD,EAAA,iBACD,OAAAA,EAAA,MACV,CAAA,CACf,CAgBH4D,GAAAC,GAAAxD,EAAA,OAAA,EACsB,MAAAyD,GAAA,CAElBzD,EAAA,QAAA,GACAA,EAAA,QAAA,MAAA0B,EAAA+B,EAAA,CAA6C,SAAAT,EAAA,MAClB,iBAAArD,EAAA,iBACD,OAAAA,EAAA,MACV,CAAA,EAAA,QAAA,IAAA,CAEdK,EAAA,QAAA,EAAgB,CAAA,CACjB,EACH,CAAA,UAAA,EAAA,CACkB,EAGpB,KAAA,CAAA,UAAA0D,EAAA,QAAAC,EAAA,MAAAC,EAAA,IAAAC,CAAA,EAAAC,KACA,OAAAC,GAAA,IAAA,CACEL,EAAA,OAAA1D,EAAA,cAAA,OAAA,KAAAA,EAAA,OAAA,EAAA,QAIEA,EAAA,gBACF6D,EAAA,OAAA7D,EAAA,cAAA,OAAA,KAAAA,EAAA,OAAA,EAAA,QACEA,EAAA,gBAEF2D,EAAA,OAAA3D,EAAA,cAAA,GAA8CA,EAAA,gBAE9C4D,EAAA,OAAiBT,EAAAF,EAAA,KAAA,CAAwC,CAAA"}