feat: migrate business logic in dApp staking v2 to v2(new) architecture

src/components/common/FormatBalance.vue

@@ -12,7 +12,7 @@ export default defineComponent({
   components: { Balance },
   props: {
     balance: {
-      type: Object as PropType<BN> | Object as PropType<string> | undefined,
+      type: Object as PropType<BN> | PropType<string> | undefined,
       required: true,
     },
   },

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

@@ -76,7 +76,8 @@
     </template>
 
     <modal-unbond-dapp
-      v-model:is-open="showModalUnbond"
+      v-if="selectedDapp"
+      :set-is-open="setShowModalUnbond"
       :show="showModalUnbond"
       :dapp="selectedDapp"
     />
@@ -108,6 +109,10 @@ export default defineComponent({
     const router = useRouter();
 
     const showModalUnbond = ref<boolean>(false);
+    const setShowModalUnbond = (isOpen: boolean): void => {
+      showModalUnbond.value = isOpen;
+    };
+
     const isUnregistered = (info: MyStakeInfo): boolean => {
       return !info.isRegistered && info.stakersCount > 0;
     };
@@ -135,6 +140,7 @@ export default defineComponent({
       canClaim,
       claimAll,
       isUnregistered,
+      setShowModalUnbond,
     };
   },
 });

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

@@ -42,7 +42,7 @@
     <Teleport to="#app--main">
       <div>
         <modal-withdraw
-          v-model:is-open="showModalWithdraw"
+          :set-is-open="setShowModalWithdraw"
           :show="showModalWithdraw"
           :withdraw-amount="totalAmount"
           @confirm="withdraw"
@@ -79,6 +79,10 @@ export default defineComponent({
     const { withdraw } = useUnbonding();
 
     const showModalWithdraw = ref(false);
+    const setShowModalWithdraw = (isOpen: boolean): void => {
+      showModalWithdraw.value = isOpen;
+    };
+
     const showModalRebond = ref(false);
     // MEMO: since not possible to withdraw each chunk currently, use total amount of withdraw
     const totalAmount = ref('');
@@ -112,6 +116,7 @@ export default defineComponent({
       showWithdrawDialog,
       showRebondDialog,
       withdraw,
+      setShowModalWithdraw,
     };
   },
 });

src/components/dapp-staking/my-staking/components/modals/ModalUnbondDapp.vue

@@ -88,6 +88,10 @@ export default defineComponent({
       type: Object as PropType<MyStakeInfo | undefined>,
       required: true,
     },
+    setIsOpen: {
+      type: Function,
+      required: true,
+    },
   },
   setup(props, { emit }) {
     const { unbondingPeriod, handleUnbound } = useUnbound();
@@ -117,13 +121,13 @@ export default defineComponent({
     const closeModal = async (): Promise<void> => {
       isClosingModal.value = true;
       await wait(fadeDuration);
-      emit('update:is-open', false);
+      props.setIsOpen(false);
       isClosingModal.value = false;
     };
 
     const unbound = async (): Promise<void> => {
-      await handleUnbound(props.dapp?.dappAddress, amount.value);
       await closeModal();
+      await handleUnbound(props.dapp?.dappAddress, amount.value);
     };
 
     return {

src/components/dapp-staking/my-staking/components/modals/ModalWithdraw.vue

@@ -42,14 +42,18 @@ export default defineComponent({
       type: String,
       default: null,
     },
+    setIsOpen: {
+      type: Function,
+      required: true,
+    },
   },
   emits: ['update:is-open', 'confirm'],
   setup(props, { emit }) {
     const isClosingModal = ref<boolean>(false);
     const closeModal = async (): Promise<void> => {
       isClosingModal.value = true;
       await wait(fadeDuration);
-      emit('update:is-open', false);
+      props.setIsOpen(false);
       isClosingModal.value = false;
     };
 

src/components/dapp-staking/my-staking/items/MyDappItem.vue

@@ -48,7 +48,8 @@
     <Teleport to="#app--main">
       <div :class="'highest-z-index'">
         <modal-unbond-dapp
-          v-model:is-open="showModalUnbond"
+          v-if="selectedDapp"
+          :set-is-open="setShowModalUnbond"
           :show="showModalUnbond"
           :dapp="selectedDapp"
         />
@@ -81,6 +82,10 @@ export default defineComponent({
     const router = useRouter();
 
     const showModalUnbond = ref<boolean>(false);
+    const setShowModalUnbond = (isOpen: boolean): void => {
+      showModalUnbond.value = isOpen;
+    };
+
     const isUnregistered = (info: MyStakeInfo): boolean =>
       !info.isRegistered && info.stakersCount > 0;
 
@@ -105,6 +110,7 @@ export default defineComponent({
       claimAll,
       canClaim,
       isUnregistered,
+      setShowModalUnbond,
     };
   },
 });

src/components/dapp-staking/my-staking/items/UnbondingItem.vue

@@ -31,7 +31,7 @@
     <Teleport to="#app--main">
       <div :class="'highest-z-index'">
         <modal-withdraw
-          v-model:is-open="showModalWithdraw"
+          :set-is-open="setShowModalWithdraw"
           :show="showModalWithdraw"
           :withdraw-amount="totalAmount"
           @confirm="withdraw"
@@ -65,6 +65,10 @@ export default defineComponent({
   },
   setup() {
     const showModalWithdraw = ref(false);
+    const setShowModalWithdraw = (isOpen: boolean): void => {
+      showModalWithdraw.value = isOpen;
+    };
+
     const showModalRebond = ref(false);
     // MEMO: since not possible to withdraw each chunk currently, use total amount of withdraw
     const totalAmount = ref('');
@@ -88,6 +92,7 @@ export default defineComponent({
       showWithdrawDialog,
       showRebondDialog,
       withdraw,
+      setShowModalWithdraw,
     };
   },
 });

src/hooks/custom-signature/message.ts

@@ -6,9 +6,10 @@ import { hasExtrinsicFailedEvent } from 'src/store/dapp-staking/actions';
 
 export enum TxType {
   dappsStaking = 'dappsStaking',
-  requiredClaim = 'requiredClaim',
+  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,
@@ -29,10 +30,11 @@ export const displayCustomMessage = ({
       senderAddress,
       t,
     });
-  } else if (txType === TxType.requiredClaim) {
-    dispatchRequiredClaimMessage({
+  } else if (txType === TxType.withdrawUnbonded) {
+    dispatchUnbondedMessage({
       result,
       store,
+      senderAddress,
       t,
     });
   }
@@ -49,7 +51,7 @@ const dispatchClaimMessage = ({
   senderAddress: string;
   t: (...arg: any) => void;
 }): void => {
-  if (result.status.isFinalized) {
+  if (result.isCompleted) {
     if (!hasExtrinsicFailedEvent(result.events, store.dispatch)) {
       const totalClaimedStaker = calculateClaimedStaker({
         events: result.events,
@@ -78,35 +80,28 @@ const dispatchClaimMessage = ({
   }
 };
 
-const dispatchRequiredClaimMessage = ({
+const dispatchUnbondedMessage = ({
   store,
   result,
+  senderAddress,
   t,
 }: {
   store: Store<StateInterface>;
   result: ISubmittableResult;
+  senderAddress: string;
   t: (...arg: any) => void;
 }): void => {
-  if (result.status.isFinalized) {
-    let errorMessage = '';
-    const res = hasExtrinsicFailedEvent(
-      result.events,
-      store.dispatch,
-      (message: string) => (errorMessage = message)
-    );
-    if (res) {
-      if (errorMessage.includes('TooManyEraStakeValues')) {
-        const msg = t('dappStaking.toast.requiredClaimFirst');
-
-        store.dispatch(
-          'general/showAlertMsg',
-          {
-            msg,
-            alertType: 'error',
-          },
-          { root: true }
-        );
-      }
+  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 }
+      );
     }
   }
 };