initial

apps/pay/components/invoice-form/step/pending.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :class="cn.m('pending')">
+    <div class="p-16">
+      <img
+        src="/pending.svg"
+        alt="Pending"
+        class="mb-16"
+        data-status-illustration
+      >
+
+      <h2 class="text-clr-grey-600">
+        Waiting
+      </h2>
+
+      <h4 class="text-clr-grey-400 mt-16">
+        Searching for transaction in the Blockchain network…
+      </h4>
+    </div>
+
+    <InvoiceFormSeparator />
+
+    <InvoiceFormAmount />
+
+    <UiButton
+      :class="cn.e('action')"
+      size="large"
+      disabled
+    >
+      I have paid
+    </UiButton>
+  </div>
+</template>
+
+<script setup>
+const cn = useClassname('invoice-form')
+</script>
+
+<style lang="scss">
+.invoice-form {
+  $self: &;
+
+  &--pending {
+    #{$self}__action {
+      width: 100%;
+      margin-top: 32px;
+    }
+  }
+}
+</style>