{"version":3,"file":"NavigationGasFees-8e74850b.js","sources":["../../../app/javascript/components/navigation/NavigationGasFees.vue"],"sourcesContent":["<template>\n  <div class=\"relative text-left\">\n    <div :id=\"dropdownId\">\n      <div\n        class=\"flex w-full cursor-pointer select-none items-center justify-center space-x-0.5 text-xs\"\n        @click=\"toggleDropdown()\"\n      >\n        <span class=\"whitespace-nowrap\" v-if=\"Object.keys(gasFees).length > 0\">\n          <span class=\"text-gray-300 hover:text-white\">Gas:</span> {{ decimals(gweiFee.fast.gwei, 0, 0) }}\n        </span>\n        <span class=\"whitespace-nowrap\" v-else><span class=\"text-gray-300\">Gas:</span> n/a</span>&nbsp;<span\n          class=\"font-mono text-xs text-gray-400\"\n        ></span>\n        <ChevronDownIcon\n          :class=\"{ 'rotate-180': showDropdown }\"\n          class=\"-ml-0.5 h-4 w-4 transform text-gray-400 duration-100 ease-in-out\"\n        />\n      </div>\n\n      <div v-if=\"gasFees.length != 0 && showDropdown\" class=\"relative\">\n        <div class=\"fixed inset-0 z-40\" @click=\"closeGasFee()\"></div>\n        <div class=\"absolute right-0 z-50 mt-1\">\n          <div class=\"flex flex-col rounded border border-grid bg-gray-800 p-3\">\n            <table>\n              <thead>\n                <tr class=\"border-none\">\n                  <th>\n                    <div class=\"items-center\">\n                      <BaseButton type=\"primary\" size=\"xs\" @press=\"toggleAlertsDialog()\">+ Create Alert </BaseButton>\n                    </div>\n                  </th>\n                  <th class=\"px-3 py-0 text-right text-xs font-normal normal-case text-gray-300\">Standard</th>\n                  <th class=\"px-3 py-0 text-right text-xs font-normal normal-case text-gray-300\">Fast</th>\n                  <th class=\"px-3 py-0 text-right text-xs font-normal normal-case text-gray-300\">Instant</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr class=\"border-none\">\n                  <td class=\"py-0\"></td>\n                  <template v-for=\"(fee, idx) in gweiFee\" :key=\"idx\">\n                    <td class=\"whitespace-nowrap px-3 text-right text-xs font-medium\">\n                      {{ decimals(fee.gwei, 0, 0) }} Gwei\n                    </td>\n                  </template>\n                </tr>\n                <tr v-for=\"(gf, idx) in gasFees\" class=\"border-none\" :key=\"idx\">\n                  <td class=\"whitespace-nowrap px-3 py-1 text-xs text-gray-300\">{{ gf.description }}</td>\n                  <td class=\"px-3 py-1 text-right\">\n                    <span class=\"text-xs text-white\">${{ decimals(gf.fees.standard.usd, 2, 2) }}</span>\n                  </td>\n                  <td class=\"px-3 py-1 text-right\">\n                    <span class=\"text-xs text-white\">${{ decimals(gf.fees.fast.usd, 2, 2) }}</span>\n                  </td>\n                  <td class=\"px-3 py-1 text-right\">\n                    <span class=\"text-xs text-white\">${{ decimals(gf.fees.instant.usd, 2, 2) }}</span>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n            <ChartGasFee class=\"mt-4\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { decimals } from '@/composeables/filters';\nimport { ref, onMounted, inject, computed } from 'vue';\nimport ChartGasFee from '@/components/chart/ChartGasFee.vue';\nimport useEmitter from '@/composeables/emitter';\nimport { ChevronDownIcon } from '@heroicons/vue/20/solid';\nimport { useStore } from 'vuex';\n\nconst $http = inject('http');\nconst emitter = useEmitter();\nconst dropdownId = ref(`gas_fee_chart_${Math.random()}`);\nconst showDropdown = ref(false);\nconst $store = useStore();\n\nonMounted(() => {\n  setInterval(() => {\n    getGasFees();\n  }, 60000);\n});\n\nconst gasFees = computed(() => {\n  return $store.getters.gasFees;\n});\n\nconst gweiFee = computed(() => {\n  return gasFees.value?.['swap_transaction']?.fees || {};\n});\n\nfunction closeGasFee() {\n  showDropdown.value = false;\n}\n\nfunction toggleDropdown() {\n  showDropdown.value = !showDropdown.value;\n}\n\nasync function getGasFees() {\n  let response = await $http.get('/data/gas_fees');\n  $store.commit('setGasFees', response.data);\n}\n\nfunction toggleAlertsDialog() {\n  emitter.$emit('clear:alert');\n  emitter.$emit('toggle:alerts-dialog', { mode: 'gas' });\n  closeGasFee();\n}\n</script>\n"],"names":["$http","inject","emitter","useEmitter","dropdownId","ref","showDropdown","$store","useStore","onMounted","getGasFees","gasFees","computed","gweiFee","_b","_a","closeGasFee","toggleDropdown","response","toggleAlertsDialog"],"mappings":"8qDA2EA,MAAMA,EAAQC,EAAO,MAAM,EACrBC,EAAUC,EAAU,EACpBC,EAAaC,EAAI,iBAAiB,KAAK,OAAM,CAAE,EAAE,EACjDC,EAAeD,EAAI,EAAK,EACxBE,EAASC,EAAQ,EAEvBC,EAAU,IAAM,CACd,YAAY,IAAM,CAChBC,GACD,EAAE,GAAK,CACV,CAAC,EAED,MAAMC,EAAUC,EAAS,IAChBL,EAAO,QAAQ,OACvB,EAEKM,EAAUD,EAAS,IAAM,SAC7B,QAAOE,GAAAC,EAAAJ,EAAQ,QAAR,YAAAI,EAAgB,mBAAhB,YAAAD,EAAqC,OAAQ,CAAA,CACtD,CAAC,EAED,SAASE,GAAc,CACrBV,EAAa,MAAQ,EACvB,CAEA,SAASW,GAAiB,CACxBX,EAAa,MAAQ,CAACA,EAAa,KACrC,CAEA,eAAeI,GAAa,CAC1B,IAAIQ,EAAW,MAAMlB,EAAM,IAAI,gBAAgB,EAC/CO,EAAO,OAAO,aAAcW,EAAS,IAAI,CAC3C,CAEA,SAASC,GAAqB,CAC5BjB,EAAQ,MAAM,aAAa,EAC3BA,EAAQ,MAAM,uBAAwB,CAAE,KAAM,KAAO,CAAA,EACrDc,GACF"}