diff --git a/.eslintignore b/.eslintignore
index 3f8616193c..424ac6597f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,4 +4,5 @@ dist/
 tokenlists.json
 public/data/tokenlists/*.json
 package-lock.json
-components.d.ts
\ No newline at end of file
+components.d.ts
+auto-imports.d.ts
\ No newline at end of file
diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
new file mode 100644
index 0000000000..42fca42270
--- /dev/null
+++ b/.eslintrc-auto-import.json
@@ -0,0 +1,61 @@
+{
+  "globals": {
+    "EffectScope": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "resolveDirective": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useLink": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}
diff --git a/.eslintrc.js b/.eslintrc.js
index 96782ba79e..ab6cf0ad87 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -11,6 +11,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:vue/vue3-recommended',
     'plugin:prettier-vue/recommended',
+    './.eslintrc-auto-import.json',
   ],
 
   plugins: ['simple-import-sort', 'tailwindcss'],
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
new file mode 100644
index 0000000000..00b0fed020
--- /dev/null
+++ b/auto-imports.d.ts
@@ -0,0 +1,61 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveDirective: typeof import('vue')['resolveDirective']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
diff --git a/src/components/_global/BalAccordion/BalAccordion.vue b/src/components/_global/BalAccordion/BalAccordion.vue
index df1a9c833d..1b1b02442d 100644
--- a/src/components/_global/BalAccordion/BalAccordion.vue
+++ b/src/components/_global/BalAccordion/BalAccordion.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ComponentPublicInstance, nextTick, onMounted, ref, watch } from 'vue';
+import { ComponentPublicInstance } from 'vue';
 
 type Section = {
   title: string;
diff --git a/src/components/_global/BalActionSteps/BalActionSteps.vue b/src/components/_global/BalActionSteps/BalActionSteps.vue
index 4eac4819bd..c8747342c2 100644
--- a/src/components/_global/BalActionSteps/BalActionSteps.vue
+++ b/src/components/_global/BalActionSteps/BalActionSteps.vue
@@ -12,7 +12,6 @@ import {
   TransactionReceipt,
   TransactionResponse,
 } from '@ethersproject/abstract-provider';
-import { computed, ref, watch } from 'vue';
 
 import AnimatePresence from '@/components/animate/AnimatePresence.vue';
 import useEthers from '@/composables/useEthers';
diff --git a/src/components/_global/BalAlert/BalAlert.vue b/src/components/_global/BalAlert/BalAlert.vue
index 1d7f79b31c..5297ca3b29 100644
--- a/src/components/_global/BalAlert/BalAlert.vue
+++ b/src/components/_global/BalAlert/BalAlert.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { PropType } from 'vue';
 
 import BalBtn from '../BalBtn/BalBtn.vue';
 import BalIcon from '../BalIcon/BalIcon.vue';
diff --git a/src/components/_global/BalAsset/BalAsset.vue b/src/components/_global/BalAsset/BalAsset.vue
index af0e15654b..b46ec06fcc 100644
--- a/src/components/_global/BalAsset/BalAsset.vue
+++ b/src/components/_global/BalAsset/BalAsset.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, ref, toRefs, watch } from 'vue';
-
 import { useTokens } from '@/providers/tokens.provider';
 import useUrls from '@/composables/useUrls';
 import { TokenInfo } from '@/types/TokenList';
diff --git a/src/components/_global/BalBlankSlate/BalBlankSlate.vue b/src/components/_global/BalBlankSlate/BalBlankSlate.vue
index d5cd946a52..a16b0ac361 100644
--- a/src/components/_global/BalBlankSlate/BalBlankSlate.vue
+++ b/src/components/_global/BalBlankSlate/BalBlankSlate.vue
@@ -4,14 +4,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'BalBlankSlate',
-});
-</script>
-
 <style>
 .bal-blank-slate {
   @apply border dark:border-gray-700 border-dashed p-6 flex flex-col items-start justify-center rounded-lg;
diff --git a/src/components/_global/BalBreakdown/BalBreakdown.vue b/src/components/_global/BalBreakdown/BalBreakdown.vue
index 7f97de2390..af875e2382 100644
--- a/src/components/_global/BalBreakdown/BalBreakdown.vue
+++ b/src/components/_global/BalBreakdown/BalBreakdown.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
 /**
  * TYPES
  */
diff --git a/src/components/_global/BalBtn/BalBtn.vue b/src/components/_global/BalBtn/BalBtn.vue
index e9bfeeca7a..e7bc82b259 100644
--- a/src/components/_global/BalBtn/BalBtn.vue
+++ b/src/components/_global/BalBtn/BalBtn.vue
@@ -20,8 +20,6 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-
 import BalLoadingIcon from '../BalLoadingIcon/BalLoadingIcon.vue';
 
 export default defineComponent({
diff --git a/src/components/_global/BalBtnGroup/BalBtnGroup.vue b/src/components/_global/BalBtnGroup/BalBtnGroup.vue
index 0e88fb0e77..926e4ccace 100644
--- a/src/components/_global/BalBtnGroup/BalBtnGroup.vue
+++ b/src/components/_global/BalBtnGroup/BalBtnGroup.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import omit from 'lodash/omit';
-import { computed, defineComponent, PropType } from 'vue';
+import { PropType } from 'vue';
 
 interface Option {
   value: string | number;
diff --git a/src/components/_global/BalCard/BalCard.vue b/src/components/_global/BalCard/BalCard.vue
index bdaabef54c..0407296942 100644
--- a/src/components/_global/BalCard/BalCard.vue
+++ b/src/components/_global/BalCard/BalCard.vue
@@ -28,8 +28,6 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-
 export default defineComponent({
   name: 'BalCard',
 
diff --git a/src/components/_global/BalChart/BalChart.vue b/src/components/_global/BalChart/BalChart.vue
index 9c21ae745d..a727a0ed70 100644
--- a/src/components/_global/BalChart/BalChart.vue
+++ b/src/components/_global/BalChart/BalChart.vue
@@ -4,7 +4,6 @@ import { GridOption } from 'echarts/types/dist/shared';
 import { last } from 'lodash';
 import { Dictionary } from 'lodash';
 import numeral from 'numeral';
-import { computed, onMounted, ref, watch } from 'vue';
 import ECharts from 'vue-echarts';
 
 import useDarkMode from '@/composables/useDarkMode';
diff --git a/src/components/_global/BalCheckbox/BalCheckbox.vue b/src/components/_global/BalCheckbox/BalCheckbox.vue
index 44339b35a5..d808c9926b 100644
--- a/src/components/_global/BalCheckbox/BalCheckbox.vue
+++ b/src/components/_global/BalCheckbox/BalCheckbox.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue';
+import { PropType } from 'vue';
 
 import { RuleFunction, Rules } from '@/types';
 
diff --git a/src/components/_global/BalChip/composables/useChipStyles.ts b/src/components/_global/BalChip/composables/useChipStyles.ts
index afd1dfed7f..81ab4fd8f2 100644
--- a/src/components/_global/BalChip/composables/useChipStyles.ts
+++ b/src/components/_global/BalChip/composables/useChipStyles.ts
@@ -1,5 +1,3 @@
-import { computed } from 'vue';
-
 export function useChipClasses(props) {
   const sizeClasses = () => {
     switch (props.size) {
diff --git a/src/components/_global/BalDropdown/BalDropdown.vue b/src/components/_global/BalDropdown/BalDropdown.vue
index 388a1308f5..82d94f6fc2 100644
--- a/src/components/_global/BalDropdown/BalDropdown.vue
+++ b/src/components/_global/BalDropdown/BalDropdown.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-
 /**
  * TYPES
  */
diff --git a/src/components/_global/BalFlexGrid/BalFlexGrid.vue b/src/components/_global/BalFlexGrid/BalFlexGrid.vue
index eef8fdf440..034f1eb81e 100644
--- a/src/components/_global/BalFlexGrid/BalFlexGrid.vue
+++ b/src/components/_global/BalFlexGrid/BalFlexGrid.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent, h, VNodeArrayChildren } from 'vue';
+import { VNodeArrayChildren } from 'vue';
 
 export default defineComponent({
   name: 'BalFlexGrid',
diff --git a/src/components/_global/BalForm/BalForm.vue b/src/components/_global/BalForm/BalForm.vue
index 262daa03e8..a225c54d25 100644
--- a/src/components/_global/BalForm/BalForm.vue
+++ b/src/components/_global/BalForm/BalForm.vue
@@ -10,8 +10,6 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
-
 function useFormValidations() {
   const errors = ref([] as Array<string>);
   const validatable = ref([] as Array<any>);
diff --git a/src/components/_global/BalHorizSteps/BalHorizSteps.vue b/src/components/_global/BalHorizSteps/BalHorizSteps.vue
index d1d8e7955d..f5ace9dd56 100644
--- a/src/components/_global/BalHorizSteps/BalHorizSteps.vue
+++ b/src/components/_global/BalHorizSteps/BalHorizSteps.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
 import useWeb3 from '@/services/web3/useWeb3';
 import { getConnectorLogo } from '@/services/web3/web3.plugin';
 import { Step, StepState } from '@/types';
diff --git a/src/components/_global/BalIcon/BalIcon.vue b/src/components/_global/BalIcon/BalIcon.vue
index 45d5185341..e19bedfe69 100644
--- a/src/components/_global/BalIcon/BalIcon.vue
+++ b/src/components/_global/BalIcon/BalIcon.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import feather from 'feather-icons';
-import { computed, onMounted } from 'vue';
 
 /**
  * TYPES
diff --git a/src/components/_global/BalImage/BalImage.vue b/src/components/_global/BalImage/BalImage.vue
index 80d26da404..5e9512742b 100644
--- a/src/components/_global/BalImage/BalImage.vue
+++ b/src/components/_global/BalImage/BalImage.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-
 /**
  * TYPES
  */
diff --git a/src/components/_global/BalInlineInput/BalInlineInput.vue b/src/components/_global/BalInlineInput/BalInlineInput.vue
index 263ce46e37..169f462559 100644
--- a/src/components/_global/BalInlineInput/BalInlineInput.vue
+++ b/src/components/_global/BalInlineInput/BalInlineInput.vue
@@ -7,7 +7,6 @@ export default {
 
 <script setup lang="ts">
 import { omit } from 'lodash';
-import { computed, ref, useAttrs } from 'vue';
 
 import useInputEvents from '@/components/_global/BalTextInput/composables/useInputEvents';
 import useInputValidation from '@/components/_global/BalTextInput/composables/useInputValidation';
diff --git a/src/components/_global/BalInlineInput/composables/useInlineInputStyles.ts b/src/components/_global/BalInlineInput/composables/useInlineInputStyles.ts
index 52c5fb45e3..461e66005d 100644
--- a/src/components/_global/BalInlineInput/composables/useInlineInputStyles.ts
+++ b/src/components/_global/BalInlineInput/composables/useInlineInputStyles.ts
@@ -1,4 +1,4 @@
-import { computed, Ref } from 'vue';
+import { Ref } from 'vue';
 
 export default function useInputStyles(props, isInvalid: Ref<boolean>, attrs) {
   const extPaddingClass = (): string => {
diff --git a/src/components/_global/BalLazy/BalLazy.vue b/src/components/_global/BalLazy/BalLazy.vue
index 278e2c0bae..27bc15487a 100644
--- a/src/components/_global/BalLazy/BalLazy.vue
+++ b/src/components/_global/BalLazy/BalLazy.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { nextTick, ref } from 'vue';
 const shouldRender = ref(false);
 nextTick(() => {
   shouldRender.value = true;
diff --git a/src/components/_global/BalLink/BalLink.vue b/src/components/_global/BalLink/BalLink.vue
index 1bf8587936..373e8ce337 100644
--- a/src/components/_global/BalLink/BalLink.vue
+++ b/src/components/_global/BalLink/BalLink.vue
@@ -5,8 +5,6 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, useAttrs } from 'vue';
-
 /**
  * TYPES
  */
diff --git a/src/components/_global/BalLoadingBlock/BalLoadingBlock.vue b/src/components/_global/BalLoadingBlock/BalLoadingBlock.vue
index 6fd93b1506..a2e1e3f2ee 100644
--- a/src/components/_global/BalLoadingBlock/BalLoadingBlock.vue
+++ b/src/components/_global/BalLoadingBlock/BalLoadingBlock.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-
 import useDarkMode from '@/composables/useDarkMode';
 
 /**
diff --git a/src/components/_global/BalLoadingIcon/BalLoadingIcon.vue b/src/components/_global/BalLoadingIcon/BalLoadingIcon.vue
index f082929eeb..c3d128c948 100644
--- a/src/components/_global/BalLoadingIcon/BalLoadingIcon.vue
+++ b/src/components/_global/BalLoadingIcon/BalLoadingIcon.vue
@@ -6,8 +6,6 @@
 </template>
 
 <script>
-import { computed, defineComponent } from 'vue';
-
 export default defineComponent({
   name: 'BalLoadingIcon',
 
diff --git a/src/components/_global/BalLoadingNumber/BalLoadingNumber.vue b/src/components/_global/BalLoadingNumber/BalLoadingNumber.vue
index 9448bbf833..736c241194 100644
--- a/src/components/_global/BalLoadingNumber/BalLoadingNumber.vue
+++ b/src/components/_global/BalLoadingNumber/BalLoadingNumber.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-
 import { useUserSettings } from '@/providers/user-settings.provider';
 import { FiatSymbol } from '@/constants/currency';
 
diff --git a/src/components/_global/BalModal/BalModal.vue b/src/components/_global/BalModal/BalModal.vue
index f6ba4f574d..7ae1ff9124 100644
--- a/src/components/_global/BalModal/BalModal.vue
+++ b/src/components/_global/BalModal/BalModal.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-
 import BalCard from '../BalCard/BalCard.vue';
 
 /**
diff --git a/src/components/_global/BalPopover/BalPopover.vue b/src/components/_global/BalPopover/BalPopover.vue
index 09e4c850a1..96176d5b37 100644
--- a/src/components/_global/BalPopover/BalPopover.vue
+++ b/src/components/_global/BalPopover/BalPopover.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-
 type PopoverTrigger = 'click' | 'hover';
 
 type Props = {
diff --git a/src/components/_global/BalProgressBar/BalProgressBar.vue b/src/components/_global/BalProgressBar/BalProgressBar.vue
index 8d6c4e1674..a952b8bdca 100644
--- a/src/components/_global/BalProgressBar/BalProgressBar.vue
+++ b/src/components/_global/BalProgressBar/BalProgressBar.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
 /**
  * TYPES
  */
diff --git a/src/components/_global/BalRadio/BalRadio.vue b/src/components/_global/BalRadio/BalRadio.vue
index df34ec4c1f..fd3b49a0c8 100644
--- a/src/components/_global/BalRadio/BalRadio.vue
+++ b/src/components/_global/BalRadio/BalRadio.vue
@@ -23,8 +23,6 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-
 export default defineComponent({
   name: 'BalRadio',
 
diff --git a/src/components/_global/BalRangeInput/BalRangeInput.vue b/src/components/_global/BalRangeInput/BalRangeInput.vue
index 99113bf956..155270f8f7 100644
--- a/src/components/_global/BalRangeInput/BalRangeInput.vue
+++ b/src/components/_global/BalRangeInput/BalRangeInput.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import 'vue-slider-component/theme/antd.css';
 
-import { computed } from 'vue';
 import VueSlider, { DefineComponent as TVueSlider } from 'vue-slider-component';
 
 // Note that we are explicitly importing from 'tailwind.config.js' which is a vite alias (see vite.config.ts)
diff --git a/src/components/_global/BalSelectInput/BalSelectInput.vue b/src/components/_global/BalSelectInput/BalSelectInput.vue
index 3dba1ada7a..9c1fca7c37 100644
--- a/src/components/_global/BalSelectInput/BalSelectInput.vue
+++ b/src/components/_global/BalSelectInput/BalSelectInput.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue';
+import { PropType } from 'vue';
 
 import { RuleFunction, Rules } from '@/types';
 
diff --git a/src/components/_global/BalStack/BalStack.vue b/src/components/_global/BalStack/BalStack.vue
index 64cd2f73b0..6534731f74 100644
--- a/src/components/_global/BalStack/BalStack.vue
+++ b/src/components/_global/BalStack/BalStack.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, h, PropType } from 'vue';
+import { PropType } from 'vue';
 
 type Spacing = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | 'none';
 type Alignment = 'center' | 'start' | 'end' | 'between';
diff --git a/src/components/_global/BalTable/BalTable.vue b/src/components/_global/BalTable/BalTable.vue
index 8f1919b818..0d999b5b90 100644
--- a/src/components/_global/BalTable/BalTable.vue
+++ b/src/components/_global/BalTable/BalTable.vue
@@ -4,7 +4,6 @@ import BalTableRow from './BalTableRow.vue';
 import TotalsRow from './TotalsRow.vue';
 import { Sticky, Data, ColumnDefinition } from './types';
 import { sortBy, sumBy } from 'lodash';
-import { computed, onMounted, ref, watch, toRef } from 'vue';
 
 import PinHeader from './PinHeader.vue';
 
diff --git a/src/components/_global/BalTabs/BalTabs.vue b/src/components/_global/BalTabs/BalTabs.vue
index dba65875c7..ebaad3d21a 100644
--- a/src/components/_global/BalTabs/BalTabs.vue
+++ b/src/components/_global/BalTabs/BalTabs.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
 interface Tab {
   value: string | number;
   label: string;
diff --git a/src/components/_global/BalTextInput/BalTextInput.vue b/src/components/_global/BalTextInput/BalTextInput.vue
index 5bad2c5da0..0db48e982c 100644
--- a/src/components/_global/BalTextInput/BalTextInput.vue
+++ b/src/components/_global/BalTextInput/BalTextInput.vue
@@ -7,7 +7,6 @@ export default {
 
 <script setup lang="ts">
 import { omit } from 'lodash';
-import { computed, onMounted, ref, useAttrs } from 'vue';
 
 import { Rules } from '@/types';
 
diff --git a/src/components/_global/BalTextInput/composables/useInputEvents.ts b/src/components/_global/BalTextInput/composables/useInputEvents.ts
index 923d3bd6b5..809d29b476 100644
--- a/src/components/_global/BalTextInput/composables/useInputEvents.ts
+++ b/src/components/_global/BalTextInput/composables/useInputEvents.ts
@@ -1,4 +1,3 @@
-import { ref } from 'vue';
 import { overflowProtected } from '@/components/_global/BalTextInput/helpers';
 /**
  * HELPERS
diff --git a/src/components/_global/BalTextInput/composables/useInputStyles.ts b/src/components/_global/BalTextInput/composables/useInputStyles.ts
index 6749c5f20f..10bece3e03 100644
--- a/src/components/_global/BalTextInput/composables/useInputStyles.ts
+++ b/src/components/_global/BalTextInput/composables/useInputStyles.ts
@@ -1,4 +1,4 @@
-import { computed, Ref } from 'vue';
+import { Ref } from 'vue';
 
 export default function useInputStyles(
   props,
diff --git a/src/components/_global/BalTextInput/composables/useInputValidation.ts b/src/components/_global/BalTextInput/composables/useInputValidation.ts
index 48444ed3ea..f14b2a0636 100644
--- a/src/components/_global/BalTextInput/composables/useInputValidation.ts
+++ b/src/components/_global/BalTextInput/composables/useInputValidation.ts
@@ -1,5 +1,3 @@
-import { computed, ref, watch, watchEffect } from 'vue';
-
 import { RuleFunction } from '@/types';
 
 export default function useInputValidation(props, emit) {
diff --git a/src/components/_global/BalToggle/BalToggle.vue b/src/components/_global/BalToggle/BalToggle.vue
index 56f03dcbbe..66072762a7 100644
--- a/src/components/_global/BalToggle/BalToggle.vue
+++ b/src/components/_global/BalToggle/BalToggle.vue
@@ -16,7 +16,6 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'BalToggle',
   inheritAttrs: false,
diff --git a/src/components/_global/BalTooltip/BalTooltip.vue b/src/components/_global/BalTooltip/BalTooltip.vue
index d2a561eb23..329eb234f6 100644
--- a/src/components/_global/BalTooltip/BalTooltip.vue
+++ b/src/components/_global/BalTooltip/BalTooltip.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { createPopper, Instance as PopperInstance } from '@popperjs/core';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 import BalIcon, { IconSize } from '../BalIcon/BalIcon.vue';
 
diff --git a/src/components/_global/BalVerticalSteps/BalVerticalSteps.vue b/src/components/_global/BalVerticalSteps/BalVerticalSteps.vue
index 61d255a7ff..b0592f9916 100644
--- a/src/components/_global/BalVerticalSteps/BalVerticalSteps.vue
+++ b/src/components/_global/BalVerticalSteps/BalVerticalSteps.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-
 import { getActiveClassName } from '@/components/utils';
 import { StepState } from '@/types';
 
diff --git a/src/components/_global/shapes/BalCircle/BalCircle.vue b/src/components/_global/shapes/BalCircle/BalCircle.vue
index 2ca3f6088e..7c60d050d9 100644
--- a/src/components/_global/shapes/BalCircle/BalCircle.vue
+++ b/src/components/_global/shapes/BalCircle/BalCircle.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
 type Props = {
   size?: string;
   color?: string;
diff --git a/src/components/animate/AnimatePresence.vue b/src/components/animate/AnimatePresence.vue
index 168989eaa4..f94355ba8b 100644
--- a/src/components/animate/AnimatePresence.vue
+++ b/src/components/animate/AnimatePresence.vue
@@ -14,14 +14,7 @@
 
 <script lang="ts">
 import anime, { AnimeParams } from 'animejs';
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  PropType,
-  ref,
-  watch,
-} from 'vue';
+import { PropType } from 'vue';
 export default defineComponent({
   props: {
     initial: {
diff --git a/src/components/btns/ClaimBalBtn/ClaimBalBtn.vue b/src/components/btns/ClaimBalBtn/ClaimBalBtn.vue
index 2f15b30a66..e921f3a1a7 100644
--- a/src/components/btns/ClaimBalBtn/ClaimBalBtn.vue
+++ b/src/components/btns/ClaimBalBtn/ClaimBalBtn.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { getAddress } from '@ethersproject/address';
-import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import TxActionBtn from '@/components/btns/TxActionBtn/TxActionBtn.vue';
diff --git a/src/components/btns/DripBtn/DripBtn.vue b/src/components/btns/DripBtn/DripBtn.vue
index 15d94bd342..434a9f27fa 100644
--- a/src/components/btns/DripBtn/DripBtn.vue
+++ b/src/components/btns/DripBtn/DripBtn.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-
 import { faucet } from '@/services/balancer/contracts/contracts/faucet';
 
 import TxActionBtn from '../TxActionBtn/TxActionBtn.vue';
diff --git a/src/components/btns/TxActionBtn/TxActionBtn.vue b/src/components/btns/TxActionBtn/TxActionBtn.vue
index fd3052d114..13f158975f 100644
--- a/src/components/btns/TxActionBtn/TxActionBtn.vue
+++ b/src/components/btns/TxActionBtn/TxActionBtn.vue
@@ -3,7 +3,6 @@ import {
   TransactionReceipt,
   TransactionResponse,
 } from '@ethersproject/abstract-provider';
-import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import useEthers from '@/composables/useEthers';
diff --git a/src/components/cards/CreatePool/ChooseWeights.vue b/src/components/cards/CreatePool/ChooseWeights.vue
index 9f2fc3e61a..12e03bee52 100644
--- a/src/components/cards/CreatePool/ChooseWeights.vue
+++ b/src/components/cards/CreatePool/ChooseWeights.vue
@@ -1,15 +1,7 @@
 <script setup lang="ts">
 import anime from 'animejs';
 import { sum, sumBy, uniqueId } from 'lodash';
-import {
-  computed,
-  nextTick,
-  onBeforeUpdate,
-  onMounted,
-  ref,
-  watch,
-  ComponentPublicInstance,
-} from 'vue';
+import { ComponentPublicInstance } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import AnimatePresence from '@/components/animate/AnimatePresence.vue';
diff --git a/src/components/cards/CreatePool/CreateActions.vue b/src/components/cards/CreatePool/CreateActions.vue
index d51d1a78ed..6c62276c14 100644
--- a/src/components/cards/CreatePool/CreateActions.vue
+++ b/src/components/cards/CreatePool/CreateActions.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { TransactionReceipt } from '@ethersproject/abstract-provider';
-import { computed, onBeforeMount, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import BalActionSteps from '@/components/_global/BalActionSteps/BalActionSteps.vue';
diff --git a/src/components/cards/CreatePool/InitialLiquidity.vue b/src/components/cards/CreatePool/InitialLiquidity.vue
index 13295e8130..8f05192802 100644
--- a/src/components/cards/CreatePool/InitialLiquidity.vue
+++ b/src/components/cards/CreatePool/InitialLiquidity.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import AnimatePresence from '@/components/animate/AnimatePresence.vue';
diff --git a/src/components/cards/CreatePool/PoolFees.vue b/src/components/cards/CreatePool/PoolFees.vue
index f87d424370..60bd57044a 100644
--- a/src/components/cards/CreatePool/PoolFees.vue
+++ b/src/components/cards/CreatePool/PoolFees.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { isAddress } from '@ethersproject/address';
-import { computed, nextTick, ref } from 'vue';
 
 import usePoolCreation from '@/composables/pools/usePoolCreation';
 import useNumbers from '@/composables/useNumbers';
diff --git a/src/components/cards/CreatePool/PoolSummary.vue b/src/components/cards/CreatePool/PoolSummary.vue
index b87c9a67ac..b6c6711715 100644
--- a/src/components/cards/CreatePool/PoolSummary.vue
+++ b/src/components/cards/CreatePool/PoolSummary.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { prominent } from 'color.js';
 import * as echarts from 'echarts/core';
-import { computed, nextTick, ref, watch } from 'vue';
 import ECharts from 'vue-echarts';
 
 import usePoolCreation from '@/composables/pools/usePoolCreation';
diff --git a/src/components/cards/CreatePool/PreviewPool.vue b/src/components/cards/CreatePool/PreviewPool.vue
index 69ad9e8e8d..4b148ae7f4 100644
--- a/src/components/cards/CreatePool/PreviewPool.vue
+++ b/src/components/cards/CreatePool/PreviewPool.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import BigNumber from 'bignumber.js';
-import { computed, onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import AnimatePresence from '@/components/animate/AnimatePresence.vue';
diff --git a/src/components/cards/CreatePool/SimilarPools.vue b/src/components/cards/CreatePool/SimilarPools.vue
index a627b9bdea..195a45073a 100644
--- a/src/components/cards/CreatePool/SimilarPools.vue
+++ b/src/components/cards/CreatePool/SimilarPools.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { orderBy, take } from 'lodash';
-import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import TokenPills from '@/components/tables/PoolsTable/TokenPills/TokenPills.vue';
diff --git a/src/components/cards/CreatePool/TokenPrices.vue b/src/components/cards/CreatePool/TokenPrices.vue
index e256e63a33..d641dcc46f 100644
--- a/src/components/cards/CreatePool/TokenPrices.vue
+++ b/src/components/cards/CreatePool/TokenPrices.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-
 import usePoolCreation from '@/composables/pools/usePoolCreation';
 import useBreakpoints from '@/composables/useBreakpoints';
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
diff --git a/src/components/cards/CreatePool/WalletInitialLiquidity.vue b/src/components/cards/CreatePool/WalletInitialLiquidity.vue
index bb859bfd1f..7b7988c970 100644
--- a/src/components/cards/CreatePool/WalletInitialLiquidity.vue
+++ b/src/components/cards/CreatePool/WalletInitialLiquidity.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { sumBy } from 'lodash';
-import { computed } from 'vue';
 
 import usePoolCreation from '@/composables/pools/usePoolCreation';
 import useBreakpoints from '@/composables/useBreakpoints';
diff --git a/src/components/cards/CreatePool/WalletPoolTokens.vue b/src/components/cards/CreatePool/WalletPoolTokens.vue
index 871721884a..75feff74d6 100644
--- a/src/components/cards/CreatePool/WalletPoolTokens.vue
+++ b/src/components/cards/CreatePool/WalletPoolTokens.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { sumBy } from 'lodash';
-import { computed } from 'vue';
 
 import AnimatePresence from '@/components/animate/AnimatePresence.vue';
 import usePoolCreation from '@/composables/pools/usePoolCreation';
diff --git a/src/components/cards/MyPoolBalancesCard/MyPoolBalancesCard.vue b/src/components/cards/MyPoolBalancesCard/MyPoolBalancesCard.vue
index e7a95ed208..cbe96978b4 100644
--- a/src/components/cards/MyPoolBalancesCard/MyPoolBalancesCard.vue
+++ b/src/components/cards/MyPoolBalancesCard/MyPoolBalancesCard.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, ref, toRef } from 'vue';
-
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
 import { tokensListExclBpt, usePool } from '@/composables/usePool';
 // Composables
diff --git a/src/components/cards/MyPoolBalancesCard/components/AssetRow.vue b/src/components/cards/MyPoolBalancesCard/components/AssetRow.vue
index 098533bb3a..28ad74b662 100644
--- a/src/components/cards/MyPoolBalancesCard/components/AssetRow.vue
+++ b/src/components/cards/MyPoolBalancesCard/components/AssetRow.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
 import { useTokens } from '@/providers/tokens.provider';
 
diff --git a/src/components/cards/MyWallet/MyWallet.vue b/src/components/cards/MyWallet/MyWallet.vue
index b5a016df12..bd91e65b08 100644
--- a/src/components/cards/MyWallet/MyWallet.vue
+++ b/src/components/cards/MyWallet/MyWallet.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import useBreakpoints from '@/composables/useBreakpoints';
diff --git a/src/components/cards/MyWalletTokensCard/MyWalletTokensCard.vue b/src/components/cards/MyWalletTokensCard/MyWalletTokensCard.vue
index 85afff6dcd..b348a21ea3 100644
--- a/src/components/cards/MyWalletTokensCard/MyWalletTokensCard.vue
+++ b/src/components/cards/MyWalletTokensCard/MyWalletTokensCard.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { computed, toRef } from 'vue';
-import { useRoute } from 'vue-router';
-
 // Composables
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
 import { tokensListExclBpt, usePool } from '@/composables/usePool';
diff --git a/src/components/cards/MyWalletTokensCard/components/AssetRow.vue b/src/components/cards/MyWalletTokensCard/components/AssetRow.vue
index 9b4823e21b..0f14b37a13 100644
--- a/src/components/cards/MyWalletTokensCard/components/AssetRow.vue
+++ b/src/components/cards/MyWalletTokensCard/components/AssetRow.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
 import { useTokens } from '@/providers/tokens.provider';
 
diff --git a/src/components/cards/PairPriceGraph/PairPriceGraph.vue b/src/components/cards/PairPriceGraph/PairPriceGraph.vue
index 7cfa37e50f..ecfba1c919 100644
--- a/src/components/cards/PairPriceGraph/PairPriceGraph.vue
+++ b/src/components/cards/PairPriceGraph/PairPriceGraph.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { format, fromUnixTime } from 'date-fns';
 import { Dictionary, mapKeys, mapValues, pickBy, toPairs } from 'lodash';
-import { computed, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuery } from 'vue-query';
 
diff --git a/src/components/cards/SuccessOverlay.vue b/src/components/cards/SuccessOverlay.vue
index 9cac9bb826..cd6b62cf3a 100644
--- a/src/components/cards/SuccessOverlay.vue
+++ b/src/components/cards/SuccessOverlay.vue
@@ -31,8 +31,6 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-
 export default defineComponent({
   name: 'SuccessOverlay',
 
diff --git a/src/components/cards/SwapCard/SwapCard.vue b/src/components/cards/SwapCard/SwapCard.vue
index 5424efb421..389b93d88f 100644
--- a/src/components/cards/SwapCard/SwapCard.vue
+++ b/src/components/cards/SwapCard/SwapCard.vue
@@ -161,7 +161,6 @@
 import { SubgraphPoolBase } from '@balancer-labs/sdk';
 import { getAddress, isAddress } from '@ethersproject/address';
 import { formatUnits } from '@ethersproject/units';
-import { computed, defineComponent, onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
diff --git a/src/components/cards/SwapCard/SwapPair.vue b/src/components/cards/SwapCard/SwapPair.vue
index 0a1cfb0b66..f08d07d013 100644
--- a/src/components/cards/SwapCard/SwapPair.vue
+++ b/src/components/cards/SwapCard/SwapPair.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect, onMounted } from 'vue';
-
 import TokenInput from '@/components/inputs/TokenInput/TokenInput.vue';
 import { UseSwapping } from '@/composables/swap/useSwapping';
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
diff --git a/src/components/cards/SwapCard/SwapPairToggle.vue b/src/components/cards/SwapCard/SwapPairToggle.vue
index db0ad45af9..ace350dfdc 100644
--- a/src/components/cards/SwapCard/SwapPairToggle.vue
+++ b/src/components/cards/SwapCard/SwapPairToggle.vue
@@ -23,8 +23,6 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
-
 export default defineComponent({
   emits: ['toggle'],
   setup(_props, { emit }) {
diff --git a/src/components/cards/SwapCard/SwapRoute.vue b/src/components/cards/SwapCard/SwapRoute.vue
index f1408b8076..54459ae82d 100644
--- a/src/components/cards/SwapCard/SwapRoute.vue
+++ b/src/components/cards/SwapCard/SwapRoute.vue
@@ -3,7 +3,6 @@ import { SubgraphPoolBase, SwapV2 } from '@balancer-labs/sdk';
 import { getAddress } from '@ethersproject/address';
 import { AddressZero } from '@ethersproject/constants';
 import BigNumber from 'bignumber.js';
-import { computed, ref } from 'vue';
 
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
 import { useTokens } from '@/providers/tokens.provider';
diff --git a/tsconfig.json b/tsconfig.json
index 18c8d2b050..1316fe55bc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,6 +30,7 @@
   },
   "include": [
     "components.d.ts",
+    "auto-imports.d.ts",
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
diff --git a/vite.config.ts b/vite.config.ts
index 816ab2debb..f0d0ace4da 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,7 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve, dirname } from 'path';
 import { fileURLToPath } from 'url';
-// import AutoImport from 'unplugin-auto-import/vite'
+import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
 import { loadEnv, Plugin } from 'vite';
 import { defineConfig } from 'vitest/config';
@@ -30,16 +30,13 @@ export default defineConfig(({ mode }) => {
     }),
     //cast to Plugin to avoid TS errors in defineConfig
     nodePolyfills() as Plugin,
-    // AutoImport({
-    //   imports: [
-    //     'vue',
-    //     'vue-router',
-    //   ],
-    //   dts: 'src/auto-imports.d.ts',
-    //   eslintrc: {
-    //     enabled: true,
-    //   },
-    // }),
+    AutoImport({
+      imports: ['vue', 'vue-router'],
+      types: ['vue'],
+      eslintrc: {
+        enabled: true,
+      },
+    }),
     Components({
       dirs: ['src/components/_global/**'],
       extensions: ['vue'],