initial

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

@@ -0,0 +1,67 @@
+<template>
+  <div :class="cn.m('requisites')">
+    <div
+      class="d-flex"
+      style="gap: 16px"
+    >
+      <InvoiceFormInstructions />
+
+      <UiQrCode
+        :class="cn.e('qr')"
+        :value="invoice.walletAddress"
+        :size="139"
+      />
+    </div>
+
+    <UiInput
+      id="address"
+      :class="cn.e('address')"
+      label="Адрес кошелька для оплаты"
+      :model-value="invoice.walletAddress"
+      readonly
+      copyable
+    />
+
+    <InvoiceFormSeparator />
+
+    <InvoiceFormAmount />
+
+    <UiButton
+      class="action"
+      size="large"
+      :class="cn.e('action')"
+      :disabled="payedFlag"
+      @click="payedFlag = true"
+    >
+      I have paid
+    </UiButton>
+  </div>
+</template>
+
+<script setup>
+const { invoice, payedFlag } = inject('public-invoice')
+
+const cn = useClassname('invoice-form')
+</script>
+
+<style lang="scss">
+.invoice-form {
+  $self: &;
+
+  &--requisites {
+    #{$self}__qr {
+      width: 139px;
+      height: 139px;
+    }
+
+    #{$self}__address {
+      margin-top: 8px;
+    }
+
+    #{$self}__action {
+      width: 100%;
+      margin-top: 32px;
+    }
+  }
+}
+</style>