Hub: rework discount to composable

components/HubDepositForm.vue

@@ -8,7 +8,6 @@ import QrcodeVue from 'qrcode.vue';
 import autosize from 'v-autosize';
 import * as web3 from '@/api/web3.js';
 import {getTokenDecimals, getEvmNetworkName, fromErcDecimals, toErcDecimals, getHubNetworkByChain} from '@/api/web3.js';
-import {getDiscountForHolder} from '@/api/hub.js';
 import Big from '~/assets/big.js';
 import {pretty, prettyPrecise, prettyRound} from '~/assets/utils.js';
 import erc20ABI from '~/assets/abi-erc20.js';
@@ -17,6 +16,7 @@ import wethAbi from '~/assets/abi-weth.js';
 import {HUB_CHAIN_BY_ID, ETHEREUM_CHAIN_ID, BSC_CHAIN_ID, ETHEREUM_API_URL, BSC_API_URL} from '~/assets/variables.js';
 import {getErrorText} from '~/assets/server-error.js';
 import checkEmpty from '~/assets/v-check-empty.js';
+import useHubDiscount from '@/composables/useHubDiscount.js';
 import Loader from '~/components/common/Loader.vue';
 import TxListItem from '~/components/HubDepositTxListItem.vue';
 import Account from '~/components/HubDepositAccount.vue';
@@ -76,6 +76,14 @@ export default {
             required: true,
         },
     },
+    setup() {
+        const { discount, discountProps } = useHubDiscount();
+
+        return {
+            discount,
+            discountProps,
+        };
+    },
     data() {
         return {
             ethAddress: "",
@@ -94,9 +102,6 @@ export default {
                 isIgnorePending: true,
                 isUnwrapAll: true,
             },
-            // @TODO refactor to composable
-            discountEth: 0,
-            discountMinter: 0,
             isFormSending: false,
             serverError: '',
             waitUnwrapConfirmation: false,
@@ -246,9 +251,6 @@ export default {
             // don't unlock delta, it will overwrite total unlocked
             // return new Big(this.amountToSpend).minus(this.selectedUnlocked).toString();
         },
-        discount() {
-            return Math.max(this.discountEth, this.discountMinter);
-        },
         suggestionList() {
             const network = getHubNetworkByChain(this.chainId);
             return this.hubCoinList
@@ -274,15 +276,13 @@ export default {
                     this.getAllowance();
                 }
                 this.$store.commit('hub/setEthAddress', newVal);
-                getDiscountForHolder(newVal)
-                    .then((discount) => this.discountEth = discount);
+                this.discountProps.ethAddress = this.ethAddress;
             },
+            immediate: true,
         },
         'form.address': {
             handler(newVal) {
-                //@TODO debounce
-                getDiscountForHolder(newVal)
-                    .then((discount) => this.discountMinter = discount);
+                this.discountProps.minterAddress = newVal;
             },
             immediate: true,
         },

components/HubWithdrawForm.vue

@@ -8,11 +8,12 @@ import autosize from 'v-autosize';
 import {TX_TYPE} from 'minterjs-util/src/tx-types.js';
 import {convertToPip} from 'minterjs-util/src/converter.js';
 import {postTx} from '~/api/gate.js';
-import {getOracleFee, getDiscountForHolder} from '@/api/hub.js';
+import {getOracleFee} from '@/api/hub.js';
 import {getExplorerTxUrl, pretty, prettyPrecise, prettyRound} from '~/assets/utils.js';
 import {HUB_MINTER_MULTISIG_ADDRESS, HUB_CHAIN_ID, HUB_CHAIN_DATA} from '~/assets/variables.js';
 import checkEmpty from '~/assets/v-check-empty.js';
 import {getErrorText} from '~/assets/server-error.js';
+import useHubDiscount from '@/composables/useHubDiscount.js';
 import FieldQr from '@/components/common/FieldQr.vue';
 import FieldUseMax from '~/components/common/FieldUseMax';
 import FieldCoin from '@/components/common/FieldCoin.vue';
@@ -58,9 +59,15 @@ export default {
             required: true,
         },
     },
+    setup() {
+        const { discount, discountProps } = useHubDiscount();
+
+        return {
+            discount,
+            discountProps,
+        };
+    },
     fetch() {
-        getDiscountForHolder(this.$store.getters.address)
-            .then((discount) => this.discountMinter = discount);
         return this.getDestinationFee();
     },
     data() {
@@ -82,9 +89,6 @@ export default {
             serverWarning: '',
             isConfirmModalVisible: false,
             isSuccessModalVisible: false,
-            // @TODO refactor to composable
-            discountEth: 0,
-            discountMinter: 0,
         };
     },
     computed: {
@@ -146,9 +150,6 @@ export default {
                 return maxAmount.toString();
             }
         },
-        discount() {
-            return Math.max(this.discountEth, this.discountMinter);
-        },
         suggestionList() {
             return this.hubCoinList.map((item) => item.symbol);
             // intersection of address balance and hub supported coins
@@ -192,9 +193,13 @@ export default {
         },
         'form.address': {
             handler(newVal) {
-                //@TODO debounce
-                getDiscountForHolder(newVal)
-                    .then((discount) => this.discountEth = discount);
+                this.discountProps.ethAddress = newVal;
+            },
+            immediate: true,
+        },
+        '$store.getters.address': {
+            handler(newVal) {
+                this.discountProps.minterAddress = newVal;
             },
             immediate: true,
         },

composables/useHubDiscount.js

@@ -0,0 +1,46 @@
+import { ref, reactive, computed, watch } from '@vue/composition-api';
+import debounce from 'debounce-promise';
+import {getDiscountForHolder as _getDiscountForHolder} from '@/api/hub.js';
+
+export default function useHubDiscount() {
+    // two different debounced functions
+    const debouncedGetDiscountMinter = makeDebouncedGetDiscount();
+    const debouncedGetDiscountEth = makeDebouncedGetDiscount();
+
+    const discountProps = reactive({
+        minterAddress: '',
+        ethAddress: '',
+    });
+    const discountMinter = ref(0);
+    const discountEth = ref(0);
+    const discount = computed(() => {
+        return Math.max(discountEth.value, discountMinter.value);
+    });
+
+    const getMinterDiscount = async () => {
+        discountMinter.value = await debouncedGetDiscountMinter(discountProps.minterAddress);
+    };
+    const getEthDiscount = async () => {
+        discountEth.value = await debouncedGetDiscountEth(discountProps.ethAddress);
+    };
+
+    watch(() => discountProps.minterAddress, getMinterDiscount);
+    watch(() => discountProps.ethAddress, getEthDiscount);
+
+    return {
+        discount,
+        discountProps,
+    };
+}
+
+function getDiscountForHolder(address) {
+    return _getDiscountForHolder(address)
+        .catch((error) => {
+            console.log(error);
+            return 0;
+        });
+}
+
+function makeDebouncedGetDiscount() {
+    return debounce(getDiscountForHolder, 1000);
+}

nuxt.config.js

@@ -114,6 +114,7 @@ export default {
     },
     plugins: [
         { src: '~/plugins/base-url-prefix.js'},
+        { src: '~/plugins/composition-api.js'},
         { src: '~/plugins/persistedState.js', ssr: false },
         { src: '~/plugins/online.js', ssr: false },
         { src: '~/plugins/click-blur.js', ssr: false },

package.json

@@ -39,6 +39,7 @@
     "@material/snackbar": "^12.0.0",
     "@uniswap/sdk": "^3.0.3",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
+    "@vue/composition-api": "^1.4.1",
     "@walletconnect/client": "^1.6.6",
     "@walletconnect/qrcode-modal": "^1.6.6",
     "aes-js": "^3.1.2",

plugins/composition-api.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import VueCompositionAPI from '@vue/composition-api';
+
+Vue.use(VueCompositionAPI);