From 7c022a1437ef4ec7f8d0f147471059e12bf7d429 Mon Sep 17 00:00:00 2001
From: AtelyPham <tinpham1412000@gmail.com>
Date: Tue, 1 Aug 2023 21:02:22 +0700
Subject: [PATCH] feat: add LoadingPill component

---
 .../src/components/buttons/LoadingPill.tsx    | 48 +++++++++++++++++++
 .../src/components/buttons/index.ts           |  1 +
 .../src/components/buttons/types.ts           | 13 +++++
 .../stories/molecules/LoadingPill.stories.tsx | 25 ++++++++++
 4 files changed, 87 insertions(+)
 create mode 100644 libs/webb-ui-components/src/components/buttons/LoadingPill.tsx
 create mode 100644 libs/webb-ui-components/src/stories/molecules/LoadingPill.stories.tsx

diff --git a/libs/webb-ui-components/src/components/buttons/LoadingPill.tsx b/libs/webb-ui-components/src/components/buttons/LoadingPill.tsx
new file mode 100644
index 0000000000..8d0a40213c
--- /dev/null
+++ b/libs/webb-ui-components/src/components/buttons/LoadingPill.tsx
@@ -0,0 +1,48 @@
+import { forwardRef } from 'react';
+import { LoadingPillProps } from './types';
+import { twMerge } from 'tailwind-merge';
+import {
+  CheckboxCircleLine,
+  CloseCircleLineIcon,
+  Spinner,
+} from '@webb-tools/icons';
+
+const LoadingPill = forwardRef<HTMLButtonElement, LoadingPillProps>(
+  ({ className, status = 'loading', ...props }, ref) => {
+    return (
+      <button
+        {...props}
+        type="button"
+        className={twMerge(
+          'rounded-full border-2 py-2 px-4',
+          'bg-mono-0/10 border-mono-60',
+          'hover:bg-mono-0/30',
+          'dark:bg-mono-0/5 dark:border-mono-140',
+          'dark:hover:bg-mono-0/10',
+          className
+        )}
+        ref={ref}
+      >
+        <div className="flex items-center justify-center">
+          {status === 'loading' ? (
+            <Spinner size="lg" />
+          ) : status === 'success' ? (
+            <CheckboxCircleLine
+              className="fill-green-70 dark:fill-green-50"
+              size="lg"
+            />
+          ) : (
+            status === 'error' && (
+              <CloseCircleLineIcon
+                className="fill-red-70 dark:fill-red-50"
+                size="lg"
+              />
+            )
+          )}
+        </div>
+      </button>
+    );
+  }
+);
+
+export default LoadingPill;
diff --git a/libs/webb-ui-components/src/components/buttons/index.ts b/libs/webb-ui-components/src/components/buttons/index.ts
index abac6fbfe4..32b911f685 100644
--- a/libs/webb-ui-components/src/components/buttons/index.ts
+++ b/libs/webb-ui-components/src/components/buttons/index.ts
@@ -1,4 +1,5 @@
 export { default as Button } from './Button';
 export { default as ChainButton } from './ChainButton';
 export { default as WalletButton } from './WalletButton';
+export { default as LoadingPill } from './LoadingPill';
 export * from './types';
diff --git a/libs/webb-ui-components/src/components/buttons/types.ts b/libs/webb-ui-components/src/components/buttons/types.ts
index 805bd32e17..f324c68d7b 100644
--- a/libs/webb-ui-components/src/components/buttons/types.ts
+++ b/libs/webb-ui-components/src/components/buttons/types.ts
@@ -198,3 +198,16 @@ export type WalletButtonProps = PropsOf<'button'> & {
    */
   address: string;
 };
+
+export type LoadingPillStatus = 'success' | 'loading' | 'error';
+
+/**
+ * The LoadingPill component props
+ */
+export type LoadingPillProps = PropsOf<'button'> & {
+  /**
+   * Status of the pill
+   * @default "loading"
+   */
+  status?: LoadingPillStatus;
+};
diff --git a/libs/webb-ui-components/src/stories/molecules/LoadingPill.stories.tsx b/libs/webb-ui-components/src/stories/molecules/LoadingPill.stories.tsx
new file mode 100644
index 0000000000..4a4e1a6e0f
--- /dev/null
+++ b/libs/webb-ui-components/src/stories/molecules/LoadingPill.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LoadingPill from '../../components/buttons/LoadingPill';
+
+const meta: Meta<typeof LoadingPill> = {
+  title: 'Design System/V2 (WIP)/Molecules/LoadingPill',
+  component: LoadingPill,
+};
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default meta;
+
+type Story = StoryObj<typeof LoadingPill>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  render: () => <LoadingPill />,
+};
+
+export const Success: Story = {
+  render: () => <LoadingPill status="success" />,
+};
+
+export const Error: Story = {
+  render: () => <LoadingPill status="error" />,
+};