add pix qr code to deposit order

2021-09-06 00:38:48 -03:00
parent c7a799af1e
commit 3529773c61
23 changed files with 843 additions and 221 deletions
--- a/app/graphql/types/base_connection.rb
+++ b/app/graphql/types/base_connection.rb
@@ -5,5 +5,11 @@ module Types
    has_nodes_field(false)
    edges_nullable(false)
    edge_nullable(false)
+
+    field :total_count, Integer, null: false
+
+    def total_count
+      object.items.count
+    end
  end
 end
--- a/app/graphql/types/deposit_order_type.rb
+++ b/app/graphql/types/deposit_order_type.rb
@@ -10,6 +10,7 @@ module Types
    field :status, ProcessStatusEnum, null: false
    field :received_amount_cents, Integer, null: false
    field :paid_amount_cents, Integer, null: false
+    field :transaction_id, String, null: false
    field :created_at, GraphQL::Types::ISO8601DateTime, null: false
    field :updated_at, GraphQL::Types::ISO8601DateTime, null: false
  end
--- a/app/javascript/generated/schema.graphql
+++ b/app/javascript/generated/schema.graphql
@@ -25,6 +25,7 @@ type BuyCryptoOrderConnection {
  Information to aid in pagination.
  """
  pageInfo: PageInfo!
+  totalCount: Int!
 }

 """
@@ -205,6 +206,7 @@ type DepositOrder implements Node {
  paidAmountCents: Int!
  receivedAmountCents: Int!
  status: ProcessStatus!
+  transactionId: String!
  updatedAt: ISO8601DateTime!
 }

@@ -221,6 +223,7 @@ type DepositOrderConnection {
  Information to aid in pagination.
  """
  pageInfo: PageInfo!
+  totalCount: Int!
 }

 """
@@ -478,6 +481,7 @@ type SellCryptoOrderConnection {
  Information to aid in pagination.
  """
  pageInfo: PageInfo!
+  totalCount: Int!
 }

 """
@@ -517,6 +521,7 @@ type StakeOrderConnection {
  Information to aid in pagination.
  """
  pageInfo: PageInfo!
+  totalCount: Int!
 }

 """
--- a/app/javascript/src/components/Modal/Modal.tsx
+++ b/app/javascript/src/components/Modal/Modal.tsx
@@ -1,10 +1,11 @@
 import type { FC } from "react";
 import React, { Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
+import cs from "classnames";

 type Props = {
  isOpen: boolean;
-  setIsOpen: (state: boolean) => void;
+  setIsOpen?: (state: boolean) => void;
  title: string;
  className?: string;
 };
@@ -17,7 +18,9 @@ export const Modal: FC<Props> = ({
  className = "",
 }) => {
  const closeModal = () => {
+    if (setIsOpen) {
      setIsOpen(false);
+    }
  };

  return (
@@ -25,7 +28,7 @@ export const Modal: FC<Props> = ({
      <Dialog
        open={isOpen}
        as="div"
-        className={`fixed inset-0 z-10 overflow-y-auto ${className}`}
+        className="fixed inset-0 z-10 overflow-y-auto"
        onClose={closeModal}
      >
        <div className="min-h-screen px-4 text-center">
@@ -56,7 +59,12 @@ export const Modal: FC<Props> = ({
            leaveFrom="opacity-100 scale-100"
            leaveTo="opacity-0 scale-95"
          >
-            <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded">
+            <div
+              className={cs(
+                "inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded",
+                className
+              )}
+            >
              <Dialog.Title
                as="h3"
                className="text-lg font-medium leading-6 text-gray-900 mb-4"
--- a/app/javascript/src/components/Table/TableRow.tsx
+++ b/app/javascript/src/components/Table/TableRow.tsx
@@ -3,11 +3,19 @@ import React from "react";

 type Props = {
  items?: Array<ReactNode | string>;
+  id?: string;
+  onClick?: (itemId: string) => void;
 };

-export const TableRow: FC<Props> = ({ items }) => {
+export const TableRow: FC<Props> = ({ items, id, onClick }) => {
+  const handleClick = () => {
+    if (onClick && id) {
+      onClick(id);
+    }
+  };
+
  return (
-    <tr>
+    <tr onClick={handleClick}>
      {items?.map((item, index) => (
        <td
          key={index}
--- a/app/javascript/src/pages/Orders/Deposit/Deposit.tsx
+++ b/app/javascript/src/pages/Orders/Deposit/Deposit.tsx
@@ -2,35 +2,25 @@ import { graphql } from "babel-plugin-relay/macro";
 import type { FC } from "react";
 import React from "react";
 import { useLazyLoadQuery } from "react-relay";
-import cs from "classnames";

-import { Table, TableRow } from "../../../components";
 import type { DepositQuery } from "./__generated__/DepositQuery.graphql";
-import { getStatusTextAndColors } from "../utils/processStatus";
-import { centsToUnit } from "../../../utils/fiatMoney";
 import { Messages } from "../../../messages";
+import { History } from "./History";

 export const Deposit: FC = () => {
  const { depositOrders } = useLazyLoadQuery<DepositQuery>(
    graphql`
      query DepositQuery {
        depositOrders {
-          edges {
-            node {
-              id
-              status
-              createdAt
-              paidAmountCents
-              receivedAmountCents
-            }
-          }
+          totalCount
+          ...History_depositOrders
        }
      }
    `,
    {}
  );

-  if (!depositOrders.edges.length)
+  if (!depositOrders.totalCount)
    return <Messages.NoHistory historyName="depósito" />;

  return (
@@ -38,50 +28,7 @@ export const Deposit: FC = () => {
      <div className="py-8">
        <div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
          <div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
-            <Table
-              columns={[
-                "Montante pago",
-                "Montante recebido",
-                "Criado em",
-                "Status",
-              ]}
-            >
-              {depositOrders.edges.map(({ node }) => {
-                const [label, textStyles, bgStyles] = getStatusTextAndColors(
-                  node.status
-                );
-
-                const status = (
-                  <span
-                    className={cs(
-                      "relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight",
-                      textStyles
-                    )}
-                  >
-                    <span
-                      aria-hidden="true"
-                      className={cs(
-                        "absolute inset-0 opacity-50 rounded-full",
-                        bgStyles
-                      )}
-                    />
-                    <span className="relative">{label}</span>
-                  </span>
-                );
-
-                return (
-                  <TableRow
-                    key={node.id}
-                    items={[
-                      `${centsToUnit(node.paidAmountCents)} BRL`,
-                      `${centsToUnit(node.receivedAmountCents)} BRL`,
-                      new Date(node.createdAt as string).toLocaleTimeString(),
-                      status,
-                    ]}
-                  />
-                );
-              })}
-            </Table>
+            <History ordersRef={depositOrders} />
          </div>
        </div>
      </div>
--- a/app/javascript/src/pages/Orders/Deposit/History/History.tsx
+++ b/app/javascript/src/pages/Orders/Deposit/History/History.tsx
@@ -0,0 +1,87 @@
+import { graphql } from "babel-plugin-relay/macro";
+import type { FC } from "react";
+import React, { useState } from "react";
+import cs from "classnames";
+import { useFragment } from "react-relay";
+
+import { Table, TableRow } from "../../../../components";
+import { getStatusTextAndColors } from "../../utils/processStatus";
+import { centsToUnit } from "../../../../utils/fiatMoney";
+import type { History_depositOrders$key } from "./__generated__/History_depositOrders.graphql";
+import { Show } from "../Show";
+
+type Props = {
+  ordersRef: History_depositOrders$key;
+};
+
+export const History: FC<Props> = ({ ordersRef }) => {
+  const [openOrderId, setOpenOrderId] = useState<string | null>(null);
+
+  const { edges } = useFragment<History_depositOrders$key>(
+    graphql`
+      fragment History_depositOrders on DepositOrderConnection {
+        edges {
+          node {
+            id
+            status
+            createdAt
+            paidAmountCents
+            receivedAmountCents
+            ...Show_deposit_order
+          }
+        }
+      }
+    `,
+    ordersRef
+  );
+
+  const openOrder = edges.find(({ node }) => node.id === openOrderId);
+  const onClose = () => setOpenOrderId(null);
+
+  return (
+    <>
+      {openOrder && <Show orderRef={openOrder.node} onClose={onClose} />}
+      <Table
+        columns={["Montante pago", "Montante recebido", "Criado em", "Status"]}
+      >
+        {edges.map(({ node }) => {
+          const [label, textStyles, bgStyles] = getStatusTextAndColors(
+            node.status
+          );
+
+          const status = (
+            <span
+              className={cs(
+                "relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight",
+                textStyles
+              )}
+            >
+              <span
+                aria-hidden="true"
+                className={cs(
+                  "absolute inset-0 opacity-50 rounded-full",
+                  bgStyles
+                )}
+              />
+              <span className="relative">{label}</span>
+            </span>
+          );
+
+          return (
+            <TableRow
+              key={node.id}
+              onClick={(orderId) => setOpenOrderId(orderId)}
+              id={node.id}
+              items={[
+                `${centsToUnit(node.paidAmountCents)} BRL`,
+                `${centsToUnit(node.receivedAmountCents)} BRL`,
+                new Date(node.createdAt as string).toLocaleTimeString(),
+                status,
+              ]}
+            />
+          );
+        })}
+      </Table>
+    </>
+  );
+};
--- a/app/javascript/src/pages/Orders/Deposit/History/generated/History_depositOrders.graphql.ts
+++ b/app/javascript/src/pages/Orders/Deposit/History/generated/History_depositOrders.graphql.ts
@@ -0,0 +1,102 @@
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ReaderFragment } from "relay-runtime";
+import { FragmentRefs } from "relay-runtime";
+export type ProcessStatus = "CANCELED" | "COMPLETED" | "PROCESSING" | "%future added value";
+export type History_depositOrders = {
+    readonly edges: ReadonlyArray<{
+        readonly node: {
+            readonly id: string;
+            readonly status: ProcessStatus;
+            readonly createdAt: unknown;
+            readonly paidAmountCents: number;
+            readonly receivedAmountCents: number;
+            readonly " $fragmentRefs": FragmentRefs<"Show_deposit_order">;
+        };
+    }>;
+    readonly " $refType": "History_depositOrders";
+};
+export type History_depositOrders$data = History_depositOrders;
+export type History_depositOrders$key = {
+    readonly " $data"?: History_depositOrders$data;
+    readonly " $fragmentRefs": FragmentRefs<"History_depositOrders">;
+};
+
+
+
+const node: ReaderFragment = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "History_depositOrders",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "DepositOrderEdge",
+      "kind": "LinkedField",
+      "name": "edges",
+      "plural": true,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "DepositOrder",
+          "kind": "LinkedField",
+          "name": "node",
+          "plural": false,
+          "selections": [
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "id",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "status",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "createdAt",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "paidAmountCents",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "receivedAmountCents",
+              "storageKey": null
+            },
+            {
+              "args": null,
+              "kind": "FragmentSpread",
+              "name": "Show_deposit_order"
+            }
+          ],
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "type": "DepositOrderConnection",
+  "abstractKey": null
+};
+(node as any).hash = 'f810eed214d3beb7c443588e670d8f39';
+export default node;
--- a/app/javascript/src/pages/Orders/Deposit/History/index.ts
+++ b/app/javascript/src/pages/Orders/Deposit/History/index.ts
@@ -0,0 +1 @@
+export * from "./History";
--- a/app/javascript/src/pages/Orders/Deposit/Show/Show.tsx
+++ b/app/javascript/src/pages/Orders/Deposit/Show/Show.tsx
@@ -0,0 +1,94 @@
+import { graphql } from "babel-plugin-relay/macro";
+import type { FC } from "react";
+import React from "react";
+import { useFragment } from "react-relay";
+import copy from "copy-to-clipboard";
+
+import { Button, Modal } from "../../../../components";
+import { usePixQr } from "./hooks/usePixQr";
+import type { Show_deposit_order$key } from "./__generated__/Show_deposit_order.graphql";
+import { centsToUnit } from "../../../../utils/fiatMoney";
+import { getStatusTextAndColors } from "../../utils/processStatus";
+
+type Props = {
+  orderRef: Show_deposit_order$key;
+  onClose: () => void;
+};
+
+export const Show: FC<Props> = ({ orderRef, onClose }) => {
+  const order = useFragment<Show_deposit_order$key>(
+    graphql`
+      fragment Show_deposit_order on DepositOrder {
+        transactionId
+        paidAmountCents
+        receivedAmountCents
+        status
+        createdAt
+      }
+    `,
+    orderRef
+  );
+
+  const { qr, payload } = usePixQr({
+    value: order.paidAmountCents / 100,
+    transactionId: order.transactionId,
+  });
+
+  const handleClose = (_value: boolean) => {
+    onClose();
+  };
+
+  const handleCopy = () => {
+    copy(payload);
+  };
+
+  const [statusLabel] = getStatusTextAndColors(order.status);
+
+  return (
+    <Modal
+      title="Pedido de deposito"
+      isOpen
+      setIsOpen={handleClose}
+      className="w-full md:max-w-xl"
+    >
+      <div className="flex flex-col md:flex-row justify-between">
+        <div className="md:pt-2">
+          <ul>
+            <li>
+              Montante pago:{" "}
+              <span className="font-bold">
+                {centsToUnit(order.paidAmountCents)} BRL
+              </span>
+            </li>
+            <li>
+              Montante recebido:{" "}
+              <span className="font-bold">
+                {centsToUnit(order.receivedAmountCents)}
+              </span>
+            </li>
+            <li>
+              Pedido feito em:{" "}
+              <span className="font-bold">
+                {new Date(order.createdAt as string).toLocaleTimeString()}
+              </span>
+            </li>
+            <li>
+              Metodo de pagamento: <span className="font-bold">PIX</span>
+            </li>
+            <li>
+              Status: <span className="font-bold">{statusLabel}</span>
+            </li>
+          </ul>
+        </div>
+        <div>
+          <img
+            className="w-full m-auto"
+            src={qr}
+            alt="QR code para o PIX de deposito"
+          />
+          <Button onClick={handleCopy}>Copiar codigo</Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
--- a/app/javascript/src/pages/Orders/Deposit/Show/generated/Show_deposit_order.graphql.ts
+++ b/app/javascript/src/pages/Orders/Deposit/Show/generated/Show_deposit_order.graphql.ts
@@ -0,0 +1,70 @@
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ReaderFragment } from "relay-runtime";
+import { FragmentRefs } from "relay-runtime";
+export type ProcessStatus = "CANCELED" | "COMPLETED" | "PROCESSING" | "%future added value";
+export type Show_deposit_order = {
+    readonly transactionId: string;
+    readonly paidAmountCents: number;
+    readonly receivedAmountCents: number;
+    readonly status: ProcessStatus;
+    readonly createdAt: unknown;
+    readonly " $refType": "Show_deposit_order";
+};
+export type Show_deposit_order$data = Show_deposit_order;
+export type Show_deposit_order$key = {
+    readonly " $data"?: Show_deposit_order$data;
+    readonly " $fragmentRefs": FragmentRefs<"Show_deposit_order">;
+};
+
+
+
+const node: ReaderFragment = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "Show_deposit_order",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "transactionId",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "paidAmountCents",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "receivedAmountCents",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "status",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "createdAt",
+      "storageKey": null
+    }
+  ],
+  "type": "DepositOrder",
+  "abstractKey": null
+};
+(node as any).hash = '73e84cef63c17faa3087f19ba2c73e69';
+export default node;
--- a/app/javascript/src/pages/Orders/Deposit/Show/hooks/usePixQr.ts
+++ b/app/javascript/src/pages/Orders/Deposit/Show/hooks/usePixQr.ts
@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import { QrCodePix } from "qrcode-pix";
+
+type Props = {
+  value: number;
+  transactionId: string;
+};
+
+export const usePixQr = ({ value, transactionId }: Props) => {
+  const [qr, setQr] = useState<string>();
+
+  const qrCodePix = QrCodePix({
+    version: "01",
+    key: "joao.geonizeli@gmail.com",
+    name: "X Stake",
+    city: "TERESOPOLIS",
+    transactionId,
+    value,
+    notRepeatPayment: true,
+  });
+
+  useEffect(() => {
+    qrCodePix.base64().then((result) => {
+      setQr(result);
+    });
+  }, []);
+
+  return {
+    payload: qrCodePix.payload(),
+    loading: !qr,
+    qr,
+  };
+};
--- a/app/javascript/src/pages/Orders/Deposit/Show/index.ts
+++ b/app/javascript/src/pages/Orders/Deposit/Show/index.ts
@@ -0,0 +1 @@
+export * from "./Show";
--- a/app/javascript/src/pages/Orders/Deposit/generated/DepositQuery.graphql.ts
+++ b/app/javascript/src/pages/Orders/Deposit/generated/DepositQuery.graphql.ts
@@ -3,19 +3,12 @@
 // @ts-nocheck

 import { ConcreteRequest } from "relay-runtime";
-export type ProcessStatus = "CANCELED" | "COMPLETED" | "PROCESSING" | "%future added value";
+import { FragmentRefs } from "relay-runtime";
 export type DepositQueryVariables = {};
 export type DepositQueryResponse = {
    readonly depositOrders: {
-        readonly edges: ReadonlyArray<{
-            readonly node: {
-                readonly id: string;
-                readonly status: ProcessStatus;
-                readonly createdAt: unknown;
-                readonly paidAmountCents: number;
-                readonly receivedAmountCents: number;
-            };
-        }>;
+        readonly totalCount: number;
+        readonly " $fragmentRefs": FragmentRefs<"History_depositOrders">;
    };
 };
 export type DepositQuery = {
@@ -28,6 +21,12 @@ export type DepositQuery = {
 /*
 query DepositQuery {
  depositOrders {
+    totalCount
+    ...History_depositOrders
+  }
+}
+
+fragment History_depositOrders on DepositOrderConnection {
  edges {
    node {
      id
@@ -35,14 +34,35 @@ query DepositQuery {
      createdAt
      paidAmountCents
      receivedAmountCents
+      ...Show_deposit_order
    }
  }
-  }
+}
+
+fragment Show_deposit_order on DepositOrder {
+  transactionId
+  paidAmountCents
+  receivedAmountCents
+  status
+  createdAt
 }
 */

 const node: ConcreteRequest = (function(){
-var v0 = [
+var v0 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "totalCount",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "DepositQuery",
+    "selections": [
      {
        "alias": null,
        "args": null,
@@ -51,6 +71,34 @@ var v0 = [
        "name": "depositOrders",
        "plural": false,
        "selections": [
+          (v0/*: any*/),
+          {
+            "args": null,
+            "kind": "FragmentSpread",
+            "name": "History_depositOrders"
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "DepositQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "DepositOrderConnection",
+        "kind": "LinkedField",
+        "name": "depositOrders",
+        "plural": false,
+        "selections": [
+          (v0/*: any*/),
          {
            "alias": null,
            "args": null,
@@ -101,43 +149,34 @@ var v0 = [
                    "kind": "ScalarField",
                    "name": "receivedAmountCents",
                    "storageKey": null
-              }
-            ],
-            "storageKey": null
-          }
-        ],
-        "storageKey": null
-      }
-    ],
-    "storageKey": null
-  }
-];
-return {
-  "fragment": {
-    "argumentDefinitions": [],
-    "kind": "Fragment",
-    "metadata": null,
-    "name": "DepositQuery",
-    "selections": (v0/*: any*/),
-    "type": "Query",
-    "abstractKey": null
                  },
-  "kind": "Request",
-  "operation": {
-    "argumentDefinitions": [],
-    "kind": "Operation",
-    "name": "DepositQuery",
-    "selections": (v0/*: any*/)
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "transactionId",
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
  },
  "params": {
-    "cacheID": "50b4e177048e536e83735990104fce02",
+    "cacheID": "99f3fbbd023ef8a38b0490275cb58aa6",
    "id": null,
    "metadata": {},
    "name": "DepositQuery",
    "operationKind": "query",
-    "text": "query DepositQuery {\n  depositOrders {\n    edges {\n      node {\n        id\n        status\n        createdAt\n        paidAmountCents\n        receivedAmountCents\n      }\n    }\n  }\n}\n"
+    "text": "query DepositQuery {\n  depositOrders {\n    totalCount\n    ...History_depositOrders\n  }\n}\n\nfragment History_depositOrders on DepositOrderConnection {\n  edges {\n    node {\n      id\n      status\n      createdAt\n      paidAmountCents\n      receivedAmountCents\n      ...Show_deposit_order\n    }\n  }\n}\n\nfragment Show_deposit_order on DepositOrder {\n  transactionId\n  paidAmountCents\n  receivedAmountCents\n  status\n  createdAt\n}\n"
  }
 };
 })();
-(node as any).hash = 'f4d2d75a8903d262de47e02f44136a65';
+(node as any).hash = '8394525008fabe782ee41126e50d63b1';
 export default node;
--- a/app/models/deposit_order.rb
+++ b/app/models/deposit_order.rb
@@ -10,6 +10,7 @@
 #  status                :string           not null
 #  created_at            :datetime         not null
 #  updated_at            :datetime         not null
+#  transaction_id        :uuid             not null
 #  user_id               :bigint           not null
 #
 # Indexes
--- a/db/migrate/20210906021555_enable_uuid.rb
+++ b/db/migrate/20210906021555_enable_uuid.rb
@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+class EnableUuid < ActiveRecord::Migration[6.1]
+  def change
+    enable_extension("pgcrypto")
+  end
+end
--- a/db/migrate/20210906021610_add_transaction_id_to_despoit_order.rb
+++ b/db/migrate/20210906021610_add_transaction_id_to_despoit_order.rb
@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+class AddTransactionIdToDespoitOrder < ActiveRecord::Migration[6.1]
+  def change
+    add_column(:deposit_orders, :transaction_id, :uuid, default: "gen_random_uuid()", null: false)
+  end
+end
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,9 +10,10 @@
 #
 # It's strongly recommended that you check this file into your version control system.

-ActiveRecord::Schema.define(version: 2021_09_05_234913) do
+ActiveRecord::Schema.define(version: 2021_09_06_021610) do

  # These are extensions that must be enabled in order to support this database
+  enable_extension "pgcrypto"
  enable_extension "plpgsql"

  create_table "active_storage_attachments", force: :cascade do |t|
@@ -80,6 +81,7 @@ ActiveRecord::Schema.define(version: 2021_09_05_234913) do
    t.integer "paid_amount_cents", default: 0, null: false
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
+    t.uuid "transaction_id", default: -> { "gen_random_uuid()" }, null: false
    t.index ["user_id"], name: "index_deposit_orders_on_user_id"
  end

--- a/erd.svg
+++ b/erd.svg
@@ -4,12 +4,12 @@
 <!-- Generated by graphviz version 2.48.0 (0)
 -->
 <!-- Title: XStake Pages: 1 -->
-<svg width="606pt" height="786pt"
- viewBox="0.00 0.00 605.60 785.60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(28.8 756.8)">
+<svg width="606pt" height="799pt"
+ viewBox="0.00 0.00 605.60 798.60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(28.8 769.8)">
 <title>XStake</title>
-<polygon fill="white" stroke="transparent" points="-28.8,28.8 -28.8,-756.8 576.8,-756.8 576.8,28.8 -28.8,28.8"/>
-<text text-anchor="middle" x="274" y="-713.6" font-family="Arial Bold" font-size="13.00">XStake domain model</text>
+<polygon fill="white" stroke="transparent" points="-28.8,28.8 -28.8,-769.8 576.8,-769.8 576.8,28.8 -28.8,28.8"/>
+<text text-anchor="middle" x="274" y="-726.6" font-family="Arial Bold" font-size="13.00">XStake domain model</text>
 <!-- m_AdminUser -->
 <g id="node1" class="node">
 <title>m_AdminUser</title>
@@ -30,72 +30,74 @@
 <!-- m_Balance -->
 <g id="node2" class="node">
 <title>m_Balance</title>
-<path fill="none" stroke="black" d="M223,-634.5C223,-634.5 343,-634.5 343,-634.5 349,-634.5 355,-640.5 355,-646.5 355,-646.5 355,-678.5 355,-678.5 355,-684.5 349,-690.5 343,-690.5 343,-690.5 223,-690.5 223,-690.5 217,-690.5 211,-684.5 211,-678.5 211,-678.5 211,-646.5 211,-646.5 211,-640.5 217,-634.5 223,-634.5"/>
-<text text-anchor="start" x="259.5" y="-677.7" font-family="Arial Bold" font-size="11.00">Balance</text>
-<polyline fill="none" stroke="black" points="211,-670.5 355,-670.5 "/>
-<text text-anchor="start" x="218" y="-657.5" font-family="Arial" font-size="10.00">amount </text>
-<text text-anchor="start" x="254" y="-657.5" font-family="Arial Italic" font-size="10.00" fill="#999999">decimal (20,10) ∗</text>
-<text text-anchor="start" x="218" y="-644.5" font-family="Arial" font-size="10.00">user_id </text>
-<text text-anchor="start" x="253" y="-644.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer (8) ∗ FK</text>
+<path fill="none" stroke="black" d="M223,-647.5C223,-647.5 343,-647.5 343,-647.5 349,-647.5 355,-653.5 355,-659.5 355,-659.5 355,-691.5 355,-691.5 355,-697.5 349,-703.5 343,-703.5 343,-703.5 223,-703.5 223,-703.5 217,-703.5 211,-697.5 211,-691.5 211,-691.5 211,-659.5 211,-659.5 211,-653.5 217,-647.5 223,-647.5"/>
+<text text-anchor="start" x="259.5" y="-690.7" font-family="Arial Bold" font-size="11.00">Balance</text>
+<polyline fill="none" stroke="black" points="211,-683.5 355,-683.5 "/>
+<text text-anchor="start" x="218" y="-670.5" font-family="Arial" font-size="10.00">amount </text>
+<text text-anchor="start" x="254" y="-670.5" font-family="Arial Italic" font-size="10.00" fill="#999999">decimal (20,10) ∗</text>
+<text text-anchor="start" x="218" y="-657.5" font-family="Arial" font-size="10.00">user_id </text>
+<text text-anchor="start" x="253" y="-657.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer (8) ∗ FK</text>
 </g>
 <!-- m_PaperTrail::Version -->
 <g id="node6" class="node">
 <title>m_PaperTrail::Version</title>
-<path fill="none" stroke="black" d="M416,-404C416,-404 536,-404 536,-404 542,-404 548,-410 548,-416 548,-416 548,-487 548,-487 548,-493 542,-499 536,-499 536,-499 416,-499 416,-499 410,-499 404,-493 404,-487 404,-487 404,-416 404,-416 404,-410 410,-404 416,-404"/>
-<text text-anchor="start" x="423.5" y="-486.2" font-family="Arial Bold" font-size="11.00">PaperTrail::Version</text>
-<polyline fill="none" stroke="black" points="404,-479 548,-479 "/>
-<text text-anchor="start" x="411" y="-465.5" font-family="Arial" font-size="10.00">event </text>
-<text text-anchor="start" x="439" y="-465.5" font-family="Arial Italic" font-size="10.00" fill="#999999">string ∗</text>
-<text text-anchor="start" x="411" y="-452.5" font-family="Arial" font-size="10.00">item_id </text>
-<text text-anchor="start" x="446" y="-452.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer (8) ∗ FK</text>
-<text text-anchor="start" x="411" y="-439.5" font-family="Arial" font-size="10.00">item_type </text>
-<text text-anchor="start" x="457" y="-439.5" font-family="Arial Italic" font-size="10.00" fill="#999999">string ∗</text>
-<text text-anchor="start" x="411" y="-426.5" font-family="Arial" font-size="10.00">object </text>
-<text text-anchor="start" x="441" y="-426.5" font-family="Arial Italic" font-size="10.00" fill="#999999">text</text>
-<text text-anchor="start" x="411" y="-413.5" font-family="Arial" font-size="10.00">whodunnit </text>
-<text text-anchor="start" x="459" y="-413.5" font-family="Arial Italic" font-size="10.00" fill="#999999">string</text>
+<path fill="none" stroke="black" d="M416,-410C416,-410 536,-410 536,-410 542,-410 548,-416 548,-422 548,-422 548,-493 548,-493 548,-499 542,-505 536,-505 536,-505 416,-505 416,-505 410,-505 404,-499 404,-493 404,-493 404,-422 404,-422 404,-416 410,-410 416,-410"/>
+<text text-anchor="start" x="423.5" y="-492.2" font-family="Arial Bold" font-size="11.00">PaperTrail::Version</text>
+<polyline fill="none" stroke="black" points="404,-485 548,-485 "/>
+<text text-anchor="start" x="411" y="-471.5" font-family="Arial" font-size="10.00">event </text>
+<text text-anchor="start" x="439" y="-471.5" font-family="Arial Italic" font-size="10.00" fill="#999999">string ∗</text>
+<text text-anchor="start" x="411" y="-458.5" font-family="Arial" font-size="10.00">item_id </text>
+<text text-anchor="start" x="446" y="-458.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer (8) ∗ FK</text>
+<text text-anchor="start" x="411" y="-445.5" font-family="Arial" font-size="10.00">item_type </text>
+<text text-anchor="start" x="457" y="-445.5" font-family="Arial Italic" font-size="10.00" fill="#999999">string ∗</text>
+<text text-anchor="start" x="411" y="-432.5" font-family="Arial" font-size="10.00">object </text>
+<text text-anchor="start" x="441" y="-432.5" font-family="Arial Italic" font-size="10.00" fill="#999999">text</text>
+<text text-anchor="start" x="411" y="-419.5" font-family="Arial" font-size="10.00">whodunnit </text>
+<text text-anchor="start" x="459" y="-419.5" font-family="Arial Italic" font-size="10.00" fill="#999999">string</text>
 </g>
 <!-- m_Balance&#45;&gt;m_PaperTrail::Version -->
 <g id="edge1" class="edge">
 <title>m_Balance&#45;&gt;m_PaperTrail::Version</title>
-<path fill="none" stroke="black" d="M347.87,-634.49C355.05,-630.01 361.94,-625.01 368,-619.5 402.57,-588.04 430.46,-542.97 449.09,-507.43"/>
-<polygon fill="black" stroke="black" points="452.07,-508.52 453.39,-499.08 446.47,-505.63 452.07,-508.52"/>
+<path fill="none" stroke="black" d="M348.4,-647.33C355.4,-642.9 362.11,-637.96 368,-632.5 404.05,-599.08 432.34,-550.81 450.75,-513.42"/>
+<polygon fill="black" stroke="black" points="453.67,-514.61 454.76,-505.14 448,-511.87 453.67,-514.61"/>
 </g>
 <!-- m_BuyCryptoOrder -->
 <g id="node3" class="node">
 <title>m_BuyCryptoOrder</title>
-<path fill="none" stroke="black" d="M210,-522.5C210,-522.5 356,-522.5 356,-522.5 362,-522.5 368,-528.5 368,-534.5 368,-534.5 368,-592.5 368,-592.5 368,-598.5 362,-604.5 356,-604.5 356,-604.5 210,-604.5 210,-604.5 204,-604.5 198,-598.5 198,-592.5 198,-592.5 198,-534.5 198,-534.5 198,-528.5 204,-522.5 210,-522.5"/>
-<text text-anchor="start" x="237" y="-591.7" font-family="Arial Bold" font-size="11.00">BuyCryptoOrder</text>
-<polyline fill="none" stroke="black" points="198,-584.5 368,-584.5 "/>
-<text text-anchor="start" x="205" y="-571.5" font-family="Arial" font-size="10.00">paid_amount_cents </text>
-<text text-anchor="start" x="293" y="-571.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer ∗</text>
-<text text-anchor="start" x="205" y="-558.5" font-family="Arial" font-size="10.00">received_amount </text>
-<text text-anchor="start" x="283" y="-558.5" font-family="Arial Italic" font-size="10.00" fill="#999999">decimal (20,10) ∗</text>
-<text text-anchor="start" x="205" y="-545.5" font-family="Arial" font-size="10.00">status </text>
-<text text-anchor="start" x="236" y="-545.5" font-family="Arial Italic" font-size="10.00" fill="#999999">string ∗</text>
-<text text-anchor="start" x="205" y="-532.5" font-family="Arial" font-size="10.00">user_id </text>
-<text text-anchor="start" x="240" y="-532.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer (8) ∗ FK</text>
+<path fill="none" stroke="black" d="M210,-535.5C210,-535.5 356,-535.5 356,-535.5 362,-535.5 368,-541.5 368,-547.5 368,-547.5 368,-605.5 368,-605.5 368,-611.5 362,-617.5 356,-617.5 356,-617.5 210,-617.5 210,-617.5 204,-617.5 198,-611.5 198,-605.5 198,-605.5 198,-547.5 198,-547.5 198,-541.5 204,-535.5 210,-535.5"/>
+<text text-anchor="start" x="237" y="-604.7" font-family="Arial Bold" font-size="11.00">BuyCryptoOrder</text>
+<polyline fill="none" stroke="black" points="198,-597.5 368,-597.5 "/>
+<text text-anchor="start" x="205" y="-584.5" font-family="Arial" font-size="10.00">paid_amount_cents </text>
+<text text-anchor="start" x="293" y="-584.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer ∗</text>
+<text text-anchor="start" x="205" y="-571.5" font-family="Arial" font-size="10.00">received_amount </text>
+<text text-anchor="start" x="283" y="-571.5" font-family="Arial Italic" font-size="10.00" fill="#999999">decimal (20,10) ∗</text>
+<text text-anchor="start" x="205" y="-558.5" font-family="Arial" font-size="10.00">status </text>
+<text text-anchor="start" x="236" y="-558.5" font-family="Arial Italic" font-size="10.00" fill="#999999">string ∗</text>
+<text text-anchor="start" x="205" y="-545.5" font-family="Arial" font-size="10.00">user_id </text>
+<text text-anchor="start" x="240" y="-545.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer (8) ∗ FK</text>
 </g>
 <!-- m_DepositOrder -->
 <g id="node4" class="node">
 <title>m_DepositOrder</title>
-<path fill="none" stroke="black" d="M214.5,-410.5C214.5,-410.5 351.5,-410.5 351.5,-410.5 357.5,-410.5 363.5,-416.5 363.5,-422.5 363.5,-422.5 363.5,-480.5 363.5,-480.5 363.5,-486.5 357.5,-492.5 351.5,-492.5 351.5,-492.5 214.5,-492.5 214.5,-492.5 208.5,-492.5 202.5,-486.5 202.5,-480.5 202.5,-480.5 202.5,-422.5 202.5,-422.5 202.5,-416.5 208.5,-410.5 214.5,-410.5"/>
-<text text-anchor="start" x="245.5" y="-479.7" font-family="Arial Bold" font-size="11.00">DepositOrder</text>
-<polyline fill="none" stroke="black" points="202.5,-472.5 363.5,-472.5 "/>
-<text text-anchor="start" x="210" y="-459.5" font-family="Arial" font-size="10.00">paid_amount_cents </text>
-<text text-anchor="start" x="298" y="-459.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer ∗</text>
-<text text-anchor="start" x="210" y="-446.5" font-family="Arial" font-size="10.00">received_amount_cents </text>
-<text text-anchor="start" x="317" y="-446.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer ∗</text>
-<text text-anchor="start" x="210" y="-433.5" font-family="Arial" font-size="10.00">status </text>
-<text text-anchor="start" x="241" y="-433.5" font-family="Arial Italic" font-size="10.00" fill="#999999">string ∗</text>
-<text text-anchor="start" x="210" y="-420.5" font-family="Arial" font-size="10.00">user_id </text>
-<text text-anchor="start" x="245" y="-420.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer (8) ∗ FK</text>
+<path fill="none" stroke="black" d="M214.5,-410C214.5,-410 351.5,-410 351.5,-410 357.5,-410 363.5,-416 363.5,-422 363.5,-422 363.5,-493 363.5,-493 363.5,-499 357.5,-505 351.5,-505 351.5,-505 214.5,-505 214.5,-505 208.5,-505 202.5,-499 202.5,-493 202.5,-493 202.5,-422 202.5,-422 202.5,-416 208.5,-410 214.5,-410"/>
+<text text-anchor="start" x="245.5" y="-492.2" font-family="Arial Bold" font-size="11.00">DepositOrder</text>
+<polyline fill="none" stroke="black" points="202.5,-485 363.5,-485 "/>
+<text text-anchor="start" x="210" y="-471.5" font-family="Arial" font-size="10.00">paid_amount_cents </text>
+<text text-anchor="start" x="298" y="-471.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer ∗</text>
+<text text-anchor="start" x="210" y="-458.5" font-family="Arial" font-size="10.00">received_amount_cents </text>
+<text text-anchor="start" x="317" y="-458.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer ∗</text>
+<text text-anchor="start" x="210" y="-445.5" font-family="Arial" font-size="10.00">status </text>
+<text text-anchor="start" x="241" y="-445.5" font-family="Arial Italic" font-size="10.00" fill="#999999">string ∗</text>
+<text text-anchor="start" x="210" y="-432.5" font-family="Arial" font-size="10.00">transaction_id </text>
+<text text-anchor="start" x="274" y="-432.5" font-family="Arial Italic" font-size="10.00" fill="#999999">uuid ∗</text>
+<text text-anchor="start" x="210" y="-419.5" font-family="Arial" font-size="10.00">user_id </text>
+<text text-anchor="start" x="245" y="-419.5" font-family="Arial Italic" font-size="10.00" fill="#999999">integer (8) ∗ FK</text>
 </g>
 <!-- m_DepositOrder&#45;&gt;m_PaperTrail::Version -->
 <g id="edge2" class="edge">
 <title>m_DepositOrder&#45;&gt;m_PaperTrail::Version</title>
-<path fill="none" stroke="black" d="M363.62,-451.5C373.81,-451.5 384.24,-451.5 394.44,-451.5"/>
-<polygon fill="black" stroke="black" points="394.74,-454.65 403.74,-451.5 394.74,-448.35 394.74,-454.65"/>
+<path fill="none" stroke="black" d="M363.62,-457.5C373.81,-457.5 384.24,-457.5 394.44,-457.5"/>
+<polygon fill="black" stroke="black" points="394.74,-460.65 403.74,-457.5 394.74,-454.35 394.74,-460.65"/>
 </g>
 <!-- m_FiatBalance -->
 <g id="node5" class="node">
@@ -113,8 +115,8 @@
 <!-- m_FiatBalance&#45;&gt;m_PaperTrail::Version -->
 <g id="edge3" class="edge">
 <title>m_FiatBalance&#45;&gt;m_PaperTrail::Version</title>
-<path fill="none" stroke="black" d="M346.28,-380.06C362.09,-388.84 379.29,-398.38 395.81,-407.55"/>
-<polygon fill="black" stroke="black" points="394.46,-410.41 403.86,-412.02 397.52,-404.9 394.46,-410.41"/>
+<path fill="none" stroke="black" d="M342.86,-380.02C359.59,-389.83 378.09,-400.67 395.82,-411.07"/>
+<polygon fill="black" stroke="black" points="394.54,-413.97 403.9,-415.81 397.73,-408.54 394.54,-413.97"/>
 </g>
 <!-- m_SellCryptoOrder -->
 <g id="node7" class="node">
@@ -172,19 +174,19 @@
 <!-- m_User&#45;&gt;m_Balance -->
 <g id="edge6" class="edge">
 <title>m_User&#45;&gt;m_Balance</title>
-<path fill="none" stroke="black" d="M96.54,-412.71C112.55,-473.07 143.56,-560.96 198,-619.5 203.13,-625.02 209.13,-629.94 215.52,-634.31"/>
+<path fill="none" stroke="black" d="M94.93,-412.53C110.13,-475.8 140.87,-570.04 198,-632.5 203.09,-638.06 209.06,-643.01 215.43,-647.39"/>
 </g>
 <!-- m_User&#45;&gt;m_BuyCryptoOrder -->
 <g id="edge9" class="edge">
 <title>m_User&#45;&gt;m_BuyCryptoOrder</title>
-<path fill="none" stroke="black" d="M122.25,-412.83C142.63,-443.73 169.16,-479.6 198,-507.5 201.14,-510.54 204.47,-513.52 207.91,-516.42"/>
-<polygon fill="black" stroke="black" points="206.16,-519.05 215.13,-522.26 210.12,-514.15 206.16,-519.05"/>
+<path fill="none" stroke="black" d="M118.01,-412.84C138.55,-447.46 166.47,-488.88 198,-520.5 201.09,-523.59 204.37,-526.62 207.78,-529.55"/>
+<polygon fill="black" stroke="black" points="205.99,-532.16 214.94,-535.45 210,-527.3 205.99,-532.16"/>
 </g>
 <!-- m_User&#45;&gt;m_DepositOrder -->
 <g id="edge8" class="edge">
 <title>m_User&#45;&gt;m_DepositOrder</title>
-<path fill="none" stroke="black" d="M162.2,-388C173.39,-393.94 184.93,-400.05 196.22,-406.04"/>
-<polygon fill="black" stroke="black" points="194.96,-408.93 204.39,-410.37 197.91,-403.37 194.96,-408.93"/>
+<path fill="none" stroke="black" d="M162.2,-390.41C172.76,-396.33 183.63,-402.41 194.32,-408.4"/>
+<polygon fill="black" stroke="black" points="193.05,-411.3 202.44,-412.95 196.12,-405.8 193.05,-411.3"/>
 </g>
 <!-- m_User&#45;&gt;m_FiatBalance -->
 <g id="edge7" class="edge">
--- a/package.json
+++ b/package.json
@@ -31,9 +31,11 @@
    "babel-plugin-relay": "^11.0.2",
    "bignumber.js": "^9.0.1",
    "classnames": "^2.3.1",
+    "copy-to-clipboard": "^3.3.1",
    "ethers": "^5.4.4",
    "graphql-scalars": "^1.10.0",
    "postcss": "^7",
+    "qrcode-pix": "^3.0.3",
    "ramda": "^0.27.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
--- a/spec/factories/deposit_orders.rb
+++ b/spec/factories/deposit_orders.rb
@@ -10,6 +10,7 @@
 #  status                :string           not null
 #  created_at            :datetime         not null
 #  updated_at            :datetime         not null
+#  transaction_id        :uuid             not null
 #  user_id               :bigint           not null
 #
 # Indexes
--- a/spec/models/deposit_order_spec.rb
+++ b/spec/models/deposit_order_spec.rb
@@ -10,6 +10,7 @@
 #  status                :string           not null
 #  created_at            :datetime         not null
 #  updated_at            :datetime         not null
+#  transaction_id        :uuid             not null
 #  user_id               :bigint           not null
 #
 # Indexes
--- a/yarn.lock
+++ b/yarn.lock
@@ -1053,6 +1053,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.10.5":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
+  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.14.5":
  version "7.14.5"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
@@ -1491,6 +1498,17 @@
  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
  integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==

+"@jest/types@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
+  integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+
 "@nodelib/fs.scandir@2.1.5":
  version "2.1.5"
  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1594,6 +1612,33 @@
  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724"
  integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==

+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
+  integrity sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==
+
+"@types/istanbul-lib-report@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
+  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
+  integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/jest@^26.0.15":
+  version "26.0.24"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.24.tgz#943d11976b16739185913a1936e0de0c4a7d595a"
+  integrity sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==
+  dependencies:
+    jest-diff "^26.0.0"
+    pretty-format "^26.0.0"
+
 "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8":
  version "7.0.9"
  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
@@ -1682,6 +1727,18 @@
  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==

+"@types/yargs-parser@*":
+  version "20.2.1"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.1.tgz#3b9ce2489919d9e4fea439b76916abc34b2df129"
+  integrity sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==
+
+"@types/yargs@^15.0.0":
+  version "15.0.14"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.14.tgz#26d821ddb89e70492160b66d10a0eb6df8f6fb06"
+  integrity sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@typescript-eslint/eslint-plugin@^4.28.0":
  version "4.29.0"
  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.29.0.tgz#b866c9cd193bfaba5e89bade0015629ebeb27996"
@@ -2345,7 +2402,7 @@ balanced-match@^1.0.0:
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==

-base64-js@^1.0.2:
+base64-js@^1.0.2, base64-js@^1.3.1:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
@@ -2563,7 +2620,25 @@ bser@2.1.1:
  dependencies:
    node-int64 "^0.4.0"

-buffer-from@^1.0.0:
+buffer-alloc-unsafe@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
+  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
+
+buffer-alloc@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
+  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
+  dependencies:
+    buffer-alloc-unsafe "^1.1.0"
+    buffer-fill "^1.0.0"
+
+buffer-fill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
+  integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
+
+buffer-from@^1.0.0, buffer-from@^1.1.1:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
@@ -2587,6 +2662,14 @@ buffer@^4.3.0:
    ieee754 "^1.1.4"
    isarray "^1.0.0"

+buffer@^5.4.3:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
 builtin-status-codes@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
@@ -3039,6 +3122,13 @@ copy-descriptor@^0.1.0:
  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=

+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.14.0, core-js-compat@^3.16.0:
  version "3.16.0"
  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.16.0.tgz#fced4a0a534e7e02f7e084bff66c701f8281805f"
@@ -3519,6 +3609,11 @@ didyoumean@^1.2.2:
  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==

+diff-sequences@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
+  integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
+
 diffie-hellman@^5.0.0:
  version "5.0.3"
  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -3528,6 +3623,11 @@ diffie-hellman@^5.0.0:
    miller-rabin "^4.0.0"
    randombytes "^2.0.0"

+dijkstrajs@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.2.tgz#2e48c0d3b825462afe75ab4ad5e829c8ece36257"
+  integrity sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg==
+
 dir-glob@^3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -4946,7 +5046,7 @@ icss-utils@^4.0.0, icss-utils@^4.1.1:
  dependencies:
    postcss "^7.0.14"

-ieee754@^1.1.4:
+ieee754@^1.1.13, ieee754@^1.1.4:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
@@ -5407,6 +5507,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=

+isarray@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isexe@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -5424,6 +5529,21 @@ isobject@^3.0.0, isobject@^3.0.1:
  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=

+jest-diff@^26.0.0:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
+  integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^26.6.2"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.6.2"
+
+jest-get-type@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
+  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
+
 jest-worker@^26.5.0:
  version "26.6.2"
  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
@@ -5657,6 +5777,11 @@ locate-path@^6.0.0:
  dependencies:
    p-locate "^5.0.0"

+lodash-es@^4.17.11:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.clonedeep@^4.5.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
@@ -5707,7 +5832,7 @@ lodash.uniq@^4.5.0:
  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=

-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.21, lodash@^4.17.5:
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6686,6 +6811,11 @@ please-upgrade-node@^3.2.0:
  dependencies:
    semver-compare "^1.0.0"

+pngjs@^3.3.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
+  integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
+
 pnp-webpack-plugin@^1.6.4:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.7.0.tgz#65741384f6d8056f36e2255a8d67ffc20866f5c9"
@@ -6693,6 +6823,11 @@ pnp-webpack-plugin@^1.6.4:
  dependencies:
    ts-pnp "^1.1.6"

+polycrc@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/polycrc/-/polycrc-1.1.0.tgz#7ee75bd0b47d377d26d78ee7f5c529dde0c77af0"
+  integrity sha512-rEOTU2hpsys8CwOre1XptjEm1pGA8F2mCLI0Hxb1lc7HweXi0m9K70FX5uiGB63v1kklyZ0UfbWNo7pOXp/BHg==
+
 portfinder@^1.0.26:
  version "1.0.28"
  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -7423,6 +7558,16 @@ prettier@^2.3.2:
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
  integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==

+pretty-format@^26.0.0, pretty-format@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
+  integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^17.0.1"
+
 pretty-hrtime@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -7464,6 +7609,11 @@ prop-types@^15.6.2, prop-types@^15.7.2:
    object-assign "^4.1.1"
    react-is "^16.8.1"

+property-expr@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.4.tgz#37b925478e58965031bb612ec5b3260f8241e910"
+  integrity sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg==
+
 proxy-addr@~2.0.5:
  version "2.0.7"
  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -7544,6 +7694,29 @@ q@^1.1.2:
  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=

+qrcode-pix@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/qrcode-pix/-/qrcode-pix-3.0.3.tgz#2cc050f42ce216fad0092d8d82c95b0e8a51ff1d"
+  integrity sha512-/4j4ibP0PLmhvJRJTPUv6RSNn6iJ3CmVke1i59v8gbiB1N7V0ZJZ0tgZoGMeQ85H9X0I8hzaQhtet0KX0YMANg==
+  dependencies:
+    "@types/jest" "^26.0.15"
+    polycrc "^1.0.1"
+    qrcode "^1.4.4"
+    yup "^0.30.0"
+
+qrcode@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83"
+  integrity sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==
+  dependencies:
+    buffer "^5.4.3"
+    buffer-alloc "^1.2.0"
+    buffer-from "^1.1.1"
+    dijkstrajs "^1.0.1"
+    isarray "^2.0.1"
+    pngjs "^3.3.0"
+    yargs "^13.2.4"
+
 qs@6.7.0:
  version "6.7.0"
  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@@ -7631,6 +7804,11 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

+react-is@^17.0.1:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 react-relay@^11.0.2:
  version "11.0.2"
  resolved "https://registry.yarnpkg.com/react-relay/-/react-relay-11.0.2.tgz#5f77e30e0d592f19c641e5dcc42f5d828bd16da5"
@@ -8914,11 +9092,21 @@ to-regex@^3.0.1, to-regex@^3.0.2:
    regex-not "^1.0.2"
    safe-regex "^1.1.0"

+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==

+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
+
 ts-pnp@^1.1.6:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
@@ -9487,7 +9675,7 @@ yargs-parser@^18.1.2:
    camelcase "^5.0.0"
    decamelize "^1.2.0"

-yargs@^13.3.2:
+yargs@^13.2.4, yargs@^13.3.2:
  version "13.3.2"
  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
@@ -9524,3 +9712,14 @@ yocto-queue@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yup@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.30.0.tgz#427ee076abb1d7e01e747fb782801f7df252fb76"
+  integrity sha512-GX3vqpC9E+Ow0fmQPgqbEg7UV40XRrN1IOEgKF5v04v6T4ha2vBas/hu0thWgewk8L4wUEBLRO/EnXwYyP+p+A==
+  dependencies:
+    "@babel/runtime" "^7.10.5"
+    lodash "^4.17.20"
+    lodash-es "^4.17.11"
+    property-expr "^2.0.4"
+    toposort "^2.0.2"