feat: add fee level selector to dex swap

src/components/common/FeeLevelSelector.vue

@@ -218,13 +218,16 @@ export default defineComponent({
 
     // get swap tx
     const swapTx = computed(() => {
-      return props.steps.find((step) => step.name === 'swap')?.transactions[0].data as SwapData;
+      return props.steps.find((step) => step.name === 'swap')?.transactions[0].data;
     });
 
     //if swap tx is exist, check from/to coins denoms to identify pool coin
     const hasPoolCoinToSwap = computed(() => {
       if (swapTx.value) {
-        return swapTx.value.from.denom.startsWith('pool') || swapTx.value.to.denom.startsWith('pool');
+        return (
+          swapTx.value[0].from.denom.startsWith('pool') ||
+          swapTx.value[swapTx.value.length - 1].to.denom.startsWith('pool')
+        );
       } else {
         return false;
       }
@@ -237,11 +240,11 @@ export default defineComponent({
       async () => {
         if (hasPoolCoinToSwap.value) {
           poolCoinDisplayDenoms.value[0] = await getTicker(
-            swapTx.value.from.denom,
+            swapTx.value[0].from.denom,
             typedstore.getters[GlobalGetterTypes.API.getDexChain],
           );
           poolCoinDisplayDenoms.value[1] = await getTicker(
-            swapTx.value.to.denom,
+            swapTx.value[swapTx.value.length - 1].to.denom,
             typedstore.getters[GlobalGetterTypes.API.getDexChain],
           );
         }
@@ -254,7 +257,7 @@ export default defineComponent({
         const swapFees = [];
         const swapFeeRate =
           parseFloat(store.getters['tendermint.liquidity.v1beta1/getParams']().params?.swap_fee_rate) / 2;
-        const tx = swapTx.value;
+        const tx = swapTx.value[0];
         const precision =
           typedstore.getters[GlobalGetterTypes.API.getDenomPrecision]({
             name: tx.from.denom, //pool coin precision is same
@@ -275,19 +278,23 @@ export default defineComponent({
     const swapDollarFee = computed(() => {
       if (swapTx.value) {
         let value = 0;
-        const tx = swapTx.value;
+        const txs = swapTx.value as SwapData[];
+        const firstTx = txs[0];
+        const lastTx = txs[txs.length - 1];
+
         const swapFeeRate =
           parseFloat(typedstore.getters['tendermint.liquidity.v1beta1/getParams']().params?.swap_fee_rate) / 2 ??
           0.0015;
 
-        const fromPrecision = typedstore.getters[GlobalGetterTypes.API.getDenomPrecision]({ name: tx.from.denom }) ?? 6;
-        const toPrecision = typedstore.getters[GlobalGetterTypes.API.getDenomPrecision]({ name: tx.to.denom }) ?? 6;
-        const fromPrice = typedstore.getters[GlobalGetterTypes.API.getPrice]({ denom: tx.from.denom });
-        const toPrice = typedstore.getters[GlobalGetterTypes.API.getPrice]({ denom: tx.to.denom });
+        const fromPrecision =
+          typedstore.getters[GlobalGetterTypes.API.getDenomPrecision]({ name: firstTx.from.denom }) ?? 6;
+        const toPrecision = typedstore.getters[GlobalGetterTypes.API.getDenomPrecision]({ name: lastTx.to.denom }) ?? 6;
+        const fromPrice = typedstore.getters[GlobalGetterTypes.API.getPrice]({ denom: firstTx.from.denom });
+        const toPrice = typedstore.getters[GlobalGetterTypes.API.getPrice]({ denom: lastTx.to.denom });
 
         value =
-          ((fromPrice * Number(tx.from.amount) * swapFeeRate) / Math.pow(10, fromPrecision) ?? 0) +
-          ((toPrice * Number(tx.to.amount) * swapFeeRate) / Math.pow(10, toPrecision) ?? 0);
+          ((fromPrice * Number(firstTx.from.amount) * swapFeeRate) / Math.pow(10, fromPrecision) ?? 0) +
+          ((toPrice * Number(lastTx.to.amount) * swapFeeRate) / Math.pow(10, toPrecision) ?? 0);
         return value;
       } else {
         return null;

src/features/swap/components/Swap.vue

@@ -35,7 +35,17 @@
         <SwapCoinOutput />
       </div>
 
-      <SwapButtonSwap :state="state" :send="send" />
+      <div>
+        <SwapButtonSwap :state="state" :send="send" />
+        <div v-if="state.matches('updating')" class="flex items-center justify-between mt-5">
+          <SkeletonLoader height="12px" width="74px" />
+          <SkeletonLoader height="12px" width="74px" />
+        </div>
+
+        <div v-if="state.context.data.steps.length" class="-text-1 mt-5 -mb-6">
+          <FeeLevelSelector :steps="state.context.data.steps" />
+        </div>
+      </div>
     </div>
 
     <SwapOverlaySettings />
@@ -48,6 +58,8 @@
 import { whenever } from '@vueuse/core';
 import { computed, nextTick, watch } from 'vue';
 
+import FeeLevelSelector from '@/components/common/FeeLevelSelector.vue';
+import SkeletonLoader from '@/components/common/loaders/SkeletonLoader.vue';
 import Button from '@/components/ui/Button.vue';
 import Icon from '@/components/ui/Icon.vue';
 import useAccount from '@/composables/useAccount';

src/features/swap/components/SwapCoin/SwapCoin.vue

@@ -29,7 +29,7 @@
 
           <template v-if="isLoadingCoin || isLoadingChain">
             <div>
-              <SkeletonLoader height="17px" width="96px" />
+              <SkeletonLoader height="13px" width="96px" />
             </div>
           </template>
           <span v-else-if="chain" class="text-muted -text-1 whitespace-nowrap text-left">
@@ -40,7 +40,9 @@
 
       <div v-if="denom" class="flex-1 flex flex-col items-end space-y-0.5">
         <SkeletonLoader v-if="isLoadingAmount" height="22px" width="82px" />
-        <SkeletonLoader v-if="isLoadingAmount" height="16px" width="82px" />
+        <span v-if="isLoadingAmount">
+          <SkeletonLoader height="13px" width="82px" />
+        </span>
         <template v-else>
           <AmountInput
             ref="inputRef"

src/features/swap/components/SwapSettings/SwapSettingsSlippage.vue

@@ -46,7 +46,7 @@
       </div>
     </div>
 
-    <dl v-if="state.matches('ready.valid')" class="grid grid-cols-[auto_1fr] gap-y-3 -text-1 mr-1">
+    <dl v-if="state.context.data.routes" class="grid grid-cols-[auto_1fr] gap-y-3 -text-1 mr-1">
       <dt class="text-muted">Limit price</dt>
       <dd class="text-right font-medium whitespace-nowrap">
         <AmountDisplay :amount="inputAmount" /> =

src/features/swap/logic/client.ts

@@ -44,7 +44,7 @@ export const fetchSwapRoutes = async (context: SwapContext, direction?: string)
     return data.routes;
   } catch (error) {
     appLogger.reportSingleError(error);
-    const cause = error.response?.data?.error ?? error.message;
+    const cause = error.response?.data?.message ?? error.message;
     if (cause) console.error('[swap]: ' + cause);
     throw error;
   }

src/features/swap/state/machine.ts

@@ -221,13 +221,19 @@ export const swapMachine = createMachine<SwapContext, SwapEvents>(
             },
           },
           valid: {
+            invoke: {
+              src: 'prepareSigningSteps',
+              onDone: {
+                actions: 'assignSteps',
+              },
+            },
             on: {
               SUBMIT: 'submitting',
             },
           },
           submitting: {
             invoke: {
-              src: 'handleSubmit',
+              src: 'prepareSigningSteps',
               onDone: {
                 target: 'confirming',
                 actions: 'assignSteps',
@@ -249,6 +255,7 @@ export const swapMachine = createMachine<SwapContext, SwapEvents>(
         },
       },
       updating: {
+        entry: 'clearSteps',
         states: {
           routes: {
             states: {
@@ -333,7 +340,7 @@ export const swapMachine = createMachine<SwapContext, SwapEvents>(
 
         return Promise.resolve(true);
       },
-      handleSubmit: async (context) => {
+      prepareSigningSteps: async (context) => {
         return logic.prepareRouteToSign(context, context.selectedRouteIndex);
       },
       getRoutesFromOutput: async (context) => logic.fetchSwapRoutes(context, 'output'),
@@ -438,6 +445,10 @@ export const swapMachine = createMachine<SwapContext, SwapEvents>(
           inputAmount: undefined,
           outputCoin: event.value?.baseDenom === context.outputCoin?.baseDenom ? undefined : context.outputCoin,
           outputAmount: undefined,
+          data: {
+            ...context.data,
+            steps: [],
+          },
         };
       }),
       updateInputCoinDex: assign({
@@ -451,6 +462,10 @@ export const swapMachine = createMachine<SwapContext, SwapEvents>(
           outputAmount: undefined,
           inputCoin: event.value?.baseDenom === context.inputCoin?.baseDenom ? undefined : context.inputCoin,
           inputAmount: context.outputAmount ? undefined : context.inputAmount,
+          data: {
+            ...context.data,
+            steps: [],
+          },
         };
       }),
       setSelectedRouteIndex: assign({