From a2b7f2f8a62ef549b363360bbf127f5b943aebf5 Mon Sep 17 00:00:00 2001
From: fritzschoff <max.j.f@gmx.de>
Date: Wed, 25 May 2022 10:25:52 +0200
Subject: [PATCH 1/6] feat(transaction dialog): context that triggers a dialog
 whenever a tx hash is passed to the context

---
 .eslintrc                                     |   9 +-
 .prettierrc                                   |  24 +-
 package.json                                  |   5 +-
 src/context/useTransactionDialogContext.tsx   | 132 +++
 .../useTransactoinDialogContext.stories.tsx   |  44 +
 yarn.lock                                     | 795 +++++++++++++++++-
 6 files changed, 989 insertions(+), 20 deletions(-)
 create mode 100644 src/context/useTransactionDialogContext.tsx
 create mode 100644 src/context/useTransactoinDialogContext.stories.tsx

diff --git a/.eslintrc b/.eslintrc
index c7cf84c..99550e5 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -40,8 +40,8 @@
   "rules": {
     "prettier/prettier": ["error", {}, { "usePrettierrc": true }],
     // https://github.com/lydell/eslint-plugin-simple-import-sort
-    "simple-import-sort/imports": "error",
-    "simple-import-sort/exports": "error",
+    "simple-import-sort/imports": "off",
+    "simple-import-sort/exports": "off",
     // https://eslint.org/docs/rules/
     "no-var": "error",
     "no-console": "warn",
@@ -68,7 +68,8 @@
     "react/jsx-fragments": ["error", "syntax"],
     "react/jsx-boolean-value": ["error", "never"],
     "react/jsx-curly-brace-presence": ["error", "never"],
-    "react/jsx-sort-props": [
+    /* Super annoying when importing an SVG from Figma, throws millions of errors */
+    /*     "react/jsx-sort-props": [
       "error",
       {
         "callbacksLast": true,
@@ -78,7 +79,7 @@
         "noSortAlphabetically": false,
         "reservedFirst": true
       }
-    ],
+    ], */
     // https://github.com/typescript-eslint/typescript-eslint
     "@typescript-eslint/explicit-module-boundary-types": "off",
     // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y
diff --git a/.prettierrc b/.prettierrc
index 759808e..759dc64 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,14 +1,14 @@
 {
-	"semi": true,
-	"useTabs": false,
-	"tabWidth": 2,
-	"endOfLine": "auto",
-	"quoteProps": "as-needed",
-	"printWidth": 100,
-	"singleQuote": false,
-	"arrowParens": "always",
-	"trailingComma": "none",
-	"bracketSpacing": true,
-	"jsxSingleQuote": false,
-	"bracketSameLine": false
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "endOfLine": "auto",
+  "quoteProps": "as-needed",
+  "printWidth": 100,
+  "singleQuote": false,
+  "arrowParens": "always",
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxSingleQuote": false,
+  "bracketSameLine": false
 }
diff --git a/package.json b/package.json
index d9bb2f3..738bc4f 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,10 @@
     "commit": "cz",
     "clean": "rimraf dist",
     "deploy-storybook": "yarn build-storybook && mkdir -p ./storybook-static/fonts && cp ./src/fonts/* ./storybook-static/fonts/ && gh-pages -d storybook-static",
-    "yalc-publish": "yarn build && yalc push --update",
-    "permission": "chmod u+r+x build.sh"
+    "yalc-publish": "yarn build && yalc push --update"
   },
   "dependencies": {
+    "@synthetixio/transaction-notifier": "^2.70.1",
     "clsx": "^1.1.1",
     "lodash": "^4.17.21",
     "react-transition-group": "^4.4.2"
@@ -67,6 +67,7 @@
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
+    "ethers": "^5.6.7",
     "gh-pages": "^3.2.3",
     "husky": "^7.0.4",
     "lint-staged": "^12.1.2",
diff --git a/src/context/useTransactionDialogContext.tsx b/src/context/useTransactionDialogContext.tsx
new file mode 100644
index 0000000..42494e0
--- /dev/null
+++ b/src/context/useTransactionDialogContext.tsx
@@ -0,0 +1,132 @@
+import { Dialog, Spinner } from "components";
+import { createContext, ReactNode, useContext, useEffect, useState } from "react";
+import { providers } from "ethers";
+import { TransactionNotifier } from "@synthetixio/transaction-notifier";
+
+type TxState = "signing" | "mining" | "failed" | "confirmed" | "error";
+
+interface TransactionDialogContextType {
+  setTxHash: React.Dispatch<string | undefined>;
+  visible: boolean;
+  setContent: React.Dispatch<React.SetStateAction<ReactNode | undefined>>;
+  state: TxState;
+}
+const Svg = ({ txState }: Record<"txState", TxState>) => {
+  return (
+    <svg fill="none" height="94" viewBox="0 0 94 94" width="94" xmlns="http://www.w3.org/2000/svg">
+      <g filter="url(#filter0_d_1447_13624)">
+        <circle
+          cx="47"
+          cy="47"
+          r="31"
+          stroke={txState === "mining" || txState === "signing" ? "#FFD75C" : "red"}
+          strokeWidth="2"
+        />
+      </g>
+      <circle
+        cx="59"
+        cy="47"
+        fill={txState === "mining" || txState === "signing" ? "#FFD75C" : "red"}
+        r="4"
+      />
+      <circle
+        cx="47"
+        cy="45"
+        fill={txState === "mining" || txState === "signing" ? "#FFD75C" : "red"}
+        r="4"
+      />
+      <circle
+        cx="35"
+        cy="47"
+        fill={txState === "mining" || txState === "signing" ? "#FFD75C" : "red"}
+        r="4"
+      />
+      <defs>
+        <filter
+          id="filter0_d_1447_13624"
+          x="0"
+          y="0"
+          width="94"
+          height="94"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="7.5" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 0.843137 0 0 0 0 0.360784 0 0 0 0.6 0"
+          />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1447_13624" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1447_13624"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
+
+const TransactionDialogContext = createContext<unknown>(null);
+
+export const useTransactionModalContext = () => {
+  return useContext(TransactionDialogContext) as TransactionDialogContextType;
+};
+const TransactionDialogContextProvider: React.FC<{
+  provider: providers.Web3Provider;
+  children: React.ReactNode;
+}> = ({ children, provider }) => {
+  const txNotifier = new TransactionNotifier(provider);
+  const [visible, setVisible] = useState(false);
+  const [content, setContent] = useState<ReactNode | undefined>(undefined);
+  const [state, setState] = useState<TxState>("signing");
+  const [txHash, setTxHash] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (txHash) {
+      setVisible(true);
+      setState("signing");
+      const emitter = txNotifier.hash(txHash);
+      emitter.on("txConfirmed", () => setState("confirmed"));
+      emitter.on("txError", () => setState("error"));
+      emitter.on("txFailed", () => setState("failed"));
+      emitter.on("txSent", () => setState("mining"));
+    }
+  }, [txHash]);
+
+  return (
+    <TransactionDialogContext.Provider
+      value={{
+        visible,
+        state,
+        setContent,
+        setTxHash
+      }}
+    >
+      <Dialog open={visible} onClose={() => setVisible(false)} disableClose>
+        <div className="ui-flex ui-flex-col ui-items-center">
+          <Svg txState={state} />
+          <h4 className="ui-tg-title-h4">Transaction Pending</h4>
+          <span className="ui-tg-caption ui-text-center ui-text-gray-500">
+            Follow the prompts of your wallet to authorize the transaction.
+          </span>
+          <div className="ui-bg-black ui-rounded ui-w-[314px] ui-h-[73px] ui-my-6">{content}</div>
+          <Spinner className="ui-mr-2" variant="secondary" />
+        </div>
+      </Dialog>
+      {children}
+    </TransactionDialogContext.Provider>
+  );
+};
+
+export default TransactionDialogContextProvider;
diff --git a/src/context/useTransactoinDialogContext.stories.tsx b/src/context/useTransactoinDialogContext.stories.tsx
new file mode 100644
index 0000000..5071773
--- /dev/null
+++ b/src/context/useTransactoinDialogContext.stories.tsx
@@ -0,0 +1,44 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import TransactionDialogContextProvider, {
+  useTransactionModalContext
+} from "./useTransactionDialogContext";
+
+import { providers } from "ethers";
+
+export default {
+  title: "Transaction Dialog",
+  component: TransactionDialogContextProvider,
+  decorators: [(Story) => <Story />]
+} as ComponentMeta<typeof TransactionDialogContextProvider>;
+
+const Template: ComponentStory<typeof TransactionDialogContextProvider> = ({ children }) => {
+  return (
+    <TransactionDialogContextProvider
+      provider={providers.getDefaultProvider() as providers.Web3Provider}
+    >
+      <HelperComponent />
+    </TransactionDialogContextProvider>
+  );
+};
+
+const HelperComponent = () => {
+  const { visible, setTxHash, state, setContent } = useTransactionModalContext();
+  return (
+    <div style={{ background: "white" }}>
+      <div>is Dialog active: {visible ? "yes" : "no"}</div>
+      <div>is Dialog active: {state?.toString()}</div>
+      <button
+        onClick={() => {
+          setTxHash("0x054620b7cab0ee0c950556945d895e9d7f3e0d1532fda419a32a96bd8894c02b");
+        }}
+      >
+        Toggle visibility
+      </button>
+    </div>
+  );
+};
+
+export const Primary = Template.bind({});
+
+Primary.args = { children: <div style={{ background: "white" }}>rest of the app</div> };
diff --git a/yarn.lock b/yarn.lock
index e860154..e430315 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1591,6 +1591,687 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@ethersproject/abi@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abi/-/abi-5.5.0.tgz#fb52820e22e50b854ff15ce1647cc508d6660613"
+  integrity sha512-loW7I4AohP5KycATvc0MgujU6JyCHPqHdeoo9z3Nr9xEiNioxa65ccdm1+fsoJhkuhdRtfcL8cfyGamz2AxZ5w==
+  dependencies:
+    "@ethersproject/address" "^5.5.0"
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/constants" "^5.5.0"
+    "@ethersproject/hash" "^5.5.0"
+    "@ethersproject/keccak256" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+    "@ethersproject/strings" "^5.5.0"
+
+"@ethersproject/abi@5.6.2", "@ethersproject/abi@^5.5.0", "@ethersproject/abi@^5.6.0":
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abi/-/abi-5.6.2.tgz#f2956f2ac724cd720e581759d9e3840cd9744818"
+  integrity sha512-40Ixjhy+YzFtnvzIqFU13FW9hd1gMoLa3cJfSDnfnL4o8EnEG1qLiV8sNJo3sHYi9UYMfFeRuZ7kv5+vhzU7gQ==
+  dependencies:
+    "@ethersproject/address" "^5.6.0"
+    "@ethersproject/bignumber" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/constants" "^5.6.0"
+    "@ethersproject/hash" "^5.6.0"
+    "@ethersproject/keccak256" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+    "@ethersproject/strings" "^5.6.0"
+
+"@ethersproject/abstract-provider@5.5.1":
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abstract-provider/-/abstract-provider-5.5.1.tgz#2f1f6e8a3ab7d378d8ad0b5718460f85649710c5"
+  integrity sha512-m+MA/ful6eKbxpr99xUYeRvLkfnlqzrF8SZ46d/xFB1A7ZVknYc/sXJG0RcufF52Qn2jeFj1hhcoQ7IXjNKUqg==
+  dependencies:
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/networks" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+    "@ethersproject/transactions" "^5.5.0"
+    "@ethersproject/web" "^5.5.0"
+
+"@ethersproject/abstract-provider@5.6.0", "@ethersproject/abstract-provider@^5.5.0", "@ethersproject/abstract-provider@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abstract-provider/-/abstract-provider-5.6.0.tgz#0c4ac7054650dbd9c476cf5907f588bbb6ef3061"
+  integrity sha512-oPMFlKLN+g+y7a79cLK3WiLcjWFnZQtXWgnLAbHZcN3s7L4v90UHpTOrLk+m3yr0gt+/h9STTM6zrr7PM8uoRw==
+  dependencies:
+    "@ethersproject/bignumber" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/networks" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+    "@ethersproject/transactions" "^5.6.0"
+    "@ethersproject/web" "^5.6.0"
+
+"@ethersproject/abstract-signer@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abstract-signer/-/abstract-signer-5.5.0.tgz#590ff6693370c60ae376bf1c7ada59eb2a8dd08d"
+  integrity sha512-lj//7r250MXVLKI7sVarXAbZXbv9P50lgmJQGr2/is82EwEb8r7HrxsmMqAjTsztMYy7ohrIhGMIml+Gx4D3mA==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.5.0"
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+
+"@ethersproject/abstract-signer@5.6.1", "@ethersproject/abstract-signer@^5.5.0", "@ethersproject/abstract-signer@^5.6.0":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/abstract-signer/-/abstract-signer-5.6.1.tgz#54df786bdf1aabe20d0ed508ec05e0aa2d06674f"
+  integrity sha512-xhSLo6y0nGJS7NxfvOSzCaWKvWb1TLT7dQ0nnpHZrDnC67xfnWm9NXflTMFPUXXMtjr33CdV0kWDEmnbrQZ74Q==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.6.0"
+    "@ethersproject/bignumber" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+
+"@ethersproject/address@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/address/-/address-5.5.0.tgz#bcc6f576a553f21f3dd7ba17248f81b473c9c78f"
+  integrity sha512-l4Nj0eWlTUh6ro5IbPTgbpT4wRbdH5l8CQf7icF7sb/SI3Nhd9Y9HzhonTSTi6CefI0necIw7LJqQPopPLZyWw==
+  dependencies:
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/keccak256" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/rlp" "^5.5.0"
+
+"@ethersproject/address@5.6.0", "@ethersproject/address@^5.5.0", "@ethersproject/address@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/address/-/address-5.6.0.tgz#13c49836d73e7885fc148ad633afad729da25012"
+  integrity sha512-6nvhYXjbXsHPS+30sHZ+U4VMagFC/9zAk6Gd/h3S21YW4+yfb0WfRtaAIZ4kfM4rrVwqiy284LP0GtL5HXGLxQ==
+  dependencies:
+    "@ethersproject/bignumber" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/keccak256" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/rlp" "^5.6.0"
+
+"@ethersproject/base64@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/base64/-/base64-5.5.0.tgz#881e8544e47ed976930836986e5eb8fab259c090"
+  integrity sha512-tdayUKhU1ljrlHzEWbStXazDpsx4eg1dBXUSI6+mHlYklOXoXF6lZvw8tnD6oVaWfnMxAgRSKROg3cVKtCcppA==
+  dependencies:
+    "@ethersproject/bytes" "^5.5.0"
+
+"@ethersproject/base64@5.6.0", "@ethersproject/base64@^5.5.0", "@ethersproject/base64@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/base64/-/base64-5.6.0.tgz#a12c4da2a6fb86d88563216b0282308fc15907c9"
+  integrity sha512-2Neq8wxJ9xHxCF9TUgmKeSh9BXJ6OAxWfeGWvbauPh8FuHEjamgHilllx8KkSd5ErxyHIX7Xv3Fkcud2kY9ezw==
+  dependencies:
+    "@ethersproject/bytes" "^5.6.0"
+
+"@ethersproject/basex@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/basex/-/basex-5.5.0.tgz#e40a53ae6d6b09ab4d977bd037010d4bed21b4d3"
+  integrity sha512-ZIodwhHpVJ0Y3hUCfUucmxKsWQA5TMnavp5j/UOuDdzZWzJlRmuOjcTMIGgHCYuZmHt36BfiSyQPSRskPxbfaQ==
+  dependencies:
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+
+"@ethersproject/basex@5.6.0", "@ethersproject/basex@^5.5.0", "@ethersproject/basex@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/basex/-/basex-5.6.0.tgz#9ea7209bf0a1c3ddc2a90f180c3a7f0d7d2e8a69"
+  integrity sha512-qN4T+hQd/Md32MoJpc69rOwLYRUXwjTlhHDIeUkUmiN/JyWkkLLMoG0TqvSQKNqZOMgN5stbUYN6ILC+eD7MEQ==
+  dependencies:
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+
+"@ethersproject/bignumber@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bignumber/-/bignumber-5.5.0.tgz#875b143f04a216f4f8b96245bde942d42d279527"
+  integrity sha512-6Xytlwvy6Rn3U3gKEc1vP7nR92frHkv6wtVr95LFR3jREXiCPzdWxKQ1cx4JGQBXxcguAwjA8murlYN2TSiEbg==
+  dependencies:
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    bn.js "^4.11.9"
+
+"@ethersproject/bignumber@5.6.1", "@ethersproject/bignumber@^5.5.0", "@ethersproject/bignumber@^5.6.0":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bignumber/-/bignumber-5.6.1.tgz#d5e0da518eb82ab8d08ca9db501888bbf5f0c8fb"
+  integrity sha512-UtMeZ3GaUuF9sx2u9nPZiPP3ULcAFmXyvynR7oHl/tPrM+vldZh7ocMsoa1PqKYGnQnqUZJoqxZnGN6J0qdipA==
+  dependencies:
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    bn.js "^4.11.9"
+
+"@ethersproject/bytes@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bytes/-/bytes-5.5.0.tgz#cb11c526de657e7b45d2e0f0246fb3b9d29a601c"
+  integrity sha512-ABvc7BHWhZU9PNM/tANm/Qx4ostPGadAuQzWTr3doklZOhDlmcBqclrQe/ZXUIj3K8wC28oYeuRa+A37tX9kog==
+  dependencies:
+    "@ethersproject/logger" "^5.5.0"
+
+"@ethersproject/bytes@5.6.1", "@ethersproject/bytes@^5.5.0", "@ethersproject/bytes@^5.6.0":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bytes/-/bytes-5.6.1.tgz#24f916e411f82a8a60412344bf4a813b917eefe7"
+  integrity sha512-NwQt7cKn5+ZE4uDn+X5RAXLp46E1chXoaMmrxAyA0rblpxz8t58lVkrHXoRIn0lz1joQElQ8410GqhTqMOwc6g==
+  dependencies:
+    "@ethersproject/logger" "^5.6.0"
+
+"@ethersproject/constants@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/constants/-/constants-5.5.0.tgz#d2a2cd7d94bd1d58377d1d66c4f53c9be4d0a45e"
+  integrity sha512-2MsRRVChkvMWR+GyMGY4N1sAX9Mt3J9KykCsgUFd/1mwS0UH1qw+Bv9k1UJb3X3YJYFco9H20pjSlOIfCG5HYQ==
+  dependencies:
+    "@ethersproject/bignumber" "^5.5.0"
+
+"@ethersproject/constants@5.6.0", "@ethersproject/constants@^5.5.0", "@ethersproject/constants@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/constants/-/constants-5.6.0.tgz#55e3eb0918584d3acc0688e9958b0cedef297088"
+  integrity sha512-SrdaJx2bK0WQl23nSpV/b1aq293Lh0sUaZT/yYKPDKn4tlAbkH96SPJwIhwSwTsoQQZxuh1jnqsKwyymoiBdWA==
+  dependencies:
+    "@ethersproject/bignumber" "^5.6.0"
+
+"@ethersproject/contracts@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/contracts/-/contracts-5.5.0.tgz#b735260d4bd61283a670a82d5275e2a38892c197"
+  integrity sha512-2viY7NzyvJkh+Ug17v7g3/IJC8HqZBDcOjYARZLdzRxrfGlRgmYgl6xPRKVbEzy1dWKw/iv7chDcS83pg6cLxg==
+  dependencies:
+    "@ethersproject/abi" "^5.5.0"
+    "@ethersproject/abstract-provider" "^5.5.0"
+    "@ethersproject/abstract-signer" "^5.5.0"
+    "@ethersproject/address" "^5.5.0"
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/constants" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+    "@ethersproject/transactions" "^5.5.0"
+
+"@ethersproject/contracts@5.6.1":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/contracts/-/contracts-5.6.1.tgz#c0eba3f8a2226456f92251a547344fd0593281d2"
+  integrity sha512-0fpBBDoPqJMsutE6sNjg6pvCJaIcl7tliMQTMRcoUWDACfjO68CpKOJBlsEhEhmzdnu/41KbrfAeg+sB3y35MQ==
+  dependencies:
+    "@ethersproject/abi" "^5.6.0"
+    "@ethersproject/abstract-provider" "^5.6.0"
+    "@ethersproject/abstract-signer" "^5.6.0"
+    "@ethersproject/address" "^5.6.0"
+    "@ethersproject/bignumber" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/constants" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+    "@ethersproject/transactions" "^5.6.0"
+
+"@ethersproject/hash@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/hash/-/hash-5.5.0.tgz#7cee76d08f88d1873574c849e0207dcb32380cc9"
+  integrity sha512-dnGVpK1WtBjmnp3mUT0PlU2MpapnwWI0PibldQEq1408tQBAbZpPidkWoVVuNMOl/lISO3+4hXZWCL3YV7qzfg==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.5.0"
+    "@ethersproject/address" "^5.5.0"
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/keccak256" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+    "@ethersproject/strings" "^5.5.0"
+
+"@ethersproject/hash@5.6.0", "@ethersproject/hash@^5.5.0", "@ethersproject/hash@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/hash/-/hash-5.6.0.tgz#d24446a5263e02492f9808baa99b6e2b4c3429a2"
+  integrity sha512-fFd+k9gtczqlr0/BruWLAu7UAOas1uRRJvOR84uDf4lNZ+bTkGl366qvniUZHKtlqxBRU65MkOobkmvmpHU+jA==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.6.0"
+    "@ethersproject/address" "^5.6.0"
+    "@ethersproject/bignumber" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/keccak256" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+    "@ethersproject/strings" "^5.6.0"
+
+"@ethersproject/hdnode@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/hdnode/-/hdnode-5.5.0.tgz#4a04e28f41c546f7c978528ea1575206a200ddf6"
+  integrity sha512-mcSOo9zeUg1L0CoJH7zmxwUG5ggQHU1UrRf8jyTYy6HxdZV+r0PBoL1bxr+JHIPXRzS6u/UW4mEn43y0tmyF8Q==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.5.0"
+    "@ethersproject/basex" "^5.5.0"
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/pbkdf2" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+    "@ethersproject/sha2" "^5.5.0"
+    "@ethersproject/signing-key" "^5.5.0"
+    "@ethersproject/strings" "^5.5.0"
+    "@ethersproject/transactions" "^5.5.0"
+    "@ethersproject/wordlists" "^5.5.0"
+
+"@ethersproject/hdnode@5.6.1", "@ethersproject/hdnode@^5.5.0", "@ethersproject/hdnode@^5.6.0":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/hdnode/-/hdnode-5.6.1.tgz#37fa1eb91f6e20ca39cc5fcb7acd3da263d85dab"
+  integrity sha512-6IuYDmbH5Bv/WH/A2cUd0FjNr4qTLAvyHAECiFZhNZp69pPvU7qIDwJ7CU7VAkwm4IVBzqdYy9mpMAGhQdwCDA==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.6.0"
+    "@ethersproject/basex" "^5.6.0"
+    "@ethersproject/bignumber" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/pbkdf2" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+    "@ethersproject/sha2" "^5.6.0"
+    "@ethersproject/signing-key" "^5.6.0"
+    "@ethersproject/strings" "^5.6.0"
+    "@ethersproject/transactions" "^5.6.0"
+    "@ethersproject/wordlists" "^5.6.0"
+
+"@ethersproject/json-wallets@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/json-wallets/-/json-wallets-5.5.0.tgz#dd522d4297e15bccc8e1427d247ec8376b60e325"
+  integrity sha512-9lA21XQnCdcS72xlBn1jfQdj2A1VUxZzOzi9UkNdnokNKke/9Ya2xA9aIK1SC3PQyBDLt4C+dfps7ULpkvKikQ==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.5.0"
+    "@ethersproject/address" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/hdnode" "^5.5.0"
+    "@ethersproject/keccak256" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/pbkdf2" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+    "@ethersproject/random" "^5.5.0"
+    "@ethersproject/strings" "^5.5.0"
+    "@ethersproject/transactions" "^5.5.0"
+    aes-js "3.0.0"
+    scrypt-js "3.0.1"
+
+"@ethersproject/json-wallets@5.6.0", "@ethersproject/json-wallets@^5.5.0", "@ethersproject/json-wallets@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/json-wallets/-/json-wallets-5.6.0.tgz#4c2fc27f17e36c583e7a252fb938bc46f98891e5"
+  integrity sha512-fmh86jViB9r0ibWXTQipxpAGMiuxoqUf78oqJDlCAJXgnJF024hOOX7qVgqsjtbeoxmcLwpPsXNU0WEe/16qPQ==
+  dependencies:
+    "@ethersproject/abstract-signer" "^5.6.0"
+    "@ethersproject/address" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/hdnode" "^5.6.0"
+    "@ethersproject/keccak256" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/pbkdf2" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+    "@ethersproject/random" "^5.6.0"
+    "@ethersproject/strings" "^5.6.0"
+    "@ethersproject/transactions" "^5.6.0"
+    aes-js "3.0.0"
+    scrypt-js "3.0.1"
+
+"@ethersproject/keccak256@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/keccak256/-/keccak256-5.5.0.tgz#e4b1f9d7701da87c564ffe336f86dcee82983492"
+  integrity sha512-5VoFCTjo2rYbBe1l2f4mccaRFN/4VQEYFwwn04aJV2h7qf4ZvI2wFxUE1XOX+snbwCLRzIeikOqtAoPwMza9kg==
+  dependencies:
+    "@ethersproject/bytes" "^5.5.0"
+    js-sha3 "0.8.0"
+
+"@ethersproject/keccak256@5.6.0", "@ethersproject/keccak256@^5.5.0", "@ethersproject/keccak256@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/keccak256/-/keccak256-5.6.0.tgz#fea4bb47dbf8f131c2e1774a1cecbfeb9d606459"
+  integrity sha512-tk56BJ96mdj/ksi7HWZVWGjCq0WVl/QvfhFQNeL8fxhBlGoP+L80uDCiQcpJPd+2XxkivS3lwRm3E0CXTfol0w==
+  dependencies:
+    "@ethersproject/bytes" "^5.6.0"
+    js-sha3 "0.8.0"
+
+"@ethersproject/logger@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/logger/-/logger-5.5.0.tgz#0c2caebeff98e10aefa5aef27d7441c7fd18cf5d"
+  integrity sha512-rIY/6WPm7T8n3qS2vuHTUBPdXHl+rGxWxW5okDfo9J4Z0+gRRZT0msvUdIJkE4/HS29GUMziwGaaKO2bWONBrg==
+
+"@ethersproject/logger@5.6.0", "@ethersproject/logger@^5.5.0", "@ethersproject/logger@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/logger/-/logger-5.6.0.tgz#d7db1bfcc22fd2e4ab574cba0bb6ad779a9a3e7a"
+  integrity sha512-BiBWllUROH9w+P21RzoxJKzqoqpkyM1pRnEKG69bulE9TSQD8SAIvTQqIMZmmCO8pUNkgLP1wndX1gKghSpBmg==
+
+"@ethersproject/networks@5.5.2":
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/@ethersproject/networks/-/networks-5.5.2.tgz#784c8b1283cd2a931114ab428dae1bd00c07630b"
+  integrity sha512-NEqPxbGBfy6O3x4ZTISb90SjEDkWYDUbEeIFhJly0F7sZjoQMnj5KYzMSkMkLKZ+1fGpx00EDpHQCy6PrDupkQ==
+  dependencies:
+    "@ethersproject/logger" "^5.5.0"
+
+"@ethersproject/networks@5.6.3", "@ethersproject/networks@^5.5.0", "@ethersproject/networks@^5.6.0":
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/@ethersproject/networks/-/networks-5.6.3.tgz#3ee3ab08f315b433b50c99702eb32e0cf31f899f"
+  integrity sha512-QZxRH7cA5Ut9TbXwZFiCyuPchdWi87ZtVNHWZd0R6YFgYtes2jQ3+bsslJ0WdyDe0i6QumqtoYqvY3rrQFRZOQ==
+  dependencies:
+    "@ethersproject/logger" "^5.6.0"
+
+"@ethersproject/pbkdf2@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/pbkdf2/-/pbkdf2-5.5.0.tgz#e25032cdf02f31505d47afbf9c3e000d95c4a050"
+  integrity sha512-SaDvQFvXPnz1QGpzr6/HToLifftSXGoXrbpZ6BvoZhmx4bNLHrxDe8MZisuecyOziP1aVEwzC2Hasj+86TgWVg==
+  dependencies:
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/sha2" "^5.5.0"
+
+"@ethersproject/pbkdf2@5.6.0", "@ethersproject/pbkdf2@^5.5.0", "@ethersproject/pbkdf2@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/pbkdf2/-/pbkdf2-5.6.0.tgz#04fcc2d7c6bff88393f5b4237d906a192426685a"
+  integrity sha512-Wu1AxTgJo3T3H6MIu/eejLFok9TYoSdgwRr5oGY1LTLfmGesDoSx05pemsbrPT2gG4cQME+baTSCp5sEo2erZQ==
+  dependencies:
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/sha2" "^5.6.0"
+
+"@ethersproject/properties@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/properties/-/properties-5.5.0.tgz#61f00f2bb83376d2071baab02245f92070c59995"
+  integrity sha512-l3zRQg3JkD8EL3CPjNK5g7kMx4qSwiR60/uk5IVjd3oq1MZR5qUg40CNOoEJoX5wc3DyY5bt9EbMk86C7x0DNA==
+  dependencies:
+    "@ethersproject/logger" "^5.5.0"
+
+"@ethersproject/properties@5.6.0", "@ethersproject/properties@^5.5.0", "@ethersproject/properties@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/properties/-/properties-5.6.0.tgz#38904651713bc6bdd5bdd1b0a4287ecda920fa04"
+  integrity sha512-szoOkHskajKePTJSZ46uHUWWkbv7TzP2ypdEK6jGMqJaEt2sb0jCgfBo0gH0m2HBpRixMuJ6TBRaQCF7a9DoCg==
+  dependencies:
+    "@ethersproject/logger" "^5.6.0"
+
+"@ethersproject/providers@5.5.2":
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/@ethersproject/providers/-/providers-5.5.2.tgz#131ccf52dc17afd0ab69ed444b8c0e3a27297d99"
+  integrity sha512-hkbx7x/MKcRjyrO4StKXCzCpWer6s97xnm34xkfPiarhtEUVAN4TBBpamM+z66WcTt7H5B53YwbRj1n7i8pZoQ==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.5.0"
+    "@ethersproject/abstract-signer" "^5.5.0"
+    "@ethersproject/address" "^5.5.0"
+    "@ethersproject/basex" "^5.5.0"
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/constants" "^5.5.0"
+    "@ethersproject/hash" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/networks" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+    "@ethersproject/random" "^5.5.0"
+    "@ethersproject/rlp" "^5.5.0"
+    "@ethersproject/sha2" "^5.5.0"
+    "@ethersproject/strings" "^5.5.0"
+    "@ethersproject/transactions" "^5.5.0"
+    "@ethersproject/web" "^5.5.0"
+    bech32 "1.1.4"
+    ws "7.4.6"
+
+"@ethersproject/providers@5.6.7":
+  version "5.6.7"
+  resolved "https://registry.yarnpkg.com/@ethersproject/providers/-/providers-5.6.7.tgz#1f88ec94febb79a90e33f7e0100354878fb4dabe"
+  integrity sha512-QG7KLxfYk0FA0ycWATKMM8UzMOfOvchtkN89nNORlPqqhX5zatdamJ506dh5ECk+ybcnCkeVOdStlzrOMkkGOA==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.6.0"
+    "@ethersproject/abstract-signer" "^5.6.0"
+    "@ethersproject/address" "^5.6.0"
+    "@ethersproject/base64" "^5.6.0"
+    "@ethersproject/basex" "^5.6.0"
+    "@ethersproject/bignumber" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/constants" "^5.6.0"
+    "@ethersproject/hash" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/networks" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+    "@ethersproject/random" "^5.6.0"
+    "@ethersproject/rlp" "^5.6.0"
+    "@ethersproject/sha2" "^5.6.0"
+    "@ethersproject/strings" "^5.6.0"
+    "@ethersproject/transactions" "^5.6.0"
+    "@ethersproject/web" "^5.6.0"
+    bech32 "1.1.4"
+    ws "7.4.6"
+
+"@ethersproject/random@5.5.1":
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/random/-/random-5.5.1.tgz#7cdf38ea93dc0b1ed1d8e480ccdaf3535c555415"
+  integrity sha512-YaU2dQ7DuhL5Au7KbcQLHxcRHfgyNgvFV4sQOo0HrtW3Zkrc9ctWNz8wXQ4uCSfSDsqX2vcjhroxU5RQRV0nqA==
+  dependencies:
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+
+"@ethersproject/random@5.6.0", "@ethersproject/random@^5.5.0", "@ethersproject/random@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/random/-/random-5.6.0.tgz#1505d1ab6a250e0ee92f436850fa3314b2cb5ae6"
+  integrity sha512-si0PLcLjq+NG/XHSZz90asNf+YfKEqJGVdxoEkSukzbnBgC8rydbgbUgBbBGLeHN4kAJwUFEKsu3sCXT93YMsw==
+  dependencies:
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+
+"@ethersproject/rlp@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/rlp/-/rlp-5.5.0.tgz#530f4f608f9ca9d4f89c24ab95db58ab56ab99a0"
+  integrity sha512-hLv8XaQ8PTI9g2RHoQGf/WSxBfTB/NudRacbzdxmst5VHAqd1sMibWG7SENzT5Dj3yZ3kJYx+WiRYEcQTAkcYA==
+  dependencies:
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+
+"@ethersproject/rlp@5.6.0", "@ethersproject/rlp@^5.5.0", "@ethersproject/rlp@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/rlp/-/rlp-5.6.0.tgz#55a7be01c6f5e64d6e6e7edb6061aa120962a717"
+  integrity sha512-dz9WR1xpcTL+9DtOT/aDO+YyxSSdO8YIS0jyZwHHSlAmnxA6cKU3TrTd4Xc/bHayctxTgGLYNuVVoiXE4tTq1g==
+  dependencies:
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+
+"@ethersproject/sha2@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/sha2/-/sha2-5.5.0.tgz#a40a054c61f98fd9eee99af2c3cc6ff57ec24db7"
+  integrity sha512-B5UBoglbCiHamRVPLA110J+2uqsifpZaTmid2/7W5rbtYVz6gus6/hSDieIU/6gaKIDcOj12WnOdiymEUHIAOA==
+  dependencies:
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    hash.js "1.1.7"
+
+"@ethersproject/sha2@5.6.0", "@ethersproject/sha2@^5.5.0", "@ethersproject/sha2@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/sha2/-/sha2-5.6.0.tgz#364c4c11cc753bda36f31f001628706ebadb64d9"
+  integrity sha512-1tNWCPFLu1n3JM9t4/kytz35DkuF9MxqkGGEHNauEbaARdm2fafnOyw1s0tIQDPKF/7bkP1u3dbrmjpn5CelyA==
+  dependencies:
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    hash.js "1.1.7"
+
+"@ethersproject/signing-key@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/signing-key/-/signing-key-5.5.0.tgz#2aa37169ce7e01e3e80f2c14325f624c29cedbe0"
+  integrity sha512-5VmseH7qjtNmDdZBswavhotYbWB0bOwKIlOTSlX14rKn5c11QmJwGt4GHeo7NrL/Ycl7uo9AHvEqs5xZgFBTng==
+  dependencies:
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+    bn.js "^4.11.9"
+    elliptic "6.5.4"
+    hash.js "1.1.7"
+
+"@ethersproject/signing-key@5.6.1", "@ethersproject/signing-key@^5.5.0", "@ethersproject/signing-key@^5.6.0":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/signing-key/-/signing-key-5.6.1.tgz#31b0a531520616254eb0465b9443e49515c4d457"
+  integrity sha512-XvqQ20DH0D+bS3qlrrgh+axRMth5kD1xuvqUQUTeezxUTXBOeR6hWz2/C6FBEu39FRytyybIWrYf7YLSAKr1LQ==
+  dependencies:
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+    bn.js "^4.11.9"
+    elliptic "6.5.4"
+    hash.js "1.1.7"
+
+"@ethersproject/solidity@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/solidity/-/solidity-5.5.0.tgz#2662eb3e5da471b85a20531e420054278362f93f"
+  integrity sha512-9NgZs9LhGMj6aCtHXhtmFQ4AN4sth5HuFXVvAQtzmm0jpSCNOTGtrHZJAeYTh7MBjRR8brylWZxBZR9zDStXbw==
+  dependencies:
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/keccak256" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/sha2" "^5.5.0"
+    "@ethersproject/strings" "^5.5.0"
+
+"@ethersproject/solidity@5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/solidity/-/solidity-5.6.0.tgz#64657362a596bf7f5630bdc921c07dd78df06dc3"
+  integrity sha512-YwF52vTNd50kjDzqKaoNNbC/r9kMDPq3YzDWmsjFTRBcIF1y4JCQJ8gB30wsTfHbaxgxelI5BfxQSxD/PbJOww==
+  dependencies:
+    "@ethersproject/bignumber" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/keccak256" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/sha2" "^5.6.0"
+    "@ethersproject/strings" "^5.6.0"
+
+"@ethersproject/strings@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/strings/-/strings-5.5.0.tgz#e6784d00ec6c57710755699003bc747e98c5d549"
+  integrity sha512-9fy3TtF5LrX/wTrBaT8FGE6TDJyVjOvXynXJz5MT5azq+E6D92zuKNx7i29sWW2FjVOaWjAsiZ1ZWznuduTIIQ==
+  dependencies:
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/constants" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+
+"@ethersproject/strings@5.6.0", "@ethersproject/strings@^5.5.0", "@ethersproject/strings@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/strings/-/strings-5.6.0.tgz#9891b26709153d996bf1303d39a7f4bc047878fd"
+  integrity sha512-uv10vTtLTZqrJuqBZR862ZQjTIa724wGPWQqZrofaPI/kUsf53TBG0I0D+hQ1qyNtllbNzaW+PDPHHUI6/65Mg==
+  dependencies:
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/constants" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+
+"@ethersproject/transactions@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/transactions/-/transactions-5.5.0.tgz#7e9bf72e97bcdf69db34fe0d59e2f4203c7a2908"
+  integrity sha512-9RZYSKX26KfzEd/1eqvv8pLauCKzDTub0Ko4LfIgaERvRuwyaNV78mJs7cpIgZaDl6RJui4o49lHwwCM0526zA==
+  dependencies:
+    "@ethersproject/address" "^5.5.0"
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/constants" "^5.5.0"
+    "@ethersproject/keccak256" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+    "@ethersproject/rlp" "^5.5.0"
+    "@ethersproject/signing-key" "^5.5.0"
+
+"@ethersproject/transactions@5.6.1", "@ethersproject/transactions@^5.5.0", "@ethersproject/transactions@^5.6.0":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/transactions/-/transactions-5.6.1.tgz#3091b888fe6b89bd6208ea1e9ee5e4ea91d730a3"
+  integrity sha512-oIAC7zBCDnjVlEn0KSG1udbqR7hP9FOurxIV/aG+erCdvdvi+QXEZRUtVP9+lu3WYUe8SMYhdAVwNJtD7dZMRw==
+  dependencies:
+    "@ethersproject/address" "^5.6.0"
+    "@ethersproject/bignumber" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/constants" "^5.6.0"
+    "@ethersproject/keccak256" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+    "@ethersproject/rlp" "^5.6.0"
+    "@ethersproject/signing-key" "^5.6.0"
+
+"@ethersproject/units@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/units/-/units-5.5.0.tgz#104d02db5b5dc42cc672cc4587bafb87a95ee45e"
+  integrity sha512-7+DpjiZk4v6wrikj+TCyWWa9dXLNU73tSTa7n0TSJDxkYbV3Yf1eRh9ToMLlZtuctNYu9RDNNy2USq3AdqSbag==
+  dependencies:
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/constants" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+
+"@ethersproject/units@5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/units/-/units-5.6.0.tgz#e5cbb1906988f5740254a21b9ded6bd51e826d9c"
+  integrity sha512-tig9x0Qmh8qbo1w8/6tmtyrm/QQRviBh389EQ+d8fP4wDsBrJBf08oZfoiz1/uenKK9M78yAP4PoR7SsVoTjsw==
+  dependencies:
+    "@ethersproject/bignumber" "^5.6.0"
+    "@ethersproject/constants" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+
+"@ethersproject/wallet@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/wallet/-/wallet-5.5.0.tgz#322a10527a440ece593980dca6182f17d54eae75"
+  integrity sha512-Mlu13hIctSYaZmUOo7r2PhNSd8eaMPVXe1wxrz4w4FCE4tDYBywDH+bAR1Xz2ADyXGwqYMwstzTrtUVIsKDO0Q==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.5.0"
+    "@ethersproject/abstract-signer" "^5.5.0"
+    "@ethersproject/address" "^5.5.0"
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/hash" "^5.5.0"
+    "@ethersproject/hdnode" "^5.5.0"
+    "@ethersproject/json-wallets" "^5.5.0"
+    "@ethersproject/keccak256" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+    "@ethersproject/random" "^5.5.0"
+    "@ethersproject/signing-key" "^5.5.0"
+    "@ethersproject/transactions" "^5.5.0"
+    "@ethersproject/wordlists" "^5.5.0"
+
+"@ethersproject/wallet@5.6.1":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/wallet/-/wallet-5.6.1.tgz#5df4f75f848ed84ca30fd6ca75d2c66b19c5552b"
+  integrity sha512-oXWoOslEWtwZiViIMlGVjeKDQz/tI7JF9UkyzN9jaGj8z7sXt2SyFMb0Ev6vSAqjIzrCrNrJ/+MkAhtKnGOfZw==
+  dependencies:
+    "@ethersproject/abstract-provider" "^5.6.0"
+    "@ethersproject/abstract-signer" "^5.6.0"
+    "@ethersproject/address" "^5.6.0"
+    "@ethersproject/bignumber" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/hash" "^5.6.0"
+    "@ethersproject/hdnode" "^5.6.0"
+    "@ethersproject/json-wallets" "^5.6.0"
+    "@ethersproject/keccak256" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+    "@ethersproject/random" "^5.6.0"
+    "@ethersproject/signing-key" "^5.6.0"
+    "@ethersproject/transactions" "^5.6.0"
+    "@ethersproject/wordlists" "^5.6.0"
+
+"@ethersproject/web@5.5.1":
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/@ethersproject/web/-/web-5.5.1.tgz#cfcc4a074a6936c657878ac58917a61341681316"
+  integrity sha512-olvLvc1CB12sREc1ROPSHTdFCdvMh0J5GSJYiQg2D0hdD4QmJDy8QYDb1CvoqD/bF1c++aeKv2sR5uduuG9dQg==
+  dependencies:
+    "@ethersproject/base64" "^5.5.0"
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+    "@ethersproject/strings" "^5.5.0"
+
+"@ethersproject/web@5.6.0", "@ethersproject/web@^5.5.0", "@ethersproject/web@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/web/-/web-5.6.0.tgz#4bf8b3cbc17055027e1a5dd3c357e37474eaaeb8"
+  integrity sha512-G/XHj0hV1FxI2teHRfCGvfBUHFmU+YOSbCxlAMqJklxSa7QMiHFQfAxvwY2PFqgvdkxEKwRNr/eCjfAPEm2Ctg==
+  dependencies:
+    "@ethersproject/base64" "^5.6.0"
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+    "@ethersproject/strings" "^5.6.0"
+
+"@ethersproject/wordlists@5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/wordlists/-/wordlists-5.5.0.tgz#aac74963aa43e643638e5172353d931b347d584f"
+  integrity sha512-bL0UTReWDiaQJJYOC9sh/XcRu/9i2jMrzf8VLRmPKx58ckSlOJiohODkECCO50dtLZHcGU6MLXQ4OOrgBwP77Q==
+  dependencies:
+    "@ethersproject/bytes" "^5.5.0"
+    "@ethersproject/hash" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+    "@ethersproject/properties" "^5.5.0"
+    "@ethersproject/strings" "^5.5.0"
+
+"@ethersproject/wordlists@5.6.0", "@ethersproject/wordlists@^5.5.0", "@ethersproject/wordlists@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/wordlists/-/wordlists-5.6.0.tgz#79e62c5276e091d8575f6930ba01a29218ded032"
+  integrity sha512-q0bxNBfIX3fUuAo9OmjlEYxP40IB8ABgb7HjEZCL5IKubzV3j30CWi2rqQbjTS2HfoyQbfINoKcTVWP4ejwR7Q==
+  dependencies:
+    "@ethersproject/bytes" "^5.6.0"
+    "@ethersproject/hash" "^5.6.0"
+    "@ethersproject/logger" "^5.6.0"
+    "@ethersproject/properties" "^5.6.0"
+    "@ethersproject/strings" "^5.6.0"
+
 "@gar/promisify@^1.0.1", "@gar/promisify@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -3426,6 +4107,14 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
+"@synthetixio/transaction-notifier@^2.70.1":
+  version "2.70.1"
+  resolved "https://registry.yarnpkg.com/@synthetixio/transaction-notifier/-/transaction-notifier-2.70.1.tgz#9bb4653e88d7a6eb7d7dd63308043b15227b54aa"
+  integrity sha512-fxZZXsixHStUT02AKO2njknXRDNcp0nu/SsM5WlWPB2lgIVyeHrftkRqJ/3BlwIRd6h8pnYBAI6rG75zMaNPYA==
+  dependencies:
+    ethers "5.5.3"
+    lodash "4.17.19"
+
 "@testing-library/dom@^8.0.0":
   version "8.13.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"
@@ -4455,6 +5144,11 @@ adjust-sourcemap-loader@^4.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
+aes-js@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.0.0.tgz#e21df10ad6c2053295bcbb8dab40b09dbea87e4d"
+  integrity sha512-H7wUZRn8WpTq9jocdxQ2c8x2sKo9ZVmzfRE13GiNJXfp7NcKYEdvl3vspKjXox6RIG2VtaRe4JFvxG4rqp2Zuw==
+
 agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -5214,6 +5908,11 @@ batch@0.6.1:
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
   integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
 
+bech32@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/bech32/-/bech32-1.1.4.tgz#e38c9f37bf179b8eb16ae3a772b40c356d4832e9"
+  integrity sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ==
+
 before-after-hook@^2.2.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.2.tgz#a6e8ca41028d90ee2c24222f201c90956091613e"
@@ -7401,7 +8100,7 @@ electron-to-chromium@^1.4.84:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.88.tgz#ebe6a2573b563680c7a7bf3a51b9e465c9c501db"
   integrity sha512-oA7mzccefkvTNi9u7DXmT0LqvhnOiN2BhSrKerta7HeUC1cLoIwtbf2wL+Ah2ozh5KQd3/1njrGrwDBXx6d14Q==
 
-elliptic@^6.5.3:
+elliptic@6.5.4, elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
   integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
@@ -7970,6 +8669,78 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
+ethers@5.5.3:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.5.3.tgz#1e361516711c0c3244b6210e7e3ecabf0c75fca0"
+  integrity sha512-fTT4WT8/hTe/BLwRUtl7I5zlpF3XC3P/Xwqxc5AIP2HGlH15qpmjs0Ou78az93b1rLITzXLFxoNX63B8ZbUd7g==
+  dependencies:
+    "@ethersproject/abi" "5.5.0"
+    "@ethersproject/abstract-provider" "5.5.1"
+    "@ethersproject/abstract-signer" "5.5.0"
+    "@ethersproject/address" "5.5.0"
+    "@ethersproject/base64" "5.5.0"
+    "@ethersproject/basex" "5.5.0"
+    "@ethersproject/bignumber" "5.5.0"
+    "@ethersproject/bytes" "5.5.0"
+    "@ethersproject/constants" "5.5.0"
+    "@ethersproject/contracts" "5.5.0"
+    "@ethersproject/hash" "5.5.0"
+    "@ethersproject/hdnode" "5.5.0"
+    "@ethersproject/json-wallets" "5.5.0"
+    "@ethersproject/keccak256" "5.5.0"
+    "@ethersproject/logger" "5.5.0"
+    "@ethersproject/networks" "5.5.2"
+    "@ethersproject/pbkdf2" "5.5.0"
+    "@ethersproject/properties" "5.5.0"
+    "@ethersproject/providers" "5.5.2"
+    "@ethersproject/random" "5.5.1"
+    "@ethersproject/rlp" "5.5.0"
+    "@ethersproject/sha2" "5.5.0"
+    "@ethersproject/signing-key" "5.5.0"
+    "@ethersproject/solidity" "5.5.0"
+    "@ethersproject/strings" "5.5.0"
+    "@ethersproject/transactions" "5.5.0"
+    "@ethersproject/units" "5.5.0"
+    "@ethersproject/wallet" "5.5.0"
+    "@ethersproject/web" "5.5.1"
+    "@ethersproject/wordlists" "5.5.0"
+
+ethers@^5.6.7:
+  version "5.6.7"
+  resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.6.7.tgz#3e6257b2a0fdd5fc93e68e141cf2b9761900f374"
+  integrity sha512-Q8pmMraUENK0cY6cy6IvIe3e9xL/+4kBvxmUvLXg1O7Abob0c7XzWI76E29j5em/HxWMl5hYiSClmOMW3jJmdg==
+  dependencies:
+    "@ethersproject/abi" "5.6.2"
+    "@ethersproject/abstract-provider" "5.6.0"
+    "@ethersproject/abstract-signer" "5.6.1"
+    "@ethersproject/address" "5.6.0"
+    "@ethersproject/base64" "5.6.0"
+    "@ethersproject/basex" "5.6.0"
+    "@ethersproject/bignumber" "5.6.1"
+    "@ethersproject/bytes" "5.6.1"
+    "@ethersproject/constants" "5.6.0"
+    "@ethersproject/contracts" "5.6.1"
+    "@ethersproject/hash" "5.6.0"
+    "@ethersproject/hdnode" "5.6.1"
+    "@ethersproject/json-wallets" "5.6.0"
+    "@ethersproject/keccak256" "5.6.0"
+    "@ethersproject/logger" "5.6.0"
+    "@ethersproject/networks" "5.6.3"
+    "@ethersproject/pbkdf2" "5.6.0"
+    "@ethersproject/properties" "5.6.0"
+    "@ethersproject/providers" "5.6.7"
+    "@ethersproject/random" "5.6.0"
+    "@ethersproject/rlp" "5.6.0"
+    "@ethersproject/sha2" "5.6.0"
+    "@ethersproject/signing-key" "5.6.1"
+    "@ethersproject/solidity" "5.6.0"
+    "@ethersproject/strings" "5.6.0"
+    "@ethersproject/transactions" "5.6.1"
+    "@ethersproject/units" "5.6.0"
+    "@ethersproject/wallet" "5.6.1"
+    "@ethersproject/web" "5.6.0"
+    "@ethersproject/wordlists" "5.6.0"
+
 eventemitter3@^4.0.0, eventemitter3@^4.0.4:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -9153,7 +9924,7 @@ hash-base@^3.0.0:
     readable-stream "^3.6.0"
     safe-buffer "^5.2.0"
 
-hash.js@^1.0.0, hash.js@^1.0.3:
+hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
   integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
@@ -10858,6 +11629,11 @@ jest@^27.4.3:
     import-local "^3.0.2"
     jest-cli "^27.5.1"
 
+js-sha3@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
+  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
+
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
@@ -11440,6 +12216,11 @@ lodash.uniqby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
   integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
 
+lodash@4.17.19:
+  version "4.17.19"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
+  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
+
 lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -15185,6 +15966,11 @@ schema-utils@^4.0.0:
     ajv-formats "^2.1.1"
     ajv-keywords "^5.0.0"
 
+scrypt-js@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/scrypt-js/-/scrypt-js-3.0.1.tgz#d314a57c2aef69d1ad98a138a21fe9eafa9ee312"
+  integrity sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -17745,6 +18531,11 @@ write-file-atomic@^4.0.0, write-file-atomic@^4.0.1:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
+ws@7.4.6:
+  version "7.4.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
+  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
+
 ws@^7.4.6:
   version "7.5.7"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.7.tgz#9e0ac77ee50af70d58326ecff7e85eb3fa375e67"

From 8cd0ecb2dc9a9ba011314cbdf5baf1a50483a023 Mon Sep 17 00:00:00 2001
From: Peiman <peymannaderi3@yahoo.com>
Date: Wed, 25 May 2022 14:40:32 +0430
Subject: [PATCH 2/6] fix: linting issues

---
 .eslintrc                                     |  9 ++++-----
 src/context/useTransactionDialogContext.tsx   | 20 +++++++++----------
 .../useTransactoinDialogContext.stories.tsx   |  3 +--
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 99550e5..c7cf84c 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -40,8 +40,8 @@
   "rules": {
     "prettier/prettier": ["error", {}, { "usePrettierrc": true }],
     // https://github.com/lydell/eslint-plugin-simple-import-sort
-    "simple-import-sort/imports": "off",
-    "simple-import-sort/exports": "off",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
     // https://eslint.org/docs/rules/
     "no-var": "error",
     "no-console": "warn",
@@ -68,8 +68,7 @@
     "react/jsx-fragments": ["error", "syntax"],
     "react/jsx-boolean-value": ["error", "never"],
     "react/jsx-curly-brace-presence": ["error", "never"],
-    /* Super annoying when importing an SVG from Figma, throws millions of errors */
-    /*     "react/jsx-sort-props": [
+    "react/jsx-sort-props": [
       "error",
       {
         "callbacksLast": true,
@@ -79,7 +78,7 @@
         "noSortAlphabetically": false,
         "reservedFirst": true
       }
-    ], */
+    ],
     // https://github.com/typescript-eslint/typescript-eslint
     "@typescript-eslint/explicit-module-boundary-types": "off",
     // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y
diff --git a/src/context/useTransactionDialogContext.tsx b/src/context/useTransactionDialogContext.tsx
index 42494e0..a8429ae 100644
--- a/src/context/useTransactionDialogContext.tsx
+++ b/src/context/useTransactionDialogContext.tsx
@@ -1,7 +1,7 @@
+import { TransactionNotifier } from "@synthetixio/transaction-notifier";
 import { Dialog, Spinner } from "components";
-import { createContext, ReactNode, useContext, useEffect, useState } from "react";
 import { providers } from "ethers";
-import { TransactionNotifier } from "@synthetixio/transaction-notifier";
+import { createContext, ReactNode, useContext, useEffect, useState } from "react";
 
 type TxState = "signing" | "mining" | "failed" | "confirmed" | "error";
 
@@ -43,20 +43,20 @@ const Svg = ({ txState }: Record<"txState", TxState>) => {
       />
       <defs>
         <filter
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+          height="94"
           id="filter0_d_1447_13624"
+          width="94"
           x="0"
           y="0"
-          width="94"
-          height="94"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
         >
           <feFlood floodOpacity="0" result="BackgroundImageFix" />
           <feColorMatrix
             in="SourceAlpha"
+            result="hardAlpha"
             type="matrix"
             values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
           />
           <feOffset />
           <feGaussianBlur stdDeviation="7.5" />
@@ -64,11 +64,11 @@ const Svg = ({ txState }: Record<"txState", TxState>) => {
             type="matrix"
             values="0 0 0 0 1 0 0 0 0 0.843137 0 0 0 0 0.360784 0 0 0 0.6 0"
           />
-          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1447_13624" />
+          <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_1447_13624" />
           <feBlend
-            mode="normal"
             in="SourceGraphic"
             in2="effect1_dropShadow_1447_13624"
+            mode="normal"
             result="shape"
           />
         </filter>
@@ -113,7 +113,7 @@ const TransactionDialogContextProvider: React.FC<{
         setTxHash
       }}
     >
-      <Dialog open={visible} onClose={() => setVisible(false)} disableClose>
+      <Dialog disableClose open={visible} onClose={() => setVisible(false)}>
         <div className="ui-flex ui-flex-col ui-items-center">
           <Svg txState={state} />
           <h4 className="ui-tg-title-h4">Transaction Pending</h4>
diff --git a/src/context/useTransactoinDialogContext.stories.tsx b/src/context/useTransactoinDialogContext.stories.tsx
index 5071773..f638322 100644
--- a/src/context/useTransactoinDialogContext.stories.tsx
+++ b/src/context/useTransactoinDialogContext.stories.tsx
@@ -1,11 +1,10 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { providers } from "ethers";
 
 import TransactionDialogContextProvider, {
   useTransactionModalContext
 } from "./useTransactionDialogContext";
 
-import { providers } from "ethers";
-
 export default {
   title: "Transaction Dialog",
   component: TransactionDialogContextProvider,

From 18b40c5de8d26595ee3c47dde4a4246b57e870ab Mon Sep 17 00:00:00 2001
From: Peiman <peymannaderi3@yahoo.com>
Date: Wed, 25 May 2022 15:09:45 +0430
Subject: [PATCH 3/6] fix: improve card component

---
 src/components/Card/Card.tsx     | 18 ++++++++++++++----
 src/components/Dialog/Dialog.tsx |  5 +++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index c3fbfeb..0a4f680 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -14,18 +14,22 @@ export type CardVariant =
   | "rainbow";
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  rounded?: string;
   className?: string;
-  defaultClass?: string;
+  wrapperClassName?: string;
   children?: ReactNode;
   variant?: CardVariant;
+  showBorder?: boolean;
 }
 
 const CardRender: React.ForwardRefRenderFunction<HTMLDivElement, CardProps> = (
   {
     className = "",
-    defaultClass = "ui-rounded ui-my-2 ui-p-4 sm:ui-p-6",
+    wrapperClassName = "ui-my-2",
     children,
     variant = "default",
+    rounded = "ui-rounded",
+    showBorder = false,
     ...props
   },
   ref
@@ -33,7 +37,7 @@ const CardRender: React.ForwardRefRenderFunction<HTMLDivElement, CardProps> = (
   return (
     <div
       ref={ref}
-      className={clsx("ui-shadow-md", className, defaultClass, {
+      className={clsx("ui-shadow-md ui-p-[1px]", rounded, wrapperClassName, {
         "ui-gradient-gray-2 ui-text-white": variant === "default",
         "ui-gradient-gray-1 ui-text-white": variant === "gray",
         "ui-gradient-primary": variant === "primary",
@@ -48,7 +52,13 @@ const CardRender: React.ForwardRefRenderFunction<HTMLDivElement, CardProps> = (
       })}
       {...props}
     >
-      {children}
+      <div
+        className={clsx("ui-h-full ui-w-full ui-p-4 sm:ui-p-5", rounded, className, {
+          "ui-border-2 ui-border-black": variant === "default" && showBorder
+        })}
+      >
+        {children}
+      </div>
     </div>
   );
 };
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index a650110..9167296 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -50,11 +50,12 @@ export const Dialog: React.FC<DialogProps> = ({
       >
         <Card
           ref={ref}
-          className={clsx(
+          showBorder
+          rounded="ui-rounded-2xl"
+          wrapperClassName={clsx(
             wrapperClass,
             "ui-overflow-y-auto ui-relative ui-w-full ui-max-w-md ui-h-full ui-max-h-full md:ui-h-auto"
           )}
-          defaultClass="md:ui-rounded-lg ui-p-4 sm:ui-p-6"
         >
           {!hideCloseIcon && (
             <CloseIcon

From 674ff60d3df7c397acd0ffde01193dcc20dc3a98 Mon Sep 17 00:00:00 2001
From: fritzschoff <max.j.f@gmx.de>
Date: Wed, 25 May 2022 15:06:03 +0200
Subject: [PATCH 4/6] worked on CR

---
 .prettierrc                                   |   2 +-
 .../Accordion/Accordion.stories.tsx           |  10 +-
 src/components/Accordion/Accordion.tsx        |  18 +-
 src/components/Badge/Badge.stories.tsx        |  10 +-
 src/components/Badge/Badge.tsx                |  40 ++--
 src/components/Button/Button.stories.tsx      |  12 +-
 src/components/Button/Button.tsx              |  44 ++--
 .../ButtonCard/ButtonCard.stories.tsx         |  10 +-
 src/components/ButtonCard/ButtonCard.tsx      |  32 +--
 src/components/Card/Card.stories.tsx          |   6 +-
 src/components/Card/Card.tsx                  |  54 ++---
 src/components/Checkbox/Checkbox.stories.tsx  |   8 +-
 src/components/Checkbox/Checkbox.tsx          |   8 +-
 src/components/Dialog/Dialog.stories.tsx      |   8 +-
 src/components/Dialog/Dialog.tsx              |  20 +-
 .../ExternalLink/ExternalLink.stories.tsx     |  10 +-
 src/components/ExternalLink/ExternalLink.tsx  |   6 +-
 .../FieldAttributes/FieldAttributes.tsx       |  10 +-
 .../IconButton/IconButton.stories.tsx         |   8 +-
 src/components/IconButton/IconButton.tsx      |  20 +-
 .../Icons/ArrowDropdownDownIcon.tsx           |   2 +-
 src/components/Icons/ArrowLinkOffIcon.tsx     |   2 +-
 src/components/Icons/CloseIcon.tsx            |   4 +-
 src/components/Icons/TxState.tsx              | 222 ++++++++++++++++++
 src/components/Radio/Radio.stories.tsx        |  10 +-
 src/components/Radio/Radio.tsx                |  14 +-
 src/components/Select/Select.stories.tsx      |  20 +-
 src/components/Select/Select.tsx              |  46 ++--
 src/components/Selector/Selector.stories.tsx  |   8 +-
 src/components/Selector/Selector.tsx          |   6 +-
 src/components/Spinner/Spinner.stories.tsx    |   8 +-
 src/components/Spinner/Spinner.tsx            |  16 +-
 src/components/Tab/Tab.tsx                    |  14 +-
 src/components/Tabs/Tabs.stories.tsx          |  24 +-
 src/components/Tabs/Tabs.tsx                  |   8 +-
 .../TextField/TextField.stories.tsx           |  12 +-
 src/components/TextField/TextField.tsx        |  30 +--
 src/components/index.ts                       |  48 ++--
 src/context/useTransactionDialogContext.tsx   | 162 ++++++-------
 .../useTransactoinDialogContext.stories.tsx   |  35 ++-
 src/hooks/useOnClickOutside.ts                |  10 +-
 41 files changed, 631 insertions(+), 406 deletions(-)
 create mode 100644 src/components/Icons/TxState.tsx

diff --git a/.prettierrc b/.prettierrc
index 759dc64..358eee0 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -5,7 +5,7 @@
   "endOfLine": "auto",
   "quoteProps": "as-needed",
   "printWidth": 100,
-  "singleQuote": false,
+  "singleQuote": true,
   "arrowParens": "always",
   "trailingComma": "none",
   "bracketSpacing": true,
diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
index bb0e05f..749d458 100644
--- a/src/components/Accordion/Accordion.stories.tsx
+++ b/src/components/Accordion/Accordion.stories.tsx
@@ -1,9 +1,9 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Accordion } from "./Accordion";
+import { Accordion } from './Accordion';
 
 export default {
-  title: "Accordion",
+  title: 'Accordion',
   component: Accordion,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof Accordion>;
@@ -13,8 +13,8 @@ const Template: ComponentStory<typeof Accordion> = (args) => <Accordion {...args
 export const Primary = Template.bind({});
 
 Primary.args = {
-  title: "toggle me",
+  title: 'toggle me',
   children:
     "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
-  variant: "dark-blue"
+  variant: 'dark-blue'
 };
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 6b1eb07..fb492f1 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -1,8 +1,8 @@
-import clsx from "clsx";
-import { Card, CardVariant } from "components/Card/Card";
-import { ArrowDropdownDownIcon } from "components/Icons/ArrowDropdownDownIcon";
-import { useRef, useState } from "react";
-import { CSSTransition } from "react-transition-group";
+import clsx from 'clsx';
+import { Card, CardVariant } from 'components/Card/Card';
+import { ArrowDropdownDownIcon } from 'components/Icons/ArrowDropdownDownIcon';
+import { useRef, useState } from 'react';
+import { CSSTransition } from 'react-transition-group';
 
 export interface AccordionProps {
   flat?: boolean;
@@ -27,8 +27,8 @@ export const Accordion: React.FC<AccordionProps> = ({
   return (
     <Card className={className} variant={variant}>
       <div
-        className={clsx("ui-flex ui-justify-between ui-items-center ui-select-none", {
-          "ui-cursor-default": flat
+        className={clsx('ui-flex ui-justify-between ui-items-center ui-select-none', {
+          'ui-cursor-default': flat
         })}
         role="button"
         tabIndex={0}
@@ -39,9 +39,9 @@ export const Accordion: React.FC<AccordionProps> = ({
         {!flat && (
           <ArrowDropdownDownIcon
             className={clsx(
-              "ui-transition-transform ui-text-black-600 dark:ui-text-white ui-text-base",
+              'ui-transition-transform ui-text-black-600 dark:ui-text-white ui-text-base',
               {
-                "ui-transform ui-rotate-180 ": isActive
+                'ui-transform ui-rotate-180 ': isActive
               }
             )}
           />
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index a1a0a7d..1d37c99 100644
--- a/src/components/Badge/Badge.stories.tsx
+++ b/src/components/Badge/Badge.stories.tsx
@@ -1,9 +1,9 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Badge } from "./Badge";
+import { Badge } from './Badge';
 
 export default {
-  title: "Badge",
+  title: 'Badge',
   component: Badge,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof Badge>;
@@ -13,6 +13,6 @@ const Template: ComponentStory<typeof Badge> = (args) => <Badge {...args} />;
 export const Primary = Template.bind({});
 
 Primary.args = {
-  variant: "default",
-  children: "Badge"
+  variant: 'default',
+  children: 'Badge'
 };
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 3e98440..5634c00 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,15 +1,15 @@
-import clsx from "clsx";
-import { HTMLAttributes, ReactNode } from "react";
+import clsx from 'clsx';
+import { HTMLAttributes, ReactNode } from 'react';
 
 export type BadgeVariant =
-  | "default"
-  | "success"
-  | "danger"
-  | "gray"
-  | "yellow"
-  | "indigo"
-  | "purple"
-  | "pink";
+  | 'default'
+  | 'success'
+  | 'danger'
+  | 'gray'
+  | 'yellow'
+  | 'indigo'
+  | 'purple'
+  | 'pink';
 
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   variant?: BadgeVariant;
@@ -19,20 +19,20 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 const badgeColors = {
-  default: "bg-blue-100 text-blue-800 text-xs dark:bg-blue-200 dark:text-blue-800",
-  danger: "bg-red-100 text-red-800 text-xs dark:bg-red-200 dark:text-red-900",
-  success: "bg-green-100 text-green-800 text-xs dark:bg-green-200 dark:text-green-900",
-  gray: "bg-gray-100 text-gray-800 text-xs dark:bg-gray-700 dark:text-gray-300",
-  yellow: "bg-yellow-100 text-yellow-800 text-xs dark:bg-yellow-200 dark:text-yellow-900",
-  indigo: "bg-indigo-100 text-indigo-800 text-xs dark:bg-indigo-200 dark:text-indigo-900",
-  purple: "bg-purple-100 text-purple-800 text-xs dark:bg-purple-200 dark:text-purple-900",
-  pink: "bg-pink-100 text-pink-800 text-xs dark:bg-pink-200 dark:text-pink-900"
+  default: 'bg-blue-100 text-blue-800 text-xs dark:bg-blue-200 dark:text-blue-800',
+  danger: 'bg-red-100 text-red-800 text-xs dark:bg-red-200 dark:text-red-900',
+  success: 'bg-green-100 text-green-800 text-xs dark:bg-green-200 dark:text-green-900',
+  gray: 'bg-gray-100 text-gray-800 text-xs dark:bg-gray-700 dark:text-gray-300',
+  yellow: 'bg-yellow-100 text-yellow-800 text-xs dark:bg-yellow-200 dark:text-yellow-900',
+  indigo: 'bg-indigo-100 text-indigo-800 text-xs dark:bg-indigo-200 dark:text-indigo-900',
+  purple: 'bg-purple-100 text-purple-800 text-xs dark:bg-purple-200 dark:text-purple-900',
+  pink: 'bg-pink-100 text-pink-800 text-xs dark:bg-pink-200 dark:text-pink-900'
 };
 
 export const Badge: React.FC<BadgeProps> = ({
   className,
-  defaultClass = "text-xs font-semibold px-2.5 py-0.5 rounded",
-  variant = "default",
+  defaultClass = 'text-xs font-semibold px-2.5 py-0.5 rounded',
+  variant = 'default',
   children,
   ...props
 }) => {
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 0f9b479..cb85d60 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -1,9 +1,9 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Button } from "./Button";
+import { Button } from './Button';
 
 export default {
-  title: "Button",
+  title: 'Button',
   component: Button,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof Button>;
@@ -15,7 +15,7 @@ export const Primary = Template.bind({});
 Primary.args = {
   loading: false,
   disabled: false,
-  variant: "default",
-  children: "Button",
-  size: "lg"
+  variant: 'default',
+  children: 'Button',
+  size: 'lg'
 };
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 37c2571..30a3452 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,10 +1,10 @@
-import clsx from "clsx";
-import { Spinner } from "components/Spinner/Spinner";
-import { ButtonHTMLAttributes } from "react";
+import clsx from 'clsx';
+import { Spinner } from 'components/Spinner/Spinner';
+import { ButtonHTMLAttributes } from 'react';
 
-export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonSize = 'sm' | 'md' | 'lg';
 
-export type ButtonVariant = "default" | "outline" | "secondary" | "purple" | "custom";
+export type ButtonVariant = 'default' | 'outline' | 'secondary' | 'purple' | 'custom';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   size?: ButtonSize;
@@ -15,9 +15,9 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 export const Button: React.FC<ButtonProps> = ({
-  size = "md",
+  size = 'md',
   loading = false,
-  variant = "default",
+  variant = 'default',
   mobileSize = size,
   children,
   className,
@@ -32,20 +32,20 @@ export const Button: React.FC<ButtonProps> = ({
          disabled:ui-bg-opacity-65 ui-transition ui-ease-out ui-group
          disabled:ui-cursor-not-allowed`,
         {
-          "ui-text-disabled ui-border ui-border-disabled ui-bg-disabled-2": disabled,
-          "hover:ui-brightness-110": !disabled,
-          "ui-text-black ui-gradient-primary ui-border ui-border-gray-900":
-            variant === "default" && !disabled,
-          "ui-text-white ui-bg-navy": variant === "secondary" && !disabled,
-          "ui-text-white ui-bg-purple": variant === "purple" && !disabled,
-          "ui-gradient-primary ui-bg-clip-text ui-text-fill-transparent ui-button-outline":
-            variant === "outline" && !disabled,
-          "lg:ui-h-12 lg:ui-min-w-button-lg lg:ui-text-sm": size === "lg",
-          "lg:ui-h-10 lg:ui-min-w-button-md lg:ui-text-sm": size === "md",
-          "lg:ui-h-7 lg:ui-min-w-button-sm lg:ui-text-xs": size === "sm",
-          "ui-h-12 ui-min-w-button-lg ui-text-sm": mobileSize === "lg",
-          "ui-h-10 ui-min-w-button-md ui-text-sm": mobileSize === "md",
-          "ui-h-7 ui-min-w-button-sm ui-text-xs": mobileSize === "sm"
+          'ui-text-disabled ui-border ui-border-disabled ui-bg-disabled-2': disabled,
+          'hover:ui-brightness-110': !disabled,
+          'ui-text-black ui-gradient-primary ui-border ui-border-gray-900':
+            variant === 'default' && !disabled,
+          'ui-text-white ui-bg-navy': variant === 'secondary' && !disabled,
+          'ui-text-white ui-bg-purple': variant === 'purple' && !disabled,
+          'ui-gradient-primary ui-bg-clip-text ui-text-fill-transparent ui-button-outline':
+            variant === 'outline' && !disabled,
+          'lg:ui-h-12 lg:ui-min-w-button-lg lg:ui-text-sm': size === 'lg',
+          'lg:ui-h-10 lg:ui-min-w-button-md lg:ui-text-sm': size === 'md',
+          'lg:ui-h-7 lg:ui-min-w-button-sm lg:ui-text-xs': size === 'sm',
+          'ui-h-12 ui-min-w-button-lg ui-text-sm': mobileSize === 'lg',
+          'ui-h-10 ui-min-w-button-md ui-text-sm': mobileSize === 'md',
+          'ui-h-7 ui-min-w-button-sm ui-text-xs': mobileSize === 'sm'
         },
         className
       )}
@@ -55,7 +55,7 @@ export const Button: React.FC<ButtonProps> = ({
       <div className="ui-flex ui-justify-center ui-items-center ui-h-full">
         {loading && (
           <Spinner
-            className={clsx("ui-mr-2", { "ui-opacity-75": disabled }, spinnerClassName)}
+            className={clsx('ui-mr-2', { 'ui-opacity-75': disabled }, spinnerClassName)}
             variant={variant}
           />
         )}
diff --git a/src/components/ButtonCard/ButtonCard.stories.tsx b/src/components/ButtonCard/ButtonCard.stories.tsx
index cec1335..faf3308 100644
--- a/src/components/ButtonCard/ButtonCard.stories.tsx
+++ b/src/components/ButtonCard/ButtonCard.stories.tsx
@@ -1,9 +1,9 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { ButtonCard } from "./ButtonCard";
+import { ButtonCard } from './ButtonCard';
 
 export default {
-  title: "ButtonCard",
+  title: 'ButtonCard',
   component: ButtonCard,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof ButtonCard>;
@@ -13,6 +13,6 @@ const Template: ComponentStory<typeof ButtonCard> = (args) => <ButtonCard {...ar
 export const Primary = Template.bind({});
 
 Primary.args = {
-  subline: "subline",
-  headline: "headline"
+  subline: 'subline',
+  headline: 'headline'
 };
diff --git a/src/components/ButtonCard/ButtonCard.tsx b/src/components/ButtonCard/ButtonCard.tsx
index 50946a5..c34eff9 100644
--- a/src/components/ButtonCard/ButtonCard.tsx
+++ b/src/components/ButtonCard/ButtonCard.tsx
@@ -1,17 +1,17 @@
-import clsx from "clsx";
-import { ButtonHTMLAttributes } from "react";
+import clsx from 'clsx';
+import { ButtonHTMLAttributes } from 'react';
 
 export interface ButtonCardProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string;
   onClick?: () => void;
-  direction?: "left" | "right";
+  direction?: 'left' | 'right';
   headline: string;
   subline?: string;
   sublineFirst?: boolean;
 }
 
 export const ButtonCard: React.FC<ButtonCardProps> = ({
-  direction = "right",
+  direction = 'right',
   headline,
   subline,
   onClick,
@@ -23,7 +23,7 @@ export const ButtonCard: React.FC<ButtonCardProps> = ({
     <button
       className={clsx(
         className,
-        "ui-gradient-rainbow ui-rounded ui-w-full ui-cursor-pointer ui-p-[1px]"
+        'ui-gradient-rainbow ui-rounded ui-w-full ui-cursor-pointer ui-p-[1px]'
       )}
       onClick={onClick}
       {...rest}
@@ -31,19 +31,19 @@ export const ButtonCard: React.FC<ButtonCardProps> = ({
       <div className="ui-bg-dark-blue ui-relative ui-rounded ui-p-6">
         <div className="ui-flex ui-flex-col">
           <h4
-            className={clsx("ui-tg-main ui-text-gray-650 ui-w-full", {
-              "ui-text-left": direction === "left",
-              "ui-text-right": direction === "right",
-              "ui-order-2": !sublineFirst
+            className={clsx('ui-tg-main ui-text-gray-650 ui-w-full', {
+              'ui-text-left': direction === 'left',
+              'ui-text-right': direction === 'right',
+              'ui-order-2': !sublineFirst
             })}
           >
             {subline}
           </h4>
           <h3
-            className={clsx("ui-tg-title-h5 ui-text-white ui-w-full", {
-              "ui-text-left": direction === "left",
-              "ui-text-right": direction === "right",
-              "ui-order-1": !sublineFirst
+            className={clsx('ui-tg-title-h5 ui-text-white ui-w-full', {
+              'ui-text-left': direction === 'left',
+              'ui-text-right': direction === 'right',
+              'ui-order-1': !sublineFirst
             })}
           >
             {headline}
@@ -51,9 +51,9 @@ export const ButtonCard: React.FC<ButtonCardProps> = ({
         </div>
 
         <div
-          className={clsx("ui-absolute ui-top-1/2 ui--translate-y-1/2", {
-            "ui-left-8": direction === "right",
-            "ui-right-8 ui-rotate-180": direction === "left"
+          className={clsx('ui-absolute ui-top-1/2 ui--translate-y-1/2', {
+            'ui-left-8': direction === 'right',
+            'ui-right-8 ui-rotate-180': direction === 'left'
           })}
         >
           <svg
diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
index c095adf..483ec0f 100644
--- a/src/components/Card/Card.stories.tsx
+++ b/src/components/Card/Card.stories.tsx
@@ -1,9 +1,9 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Card } from "./Card";
+import { Card } from './Card';
 
 export default {
-  title: "Card",
+  title: 'Card',
   component: Card,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof Card>;
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index c3fbfeb..b146b73 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,17 +1,17 @@
-import clsx from "clsx";
-import { forwardRef, HTMLAttributes, ReactNode } from "react";
+import clsx from 'clsx';
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
 
 export type CardVariant =
-  | "default"
-  | "gray"
-  | "standard"
-  | "primary"
-  | "blue"
-  | "purple"
-  | "orange"
-  | "pink"
-  | "dark-blue"
-  | "rainbow";
+  | 'default'
+  | 'gray'
+  | 'standard'
+  | 'primary'
+  | 'blue'
+  | 'purple'
+  | 'orange'
+  | 'pink'
+  | 'dark-blue'
+  | 'rainbow';
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
@@ -22,10 +22,10 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
 
 const CardRender: React.ForwardRefRenderFunction<HTMLDivElement, CardProps> = (
   {
-    className = "",
-    defaultClass = "ui-rounded ui-my-2 ui-p-4 sm:ui-p-6",
+    className = '',
+    defaultClass = 'ui-rounded ui-my-2 ui-p-4 sm:ui-p-6',
     children,
-    variant = "default",
+    variant = 'default',
     ...props
   },
   ref
@@ -33,18 +33,18 @@ const CardRender: React.ForwardRefRenderFunction<HTMLDivElement, CardProps> = (
   return (
     <div
       ref={ref}
-      className={clsx("ui-shadow-md", className, defaultClass, {
-        "ui-gradient-gray-2 ui-text-white": variant === "default",
-        "ui-gradient-gray-1 ui-text-white": variant === "gray",
-        "ui-gradient-primary": variant === "primary",
-        "ui-gradient-blue ui-text-white": variant === "blue",
-        "ui-gradient-purple ui-text-white": variant === "purple",
-        "ui-gradient-orange ui-text-white": variant === "orange",
-        "ui-gradient-pink ui-text-white": variant === "pink",
-        "ui-gradient-rainbow ui-text-white": variant === "rainbow",
-        "ui-bg-dark-blue ui-text-white": variant === "dark-blue",
-        "ui-border dark:ui-border-black ui-bg-white ui-border-gray-200 dark:ui-bg-gray-800 dark:ui-text-white":
-          variant === "standard"
+      className={clsx('ui-shadow-md', className, defaultClass, {
+        'ui-gradient-gray-2 ui-text-white': variant === 'default',
+        'ui-gradient-gray-1 ui-text-white': variant === 'gray',
+        'ui-gradient-primary': variant === 'primary',
+        'ui-gradient-blue ui-text-white': variant === 'blue',
+        'ui-gradient-purple ui-text-white': variant === 'purple',
+        'ui-gradient-orange ui-text-white': variant === 'orange',
+        'ui-gradient-pink ui-text-white': variant === 'pink',
+        'ui-gradient-rainbow ui-text-white': variant === 'rainbow',
+        'ui-bg-dark-blue ui-text-white': variant === 'dark-blue',
+        'ui-border dark:ui-border-black ui-bg-white ui-border-gray-200 dark:ui-bg-gray-800 dark:ui-text-white':
+          variant === 'standard'
       })}
       {...props}
     >
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 4a6010a..a530f39 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,9 +1,9 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Checkbox } from "./Checkbox";
+import { Checkbox } from './Checkbox';
 
 export default {
-  title: "Checkbox",
+  title: 'Checkbox',
   component: Checkbox,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof Checkbox>;
@@ -13,5 +13,5 @@ const Template: ComponentStory<typeof Checkbox> = (args) => <Checkbox {...args}
 export const Primary = Template.bind({});
 
 Primary.args = {
-  label: "Checkbox"
+  label: 'Checkbox'
 };
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 184b6d7..f4a2d72 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,5 +1,5 @@
-import clsx from "clsx";
-import { InputHTMLAttributes } from "react";
+import clsx from 'clsx';
+import { InputHTMLAttributes } from 'react';
 
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
   label: React.ReactNode;
@@ -17,10 +17,10 @@ export const Checkbox: React.FC<CheckboxProps> = ({
 }) => {
   return (
     <div className="ui-checkbox ui-flex">
-      <label className={clsx("ui-inline-flex ui-flex-row ui-items-center", className)}>
+      <label className={clsx('ui-inline-flex ui-flex-row ui-items-center', className)}>
         <div
           className={clsx(
-            "ui-transition-colors hover:ui-opacity-90 ui-relative ui-flex ui-items-center ui-justify-center ui-flex-shrink-0 ui-w-5 ui-h-5 ui-mr-2 ui-bg-white ui-rounded-sm ui-cursor-pointer ui-border ui-border-primary dark:ui-bg-black-500"
+            'ui-transition-colors hover:ui-opacity-90 ui-relative ui-flex ui-items-center ui-justify-center ui-flex-shrink-0 ui-w-5 ui-h-5 ui-mr-2 ui-bg-white ui-rounded-sm ui-cursor-pointer ui-border ui-border-primary dark:ui-bg-black-500'
           )}
         >
           <input
diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx
index c955788..ef77aaa 100644
--- a/src/components/Dialog/Dialog.stories.tsx
+++ b/src/components/Dialog/Dialog.stories.tsx
@@ -1,9 +1,9 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Dialog } from "./Dialog";
+import { Dialog } from './Dialog';
 
 export default {
-  title: "Dialog",
+  title: 'Dialog',
   component: Dialog,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof Dialog>;
@@ -14,5 +14,5 @@ export const Primary = Template.bind({});
 
 Primary.args = {
   open: false,
-  children: "test"
+  children: 'test'
 };
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index a650110..18dd81b 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -1,9 +1,9 @@
-import clsx from "clsx";
-import { Card } from "components/Card/Card";
-import CloseIcon from "components/Icons/CloseIcon";
-import { useOnClickOutside } from "hooks/useOnClickOutside";
-import React, { useEffect, useRef } from "react";
-import { CSSTransition } from "react-transition-group";
+import clsx from 'clsx';
+import { Card } from 'components/Card/Card';
+import CloseIcon from 'components/Icons/CloseIcon';
+import { useOnClickOutside } from 'hooks/useOnClickOutside';
+import React, { useEffect, useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
 
 export interface DialogProps {
   className?: string;
@@ -28,8 +28,8 @@ export const Dialog: React.FC<DialogProps> = ({
   useOnClickOutside(ref, () => !disableClose && onClose?.());
 
   useEffect(() => {
-    if (open) document.documentElement.classList.add("stop-scrolling");
-    else document.documentElement.classList.remove("stop-scrolling");
+    if (open) document.documentElement.classList.add('stop-scrolling');
+    else document.documentElement.classList.remove('stop-scrolling');
   }, [open]);
   const nodeRef = useRef(null);
 
@@ -52,7 +52,7 @@ export const Dialog: React.FC<DialogProps> = ({
           ref={ref}
           className={clsx(
             wrapperClass,
-            "ui-overflow-y-auto ui-relative ui-w-full ui-max-w-md ui-h-full ui-max-h-full md:ui-h-auto"
+            'ui-overflow-y-auto ui-relative ui-w-full ui-max-w-md ui-h-full ui-max-h-full md:ui-h-auto'
           )}
           defaultClass="md:ui-rounded-lg ui-p-4 sm:ui-p-6"
         >
@@ -62,7 +62,7 @@ export const Dialog: React.FC<DialogProps> = ({
               onClick={onClose}
             />
           )}
-          <div className={clsx(className, "ui-px-5 ui-text-center")}>{children}</div>
+          <div className={clsx(className, 'ui-px-5 ui-text-center')}>{children}</div>
         </Card>
       </div>
     </CSSTransition>
diff --git a/src/components/ExternalLink/ExternalLink.stories.tsx b/src/components/ExternalLink/ExternalLink.stories.tsx
index c2df05a..6a0d2e9 100644
--- a/src/components/ExternalLink/ExternalLink.stories.tsx
+++ b/src/components/ExternalLink/ExternalLink.stories.tsx
@@ -1,9 +1,9 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { ExternalLink } from "./ExternalLink";
+import { ExternalLink } from './ExternalLink';
 
 export default {
-  title: "ExternalLink",
+  title: 'ExternalLink',
   component: ExternalLink,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof ExternalLink>;
@@ -13,6 +13,6 @@ const Template: ComponentStory<typeof ExternalLink> = (args) => <ExternalLink {.
 export const Primary = Template.bind({});
 
 Primary.args = {
-  link: "https://synthetix.io/",
-  text: "Synthetix"
+  link: 'https://synthetix.io/',
+  text: 'Synthetix'
 };
diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx
index 29a5dbb..baf92e1 100644
--- a/src/components/ExternalLink/ExternalLink.tsx
+++ b/src/components/ExternalLink/ExternalLink.tsx
@@ -1,5 +1,5 @@
-import clsx from "clsx";
-import { ArrowLinkOffIcon } from "components/Icons/ArrowLinkOffIcon";
+import clsx from 'clsx';
+import { ArrowLinkOffIcon } from 'components/Icons/ArrowLinkOffIcon';
 
 export interface ExternalLinkProps {
   className?: string;
@@ -18,7 +18,7 @@ export const ExternalLink: React.FC<ExternalLinkProps> = ({
     <a
       className={clsx(
         className,
-        "ui-inline-flex ui-items-center ui-text-primary hover:ui-brightness-110 ui-transition ui-ease-out"
+        'ui-inline-flex ui-items-center ui-text-primary hover:ui-brightness-110 ui-transition ui-ease-out'
       )}
       href={link}
       rel="noreferrer noopener"
diff --git a/src/components/FieldAttributes/FieldAttributes.tsx b/src/components/FieldAttributes/FieldAttributes.tsx
index abad84b..1846604 100644
--- a/src/components/FieldAttributes/FieldAttributes.tsx
+++ b/src/components/FieldAttributes/FieldAttributes.tsx
@@ -1,6 +1,6 @@
-import clsx from "clsx";
-import uniqueId from "lodash/uniqueId";
-import { cloneElement, isValidElement, useEffect, useState } from "react";
+import clsx from 'clsx';
+import uniqueId from 'lodash/uniqueId';
+import { cloneElement, isValidElement, useEffect, useState } from 'react';
 
 export interface FieldAttributesProps {
   label?: React.ReactNode;
@@ -19,11 +19,11 @@ export const FieldAttributes: React.FC<FieldAttributesProps> = ({
   const [id, setId] = useState<string | undefined>(undefined);
 
   useEffect(() => {
-    setId(uniqueId("id-"));
+    setId(uniqueId('id-'));
   }, []);
 
   return (
-    <div className={clsx("ui-flex ui-flex-col ui-w-full ui-relative ui-mb-5", className)}>
+    <div className={clsx('ui-flex ui-flex-col ui-w-full ui-relative ui-mb-5', className)}>
       {id ? isValidElement(children) && cloneElement(children, { id }) : children}
 
       {label && (
diff --git a/src/components/IconButton/IconButton.stories.tsx b/src/components/IconButton/IconButton.stories.tsx
index 8b1f991..b45a574 100644
--- a/src/components/IconButton/IconButton.stories.tsx
+++ b/src/components/IconButton/IconButton.stories.tsx
@@ -1,10 +1,10 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import CloseIcon from "components/Icons/CloseIcon";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import CloseIcon from 'components/Icons/CloseIcon';
 
-import { IconButton } from "./IconButton";
+import { IconButton } from './IconButton';
 
 export default {
-  title: "IconButton",
+  title: 'IconButton',
   component: IconButton,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof IconButton>;
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index 2e9f8ed..16a4c7f 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -1,11 +1,11 @@
-import clsx from "clsx";
-import { ButtonHTMLAttributes } from "react";
+import clsx from 'clsx';
+import { ButtonHTMLAttributes } from 'react';
 
 export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   isActive?: boolean;
   rounded?: boolean;
   children: React.ReactNode;
-  size?: "sm" | "md" | "lg";
+  size?: 'sm' | 'md' | 'lg';
 }
 
 export const IconButton: React.FC<IconButtonProps> = ({
@@ -13,7 +13,7 @@ export const IconButton: React.FC<IconButtonProps> = ({
   children,
   className,
   rounded,
-  size = "md",
+  size = 'md',
   ...props
 }) => {
   return (
@@ -24,12 +24,12 @@ export const IconButton: React.FC<IconButtonProps> = ({
         ui-text-white ui-transition-colors ui-ease-out`,
         className,
         {
-          "ui-bg-primary": isActive,
-          "ui-rounded-full": rounded,
-          "ui-rounded": !rounded,
-          "ui-w-14 ui-h-14": size === "md",
-          "ui-w-10 ui-h-10": size === "sm",
-          "ui-w-16 ui-h-16": size === "lg"
+          'ui-bg-primary': isActive,
+          'ui-rounded-full': rounded,
+          'ui-rounded': !rounded,
+          'ui-w-14 ui-h-14': size === 'md',
+          'ui-w-10 ui-h-10': size === 'sm',
+          'ui-w-16 ui-h-16': size === 'lg'
         }
       )}
     >
diff --git a/src/components/Icons/ArrowDropdownDownIcon.tsx b/src/components/Icons/ArrowDropdownDownIcon.tsx
index 2bb6c09..4c0420f 100644
--- a/src/components/Icons/ArrowDropdownDownIcon.tsx
+++ b/src/components/Icons/ArrowDropdownDownIcon.tsx
@@ -1,4 +1,4 @@
-import { SVGIconProps } from "./types";
+import { SVGIconProps } from './types';
 
 export const ArrowDropdownDownIcon = ({ onClick, className }: SVGIconProps) => (
   <svg
diff --git a/src/components/Icons/ArrowLinkOffIcon.tsx b/src/components/Icons/ArrowLinkOffIcon.tsx
index 6dde4a2..db6e706 100644
--- a/src/components/Icons/ArrowLinkOffIcon.tsx
+++ b/src/components/Icons/ArrowLinkOffIcon.tsx
@@ -1,4 +1,4 @@
-import { SVGIconProps } from "./types";
+import { SVGIconProps } from './types';
 
 export const ArrowLinkOffIcon = ({ onClick, className }: SVGIconProps) => {
   return (
diff --git a/src/components/Icons/CloseIcon.tsx b/src/components/Icons/CloseIcon.tsx
index d028e62..bbcd324 100644
--- a/src/components/Icons/CloseIcon.tsx
+++ b/src/components/Icons/CloseIcon.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react';
 
-import { SVGIconProps } from "./types";
+import { SVGIconProps } from './types';
 
 export default function CloseIcon({ onClick, className }: SVGIconProps) {
   return (
diff --git a/src/components/Icons/TxState.tsx b/src/components/Icons/TxState.tsx
new file mode 100644
index 0000000..c91ee8e
--- /dev/null
+++ b/src/components/Icons/TxState.tsx
@@ -0,0 +1,222 @@
+import { TxState } from 'context/useTransactionDialogContext';
+
+export default function TxStateSvg({ txState }: Record<'txState', TxState>) {
+  if (txState === 'error' || txState === 'failed') {
+    return (
+      <svg
+        fill="none"
+        height="94"
+        viewBox="0 0 94 94"
+        width="94"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g filter="url(#filter0_d_707_15445)">
+          <path
+            clipRule="evenodd"
+            d="M47 76.3333C63.2004 76.3333 76.3333 63.2004 76.3333 47C76.3333 30.7996 63.2004 17.6667 47 17.6667C30.7996 17.6667 17.6667 30.7996 17.6667 47C17.6667 63.2004 30.7996 76.3333 47 76.3333ZM47 79C64.6731 79 79 64.6731 79 47C79 29.3269 64.6731 15 47 15C29.3269 15 15 29.3269 15 47C15 64.6731 29.3269 79 47 79Z"
+            fill="#FF1E39"
+            fillRule="evenodd"
+          />
+        </g>
+        <g filter="url(#filter1_d_707_15445)">
+          <path
+            d="M56.3333 39.547L54.4533 37.667L47 45.1203L39.5466 37.667L37.6666 39.547L45.12 47.0003L37.6666 54.4537L39.5466 56.3337L47 48.8803L54.4533 56.3337L56.3333 54.4537L48.88 47.0003L56.3333 39.547Z"
+            fill="#FF1E39"
+          />
+        </g>
+        <defs>
+          <filter
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+            height="94"
+            id="filter0_d_707_15445"
+            width="94"
+            x="0"
+            y="0"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              result="hardAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 1 0 0 0 0 0.116667 0 0 0 0 0.222667 0 0 0 0.6 0"
+            />
+            <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_707_15445" />
+            <feBlend
+              in="SourceGraphic"
+              in2="effect1_dropShadow_707_15445"
+              mode="normal"
+              result="shape"
+            />
+          </filter>
+          <filter
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+            height="48.667"
+            id="filter1_d_707_15445"
+            width="48.6666"
+            x="22.6666"
+            y="22.667"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              result="hardAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 1 0 0 0 0 0.116667 0 0 0 0 0.222667 0 0 0 0.6 0"
+            />
+            <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_707_15445" />
+            <feBlend
+              in="SourceGraphic"
+              in2="effect1_dropShadow_707_15445"
+              mode="normal"
+              result="shape"
+            />
+          </filter>
+        </defs>
+      </svg>
+    );
+  }
+  if (txState === 'confirmed') {
+    return (
+      <svg
+        fill="none"
+        height="94"
+        viewBox="0 0 94 94"
+        width="94"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g filter="url(#filter0_d_707_15431)">
+          <path
+            clipRule="evenodd"
+            d="M47 76.3333C63.2004 76.3333 76.3333 63.2004 76.3333 47C76.3333 30.7996 63.2004 17.6667 47 17.6667C30.7996 17.6667 17.6667 30.7996 17.6667 47C17.6667 63.2004 30.7996 76.3333 47 76.3333ZM47 79C64.6731 79 79 64.6731 79 47C79 29.3269 64.6731 15 47 15C29.3269 15 15 29.3269 15 47C15 64.6731 29.3269 79 47 79Z"
+            fill="#31D8A4"
+            fillRule="evenodd"
+          />
+        </g>
+        <g filter="url(#filter1_d_707_15431)">
+          <path
+            d="M42.7266 52.1662L37.1666 46.6062L35.2733 48.4862L42.7266 55.9396L58.7266 39.9396L56.8466 38.0596L42.7266 52.1662Z"
+            fill="#31D8A4"
+          />
+        </g>
+        <defs>
+          <filter
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+            height="94"
+            id="filter0_d_707_15431"
+            width="94"
+            x="0"
+            y="0"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              result="hardAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.266667 0 0 0 0 0.937255 0 0 0 0 0.756863 0 0 0 0.6 0"
+            />
+            <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_707_15431" />
+            <feBlend
+              in="SourceGraphic"
+              in2="effect1_dropShadow_707_15431"
+              mode="normal"
+              result="shape"
+            />
+          </filter>
+          <filter
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+            height="47.8799"
+            id="filter1_d_707_15431"
+            width="53.4534"
+            x="20.2733"
+            y="23.0596"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              result="hardAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.266667 0 0 0 0 0.937255 0 0 0 0 0.756863 0 0 0 0.6 0"
+            />
+            <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_707_15431" />
+            <feBlend
+              in="SourceGraphic"
+              in2="effect1_dropShadow_707_15431"
+              mode="normal"
+              result="shape"
+            />
+          </filter>
+        </defs>
+      </svg>
+    );
+  }
+  return (
+    <svg fill="none" height="94" viewBox="0 0 94 94" width="94" xmlns="http://www.w3.org/2000/svg">
+      <g filter="url(#filter0_d_1447_13624)">
+        <circle cx="47" cy="47" r="31" stroke="#FFD75C" strokeWidth="2" />
+      </g>
+      <circle cx="59" cy="47" fill="#FFD75C" r="4" />
+      <circle cx="47" cy="45" fill="#FFD75C" r="4" />
+      <circle cx="35" cy="47" fill="#FFD75C" r="4" />
+      <defs>
+        <filter
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+          height="94"
+          id="filter0_d_1447_13624"
+          width="94"
+          x="0"
+          y="0"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            result="hardAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="7.5" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 1 0 0 0 0 0.843137 0 0 0 0 0.360784 0 0 0 0.6 0"
+          />
+          <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_1447_13624" />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect1_dropShadow_1447_13624"
+            mode="normal"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/components/Radio/Radio.stories.tsx b/src/components/Radio/Radio.stories.tsx
index 844974b..0c27c80 100644
--- a/src/components/Radio/Radio.stories.tsx
+++ b/src/components/Radio/Radio.stories.tsx
@@ -1,9 +1,9 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Radio } from "./Radio";
+import { Radio } from './Radio';
 
 export default {
-  title: "Radio",
+  title: 'Radio',
   component: Radio,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof Radio>;
@@ -18,7 +18,7 @@ const Template: ComponentStory<typeof Radio> = (args) => (
 export const Primary = Template.bind({});
 
 Primary.args = {
-  label: "Radio",
-  name: "form",
+  label: 'Radio',
+  name: 'form',
   disabled: false
 };
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index 282da86..ff69bd6 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -1,7 +1,7 @@
-import clsx from "clsx";
-import { InputHTMLAttributes } from "react";
+import clsx from 'clsx';
+import { InputHTMLAttributes } from 'react';
 
-import classes from "./Radio.module.scss";
+import classes from './Radio.module.scss';
 
 export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
   label: React.ReactNode;
@@ -13,8 +13,8 @@ export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
 export const Radio: React.FC<RadioProps> = ({ className, label, onChange, disabled, ...props }) => {
   return (
     <div
-      className={clsx(className, "ui-flex ui-items-center ui-mr-4 ui-mb-4", classes.wrapper, {
-        "ui-opacity-50": disabled
+      className={clsx(className, 'ui-flex ui-items-center ui-mr-4 ui-mb-4', classes.wrapper, {
+        'ui-opacity-50': disabled
       })}
     >
       <input
@@ -26,9 +26,9 @@ export const Radio: React.FC<RadioProps> = ({ className, label, onChange, disabl
       />
       <label
         className={clsx(
-          "ui-flex ui-items-center ui-cursor-pointer dark:ui-text-white ui-select-none",
+          'ui-flex ui-items-center ui-cursor-pointer dark:ui-text-white ui-select-none',
           {
-            "ui-cursor-not-allowed": disabled
+            'ui-cursor-not-allowed': disabled
           }
         )}
         htmlFor={props.id}
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 2fe70f2..e634e65 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -1,9 +1,9 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Select } from "./Select";
+import { Select } from './Select';
 
 export default {
-  title: "Select",
+  title: 'Select',
   component: Select,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof Select>;
@@ -14,12 +14,12 @@ export const Primary = Template.bind({});
 
 Primary.args = {
   options: [
-    { label: "Option A", value: "A" },
-    { label: "Option B", value: "B" },
-    { label: "Option C", value: "C" },
-    { label: "Option D", value: "D" },
-    { label: "Option E", value: "E" },
-    { label: "Option F", value: "F" }
+    { label: 'Option A', value: 'A' },
+    { label: 'Option B', value: 'B' },
+    { label: 'Option C', value: 'C' },
+    { label: 'Option D', value: 'D' },
+    { label: 'Option E', value: 'E' },
+    { label: 'Option F', value: 'F' }
   ],
-  placeholder: "Select"
+  placeholder: 'Select'
 };
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 26c4762..54ce247 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,11 +1,11 @@
-import clsx from "clsx";
-import { FieldAttributes, FieldAttributesProps } from "components/FieldAttributes/FieldAttributes";
-import { ArrowDropdownDownIcon } from "components/Icons/ArrowDropdownDownIcon";
-import { useOnClickOutside } from "hooks/useOnClickOutside";
-import { ReactElement, useMemo, useRef, useState } from "react";
-import { Option } from "types/option";
+import clsx from 'clsx';
+import { FieldAttributes, FieldAttributesProps } from 'components/FieldAttributes/FieldAttributes';
+import { ArrowDropdownDownIcon } from 'components/Icons/ArrowDropdownDownIcon';
+import { useOnClickOutside } from 'hooks/useOnClickOutside';
+import { ReactElement, useMemo, useRef, useState } from 'react';
+import { Option } from 'types/option';
 
-import classes from "./Select.module.scss";
+import classes from './Select.module.scss';
 
 export interface SelectProps<T = Option> {
   value: T | string | number | null;
@@ -13,11 +13,11 @@ export interface SelectProps<T = Option> {
   disabled?: boolean;
   className?: string;
   placeholder?: string;
-  fieldAttributesProps?: Omit<FieldAttributesProps, "onLabelClick">;
+  fieldAttributesProps?: Omit<FieldAttributesProps, 'onLabelClick'>;
   onChange?: (option: T) => void;
   labelMapper?: (option: T) => React.ReactNode;
   valueMapper?: (option: T) => string | number;
-  size?: "sm" | "md" | "lg";
+  size?: 'sm' | 'md' | 'lg';
 }
 
 export const Select = <T,>({
@@ -28,7 +28,7 @@ export const Select = <T,>({
   placeholder,
   fieldAttributesProps,
   onChange,
-  size = "md",
+  size = 'md',
   labelMapper = (option: T) => (option as unknown as Option).label,
   valueMapper = (option: T) => (option as unknown as Option).value,
   ...props
@@ -51,10 +51,10 @@ export const Select = <T,>({
   const handleSelect = (option: T) => onChange?.(option);
 
   const label = useMemo(() => {
-    if (typeof value === "object" && value !== null) return labelMapper(value);
+    if (typeof value === 'object' && value !== null) return labelMapper(value);
 
     const selected = options.find((item) => valueMapper(item) === value);
-    return selected ? labelMapper(selected) : "NA";
+    return selected ? labelMapper(selected) : 'NA';
   }, [value, options, labelMapper, valueMapper]);
 
   useOnClickOutside(ref, closeSelect);
@@ -68,13 +68,13 @@ export const Select = <T,>({
          ui-bg-white dark:ui-bg-dark-blue dark:ui-text-white ui-text-sm ui-flex ui-items-center
          ui-justify-between ui-select-none`,
           {
-            "ui-cursor-not-allowed": disabled,
-            "ui-border-black-200 dark:ui-border-black-400": !hasError || isOpen,
-            "ui-border-red-400 ui-text-red-400 dark:ui-text-red-400": hasError && !isOpen,
-            "ui-rounded-bl-none ui-rounded-br-none": isOpen,
-            "ui-h-14": size === "lg",
-            "ui-h-12": size === "md",
-            "ui-h-8": size === "sm"
+            'ui-cursor-not-allowed': disabled,
+            'ui-border-black-200 dark:ui-border-black-400': !hasError || isOpen,
+            'ui-border-red-400 ui-text-red-400 dark:ui-text-red-400': hasError && !isOpen,
+            'ui-rounded-bl-none ui-rounded-br-none': isOpen,
+            'ui-h-14': size === 'lg',
+            'ui-h-12': size === 'md',
+            'ui-h-8': size === 'sm'
           },
           className
         )}
@@ -87,8 +87,8 @@ export const Select = <T,>({
         {value ? label : <span className="ui-text-black-300">{placeholder}</span>}
 
         <ArrowDropdownDownIcon
-          className={clsx("ui-transition-transform ui-text-black-200 dark:ui-text-white", {
-            "ui-transform ui-rotate-180 ": isOpen
+          className={clsx('ui-transition-transform ui-text-black-200 dark:ui-text-white', {
+            'ui-transform ui-rotate-180 ': isOpen
           })}
         />
         {isOpen && (
@@ -97,7 +97,7 @@ export const Select = <T,>({
           ui-border-black-200 dark:ui-border-black-400 ui-box-content ui-rounded-bl ui-rounded-br
           ui-bg-white dark:ui-bg-dark-blue ui-z-10`}
           >
-            <ul className={clsx("ui-max-h-56 ui-overflow-auto", classes.scroll)}>
+            <ul className={clsx('ui-max-h-56 ui-overflow-auto', classes.scroll)}>
               {options.map((option, index) => (
                 <li
                   key={valueMapper(option)}
@@ -105,7 +105,7 @@ export const Select = <T,>({
                     `dark:even:ui-bg-navy-dark-1 ui-border-b ui-border-solid ui-border-black-200 dark:ui-border-0
                    last:ui-border-b-0 hover:ui-bg-gray-100 dark:hover:ui-bg-navy
                    last:ui-rounded-bl`,
-                    { "last:ui-rounded-br": !hasOptionsScroll }
+                    { 'last:ui-rounded-br': !hasOptionsScroll }
                   )}
                 >
                   <div
diff --git a/src/components/Selector/Selector.stories.tsx b/src/components/Selector/Selector.stories.tsx
index 8ef8358..d44da96 100644
--- a/src/components/Selector/Selector.stories.tsx
+++ b/src/components/Selector/Selector.stories.tsx
@@ -1,10 +1,10 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import CloseIcon from "components/Icons/CloseIcon";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import CloseIcon from 'components/Icons/CloseIcon';
 
-import { Selector } from "./Selector";
+import { Selector } from './Selector';
 
 export default {
-  title: "Selector",
+  title: 'Selector',
   component: Selector,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof Selector>;
diff --git a/src/components/Selector/Selector.tsx b/src/components/Selector/Selector.tsx
index 07026bd..db8b23e 100644
--- a/src/components/Selector/Selector.tsx
+++ b/src/components/Selector/Selector.tsx
@@ -1,5 +1,5 @@
-import clsx from "clsx";
-import React from "react";
+import clsx from 'clsx';
+import React from 'react';
 
 export type SelectorProps = {
   text: React.ReactNode;
@@ -10,7 +10,7 @@ export type SelectorProps = {
 export const Selector: React.FC<SelectorProps> = ({ text, onClick, className }) => (
   <button
     className={clsx(
-      "ui-flex ui-gap-2 ui-items-center ui-bg-dark-blue ui-transition ui-border ui-border-transparent ui-ease-out ui-min-w-button-md ui-rounded ui-text-primary ui-px-2.5 ui-py-2 ui-whitespace-nowrap",
+      'ui-flex ui-gap-2 ui-items-center ui-bg-dark-blue ui-transition ui-border ui-border-transparent ui-ease-out ui-min-w-button-md ui-rounded ui-text-primary ui-px-2.5 ui-py-2 ui-whitespace-nowrap',
       className
     )}
     type="button"
diff --git a/src/components/Spinner/Spinner.stories.tsx b/src/components/Spinner/Spinner.stories.tsx
index d2e14da..4d4220c 100644
--- a/src/components/Spinner/Spinner.stories.tsx
+++ b/src/components/Spinner/Spinner.stories.tsx
@@ -1,9 +1,9 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Spinner } from "./Spinner";
+import { Spinner } from './Spinner';
 
 export default {
-  title: "Spinner",
+  title: 'Spinner',
   component: Spinner,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof Spinner>;
@@ -13,5 +13,5 @@ const Template: ComponentStory<typeof Spinner> = (args) => <Spinner {...args} />
 export const Primary = Template.bind({});
 
 Primary.args = {
-  variant: "default"
+  variant: 'default'
 };
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
index 93b0dd3..b32df17 100644
--- a/src/components/Spinner/Spinner.tsx
+++ b/src/components/Spinner/Spinner.tsx
@@ -1,21 +1,21 @@
-import clsx from "clsx";
-import { ButtonVariant } from "components/Button/Button";
+import clsx from 'clsx';
+import { ButtonVariant } from 'components/Button/Button';
 
 export interface SpinnerProps {
   variant?: ButtonVariant;
   className?: string;
 }
 
-export const Spinner: React.FC<SpinnerProps> = ({ variant = "default", className }) => {
+export const Spinner: React.FC<SpinnerProps> = ({ variant = 'default', className }) => {
   return (
     <i
       className={clsx(
-        "ui-flex ui-w-5 ui-h-5 ui-rounded-full ui-bg-transparent ui-border-2 ui-border-solid ui-border-black-100 dark:ui-border-gray-400 ui-animate-spin",
+        'ui-flex ui-w-5 ui-h-5 ui-rounded-full ui-bg-transparent ui-border-2 ui-border-solid ui-border-black-100 dark:ui-border-gray-400 ui-animate-spin',
         {
-          "ui-border-t-green dark:ui-border-t-green":
-            variant === "default" || variant === "outline",
-          "ui-border-t-navy dark:ui-border-t-navy": variant === "secondary",
-          "ui-border-t-purple dark:ui-border-t-purple": variant === "purple"
+          'ui-border-t-green dark:ui-border-t-green':
+            variant === 'default' || variant === 'outline',
+          'ui-border-t-navy dark:ui-border-t-navy': variant === 'secondary',
+          'ui-border-t-purple dark:ui-border-t-purple': variant === 'purple'
         },
         className
       )}
diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx
index d77da10..10a93f7 100644
--- a/src/components/Tab/Tab.tsx
+++ b/src/components/Tab/Tab.tsx
@@ -1,5 +1,5 @@
-import clsx from "clsx";
-import React from "react";
+import clsx from 'clsx';
+import React from 'react';
 
 export type TabProps = {
   text: React.ReactNode;
@@ -12,12 +12,12 @@ export type TabProps = {
 export const Tab: React.FC<TabProps> = ({ text, active, onClick, disabled, className }) => (
   <button
     className={clsx(
-      "ui-transition ui-border ui-border-transparent ui-ease-out ui-min-w-button-md ui-rounded-[100px] dark:ui-text-white ui-px-2.5 ui-py-2 ui-whitespace-nowrap",
+      'ui-transition ui-border ui-border-transparent ui-ease-out ui-min-w-button-md ui-rounded-[100px] dark:ui-text-white ui-px-2.5 ui-py-2 ui-whitespace-nowrap',
       {
-        "ui-text-black-700 ui-bg-primary": active,
-        "ui-cursor-pointer": !disabled,
-        "hover:ui-border-primary hover:ui-text-primary": !disabled && !active,
-        "ui-opacity-50 ui-cursor-not-allowed": disabled
+        'ui-text-black-700 ui-bg-primary': active,
+        'ui-cursor-pointer': !disabled,
+        'hover:ui-border-primary hover:ui-text-primary': !disabled && !active,
+        'ui-opacity-50 ui-cursor-not-allowed': disabled
       },
       className
     )}
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index bf39430..7b9f1ee 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -1,10 +1,10 @@
-import { Story } from "@storybook/react";
-import React, { ComponentProps } from "react";
+import { Story } from '@storybook/react';
+import React, { ComponentProps } from 'react';
 
-import { Tabs } from "./Tabs";
+import { Tabs } from './Tabs';
 
 export default {
-  title: "Tabs",
+  title: 'Tabs',
   component: Tabs
 };
 
@@ -14,22 +14,22 @@ export const Basic = Template.bind({});
 Basic.args = {
   items: [
     {
-      id: "tab1",
-      label: "tab1",
+      id: 'tab1',
+      label: 'tab1',
       content: <div>Tab 1</div>
     },
     {
-      id: "tab2",
-      label: "tab2",
+      id: 'tab2',
+      label: 'tab2',
       content: <div>Tab 2</div>
     },
     {
-      id: "tab3",
-      label: "disabled",
+      id: 'tab3',
+      label: 'disabled',
       content: <div>Tab 3</div>,
       disabled: true
     }
   ],
-  initial: "tab1",
-  contentClassName: "ui-p-4"
+  initial: 'tab1',
+  contentClassName: 'ui-p-4'
 };
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 0fd50f6..2ccb9f2 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -1,7 +1,7 @@
-import clsx from "clsx";
-import React, { useCallback, useMemo, useState } from "react";
+import clsx from 'clsx';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import { Tab } from "../Tab/Tab";
+import { Tab } from '../Tab/Tab';
 
 export interface ITabItem {
   id: string;
@@ -57,7 +57,7 @@ export const Tabs: React.FC<TabsProps> = ({
           />
         ))}
       </div>
-      <div className={clsx(contentClassName, "dark:ui-text-white")}>{content}</div>
+      <div className={clsx(contentClassName, 'dark:ui-text-white')}>{content}</div>
     </div>
   );
 };
diff --git a/src/components/TextField/TextField.stories.tsx b/src/components/TextField/TextField.stories.tsx
index 4dc66ce..4f7f2d3 100644
--- a/src/components/TextField/TextField.stories.tsx
+++ b/src/components/TextField/TextField.stories.tsx
@@ -1,9 +1,9 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { TextField } from "./TextField";
+import { TextField } from './TextField';
 
 export default {
-  title: "TextField",
+  title: 'TextField',
   component: TextField,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof TextField>;
@@ -13,8 +13,8 @@ const Template: ComponentStory<typeof TextField> = (args) => <TextField {...args
 export const Primary = Template.bind({});
 
 Primary.args = {
-  placeholder: "Placeholder",
-  label: "Label",
-  error: "",
+  placeholder: 'Placeholder',
+  label: 'Label',
+  error: '',
   disabled: false
 };
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index 025bbf8..a0f0974 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -1,8 +1,8 @@
-import clsx from "clsx";
-import { FieldAttributes } from "components/FieldAttributes/FieldAttributes";
-import { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
+import clsx from 'clsx';
+import { FieldAttributes } from 'components/FieldAttributes/FieldAttributes';
+import { InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
 
-export type InputSize = "sm" | "md";
+export type InputSize = 'sm' | 'md';
 
 interface BaseProps {
   label?: React.ReactNode;
@@ -29,21 +29,21 @@ export const TextField: React.FC<TextFieldProps> = ({
   error,
   onLabelClick,
   wrapperClassName,
-  inputSize = "md",
+  inputSize = 'md',
   ...props
 }) => {
   const hasError = !!error;
   const classes = clsx(
-    "ui-order-2 ui-border ui-border-solid ui-border-gray-300 dark:ui-border-gray-600 ui-text-gray-900 dark:ui-placeholder-gray-400 dark:ui-text-white ui-outline-none ui-rounded ui-w-full ui-text-sm ui-transition disabled:ui-bg-disabled disabled:ui-text-disabled-2",
+    'ui-order-2 ui-border ui-border-solid ui-border-gray-300 dark:ui-border-gray-600 ui-text-gray-900 dark:ui-placeholder-gray-400 dark:ui-text-white ui-outline-none ui-rounded ui-w-full ui-text-sm ui-transition disabled:ui-bg-disabled disabled:ui-text-disabled-2',
     {
-      "ui-p-3": multiline,
-      "ui-h-14 ui-px-6": !multiline && inputSize === "md",
-      "ui-h-10 ui-px-3": !multiline && inputSize === "sm",
-      "ui-cursor-not-allowed": props.disabled,
-      "focus:ui-border-primary focus:dark:ui-border-primary active:dark:ui-border-primary ui-bg-gray-50 dark:ui-bg-dark-blue":
+      'ui-p-3': multiline,
+      'ui-h-14 ui-px-6': !multiline && inputSize === 'md',
+      'ui-h-10 ui-px-3': !multiline && inputSize === 'sm',
+      'ui-cursor-not-allowed': props.disabled,
+      'focus:ui-border-primary focus:dark:ui-border-primary active:dark:ui-border-primary ui-bg-gray-50 dark:ui-bg-dark-blue':
         !props.disabled,
-      "ui-border-black-200 dark:ui-border-black-400": !hasError,
-      "ui-border-red-400 dark:ui-border-red-400 focus:ui-border-red-400 ui-text-red-400 dark:ui-text-red-400":
+      'ui-border-black-200 dark:ui-border-black-400': !hasError,
+      'ui-border-red-400 dark:ui-border-red-400 focus:ui-border-red-400 ui-text-red-400 dark:ui-text-red-400':
         hasError
     },
     className
@@ -51,8 +51,8 @@ export const TextField: React.FC<TextFieldProps> = ({
 
   return (
     <FieldAttributes
-      className={clsx("ui-textfield-wrapper", wrapperClassName, {
-        "ui-opacity-50": props.disabled
+      className={clsx('ui-textfield-wrapper', wrapperClassName, {
+        'ui-opacity-50': props.disabled
       })}
       error={error}
       label={label}
diff --git a/src/components/index.ts b/src/components/index.ts
index ad5dd96..a8428fc 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,22 +1,27 @@
-import "../styles/_build.scss";
+import '../styles/_build.scss';
 
-import { Accordion, AccordionProps } from "./Accordion/Accordion";
-import { Badge, BadgeProps } from "./Badge/Badge";
-import { Button, ButtonProps } from "./Button/Button";
-import { ButtonCard, ButtonCardProps } from "./ButtonCard/ButtonCard";
-import { Card, CardProps } from "./Card/Card";
-import { Checkbox, CheckboxProps } from "./Checkbox/Checkbox";
-import { Dialog, DialogProps } from "./Dialog/Dialog";
-import { ExternalLink, ExternalLinkProps } from "./ExternalLink/ExternalLink";
-import { FieldAttributesProps } from "./FieldAttributes/FieldAttributes";
-import { IconButton, IconButtonProps } from "./IconButton/IconButton";
-import { Radio, RadioProps } from "./Radio/Radio";
-import { Select, SelectProps } from "./Select/Select";
-import { Selector, SelectorProps } from "./Selector/Selector";
-import { Spinner, SpinnerProps } from "./Spinner/Spinner";
-import { Tab, TabProps } from "./Tab/Tab";
-import { Tabs, TabsProps } from "./Tabs/Tabs";
-import { TextField, TextFieldProps } from "./TextField/TextField";
+import TransactionDialogContextProvider, {
+  useTransactionModalContext
+} from 'context/useTransactionDialogContext';
+import { TxState } from 'context/useTransactionDialogContext';
+
+import { Accordion, AccordionProps } from './Accordion/Accordion';
+import { Badge, BadgeProps } from './Badge/Badge';
+import { Button, ButtonProps } from './Button/Button';
+import { ButtonCard, ButtonCardProps } from './ButtonCard/ButtonCard';
+import { Card, CardProps } from './Card/Card';
+import { Checkbox, CheckboxProps } from './Checkbox/Checkbox';
+import { Dialog, DialogProps } from './Dialog/Dialog';
+import { ExternalLink, ExternalLinkProps } from './ExternalLink/ExternalLink';
+import { FieldAttributesProps } from './FieldAttributes/FieldAttributes';
+import { IconButton, IconButtonProps } from './IconButton/IconButton';
+import { Radio, RadioProps } from './Radio/Radio';
+import { Select, SelectProps } from './Select/Select';
+import { Selector, SelectorProps } from './Selector/Selector';
+import { Spinner, SpinnerProps } from './Spinner/Spinner';
+import { Tab, TabProps } from './Tab/Tab';
+import { Tabs, TabsProps } from './Tabs/Tabs';
+import { TextField, TextFieldProps } from './TextField/TextField';
 
 export {
   Accordion,
@@ -34,7 +39,9 @@ export {
   Spinner,
   Tab,
   Tabs,
-  TextField
+  TextField,
+  TransactionDialogContextProvider,
+  useTransactionModalContext
 };
 export type {
   AccordionProps,
@@ -53,5 +60,6 @@ export type {
   SpinnerProps,
   TabProps,
   TabsProps,
-  TextFieldProps
+  TextFieldProps,
+  TxState
 };
diff --git a/src/context/useTransactionDialogContext.tsx b/src/context/useTransactionDialogContext.tsx
index a8429ae..76b7f3c 100644
--- a/src/context/useTransactionDialogContext.tsx
+++ b/src/context/useTransactionDialogContext.tsx
@@ -1,81 +1,26 @@
-import { TransactionNotifier } from "@synthetixio/transaction-notifier";
-import { Dialog, Spinner } from "components";
-import { providers } from "ethers";
-import { createContext, ReactNode, useContext, useEffect, useState } from "react";
+import { TransactionNotifier } from '@synthetixio/transaction-notifier';
+import { Dialog, Spinner } from 'components';
+import TxStateSvg from 'components/Icons/TxState';
+import { providers } from 'ethers';
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useEffect,
+  useState
+} from 'react';
 
-type TxState = "signing" | "mining" | "failed" | "confirmed" | "error";
+export type TxState = 'signing' | 'mining' | 'failed' | 'confirmed' | 'error';
 
 interface TransactionDialogContextType {
-  setTxHash: React.Dispatch<string | undefined>;
+  setTxHash: Dispatch<string | undefined>;
   visible: boolean;
-  setContent: React.Dispatch<React.SetStateAction<ReactNode | undefined>>;
+  setContent: Dispatch<SetStateAction<ReactNode | undefined>>;
   state: TxState;
+  setVisible: Dispatch<SetStateAction<boolean>>;
 }
-const Svg = ({ txState }: Record<"txState", TxState>) => {
-  return (
-    <svg fill="none" height="94" viewBox="0 0 94 94" width="94" xmlns="http://www.w3.org/2000/svg">
-      <g filter="url(#filter0_d_1447_13624)">
-        <circle
-          cx="47"
-          cy="47"
-          r="31"
-          stroke={txState === "mining" || txState === "signing" ? "#FFD75C" : "red"}
-          strokeWidth="2"
-        />
-      </g>
-      <circle
-        cx="59"
-        cy="47"
-        fill={txState === "mining" || txState === "signing" ? "#FFD75C" : "red"}
-        r="4"
-      />
-      <circle
-        cx="47"
-        cy="45"
-        fill={txState === "mining" || txState === "signing" ? "#FFD75C" : "red"}
-        r="4"
-      />
-      <circle
-        cx="35"
-        cy="47"
-        fill={txState === "mining" || txState === "signing" ? "#FFD75C" : "red"}
-        r="4"
-      />
-      <defs>
-        <filter
-          colorInterpolationFilters="sRGB"
-          filterUnits="userSpaceOnUse"
-          height="94"
-          id="filter0_d_1447_13624"
-          width="94"
-          x="0"
-          y="0"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            result="hardAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-          />
-          <feOffset />
-          <feGaussianBlur stdDeviation="7.5" />
-          <feColorMatrix
-            type="matrix"
-            values="0 0 0 0 1 0 0 0 0 0.843137 0 0 0 0 0.360784 0 0 0 0.6 0"
-          />
-          <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_1447_13624" />
-          <feBlend
-            in="SourceGraphic"
-            in2="effect1_dropShadow_1447_13624"
-            mode="normal"
-            result="shape"
-          />
-        </filter>
-      </defs>
-    </svg>
-  );
-};
 
 const TransactionDialogContext = createContext<unknown>(null);
 
@@ -86,28 +31,70 @@ const TransactionDialogContextProvider: React.FC<{
   provider: providers.Web3Provider;
   children: React.ReactNode;
 }> = ({ children, provider }) => {
-  const txNotifier = new TransactionNotifier(provider);
   const [visible, setVisible] = useState(false);
   const [content, setContent] = useState<ReactNode | undefined>(undefined);
-  const [state, setState] = useState<TxState>("signing");
+  const [state, setState] = useState<TxState>('signing');
   const [txHash, setTxHash] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     if (txHash) {
       setVisible(true);
-      setState("signing");
-      const emitter = txNotifier.hash(txHash);
-      emitter.on("txConfirmed", () => setState("confirmed"));
-      emitter.on("txError", () => setState("error"));
-      emitter.on("txFailed", () => setState("failed"));
-      emitter.on("txSent", () => setState("mining"));
+      setState('signing');
+      const emitter = new TransactionNotifier(provider).hash(txHash);
+      emitter.on('txConfirmed', () => setState('confirmed'));
+      emitter.on('txError', () => setState('error'));
+      emitter.on('txFailed', () => setState('failed'));
+      emitter.on('txSent', () => setState('mining'));
+    }
+  }, [txHash, provider]);
+
+  const renderText = () => {
+    switch (state) {
+      case 'confirmed':
+        return (
+          <>
+            <h4 className="ui-tg-title-h4">Transaction Confirmed</h4>
+            <span className="ui-tg-caption ui-text-center ui-text-gray-500">
+              You can now proceed with the dApp.
+            </span>
+          </>
+        );
+      case 'error':
+      case 'failed':
+        return (
+          <>
+            <h4 className="ui-tg-title-h4">Transaction Failed</h4>
+            <span className="ui-tg-caption ui-text-center ui-text-gray-500">
+              While processing your transaction an error occurred.
+            </span>
+          </>
+        );
+      case 'signing':
+        return (
+          <>
+            <h4 className="ui-tg-title-h4">Transaction Signing</h4>
+            <span className="ui-tg-caption ui-text-center ui-text-gray-500">
+              Follow the prompts of your wallet provider to authorize the transaction.
+            </span>
+          </>
+        );
+      default:
+        return (
+          <>
+            <h4 className="ui-tg-title-h4">Transaction Pending</h4>
+            <span className="ui-tg-caption ui-text-center ui-text-gray-500">
+              Waiting for transaction to be included into the next block.
+            </span>
+          </>
+        );
     }
-  }, [txHash]);
+  };
 
   return (
     <TransactionDialogContext.Provider
       value={{
         visible,
+        setVisible,
         state,
         setContent,
         setTxHash
@@ -115,13 +102,12 @@ const TransactionDialogContextProvider: React.FC<{
     >
       <Dialog disableClose open={visible} onClose={() => setVisible(false)}>
         <div className="ui-flex ui-flex-col ui-items-center">
-          <Svg txState={state} />
-          <h4 className="ui-tg-title-h4">Transaction Pending</h4>
-          <span className="ui-tg-caption ui-text-center ui-text-gray-500">
-            Follow the prompts of your wallet to authorize the transaction.
-          </span>
-          <div className="ui-bg-black ui-rounded ui-w-[314px] ui-h-[73px] ui-my-6">{content}</div>
-          <Spinner className="ui-mr-2" variant="secondary" />
+          <TxStateSvg txState={state} />
+          {renderText()}
+          {content && (
+            <div className="ui-bg-black ui-rounded ui-w-[314px] ui-h-[73px] ui-my-6">{content}</div>
+          )}
+          {state === 'mining' && <Spinner className="ui-mr-2" variant="secondary" />}
         </div>
       </Dialog>
       {children}
diff --git a/src/context/useTransactoinDialogContext.stories.tsx b/src/context/useTransactoinDialogContext.stories.tsx
index f638322..45e5428 100644
--- a/src/context/useTransactoinDialogContext.stories.tsx
+++ b/src/context/useTransactoinDialogContext.stories.tsx
@@ -1,17 +1,18 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { providers } from "ethers";
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Button } from 'components';
+import { providers } from 'ethers';
 
 import TransactionDialogContextProvider, {
   useTransactionModalContext
-} from "./useTransactionDialogContext";
+} from './useTransactionDialogContext';
 
 export default {
-  title: "Transaction Dialog",
+  title: 'Transaction Dialog',
   component: TransactionDialogContextProvider,
   decorators: [(Story) => <Story />]
 } as ComponentMeta<typeof TransactionDialogContextProvider>;
 
-const Template: ComponentStory<typeof TransactionDialogContextProvider> = ({ children }) => {
+const Template: ComponentStory<typeof TransactionDialogContextProvider> = () => {
   return (
     <TransactionDialogContextProvider
       provider={providers.getDefaultProvider() as providers.Web3Provider}
@@ -22,22 +23,30 @@ const Template: ComponentStory<typeof TransactionDialogContextProvider> = ({ chi
 };
 
 const HelperComponent = () => {
-  const { visible, setTxHash, state, setContent } = useTransactionModalContext();
+  const { visible, setTxHash, state, setVisible } = useTransactionModalContext();
+
   return (
-    <div style={{ background: "white" }}>
-      <div>is Dialog active: {visible ? "yes" : "no"}</div>
+    <div style={{ background: 'white' }}>
+      <div>is Dialog active: {visible ? 'yes' : 'no'}</div>
       <div>is Dialog active: {state?.toString()}</div>
-      <button
+      <Button
+        onClick={() => {
+          setTxHash('0x054620b7cab0ee0c950556945d895e9d7f3e0d1532fda419a32a96bd8894c02b');
+        }}
+      >
+        Send Transaction
+      </Button>
+      <Button
         onClick={() => {
-          setTxHash("0x054620b7cab0ee0c950556945d895e9d7f3e0d1532fda419a32a96bd8894c02b");
+          setVisible(true);
         }}
       >
-        Toggle visibility
-      </button>
+        Toggle Dialog
+      </Button>
     </div>
   );
 };
 
 export const Primary = Template.bind({});
 
-Primary.args = { children: <div style={{ background: "white" }}>rest of the app</div> };
+Primary.args = { children: <div style={{ background: 'white' }}>rest of the app</div> };
diff --git a/src/hooks/useOnClickOutside.ts b/src/hooks/useOnClickOutside.ts
index 1fa9305..128d2ba 100644
--- a/src/hooks/useOnClickOutside.ts
+++ b/src/hooks/useOnClickOutside.ts
@@ -1,4 +1,4 @@
-import { RefObject, useEffect } from "react";
+import { RefObject, useEffect } from 'react';
 
 type Event = MouseEvent | TouchEvent;
 
@@ -14,12 +14,12 @@ export const useOnClickOutside = <T extends HTMLElement = HTMLElement>(
       handler(event);
     };
 
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
 
     return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
     };
   }, [ref, handler]);
 };

From 75b4eebe88ad8d1302da3cf2454f63065ef662ca Mon Sep 17 00:00:00 2001
From: fritzschoff <max.j.f@gmx.de>
Date: Wed, 25 May 2022 16:24:27 +0200
Subject: [PATCH 5/6] feat(transaction dialog): implemented signing svg

---
 src/components/Icons/TxState.tsx              | 59 ++++++++++++++++
 src/context/useTransactionDialogContext.tsx   | 67 +++++++------------
 .../useTransactoinDialogContext.stories.tsx   |  9 ++-
 3 files changed, 91 insertions(+), 44 deletions(-)

diff --git a/src/components/Icons/TxState.tsx b/src/components/Icons/TxState.tsx
index c91ee8e..bab6115 100644
--- a/src/components/Icons/TxState.tsx
+++ b/src/components/Icons/TxState.tsx
@@ -1,6 +1,65 @@
 import { TxState } from 'context/useTransactionDialogContext';
 
 export default function TxStateSvg({ txState }: Record<'txState', TxState>) {
+  if (txState === 'signing') {
+    return (
+      <svg
+        fill="none"
+        height="94"
+        viewBox="0 0 94 94"
+        width="94"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g filter="url(#filter0_d_4312_39844)">
+          <path
+            clipRule="evenodd"
+            d="M47 77C63.5685 77 77 63.5685 77 47C77 30.4315 63.5685 17 47 17C30.4315 17 17 30.4315 17 47C17 63.5685 30.4315 77 47 77ZM47 79C64.6731 79 79 64.6731 79 47C79 29.3269 64.6731 15 47 15C29.3269 15 15 29.3269 15 47C15 64.6731 29.3269 79 47 79Z"
+            fill="white"
+            fillRule="evenodd"
+          />
+        </g>
+        <path
+          clipRule="evenodd"
+          d="M58.1253 39.6462L54.4199 35.9408L51.3539 39.0068L55.0539 42.7068L58.1253 39.6462ZM53.6372 44.1185L49.9397 40.421L35.7361 54.6246L35.7862 58.2136L39.4413 58.2647L53.6372 44.1185ZM39.5826 58.5943L39.5872 58.2668L39.5968 58.2669L39.5889 58.6007L39.5883 58.6268L39.5732 59.2666L39.5822 58.621L39.5824 58.6125L39.5826 58.5943ZM34.7859 60.1998L39.5555 60.2664C39.783 60.271 40.009 60.2282 40.2191 60.1406C40.4254 60.0547 40.6118 59.9275 40.7671 59.767L59.7708 40.8299L59.7716 40.8291C59.9274 40.6744 60.0511 40.4903 60.1356 40.2876C60.2202 40.0845 60.2638 39.8666 60.2638 39.6466C60.2638 39.4266 60.2202 39.2087 60.1356 39.0056C60.0513 38.8033 59.9279 38.6196 59.7725 38.465L59.7708 38.4633L55.6032 34.2957L55.6015 34.294C55.4469 34.1386 55.2632 34.0152 55.0609 33.9309C54.8578 33.8463 54.6399 33.8027 54.4199 33.8027C54.1999 33.8027 53.982 33.8463 53.7789 33.9309C53.5766 34.0152 53.3929 34.1386 53.2383 34.294L53.2366 34.2957L34.3377 53.1946C34.1757 53.3262 34.04 53.4878 33.9383 53.6709C33.8201 53.8836 33.7508 54.12 33.7353 54.3629L33.7328 54.4017L33.7333 54.4406L33.8 59.2139L33.8136 60.1863L34.7859 60.1998Z"
+          fill="white"
+          fillRule="evenodd"
+        />
+        <defs>
+          <filter
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+            height="94"
+            id="filter0_d_4312_39844"
+            width="94"
+            x="0"
+            y="0"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              result="hardAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset />
+            <feGaussianBlur stdDeviation="7.5" />
+            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0" />
+            <feBlend
+              in2="BackgroundImageFix"
+              mode="normal"
+              result="effect1_dropShadow_4312_39844"
+            />
+            <feBlend
+              in="SourceGraphic"
+              in2="effect1_dropShadow_4312_39844"
+              mode="normal"
+              result="shape"
+            />
+          </filter>
+        </defs>
+      </svg>
+    );
+  }
   if (txState === 'error' || txState === 'failed') {
     return (
       <svg
diff --git a/src/context/useTransactionDialogContext.tsx b/src/context/useTransactionDialogContext.tsx
index 76b7f3c..73739c7 100644
--- a/src/context/useTransactionDialogContext.tsx
+++ b/src/context/useTransactionDialogContext.tsx
@@ -27,6 +27,7 @@ const TransactionDialogContext = createContext<unknown>(null);
 export const useTransactionModalContext = () => {
   return useContext(TransactionDialogContext) as TransactionDialogContextType;
 };
+
 const TransactionDialogContextProvider: React.FC<{
   provider: providers.Web3Provider;
   children: React.ReactNode;
@@ -48,45 +49,26 @@ const TransactionDialogContextProvider: React.FC<{
     }
   }, [txHash, provider]);
 
-  const renderText = () => {
-    switch (state) {
-      case 'confirmed':
-        return (
-          <>
-            <h4 className="ui-tg-title-h4">Transaction Confirmed</h4>
-            <span className="ui-tg-caption ui-text-center ui-text-gray-500">
-              You can now proceed with the dApp.
-            </span>
-          </>
-        );
-      case 'error':
-      case 'failed':
-        return (
-          <>
-            <h4 className="ui-tg-title-h4">Transaction Failed</h4>
-            <span className="ui-tg-caption ui-text-center ui-text-gray-500">
-              While processing your transaction an error occurred.
-            </span>
-          </>
-        );
-      case 'signing':
-        return (
-          <>
-            <h4 className="ui-tg-title-h4">Transaction Signing</h4>
-            <span className="ui-tg-caption ui-text-center ui-text-gray-500">
-              Follow the prompts of your wallet provider to authorize the transaction.
-            </span>
-          </>
-        );
-      default:
-        return (
-          <>
-            <h4 className="ui-tg-title-h4">Transaction Pending</h4>
-            <span className="ui-tg-caption ui-text-center ui-text-gray-500">
-              Waiting for transaction to be included into the next block.
-            </span>
-          </>
-        );
+  const stateText: Record<TxState, Record<string, string>> = {
+    confirmed: {
+      tile: 'Transaction Confirmed',
+      subline: 'You can now proceed with the dApp.'
+    },
+    error: {
+      tile: 'Transaction Failed',
+      subline: 'While processing your transaction an error occurred.'
+    },
+    failed: {
+      tile: 'Transaction Failed',
+      subline: 'While processing your transaction an error occurred.'
+    },
+    signing: {
+      tile: 'Transaction Signing',
+      subline: 'Follow the prompts of your wallet provider and sign the transaction.'
+    },
+    mining: {
+      tile: 'Transaction Pending',
+      subline: 'Waiting for transaction to be included into the next block.'
     }
   };
 
@@ -103,9 +85,12 @@ const TransactionDialogContextProvider: React.FC<{
       <Dialog disableClose open={visible} onClose={() => setVisible(false)}>
         <div className="ui-flex ui-flex-col ui-items-center">
           <TxStateSvg txState={state} />
-          {renderText()}
+          <h4 className="ui-tg-title-h4">{stateText[state].tile}</h4>
+          <span className="ui-tg-caption ui-text-center ui-text-gray-500">
+            {stateText[state].subline}
+          </span>
           {content && (
-            <div className="ui-bg-black ui-rounded ui-w-[314px] ui-h-[73px] ui-my-6">{content}</div>
+            <div className="ui-bg-black ui-rounded ui-w-[314px] ui-py-6 ui-my-6">{content}</div>
           )}
           {state === 'mining' && <Spinner className="ui-mr-2" variant="secondary" />}
         </div>
diff --git a/src/context/useTransactoinDialogContext.stories.tsx b/src/context/useTransactoinDialogContext.stories.tsx
index 45e5428..c59abeb 100644
--- a/src/context/useTransactoinDialogContext.stories.tsx
+++ b/src/context/useTransactoinDialogContext.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Button } from 'components';
 import { providers } from 'ethers';
+import { useEffect } from 'react';
 
 import TransactionDialogContextProvider, {
   useTransactionModalContext
@@ -23,15 +24,17 @@ const Template: ComponentStory<typeof TransactionDialogContextProvider> = () =>
 };
 
 const HelperComponent = () => {
-  const { visible, setTxHash, state, setVisible } = useTransactionModalContext();
-
+  const { visible, setTxHash, state, setVisible, setContent } = useTransactionModalContext();
+  useEffect(() => {
+    setContent(<div>GENERIC CONTENT</div>);
+  }, [setContent]);
   return (
     <div style={{ background: 'white' }}>
       <div>is Dialog active: {visible ? 'yes' : 'no'}</div>
       <div>is Dialog active: {state?.toString()}</div>
       <Button
         onClick={() => {
-          setTxHash('0x054620b7cab0ee0c950556945d895e9d7f3e0d1532fda419a32a96bd8894c02b');
+          setTxHash('0x117e55f72079b19e182234de4830110842fbf5f9fc0fcb1971a5ffd9b52d30b6');
         }}
       >
         Send Transaction

From 11e6786055933103c86364f13b16a00bd931a63e Mon Sep 17 00:00:00 2001
From: fritzschoff <max.j.f@gmx.de>
Date: Thu, 26 May 2022 09:20:14 +0200
Subject: [PATCH 6/6] chore(types): exporting type TxState

---
 src/components/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/index.ts b/src/components/index.ts
index a8428fc..60370d4 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,9 +1,9 @@
 import '../styles/_build.scss';
 
 import TransactionDialogContextProvider, {
+  TxState,
   useTransactionModalContext
 } from 'context/useTransactionDialogContext';
-import { TxState } from 'context/useTransactionDialogContext';
 
 import { Accordion, AccordionProps } from './Accordion/Accordion';
 import { Badge, BadgeProps } from './Badge/Badge';