Registry refactor hook up

src/components/_global/BalAsset/BalAsset.vue

@@ -1,7 +1,7 @@
 <template>
   <img
-    v-if="iconURL && !error"
-    :src="_url(iconURL)"
+    v-if="iconSRC && !error"
+    :src="iconSRC"
     :style="{
       width: `${size}px`,
       height: `${size}px`
@@ -16,6 +16,7 @@
 import { defineComponent, toRefs, ref, computed, watch } from 'vue';
 import useTokens from '@/composables/useTokens';
 import Avatar from '../../images/Avatar.vue';
+import useUrls from '@/composables/useUrls';
 
 export default defineComponent({
   name: 'BalAsset',
@@ -29,32 +30,45 @@ export default defineComponent({
       type: String,
       required: true
     },
+    iconURI: { type: String },
     size: {
       type: Number,
       default: 24
     }
   },
   setup(props) {
-    // COMPOSABLES
+    /**
+     * COMPOSABLES
+     */
     const { tokens } = useTokens();
+    const { resolve } = useUrls();
 
-    // DATA
+    /**
+     * STATE
+     */
     const { address } = toRefs(props);
     const error = ref(false);
 
-    // COMPUTED
-    const iconURL = computed(() => {
+    /**
+     * COMPUTED
+     */
+    const iconSRC = computed(() => {
+      if (props.iconURI) return resolve(props.iconURI);
+
       const token = tokens.value[address.value];
       if (!token) return '';
-      return token.logoURI;
+      return resolve(token.logoURI);
     });
 
-    watch(iconURL, newURL => {
+    /**
+     * WATCHERS
+     */
+    watch(iconSRC, newURL => {
       if (newURL !== '') error.value = false;
     });
 
     return {
-      iconURL,
+      iconSRC,
       error
     };
   }

src/components/_global/BalLoadingBlock/BalLoadingBlock.vue

@@ -11,20 +11,28 @@ export default defineComponent({
 
   props: {
     white: { type: Boolean, default: false },
-    square: { type: Boolean, default: false }
+    darker: { type: Boolean, default: false },
+    rounded: {
+      type: String,
+      default: 'lg',
+      validator: (val: string): boolean => ['sm', 'md', 'lg'].includes(val)
+    }
   },
 
   setup(props) {
     const { darkMode } = useDarkMode();
 
     const bgClass = computed(() => {
       if (props.white) return 'shimmer-white';
-      return darkMode.value ? 'shimmer-dark' : 'shimmer';
+      if (darkMode.value) {
+        return props.darker ? 'shimmer-dark-mode-darker' : 'shimmer-dark-mode';
+      }
+      return props.darker ? 'shimmer-light-mode-darker' : 'shimmer-light-mode';
     });
 
     const classes = computed(() => {
       return {
-        ['rounded-lg']: !props.square,
+        [`rounded-${props.rounded}`]: true,
         [bgClass.value]: true
       };
     });
@@ -63,7 +71,7 @@ export default defineComponent({
   background-size: 1000px 100%;
 }
 
-.shimmer {
+.shimmer-light-mode {
   --startColor: theme('colors.gray.50');
   --midColor: theme('colors.gray.100');
   --endColor: theme('colors.gray.50');
@@ -78,7 +86,22 @@ export default defineComponent({
   background-size: 1000px 100%;
 }
 
-.shimmer-dark {
+.shimmer-light-mode-darker {
+  --startColor: theme('colors.gray.100');
+  --midColor: theme('colors.gray.200');
+  --endColor: theme('colors.gray.100');
+
+  animation: shimmerBackground 10s infinite;
+  background: linear-gradient(
+    to right,
+    var(--startColor) 4%,
+    var(--midColor) 25%,
+    var(--endColor) 36%
+  );
+  background-size: 1000px 100%;
+}
+
+.shimmer-dark-mode {
   --startColor: theme('colors.gray.850');
   --midColor: theme('colors.gray.800');
   --endColor: theme('colors.gray.850');
@@ -92,4 +115,19 @@ export default defineComponent({
   );
   background-size: 1000px 100%;
 }
+
+.shimmer-dark-mode-darker {
+  --startColor: theme('colors.gray.700');
+  --midColor: theme('colors.gray.600');
+  --endColor: theme('colors.gray.700');
+
+  animation: shimmerBackground 10s infinite;
+  background: linear-gradient(
+    to right,
+    var(--startColor) 4%,
+    var(--midColor) 25%,
+    var(--endColor) 36%
+  );
+  background-size: 1000px 100%;
+}
 </style>

src/components/_global/BalLoadingNumber/BalLoadingNumber.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex items-center">
+    <template v-if="type === 'token'">
+      <BalLoadingBlock :class="blockClasses" rounded="sm" darker />
+      <BalLoadingBlock :class="blockClasses" rounded="sm" darker />
+      <span class="text-gray-300 dark:text-gray-500">.</span>
+      <BalLoadingBlock :class="blockClasses" rounded="sm" darker />
+      <BalLoadingBlock :class="blockClasses" rounded="sm" darker />
+      <BalLoadingBlock :class="blockClasses" rounded="sm" darker />
+      <BalLoadingBlock :class="blockClasses" rounded="sm" darker />
+    </template>
+    <template v-else-if="type === 'fiat'">
+      <span class="text-gray-300 dark:text-gray-500 mr-px">
+        {{ currencySymbol }}
+      </span>
+      <BalLoadingBlock :class="blockClasses" rounded="sm" darker />
+      <BalLoadingBlock :class="blockClasses" rounded="sm" darker />
+      <span class="text-gray-300 dark:text-gray-500">.</span>
+      <BalLoadingBlock :class="blockClasses" rounded="sm" darker />
+      <BalLoadingBlock :class="blockClasses" rounded="sm" darker />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import useUserSettings from '@/composables/useUserSettings';
+import { FiatSymbol } from '@/constants/currency';
+import { defineComponent, computed } from 'vue';
+import BalLoadingBlock from '../BalLoadingBlock/BalLoadingBlock.vue';
+
+export default defineComponent({
+  name: 'BalLoadingNumber',
+
+  components: {
+    BalLoadingBlock
+  },
+
+  props: {
+    type: {
+      type: String,
+      default: 'token',
+      validator: (val: string): boolean => ['token', 'fiat'].includes(val)
+    },
+    numberWidth: { type: String, default: '3' },
+    numberHeight: { type: String, default: '5' }
+  },
+
+  setup(props) {
+    const { currency } = useUserSettings();
+
+    const currencySymbol = computed(() => FiatSymbol[currency.value]);
+
+    const blockClasses = computed(() => [
+      `w-${props.numberWidth}`,
+      `h-${props.numberHeight}`,
+      'mr-px'
+    ]);
+
+    return { blockClasses, currencySymbol };
+  }
+});
+</script>

src/components/cards/TradeCard/GasReimbursement.vue

@@ -18,7 +18,6 @@
 <script lang="ts">
 import { PropType, defineComponent, computed, onBeforeMount, ref } from 'vue';
 import { useStore } from 'vuex';
-import { ETHER } from '@/constants/tokenlists';
 import BigNumber from 'bignumber.js';
 import { SorReturn } from '@/lib/utils/balancer/helpers/sor/sorManager';
 import { isBudgetLeft } from '@/lib/utils/balancer/bal4gas';
@@ -27,7 +26,8 @@ import { useI18n } from 'vue-i18n';
 import { EXTERNAL_LINKS } from '@/constants/links';
 import { getOriginalAddress } from '@/services/coingecko';
 import useWeb3 from '@/services/web3/useWeb3';
-import { TOKENS } from '@/constants/tokens';
+import { NATIVE_ASSET_ADDRESS, TOKENS } from '@/constants/tokens';
+import useTokens from '@/composables/useTokens';
 
 export default defineComponent({
   props: {
@@ -50,6 +50,7 @@ export default defineComponent({
     const { appNetworkConfig } = useWeb3();
     const isBalForGasBudget = ref<boolean>(false);
     const { t } = useI18n();
+    const { priceFor } = useTokens();
 
     const eligibleAssetMeta = eligibleAssetList[appNetworkConfig.network] ?? {};
     const eligibleAssets = Object.fromEntries(
@@ -68,19 +69,17 @@ export default defineComponent({
         };
       }
 
-      const ethPrice =
-        store.state.market.prices[ETHER.address.toLowerCase()]?.price || 0;
-      const balPrice =
-        store.state.market.prices[
-          getOriginalAddress(appNetworkConfig.chainId, TOKENS.AddressMap.BAL)
-        ]?.price || 0;
+      const ethPrice = priceFor(appNetworkConfig.nativeAsset.address);
+      const balPrice = priceFor(
+        getOriginalAddress(appNetworkConfig.chainId, TOKENS.AddressMap.BAL)
+      );
       const gasPrice = store.state.market.gasPrice || 0;
 
       const addressInIsEligible =
-        props.addressIn === ETHER.address ||
+        props.addressIn === NATIVE_ASSET_ADDRESS ||
         props.addressIn.toLowerCase() in eligibleAssets;
       const addressOutIsEligible =
-        props.addressOut === ETHER.address ||
+        props.addressOut === NATIVE_ASSET_ADDRESS ||
         props.addressOut.toLowerCase() in eligibleAssets;
       const reimburseAllSwaps = addressInIsEligible && addressOutIsEligible;
 

src/components/cards/TradeCard/TradeCard.vue

@@ -99,7 +99,6 @@ import useValidation, {
   TradeValidation
 } from '@/composables/trade/useValidation';
 import useSor from '@/composables/trade/useSor';
-import { ETHER } from '@/constants/tokenlists';
 
 import SuccessOverlay from '@/components/cards/SuccessOverlay.vue';
 import TradePair from '@/components/cards/TradeCard/TradePair.vue';
@@ -173,15 +172,15 @@ export default defineComponent({
     const isWrap = computed(() => {
       const config = userNetworkConfig.value;
       return (
-        tokenInAddress.value === ETHER.address &&
+        tokenInAddress.value === nativeAsset.address &&
         tokenOutAddress.value === config.addresses.weth
       );
     });
 
     const isUnwrap = computed(() => {
       const config = userNetworkConfig.value;
       return (
-        tokenOutAddress.value === ETHER.address &&
+        tokenOutAddress.value === nativeAsset.address &&
         tokenInAddress.value === config.addresses.weth
       );
     });
@@ -230,8 +229,7 @@ export default defineComponent({
       tokenInAddress,
       tokenInAmount,
       tokenOutAddress,
-      tokenOutAmount,
-      tokens
+      tokenOutAmount
     );
 
     const title = computed(() => {
@@ -280,10 +278,10 @@ export default defineComponent({
 
     async function populateInitialTokens(): Promise<void> {
       let assetIn = router.currentRoute.value.params.assetIn as string;
-      if (assetIn === ETHER.deeplinkId) assetIn = ETHER.address;
+      if (assetIn === nativeAsset.deeplinkId) assetIn = nativeAsset.address;
       else if (isAddress(assetIn)) assetIn = getAddress(assetIn);
       let assetOut = router.currentRoute.value.params.assetOut as string;
-      if (assetOut === ETHER.deeplinkId) assetOut = ETHER.address;
+      if (assetOut === nativeAsset.deeplinkId) assetOut = nativeAsset.address;
       else if (isAddress(assetOut)) assetOut = getAddress(assetOut);
 
       tokenInAddress.value = assetIn || store.state.trade.inputAsset;

src/components/cards/TradeCard/TradePair.vue

@@ -154,14 +154,13 @@
 
 <script lang="ts">
 import { defineComponent, toRefs, computed, ref } from 'vue';
-import { useStore } from 'vuex';
 
 import useNumbers from '@/composables/useNumbers';
-import { ETHER } from '@/constants/tokenlists';
 
 import TradePairToggle from '@/components/cards/TradeCard/TradePairToggle.vue';
 import SelectTokenModal from '@/components/modals/SelectTokenModal/SelectTokenModal.vue';
 import useTokens from '@/composables/useTokens';
+import { NATIVE_ASSET_ADDRESS } from '@/constants/tokens';
 
 const ETH_BUFFER = 0.1;
 
@@ -205,8 +204,7 @@ export default defineComponent({
     'change'
   ],
   setup(props, { emit }) {
-    const store = useStore();
-    const { tokens } = useTokens();
+    const { tokens, balances, injectTokens } = useTokens();
     const { fNum, toFiat } = useNumbers();
 
     const {
@@ -256,10 +254,10 @@ export default defineComponent({
     const modalSelectTokenIsOpen = ref(false);
 
     function handleMax(): void {
-      const balance = tokens.value[tokenInAddressInput.value]?.balance || '0';
+      const balance = balances.value[tokenInAddressInput.value] || '0';
       const balanceNumber = parseFloat(balance);
       const maxAmount =
-        tokenInAddressInput.value !== ETHER.address
+        tokenInAddressInput.value !== NATIVE_ASSET_ADDRESS
           ? balance
           : balanceNumber > ETH_BUFFER
           ? (balanceNumber - ETH_BUFFER).toString()
@@ -299,7 +297,7 @@ export default defineComponent({
           return;
         } else emit('tokenOutAddressChange', address);
       }
-      store.dispatch('registry/injectTokens', [address]);
+      injectTokens([address]);
     }
 
     const rateMessage = computed(() => {
@@ -338,7 +336,7 @@ export default defineComponent({
     }
 
     const balanceLabel = computed(
-      () => tokens.value[tokenInAddressInput.value]?.balance
+      () => balances.value[tokenInAddressInput.value]
     );
 
     return {