{"version":3,"file":"DropdownBlockchain-3a8d79d7.js","sources":["../../../app/javascript/components/dropdown/DropdownBlockchain.vue"],"sourcesContent":["<template>\n  <div\n    :id=\"dropdownId\"\n    class=\"w-48 cursor-pointer\"\n    @click=\"\n      toggleDropdown = !toggleDropdown;\n      $emit('click');\n    \"\n  >\n    <div class=\"flex items-center justify-between rounded bg-gray-800 px-2 py-2 text-sm font-medium\">\n      <div v-if=\"selectedChainItem\" class=\"flex space-x-2\">\n        <img :src=\"selectedChainItem.image\" class=\"inline h-4 w-4 rounded-full\" loading=\"lazy\" alt=\"...\" />\n        <div class=\"whitespace-nowrap text-xs font-medium leading-4\">\n          {{ selectedChainItem.text }}\n        </div>\n      </div>\n      <ChevronDownIcon\n        :class=\"[toggleDropdown ? 'rotate-180 duration-100' : '', 'ml-1 h-5 w-5 transform text-gray-400']\"\n      />\n    </div>\n  </div>\n  <div v-if=\"toggleDropdown\">\n    <DropdownBase\n      :items=\"filteredChainOptions\"\n      custom-classes=\"ml-3 mt-1\"\n      width=\"w-48\"\n      custom-dropdown-item-class=\"cursor-pointer\"\n      background-color=\"bg-gray-800\"\n      x-anchor=\"left\"\n      @clicked=\"handleItemSelect($event)\"\n    >\n    </DropdownBase>\n  </div>\n</template>\n\n<script setup>\nimport DropdownBase from '@/components/dropdown/DropdownBase.vue';\nimport { ref, computed, watch, onBeforeMount } from 'vue';\nimport { useStore } from 'vuex';\nimport { ChevronDownIcon } from '@heroicons/vue/20/solid';\nconst $store = useStore();\n\nconst $emit = defineEmits(['select']);\nconst props = defineProps({\n  supportedChains: { type: Array, default: () => [] }\n});\n\n//CHAIN OPTIONS\nconst allChains = computed(() => $store.state.supportedChains);\nconst filteredChainOptions = computed(() => {\n  let filteredItems = allChains.value;\n  if (props.supportedChains.length > 0) {\n    filteredItems = allChains.value.filter(x => props.supportedChains.includes(x.id));\n  }\n  let mappedItems = filteredItems.map(x => {\n    return {\n      ...x,\n      html: `<div class=\"flex items-center space-x-2\">\n              <div class=\"flex flex space-x-2 items-center\">\n                <img src= ${x.image} class=\"inline rounded-full w-4 h-4\" loading=\"lazy\" alt=\"...\" />\n                <div class=\"break-words font-semibold text-gray-100 text-xs\"> ${x.text}</div>\n              </div>\n            </div>`\n    };\n  });\n  return mappedItems;\n});\n\n//DROPDOWN\nconst dropdownId = ref(`profile_dropdown_${Math.random()}`);\nconst toggleDropdown = ref(false);\n\n//SELECTED ITEM\nconst selectedChain = ref('');\nwatch(selectedChain, () => {\n  if (selectedChain.value != '') {\n    localStorage.setItem('selected_chain', selectedChain.value);\n  }\n});\n\nconst selectedChainItem = computed(() => {\n  return filteredChainOptions.value.find(x => x.id == selectedChain.value);\n});\n\nonBeforeMount(() => {\n  let activeChain = '';\n  if (localStorage.selected_chain) {\n    activeChain = localStorage.selected_chain;\n  }\n  if (filteredChainOptions.value.length > 0) {\n    //override if chain is not supported\n    if (!filteredChainOptions.value.map(x => x.id).includes(activeChain)) {\n      activeChain = filteredChainOptions.value[0].id;\n    }\n  }\n  selectedChain.value = activeChain;\n  $emit('select', selectedChain.value);\n});\n\n//ITEM SELECT\nfunction handleItemSelect(event) {\n  selectedChain.value = event;\n  toggleDropdown.value = false;\n  $emit('select', event);\n}\n</script>\n"],"names":["$store","useStore","allChains","computed","filteredChainOptions","filteredItems","props","x","dropdownId","ref","toggleDropdown","selectedChain","watch","selectedChainItem","onBeforeMount","activeChain","$emit","handleItemSelect","event"],"mappings":"yvBAwCMA,EAASC,EAAQ,EAQjBC,EAAYC,EAAS,IAAMH,EAAO,MAAM,eAAe,EACvDI,EAAuBD,EAAS,IAAM,CAC1C,IAAIE,EAAgBH,EAAU,MAC9B,OAAII,EAAM,gBAAgB,OAAS,IACjCD,EAAgBH,EAAU,MAAM,OAAOK,GAAKD,EAAM,gBAAgB,SAASC,EAAE,EAAE,CAAC,GAEhEF,EAAc,IAAIE,IAC3B,CACL,GAAGA,EACH,KAAM;AAAA;AAAA,4BAEgBA,EAAE,KAAK;AAAA,gFAC6CA,EAAE,IAAI;AAAA;AAAA,mBAGtF,EACG,CAEH,CAAC,EAGKC,EAAaC,EAAI,oBAAoB,KAAK,OAAM,CAAE,EAAE,EACpDC,EAAiBD,EAAI,EAAK,EAG1BE,EAAgBF,EAAI,EAAE,EAC5BG,EAAMD,EAAe,IAAM,CACrBA,EAAc,OAAS,IACzB,aAAa,QAAQ,iBAAkBA,EAAc,KAAK,CAE9D,CAAC,EAED,MAAME,EAAoBV,EAAS,IAC1BC,EAAqB,MAAM,KAAKG,GAAKA,EAAE,IAAMI,EAAc,KAAK,CACxE,EAEDG,EAAc,IAAM,CAClB,IAAIC,EAAc,GACd,aAAa,iBACfA,EAAc,aAAa,gBAEzBX,EAAqB,MAAM,OAAS,IAEjCA,EAAqB,MAAM,IAAIG,GAAKA,EAAE,EAAE,EAAE,SAASQ,CAAW,IACjEA,EAAcX,EAAqB,MAAM,CAAC,EAAE,KAGhDO,EAAc,MAAQI,EACtBC,EAAM,SAAUL,EAAc,KAAK,CACrC,CAAC,EAGD,SAASM,EAAiBC,EAAO,CAC/BP,EAAc,MAAQO,EACtBR,EAAe,MAAQ,GACvBM,EAAM,SAAUE,CAAK,CACvB"}