Refactor/unbonding hook (#670)

* diminish snowpack & put space on tvl text (#663)

* feat:Support for BNC and vDOT assets (#658)

* feat:Support for BNC and vDOT assets

* Fix some errors

* Update BifrostXcmRepository.ts

* Add some constants

* 0.0.9

* feat: updated japanese translation (#665)

* go back logo (#667)

* migrate for useUnbonding hook

Co-authored-by: NingBo Wang <2536935847@qq.com>
Co-authored-by: github-actions <github-actions@users.noreply.github.com>
Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "astar-portal",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Your one-stop platform for the Astar ecosystem - Wallet / Staking / Bridging",
   "productName": "Astar Portal - Astar & Shiden Network",
   "author": "Astar Network",

src/components/common/Logo.vue

@@ -7,7 +7,7 @@
   </div>
   <img
     v-else-if="currentNetworkChain === astarChain.ASTAR"
-    src="~assets/img/astar_logo_winter.png"
+    src="~assets/img/astar_logo.png"
     width="200"
     height="78"
   />

src/components/dapp-staking/my-staking/TopMetric.vue

@@ -11,7 +11,6 @@
         {{ $t('topMetric.wayOfStaking') }}
       </div>
     </div>
-    <snow-pack />
     <div class="wrapper--cards">
       <div class="card">
         <p>
@@ -114,9 +113,8 @@ import { DappCombinedInfo } from 'src/v2/models/DappsStaking';
 import { computed, defineComponent, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import PieChart from 'src/components/common/PieChart.vue';
-import SnowPack from 'src/components/common/SnowPack.vue';
 export default defineComponent({
-  components: { PieChart, SnowPack },
+  components: { PieChart },
   setup() {
     const store = useStore();
     const { stakerApr, stakerApy } = useApr();

src/components/dapp-staking/my-staking/styles/top-metric.scss

@@ -122,6 +122,7 @@
 
       .txt--tvl {
         white-space: nowrap;
+        margin-right: 5px;
       }
 
       .detail-value {

src/hooks/custom-signature/message.ts

@@ -6,8 +6,10 @@ import { hasExtrinsicFailedEvent } from 'src/store/dapp-staking/actions';
 
 export enum TxType {
   dappsStaking = 'dappsStaking',
+  withdrawUnbonded = 'withdrawUnbonded',
 }
 
+// @TODO: we need to clean up this later in a way that can be solved without send over the store
 export const displayCustomMessage = ({
   txType,
   store,
@@ -28,6 +30,13 @@ export const displayCustomMessage = ({
       senderAddress,
       t,
     });
+  } else if (txType === TxType.withdrawUnbonded) {
+    dispatchUnbondedMessage({
+      result,
+      store,
+      senderAddress,
+      t,
+    });
   }
 };
 
@@ -70,3 +79,29 @@ const dispatchClaimMessage = ({
     }
   }
 };
+
+const dispatchUnbondedMessage = ({
+  store,
+  result,
+  senderAddress,
+  t,
+}: {
+  store: Store<StateInterface>;
+  result: ISubmittableResult;
+  senderAddress: string;
+  t: (...arg: any) => void;
+}): void => {
+  if (result.isCompleted) {
+    if (!hasExtrinsicFailedEvent(result.events, store.dispatch)) {
+      store.commit('dapps/setUnlockingChunks', -1);
+      store.dispatch(
+        'general/showAlertMsg',
+        {
+          msg: t('dappStaking.toast.successfullyWithdrew'),
+          alertType: 'success',
+        },
+        { root: true }
+      );
+    }
+  }
+};

src/hooks/dapps-staking/useUnbonding.ts

@@ -3,10 +3,8 @@ import { u32 } from '@polkadot/types';
 import { ISubmittableResult } from '@polkadot/types/types';
 import BN from 'bn.js';
 import { $api } from 'boot/api';
-import { useCustomSignature, useGasPrice } from 'src/hooks';
-import { signAndSend } from 'src/hooks/helper/wallet';
+import { displayCustomMessage, TxType } from 'src/hooks/custom-signature/message';
 import { useUnbondWithdraw } from 'src/hooks/useUnbondWithdraw';
-import { hasExtrinsicFailedEvent } from 'src/modules/extrinsic';
 import { useStore } from 'src/store';
 import { computed, onUnmounted, ref, watch } from 'vue';
 import { container } from 'src/v2/common';
@@ -18,12 +16,6 @@ import { useI18n } from 'vue-i18n';
 export function useUnbonding() {
   const store = useStore();
   const { t } = useI18n();
-  const { isCustomSig, handleCustomExtrinsic } = useCustomSignature({
-    fn: () => {
-      store.commit('dapps/setUnlockingChunks', -1);
-    },
-  });
-  const { selectedTip } = useGasPrice();
   const selectedAccountAddress = computed(() => store.getters['general/selectedAddress']);
   const unlockingChunksCount = computed(() => store.getters['dapps/getUnlockingChunks']);
   const maxUnlockingChunks = computed(() => store.getters['dapps/getMaxUnlockingChunks']);
@@ -32,39 +24,30 @@ export function useUnbonding() {
   const canWithdraw = ref<boolean>(false);
   const totalToWithdraw = ref<BN>(new BN(0));
   const { canUnbondWithdraw } = useUnbondWithdraw($api);
-  const substrateAccounts = computed(() => store.getters['general/substrateAccounts']);
 
   const withdraw = async (): Promise<void> => {
     try {
       const transaction = $api!.tx.dappsStaking.withdrawUnbonded();
-      const txResHandler = (result: ISubmittableResult): Promise<boolean> => {
-        return new Promise<boolean>(async (resolve) => {
-          if (result.status.isFinalized) {
-            if (!hasExtrinsicFailedEvent(result.events, store.dispatch)) {
-              store.commit('dapps/setUnlockingChunks', -1);
-              store.dispatch('general/showAlertMsg', {
-                msg: t('dappStaking.toast.successfullyWithdrew'),
-                alertType: 'success',
-              });
-            }
-            store.commit('general/setLoading', false);
-            resolve(true);
-          } else {
-            store.commit('general/setLoading', true);
-          }
+      const finalizedCallback = (result: ISubmittableResult): void => {
+        displayCustomMessage({
+          txType: TxType.withdrawUnbonded,
+          result,
+          senderAddress: selectedAccountAddress.value,
+          store,
+          t,
         });
       };
 
-      await signAndSend({
-        transaction,
-        senderAddress: selectedAccountAddress.value,
-        substrateAccounts: substrateAccounts.value,
-        isCustomSignature: isCustomSig.value,
-        txResHandler,
-        handleCustomExtrinsic,
-        dispatch: store.dispatch,
-        tip: selectedTip.value.price,
-      });
+      try {
+        const dappStakingService = container.get<IDappStakingService>(Symbols.DappStakingService);
+        await dappStakingService.sendTx({
+          senderAddress: selectedAccountAddress.value,
+          transaction,
+          finalizedCallback,
+        });
+      } catch (error: any) {
+        console.error(error.message);
+      }
     } catch (error) {
       console.error(error);
     }

src/hooks/useClaimAll.ts

@@ -112,7 +112,7 @@ export function useClaimAll() {
 
     try {
       const dappStakingService = container.get<IDappStakingService>(Symbols.DappStakingService);
-      await dappStakingService.claim({
+      await dappStakingService.sendTx({
         senderAddress: senderAddress.value,
         transaction,
         finalizedCallback,