feat: 🎸 update ui (#73)

packages/uikit/src/components/FAssetAmountInput/FAssetAmountInput.stories.ts

@@ -111,3 +111,35 @@ export const WithRecords = Template3.bind({});
 WithRecords.args = {
   showRecords: true,
 };
+
+const Template4: StoryFn<typeof FAssetAmountInput> = (args) => ({
+  components: { FAssetAmountInput },
+  setup() {
+    const asset = ref({
+      asset_id: "02a39171-dfc1-36d1-94c3-9e9725d59bbb",
+      provider: "mixin",
+      chain_id: "43d61dcd-e413-450d-80b8-101d5e903357",
+      symbol: "ZIL",
+      name: "Zilliqa",
+      logo: "https://mixin-images.zeromesh.net/prUxZ_5EC6UYufpA3lYn7Sjiq8HeTCiZ7VsIFtso0sjZrck7T8oCHyaSKNwsrKAE82h1oxqAJM_hZsnRm-ZAIMc=s128",
+      confirmations: 16,
+      price_usd: "0.02306898",
+      change_usd: "0.047327018826841996",
+      balance: "0.00000001",
+      destination: "0x4cC777dFb649b9Ebc524E78e7DA89f0916Dd0f24",
+      tag: "",
+    });
+    const amount = ref("");
+
+    return {
+      args,
+      asset,
+      amount,
+      assets: assets.map((asset) => convertMixinAsset(asset)),
+    };
+  },
+  template: `<FAssetAmountInput v-model:asset="asset" v-model:amount="amount" v-bind="args" :assets="assets"></FAssetAmountInput>`,
+});
+
+export const NotSelectable = Template4.bind({});
+NotSelectable.args = {};

packages/uikit/src/components/FAssetAmountInput/FAssetAmountInput.tsx

@@ -38,6 +38,10 @@ export const FAssetAmountInput = defineComponent({
       type: Object as PropType<string[]>,
       default: () => [],
     },
+    selectable: {
+      type: Boolean,
+      deafult: true,
+    },
   },
 
   emits: {
@@ -81,6 +85,7 @@ export const FAssetAmountInput = defineComponent({
               records={props.records}
               themeColor={props.themeColor}
               showRecords={props.showRecords}
+              selectable={props.selectable}
               onUpdate:asset={(v) => emit("update:asset", v)}
               onUpdate:records={(v) => emit("update:records", v)}
               onClear:records={() => emit("clear:records")}

packages/uikit/src/components/FAssetLogo/FAssetLogo.tsx

@@ -1,5 +1,4 @@
 import { defineComponent, PropType } from "vue";
-import { VImg } from "vuetify/components";
 
 import "./FAssetLogo.scss";
 
@@ -25,10 +24,13 @@ export const FAssetLogo = defineComponent({
 
   setup(props) {
     return () => (
-      <div class="f-asset-logo">
-        <VImg width={props.size} src={props.asset?.logo}></VImg>
+      <div
+        class="f-asset-logo"
+        style={{ width: props.size + "px", height: props.size + "px" }}
+      >
+        <img width={props.size} src={props.asset?.logo}></img>
         {props.asset?.chainLogo && (
-          <VImg
+          <img
             class="f-asset-logo__chain"
             width={props.chainSize}
             src={props.asset?.chainLogo}

packages/uikit/src/components/FAssetSelect/FAssetSelect.tsx

@@ -47,6 +47,10 @@ export const FAssetSelect = defineComponent({
       type: Object as PropType<string[]>,
       default: () => [],
     },
+    selectable: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: {
@@ -97,7 +101,12 @@ export const FAssetSelect = defineComponent({
         {{
           activator: ({ isActive, props: { onClick } }) => (
             <FAssetSelectField
-              class={[{ "f-asset-field--active": isActive }]}
+              class={[
+                {
+                  "f-asset-field--active": isActive,
+                },
+              ]}
+              selectable={props.selectable}
               asset={props.asset}
               onClick={withModifiers(onClick, ["stop"])}
               onMousedown={withModifiers(() => {}, ["stop"])}

packages/uikit/src/components/FAssetSelect/FAssetSelectField.scss

@@ -4,13 +4,14 @@
   padding: 4px 16px;
   border-radius: 8px;
   min-height: 52px;
+  cursor: pointer;
 
   &--outlined {
     border: 1px solid rgb(var(--v-theme-greyscale_5));
   }
 
-  &--selectable {
-    cursor: pointer;
+  &--no-selectable {
+    pointer-events: none;
   }
 
   &__placeholder {

packages/uikit/src/components/FAssetSelect/FAssetSelectField.tsx

@@ -36,7 +36,7 @@ export const FAssetSelectField = defineComponent({
     const classes = computed(() => {
       return {
         "f-asset-field": true,
-        "f-asset-field--selectable": props.selectable,
+        "f-asset-field--no-selectable": !props.selectable,
         "f-asset-field--outlined": props.outlined,
       };
     });

packages/uikit/src/components/FInfiniteLoad/FInfiniteLoad.stories.ts

@@ -20,7 +20,7 @@ const Template: StoryFn<typeof FInfiniteLoad> = (args) => ({
           if (items.value.length > 20) {
             state.complete();
             reject();
-          } else if (Math.random() < 0.5) {
+          } else if (Math.random() < 0.1) {
             state.error();
             reject();
           } else {

packages/uikit/src/components/FLoading/FFullscreenLoading.tsx

@@ -2,8 +2,8 @@ import { defineComponent } from "vue";
 import { FLoading } from "./FLoading";
 import { VOverlay } from "vuetify/components";
 
-export const FFullscreenLoading = defineComponent({
-  name: "FFullscreenLoading",
+export const FFullScreenLoading = defineComponent({
+  name: "FFullScreenLoading",
 
   setup(props, { attrs }) {
     return () => (

packages/uikit/src/components/FLoading/FLoading.stories.ts

@@ -1,6 +1,6 @@
 import { ref } from "vue";
 import { FLoading } from "./FLoading";
-import { FFullscreenLoading } from "./FFullscreenLoading";
+import { FFullScreenLoading } from "./FFullscreenLoading";
 import { FButton } from "../FButton";
 import { Meta, StoryFn } from "@storybook/vue3";
 
@@ -31,7 +31,7 @@ ProcessProps.args = {
 };
 
 const Template2: StoryFn<typeof FLoading> = (args) => ({
-  components: { FFullscreenLoading, FButton },
+  components: { FFullScreenLoading, FButton },
   setup() {
     const loading = ref(false);
     const show = () => {

packages/uikit/src/components/FLoading/index.ts

@@ -1,2 +1,2 @@
 export { FLoading } from "./FLoading";
-export { FFullscreenLoading } from "./FFullscreenLoading";
+export { FFullScreenLoading } from "./FFullscreenLoading";