Merge pull request #83 from Synthetixio/transaction-modal

feat(transaction dialog): context that triggers a dialog whenever a t…
Synthetixio · May 26, 2022 · d61be53 · d61be53
2 parents ec70183 + 11e6786
commit d61be53
Show file tree

Hide file tree

Showing 43 changed files with 1,574 additions and 324 deletions.
diff --git 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": true,
+  "arrowParens": "always",
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxSingleQuote": false,
+  "bracketSameLine": false
 }
diff --git 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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,37 +23,37 @@ 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}
     >
       <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}
           </h3>
         </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
@@ -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>;