fix: use BasicModal with v-model:visible instead of a-modal open prop for Ant Design Vue 3 in RequiredKycModal

components.d.ts

@@ -7,7 +7,27 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ABadge: typeof import('ant-design-vue/es')['Badge']
+    AButton: typeof import('ant-design-vue/es')['Button']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AImage: typeof import('ant-design-vue/es')['Image']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
+    AModal: typeof import('ant-design-vue/es')['Modal']
     AppCreditLink: typeof import('./src/components/AppCreditLink.vue')['default']
+    ARadio: typeof import('ant-design-vue/es')['Radio']
+    ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASlider: typeof import('ant-design-vue/es')['Slider']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
+    ATag: typeof import('ant-design-vue/es')['Tag']
+    ATextarea: typeof import('ant-design-vue/es')['Textarea']
+    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     BaseDatePicker: typeof import('./src/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue')['default']
     Basic: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/basic.vue')['default']
     BasicActionSheet: typeof import('./src/components/BasicPacks/BasicActionSheet.vue')['default']
@@ -64,5 +84,8 @@ declare module 'vue' {
     Time: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/time.vue')['default']
     TradeFeeConfirmSummary: typeof import('./src/components/TradeFeeConfirmSummary.vue')['default']
     TransactionSkeleton: typeof import('./src/components/TransactionSkeleton.vue')['default']
+    VanActionSheet: typeof import('vant/es')['ActionSheet']
+    VanDialog: typeof import('vant/es')['Dialog']
+    VanField: typeof import('vant/es')['Field']
   }
 }

src/components/RequiredKycModal.vue

@@ -1,16 +1,11 @@
 <template>
-  <a-modal
-    :open="requiresKyc"
+  <BasicModal
+    v-model:visible="visible"
+    custom-footer
     :closable="false"
-    :mask-closable="false"
-    :keyboard="false"
-    :footer="null"
-    :centered="true"
-    :z-index="APP_Z_MODAL"
     :width="modalWidth"
-    :get-container="getModalContainer"
-    class="required-kyc-modal"
     wrap-class-name="required-kyc-modal-wrap"
+    :z-index="99999"
   >
     <div class="kyc-modal-content text-center py-2" dir="rtl">
       <!-- Icon with soft glowing background -->
@@ -61,12 +56,13 @@
         </button>
       </div>
     </div>
-  </a-modal>
+  </BasicModal>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import { useUserStore } from '@/store/userStore'
@@ -74,7 +70,6 @@ import { getToken } from '@/utils'
 import { performUserLogout } from '@/utils/authSession'
 import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
 import { isCustomerIdentityVerified } from '@/utils/customerIdentity'
-import { APP_Z_MODAL, getModalContainer } from '@/utils/zIndex'
 
 const route = useRoute()
 const router = useRouter()
@@ -83,7 +78,7 @@ const isDesktop = useDesktopBreakpoint()
 
 const modalWidth = computed(() => (isDesktop.value ? '420px' : '90vw'))
 
-const requiresKyc = computed(() => {
+const isKycRequired = computed(() => {
   if (!getToken()) return false
   if (
     route.name === 'login' ||
@@ -98,11 +93,34 @@ const requiresKyc = computed(() => {
   return !isCustomerIdentityVerified(info.is_legal)
 })
 
+const visible = ref(false)
+
+watch(
+  isKycRequired,
+  (val) => {
+    visible.value = Boolean(val)
+  },
+  { immediate: true },
+)
+
+onMounted(async () => {
+  if (getToken() && !userStore.userInfo) {
+    try {
+      await userStore.getMyInfo()
+    } catch {
+      // ignore
+    }
+  }
+  visible.value = Boolean(isKycRequired.value)
+})
+
 function goToKyc() {
+  visible.value = false
   void router.push({ name: 'user', query: { showEdit: 'true' } })
 }
 
 async function onLogout() {
+  visible.value = false
   await performUserLogout()
 }
 </script>
@@ -111,7 +129,6 @@ async function onLogout() {
 .required-kyc-modal-wrap {
   .ant-modal-content {
     border-radius: 20px;
-    padding: 24px 20px;
   }
 }
 </style>