feat(wallet): remove buttonUI component and replace it with uikit (#3453

)

Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
Co-authored-by: Eugene P. <[email protected]>

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>

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>
                         </>
                     )}