Migration ui components - drawer and radio button (#379)

* upgrade ui lib version

* migration for modal-drawer

* remove unused comp

* bump up

* migrate spinner to lib

package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@astar-network/astar-api": "^0.1.5-3",
-    "@astar-network/astar-ui": "0.0.30",
+    "@astar-network/astar-ui": "0.0.41",
     "@ethersproject/bignumber": "^5.5.0",
     "@polkadot/api": "^6.8.1",
     "@polkadot/api-contract": "^6.8.1",

src/App.vue

@@ -32,7 +32,6 @@
 import { defineComponent, computed } from 'vue';
 import DashboardLayout from 'layouts/DashboardLayout.vue';
 import { useStore } from 'src/store';
-import Spinner from 'components/common/Spinner.vue';
 import ModalLoading from 'components/common/ModalLoading.vue';
 import AlertBox from 'components/common/AlertBox.vue';
 import 'animate.css';
@@ -41,7 +40,6 @@ export default defineComponent({
   name: 'App',
   components: {
     DashboardLayout,
-    Spinner,
     ModalLoading,
     AlertBox,
   },

src/components/common/ModalLoading.vue

@@ -7,17 +7,12 @@
       </div>
 
       <div class="tw-transform tw-text-gray-400 dark:tw-text-darkGray-500">
-        <SpinnerV2 />
+        <astar-spinner />
       </div>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import SpinnerV2 from 'components/common/SpinnerV2.vue';
-export default defineComponent({
-  components: {
-    SpinnerV2,
-  },
-});
+export default defineComponent({});
 </script>

src/components/header/modals/ModalAccount.vue

@@ -1,6 +1,6 @@
 <template>
-  <ModalDrawer
-    :is-show="isOpen && !isSelected"
+  <astar-modal-drawer
+    :show="isOpen && !isSelected"
     title="Wallet"
     :is-closing="isClosing"
     @close="closeModal"
@@ -35,11 +35,8 @@
                   selAccount === account.address ? 'class-radio-on' : 'class-radio-off',
                 ]"
               >
-                <input
-                  name="choose_account"
-                  type="radio"
+                <astar-radio-btn
                   :checked="selAccount === account.address"
-                  class="ip--account"
                   @change="selAccount = account.address"
                 />
                 <div class="wrapper--account-detail">
@@ -78,7 +75,7 @@
         </button>
       </div>
     </div>
-  </ModalDrawer>
+  </astar-modal-drawer>
 </template>
 <script lang="ts">
 import copy from 'copy-to-clipboard';
@@ -89,12 +86,10 @@ import { castMobileSource, checkIsEthereumWallet } from 'src/hooks/helper/wallet
 import { useStore } from 'src/store';
 import { SubstrateAccount } from 'src/store/general/state';
 import { computed, defineComponent, PropType, ref } from 'vue';
-import ModalDrawer from './ModalDrawer.vue';
 
 export default defineComponent({
   components: {
     SelectWallet,
-    ModalDrawer,
   },
   props: {
     isOpen: {
@@ -276,23 +271,6 @@ export default defineComponent({
   border: 2px solid $astar-blue-dark;
 }
 
-.ip--account[type='radio'] {
-  width: rem(16);
-  height: rem(16);
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px $gray-3;
-  -webkit-appearance: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  margin-right: rem(12);
-  &:checked {
-    border: 3px solid white;
-    background-color: $astar-blue;
-    box-shadow: 0 0 0 2px $astar-blue;
-  }
-}
-
 .wrapper--account-detail {
   width: 225px;
   text-align: left;
@@ -393,15 +371,6 @@ export default defineComponent({
     background: $gray-5-selected-dark;
   }
 
-  .ip--account[type='radio'] {
-    box-shadow: 0 0 0 1px white;
-
-    &:checked {
-      box-shadow: 0 0 0 2px $astar-blue;
-      border: 3px solid $gray-5;
-    }
-  }
-
   .wrapper--account-detail {
     .accountName {
       color: $gray-1;