feat: newest files

hack-a-chain-software · Oct 18, 2023 · b2201bf · b2201bf
1 parent f41497e
commit b2201bf
Show file tree

Hide file tree

Showing 25 changed files with 459 additions and 341 deletions.
diff --git a/front/components/Button/Icon.vue b/front/components/Button/Icon.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    icon?: string;
+    label?: string;
+    disabled?: boolean;
+  }>(),
+  {
+    icon: '',
+    label: '',
+    disabled: false
+  }
+)
+
+const emit = defineEmits(['click'])
+
+const handleClick = (event: any) => {
+  emit('click', event)
+}
+</script>
+
+<template>
+  <button
+    :disabled="disabled"
+    @click.prevent="handleClick"
+    class="
+      flex
+      items-center
+      justify-center
+      lg:h-8 lg:w-8
+      rounded-full
+      hover:bg-gray-600
+    "
+  >
+    <div>
+      <Icon :name="icon" class="h-6 w-6 lg:h-8 lg:w-8" />
+    </div>
+  </button>
+</template>
diff --git a/front/components/Button/Outline.vue b/front/components/Button/Outline.vue
@@ -43,7 +43,7 @@ const handleClick = (event: any) => {
       hover:opacity-80
       border-[2px] border-gray-600
       disabled:cursor-not-allowed
-      active:bg-blue-gradient-2
+      active:bg-gray-600
     "
     @click.prevent="handleClick"
   >

diff --git a/front/components/DatePicker.vue b/front/components/DatePicker.vue
@@ -1126,7 +1126,7 @@ const onRangeEnd = () => {
 }
 
 .dp__theme_light {
-  --dp-background-color: #202428;
+  --dp-background-color: #21262d;
   --dp-text-color: white;
   --dp-hover-color: #1e427e;
   --dp-hover-text-color: white;

diff --git a/front/components/Deposit/NFT.vue b/front/components/Deposit/NFT.vue
@@ -9,7 +9,7 @@ const {
   isDisabledNFT,
   sendDeposit,
   showConnectWalletButton
-} = useDepositToken(1, null as any)
+} = useDepositToken(1, null as any, 'nfts')
 </script>
 
 <template>

diff --git a/front/components/Form/Footer.vue b/front/components/Form/Footer.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const emits = defineEmits(['click'])
+
+withDefaults(
+  defineProps<{
+    label?: string;
+    disabled?: boolean;
+  }>(),
+  {
+    label: '',
+    disabled: false
+  }
+)
+</script>
+
+<template>
+  <div id="footer" class="pt-[165px] lg:pt-[56px]">
+    <ButtonInline
+      :label="label"
+      :disabled="disabled"
+      @click.prevent="emits('click', $event)"
+    />
+  </div>
+</template>
diff --git a/front/components/Form/Header.vue b/front/components/Form/Header.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+const emits = defineEmits(['changeStep'])
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    subtitle: string;
+  }>(),
+  {
+    title: ''
+  }
+)
+
+const back = () => {
+  emits('changeStep', 'connect')
+}
+</script>
+
+<template>
+  <div
+    class="
+      w-full
+      py-4
+      flex
+      justify-center
+      relative
+      items-center
+      lg:hidden
+    "
+  >
+    <button
+      class="
+        flex
+        items-center
+        space-x-[4px]
+        h-6
+        absolute
+        top-4
+        left-0
+      "
+      @click.prevent="back()"
+    >
+      <Icon name="chevronLeft" class="h-6 w-6" />
+    </button>
+
+    <div>
+      <h1
+        class="text-xs text-font-1 font-medium"
+        v-text="title"
+      />
+    </div>
+  </div>
+
+  <div class="pt-8 lg:pt-0 flex lg:space-x-4 items-center">
+    <ButtonIcon
+      icon="chevronLeft"
+      class="hidden lg:flex"
+      @click.prevent="back()"
+    />
+
+    <h2
+      class="
+        text-font-1 text-md
+        font-medium
+        lg:text-lg lg:leading-[33.6px] lg:font-[500]
+      "
+      v-text="subtitle"
+    />
+  </div>
+</template>
diff --git a/front/components/Form/Layout.vue b/front/components/Form/Layout.vue
@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="
+      text-white
+      max-w-[450px]
+      lg:max-w-[500px]
+      lg:h-auto
+      lg:p-6
+      lg:bg-gray-900
+      lg:w-[546px]
+      lg:mt-[150px]
+      lg:border-2
+      lg:border-gray-600
+      lg:rounded-[12px]
+      min-h-screen
+      lg:min-h-0
+    "
+  >
+    <div>
+      <slot />
+    </div>
+
+    <div>
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
diff --git a/front/components/Input/Address.vue b/front/components/Input/Address.vue
@@ -47,6 +47,8 @@ const verifyAddress = debounce(async (_, address: any) => {
 
       if (isValidOpactAddress) {
         data.isValid = true
+
+        emits('isValidAddress', true)
       }
     } catch (e) {
       data.isRegistered = true

diff --git a/front/components/Toast.vue b/front/components/Toast.vue
@@ -2,7 +2,7 @@
 const props = defineProps<{
   title: string;
   message?: string;
-  type: 'info' | 'error';
+  type: 'info' | 'error' | 'success' | 'warning';
 }>()
 
 // const {
@@ -23,7 +23,7 @@ const types = {
     background: 'bg-[#0F326F]'
   },
   success: {
-    icon: 'Info',
+    icon: 'Check',
     background: 'bg-[#1A4633]'
   },
   warning: {
@@ -40,7 +40,7 @@ const types = {
 <template>
   <div
     class="rounded-[8px] px-4 py-3 flex w-[440px]"
-    :class="[types[props.type].background]"
+    :class="types[props.type].background"
   >
     <div class="pr-2">
       <Icon

diff --git a/front/components/auth/Connect.vue b/front/components/auth/Connect.vue
@@ -13,6 +13,7 @@ const emits = defineEmits(['changeStep'])
     class="
       flex flex-col
       lg:flex-row lg:items-start
+      bg-dark-blue
       pt-[56px]
       pb-[80px]
       lg:pt-[0] lg:px-0 lg:max-w-full lg:overflow-x-clip
@@ -47,13 +48,23 @@ const emits = defineEmits(['changeStep'])
       </figure>
     </div>
 
-    <div class="relative hidden lg:block">
+    <div
+      class="
+        relative
+        hidden
+        lg:flex
+        overflow-visible
+        w-full
+        relative
+      "
+    >
       <figure
         class="
           absolute
           left-0
           top-0
-          lg:left-[-10%]
+          left-1/2
+          -translate-x-1/2
           select-none
           pointer-events-none
           z-[0]
@@ -64,7 +75,7 @@ const emits = defineEmits(['changeStep'])
           alt="Hero illustration"
           quality="100"
           class="
-            min-w-[665px]
+            min-w-[1057px]
             lg:max-w-[130%]
             xl:max-w-[1057px]
             pointer-events-none
@@ -92,13 +103,19 @@ const emits = defineEmits(['changeStep'])
               text-lg
               font-medium
               text-font-1
-              lg:text-xl lg:font-[600]
+              lg:text-xl lg:font-[500]
             "
           >
             Your private address
           </h2>
 
-          <p class="text-xs text-font-2 font-regular">
+          <p
+            class="
+              text-xs text-font-2
+              font-regular
+              lg:font-xs lg:font-[400] lg:leading-[140%]
+            "
+          >
             Choose how you want to connect. Web3 like you
             never imagined.
           </p>
@@ -107,9 +124,16 @@ const emits = defineEmits(['changeStep'])
         <div class="flex flex-col space-y-[16px] pt-[32px]">
           <ButtonInline
             label="Create Wallet"
+            class="lg:hidden"
             @click.prevent="data.show = true"
           />
 
+          <ButtonInline
+            label="Create Wallet"
+            class="hidden lg:flex"
+            @click.prevent="emits('changeStep', 'create')"
+          />
+
           <ButtonOutline
             label="Recover Wallet"
             @click.prevent="emits('changeStep', 'recovery')"