From 21b687f2984fa526aea1ed55061b861c4ec9fa3b Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Thu, 24 Oct 2024 10:55:26 +0200
Subject: [PATCH] feat(wallet): remove buttonUI component and replace it with
 uikit (#3453)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Begoña Álvarez de la Cruz <balvarez@boxfish.studio>
Co-authored-by: Eugene P. <panteleymonchuk@gmail.com>
---
 .../ui/app/components/PasswordInputDialog.tsx |  21 ++-
 .../accounts-finder/AccountsFinderView.tsx    |  29 ++--
 apps/wallet/src/ui/app/shared/ButtonUI.tsx    | 148 ------------------
 3 files changed, 21 insertions(+), 177 deletions(-)
 delete mode 100644 apps/wallet/src/ui/app/shared/ButtonUI.tsx

diff --git a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
index fecf3763104..6e07e0534a6 100644
--- a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
+++ b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
@@ -3,15 +3,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useBackgroundClient } from '_src/ui/app/hooks/useBackgroundClient';
-import { Button } from '_src/ui/app/shared/ButtonUI';
 import { Text } from '_src/ui/app/shared/text';
 import classNames from 'clsx';
 import { Form, Formik } from 'formik';
 import { toast } from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 import { object, string as YupString } from 'yup';
-import { ArrowLeft, ArrowRight } from '@iota/ui-icons';
-import { Header, InputType } from '@iota/apps-ui-kit';
+import { Loader } from '@iota/ui-icons';
+import { Button, ButtonHtmlType, ButtonType, Header, InputType } from '@iota/apps-ui-kit';
 import { PasswordInputField } from '../shared/input/password';
 
 const validation = object({
@@ -86,10 +85,7 @@ export function PasswordInputDialog({
                         {showBackButton ? (
                             <Button
                                 text="Back"
-                                color="heroDark"
-                                size="tall"
-                                variant="outline"
-                                before={<ArrowLeft className="h-4 w-4" />}
+                                type={ButtonType.Secondary}
                                 onClick={() => {
                                     if (typeof onBackClicked === 'function') {
                                         onBackClicked();
@@ -98,16 +94,17 @@ export function PasswordInputDialog({
                                     }
                                 }}
                                 disabled={isSubmitting}
+                                fullWidth
                             />
                         ) : null}
                         <Button
-                            type="submit"
-                            variant="primary"
-                            size="tall"
+                            htmlType={ButtonHtmlType.Submit}
+                            type={ButtonType.Primary}
                             text={continueLabel}
-                            loading={isSubmitting}
                             disabled={!isValid}
-                            after={showArrowIcon ? <ArrowRight className="h-4 w-4" /> : null}
+                            icon={isSubmitting ? <Loader className="h-4 w-4 animate-spin" /> : null}
+                            iconAfterText
+                            fullWidth
                         />
                     </div>
                 </Form>
diff --git a/apps/wallet/src/ui/app/pages/accounts/manage/accounts-finder/AccountsFinderView.tsx b/apps/wallet/src/ui/app/pages/accounts/manage/accounts-finder/AccountsFinderView.tsx
index f069ad2e7c4..2e5723c9918 100644
--- a/apps/wallet/src/ui/app/pages/accounts/manage/accounts-finder/AccountsFinderView.tsx
+++ b/apps/wallet/src/ui/app/pages/accounts/manage/accounts-finder/AccountsFinderView.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Search } from '@iota/ui-icons';
-import { LoadingIndicator } from '@iota/apps-ui-kit';
+import { Button, ButtonType, LoadingIndicator } from '@iota/apps-ui-kit';
 import {
     AccountBalanceItem,
     VerifyPasswordModal,
@@ -22,7 +22,6 @@ import { useAccountSources } from '_src/ui/app/hooks/useAccountSources';
 import { useAccounts } from '_src/ui/app/hooks/useAccounts';
 import { useAccountsFinder } from '_src/ui/app/hooks/useAccountsFinder';
 import { useUnlockMutation } from '_src/ui/app/hooks/useUnlockMutation';
-import { Button } from '_src/ui/app/shared/ButtonUI';
 import { useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import { useParams } from 'react-router-dom';
@@ -131,42 +130,38 @@ export function AccountsFinderView(): JSX.Element {
                 <div className="flex flex-col gap-2">
                     {isLedgerLocked ? (
                         <Button
-                            variant="outline"
-                            size="tall"
+                            type={ButtonType.Secondary}
                             text="Unlock Ledger"
                             onClick={unlockLedger}
+                            fullWidth
                         />
                     ) : isLocked ? (
                         <Button
-                            variant="outline"
-                            size="tall"
+                            type={ButtonType.Secondary}
                             text="Verify password"
                             onClick={verifyPassword}
+                            fullWidth
                         />
                     ) : (
                         <>
                             <Button
-                                variant="outline"
-                                size="tall"
+                                type={ButtonType.Secondary}
                                 text={searchOptions.text}
-                                after={searchOptions.icon}
+                                icon={searchOptions.icon}
+                                iconAfterText
                                 onClick={runAccountsFinder}
                                 disabled={isSearchOngoing}
+                                fullWidth
                             />
 
                             <div className="flex flex-row gap-2">
                                 <Button
-                                    variant="outline"
-                                    size="tall"
+                                    type={ButtonType.Secondary}
                                     text="Skip"
                                     disabled={isSearchOngoing}
+                                    fullWidth
                                 />
-                                <Button
-                                    variant="outline"
-                                    size="tall"
-                                    text="Continue"
-                                    disabled={isSearchOngoing}
-                                />
+                                <Button text="Continue" disabled={isSearchOngoing} fullWidth />
                             </div>
                         </>
                     )}
diff --git a/apps/wallet/src/ui/app/shared/ButtonUI.tsx b/apps/wallet/src/ui/app/shared/ButtonUI.tsx
deleted file mode 100644
index ea5df29db09..00000000000
--- a/apps/wallet/src/ui/app/shared/ButtonUI.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-// TODO: replace all the existing button usages (the current Button component or button) with this
-// TODO: rename this to Button when the existing Button component is removed
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import { forwardRef, type ReactNode, type Ref } from 'react';
-
-import { ButtonOrLink, type ButtonOrLinkProps } from './utils/ButtonOrLink';
-
-const styles = cva(
-    [
-        'transition no-underline outline-none group',
-        'flex flex-row flex-nowrap items-center justify-center gap-2',
-        'cursor-pointer text-body font-semibold max-w-full min-w-0 w-full',
-    ],
-    {
-        variants: {
-            variant: {
-                primary: [
-                    'bg-hero-dark text-white border-none',
-                    'hover:bg-hero focus:bg-hero',
-                    'visited:text-white',
-                    'active:text-white/70',
-                    'disabled:bg-hero-darkest disabled:text-white disabled:opacity-40',
-                ],
-                secondary: [
-                    'bg-hero-darkest/10 text-steel-dark border-none',
-                    'hover:bg-hero-darkest/20 hover:text-steel-darker',
-                    'focus:bg-hero-darkest/10 focus:text-steel-dark/70',
-                    'active:text-steel-dark/70',
-                    'visited:text-steel-darkest',
-                    'disabled:bg-hero-darkest/5 disabled:text-steel/50',
-                ],
-                secondaryIota: [
-                    'bg-transparent text-steel border-none',
-                    'hover:bg-iota-light focus:bg-iota-light',
-                    'visited:text-steel-darker',
-                    'active:text-steel-dark/70',
-                    'disabled:bg-gray-40 disabled:text-steel/50',
-                ],
-                outline: [
-                    'bg-white border-solid border border-steel text-steel-dark text-body font-semibold',
-                    'hover:border-steel-dark focus:border-steel-dark hover:text-steel-darker focus:text-steel-darker',
-                    'visited:text-steel-dark',
-                    'active:border-steel active:text-steel-dark',
-                    'disabled:border-gray-45 disabled:text-gray-60',
-                ],
-                outlineWarning: [
-                    'bg-white border-solid border border-steel text-issue-dark',
-                    'hover:border-steel-dark focus:border-steel-dark',
-                    'visited:text-issue-dark',
-                    'active:border-steel active:text-issue/70',
-                    'disabled:border-gray-45 disabled:text-issue-dark/50',
-                ],
-                warning: [
-                    'bg-issue-light text-issue-dark border-none',
-                    'visited:text-issue-dark',
-                    'active:text-issue/70',
-                    'disabled:opacity-40 disabled:text-issue-dark/50',
-                ],
-                plain: [
-                    'bg-transparent text-steel-darker border-none',
-                    'visited:text-steel-darker',
-                    'active:text-steel-darker/70',
-                    'disabled:text-steel-dark/50',
-                ],
-                hidden: [
-                    'bg-gray-45 bg-opacity-25 text-gray-60 hover:text-iota-dark hover:bg-gray-35 hover:bg-opacity-75 border-none h-full w-full backdrop-blur-md',
-                ],
-            },
-            size: {
-                tall: ['h-10 px-5 rounded-xl'],
-                narrow: ['h-9 py-2.5 px-5 rounded-lg'],
-                xs: ['h-6 rounded-lg px-2 py-3 !uppercase text-captionSmall'],
-                icon: ['h-full w-full rounded-lg p-1'],
-            },
-        },
-    },
-);
-const iconStyles = cva('flex', {
-    variants: {
-        border: {
-            none: 'border-none',
-        },
-        variant: {
-            primary: ['text-iota-light group-active:text-steel/70 group-disabled:text-steel/50'],
-            secondary: [
-                'text-steel',
-                'group-hover:text-steel-darker group-focus:text-steel-darker',
-                'group-active:text-steel-dark/70',
-                'group-disabled:text-steel/50',
-            ],
-            secondaryIota: [
-                'text-steel',
-                'group-hover:text-hero group-focus:text-hero',
-                'group-active:text-hero/70',
-                'group-disabled:text-hero/50',
-            ],
-            outline: [
-                'text-steel',
-                'group-hover:text-steel-darker group-focus:text-steel-darker',
-                'group-active:text-steel-dark',
-                'group-disabled:text-gray-45',
-            ],
-            outlineWarning: [
-                'text-issue-dark/80',
-                'group-hover:text-issue-dark group-focus:text-issue-dark',
-                'group-active:text-issue/70',
-                'group-disabled:text-issue/50',
-            ],
-            warning: [
-                'text-issue-dark/80',
-                'group-hover:text-issue-dark group-focus:text-issue-dark',
-                'group-active:text-issue/70',
-                'group-disabled:text-issue/50',
-            ],
-            plain: [],
-            hidden: [],
-        },
-    },
-});
-
-export interface ButtonProps
-    extends VariantProps<typeof styles>,
-        VariantProps<typeof iconStyles>,
-        Omit<ButtonOrLinkProps, 'className'> {
-    before?: ReactNode;
-    after?: ReactNode;
-    text?: ReactNode;
-}
-
-export const Button = forwardRef(
-    (
-        { variant = 'primary', size = 'narrow', before, after, text, ...otherProps }: ButtonProps,
-        ref: Ref<HTMLAnchorElement | HTMLButtonElement>,
-    ) => {
-        return (
-            <ButtonOrLink ref={ref} className={styles({ variant, size })} {...otherProps}>
-                {before ? <div className={iconStyles({ variant })}>{before}</div> : null}
-                {text ? <div className={'truncate'}>{text}</div> : null}
-                {after ? <div className={iconStyles({ variant })}>{after}</div> : null}
-            </ButtonOrLink>
-        );
-    },
-);