diff --git a/.changeset/nasty-panthers-type.md b/.changeset/nasty-panthers-type.md new file mode 100644 index 000000000..460707b39 --- /dev/null +++ b/.changeset/nasty-panthers-type.md @@ -0,0 +1,6 @@ +--- +'@cypherock/cysync-core': patch +'@cypherock/cysync-ui': patch +--- + +Added new USBTroubleShoot Dialog diff --git a/packages/cysync-core/src/actions/dialog/index.ts b/packages/cysync-core/src/actions/dialog/index.ts index f585c014f..41d33b33f 100644 --- a/packages/cysync-core/src/actions/dialog/index.ts +++ b/packages/cysync-core/src/actions/dialog/index.ts @@ -23,6 +23,9 @@ export const openSignMessageDialog = () => export const openGuidedFlowDialog = (type: GuidedFlowType) => openDialog({ name: 'guidedFlow', data: { type } }); +export const openUsbTroubleShootDialog = () => + openDialog({ name: 'usbTroubleshoot', data: undefined }); + export const openAddAccountDialog = (props?: AddAccountDialogProps) => openDialog({ name: 'addAccount', data: props }); diff --git a/packages/cysync-core/src/constants/i18n/en.ts b/packages/cysync-core/src/constants/i18n/en.ts index 2ebdb3600..4d0838f5f 100644 --- a/packages/cysync-core/src/constants/i18n/en.ts +++ b/packages/cysync-core/src/constants/i18n/en.ts @@ -746,6 +746,12 @@ const en = { 'If you have bought a brand new Cypherock X1 and want to setup a new wallet', ], }, + diagnostics: { + title: 'USB Diagnostics', + list: [ + 'If you have bought a brand new Cypherock X1 and want to setup a new wallet', + ], + }, importWallet: { title: 'Import your wallet from a seed phrase', list: [ @@ -1384,6 +1390,218 @@ const en = { }, }, }, + usbtroubleShoot: { + diagnostics: { + title: 'USB Diagnostics', + tabs: [ + { + asideTitle: 'Solution #1', + pages: [ + { + title: 'Troubleshoot USB connection', + subtitle: + 'There seems to be a problem connecting your' + + "device. Don't worry we got you covered", + title2: + 'Try different solutions one by one until your device connects', + }, + ], + }, + { + asideTitle: 'Solution #2', + pages: [ + { + title: + 'Connect the correct side of the USB converter to the device', + subtitle: + 'the converter side (usb-b to usb-c) should always' + + 'be connected to the laptop. If that is connected to' + + 'the device, then it wont work', + messageBoxList: [ + { + info: 'waiting for the device', + }, + ], + }, + ], + }, + { + asideTitle: 'Solution #3', + pages: [ + { + title: 'Allow accessories to connect', + subtitle: 'Follow the instructions below', + bulletList: [ + 'Open "System Settings"', + 'Go to "Privacy & Security"', + 'Click the pop-up next to "Allow accessories to connect"', + 'Select "Askfor new accessories"', + 'Enter your Password and allow in the next dialogue', + "Reconnect your device to see if it's detected", + ], + messageBoxList: [ + { + info: 'waiting for the device', + }, + ], + }, + ], + }, + { + asideTitle: 'Solution #4', + pages: [ + { + title: 'Try a different USB port', + subtitle: 'Follow the instructions below', + bulletList: [ + 'Change the USB port used on your computer', + 'Remove any other dongles', + "Reconnect your device to see if it's detected", + ], + messageBoxList: [ + { + info: 'waiting for the device', + }, + ], + }, + ], + }, + { + asideTitle: 'Solution #5', + pages: [ + { + title: 'Change the USB cable', + subtitle: 'Follow the instructions below', + bulletList: [ + 'Use the original USB cable that comes in your packaging if possible', + 'Try a different USB cable, making sure it supports data transfer', + "Reconnect your device to see if it's detected", + ], + messageBoxList: [ + { + info: 'waiting for the device', + }, + ], + }, + ], + }, + { + asideTitle: 'Solution #6', + pages: [ + { + title: 'Turn off antvirus and VPN', + subtitle: 'Follow the instructions below', + bulletList: [ + 'Turn off any antivirus, firewall and VPN software', + "Reconnect your device to see if it's detected", + 'Whitelist cySync in your antivirus if that worked', + ], + messageBoxList: [ + { + info: 'waiting for the device', + }, + ], + }, + ], + }, + { + asideTitle: 'Solution #7', + pages: [ + { + title: 'Try another computer', + subtitle: 'Follow the instructions below', + bulletList: [ + 'Go to https://cypherock.com/gs on another computer to download and install cySync', + "Reconnect your device to see if it's detected", + ], + messageBoxList: [ + { + info: 'waiting for the device', + }, + ], + }, + ], + }, + { + asideTitle: 'Solution #8', + pages: [ + { + title: 'Enable full disk access', + subtitle: 'Follow the instructions below', + bulletList: [ + 'Open "System Preferences"', + 'Go to "Security & Privacy"', + 'In the "Privacy" tab, go to "Full Disk Access" in the left column', + 'Add cySync', + "Reconnect your device to see if it's detected", + ], + messageBoxList: [ + { + info: 'waiting for the device', + }, + ], + }, + ], + }, + { + asideTitle: 'Solution #9', + pages: [ + { + title: 'Reset NVRAM', + subtitle: 'Follow the instructions below', + bulletList: [ + "If your Mac has an intel processor, Follow Apple's insctructions to reset the NVRAM", + "Reconnect your device to see if it's detected", + ], + messageBoxList: [ + { + info: 'waiting for the device', + }, + ], + }, + ], + }, + { + asideTitle: 'Contact Support', + pages: [ + { + title: 'Restart your computer', + subtitle: 'Follow the instructions below', + bulletList: [ + 'Restart your computer', + 'Start cySync', + "Reconnect your device to see if it's detected", + ], + messageBoxList: [ + { + info: 'waiting for the device', + }, + ], + }, + ], + }, + ], + }, + finalIssue: { + asideTitle: 'Contact Support', + title: 'USB connection problem still not fixed?', + subtitle: + "If you have tried every possible solution, please reach out to Cypherock support. Otherwise, please follow the instructions of any solution you haven't tried yet.", + buttons: { + secondary: 'Go Back', + primary: 'Contact', + }, + }, + closeDialog: { + title: 'Are you sure you want to exit?', + subtitle: + 'You can always start this guide by clicking "Add Wallet" under the Wallets tab', + buttons: { + secondary: 'Cancel', + primary: 'Exit', + }, + }, + }, dialogs: { close: { title: 'Are you sure you want to exit?', diff --git a/packages/cysync-core/src/dialogs/DeviceUpdateDialog.tsx b/packages/cysync-core/src/dialogs/DeviceUpdateDialog.tsx index 51eff8d63..cbfd613af 100644 --- a/packages/cysync-core/src/dialogs/DeviceUpdateDialog.tsx +++ b/packages/cysync-core/src/dialogs/DeviceUpdateDialog.tsx @@ -8,9 +8,9 @@ import { import React, { FC, ReactElement, useEffect, useRef } from 'react'; import { useDispatch } from 'react-redux'; +import { openDeviceAuthenticationDialog } from '~/actions'; import { DeviceUpdateState, useDeviceUpdate } from '~/hooks'; -import { openDeviceAuthenticationDialog } from '~/actions'; import { DeviceConnectionStatus, DeviceHandlingState, diff --git a/packages/cysync-core/src/dialogs/GuidedFlow/Dialogs/FinalMessage.tsx b/packages/cysync-core/src/dialogs/GuidedFlow/Dialogs/FinalMessage.tsx index b8176e2b3..903e7d69d 100644 --- a/packages/cysync-core/src/dialogs/GuidedFlow/Dialogs/FinalMessage.tsx +++ b/packages/cysync-core/src/dialogs/GuidedFlow/Dialogs/FinalMessage.tsx @@ -1,5 +1,5 @@ import { - GuidedFlowDialogBox, + CustomFlowDialogBox, Flex, informationIcon, Button, @@ -87,7 +87,7 @@ export const FinalMessage: FC = () => { return ( <> {showWalletNotCreatedDialog && } - = ({ first?: boolean, ) => contents.map((content, index) => ( - ({ lang: a, ...b }), +); + +const informationIconReactElement = ; + +interface ButtonsProps { + setShowContactForm: (show: boolean) => void; +} + +const Buttons: FC = ({ setShowContactForm }) => { + const { onCloseDialog } = useTroubleShoot(); + const { lang } = useAppSelector(selectWalletsAndLang); + + const handlePrimaryClick = () => { + setShowContactForm(true); + }; + + return ( + + + + + ); +}; + +export const FinalMessage: FC = () => { + const lang = useAppSelector(selectLanguage); + const { onNext, onPrevious } = useTroubleShoot(); + const [showContactForm, setShowContactForm] = useState(false); + + return showContactForm ? ( + + + + ) : ( + } + /> + ); +}; diff --git a/packages/cysync-core/src/dialogs/UsbTroubleShoot/context/index.tsx b/packages/cysync-core/src/dialogs/UsbTroubleShoot/context/index.tsx new file mode 100644 index 000000000..ac1ef4879 --- /dev/null +++ b/packages/cysync-core/src/dialogs/UsbTroubleShoot/context/index.tsx @@ -0,0 +1,208 @@ +// The ReactNodes won't be rendered as list so key is not required +/* eslint-disable react/jsx-key */ +import { + CustomFlowDialogBox, + WaitingDivType, + Pendrive, +} from '@cypherock/cysync-ui'; +import React, { + Context, + FC, + ReactNode, + createContext, + useContext, + useEffect, + useMemo, + useState, +} from 'react'; + +import { addKeyboardEvents, useStateWithRef } from '~/hooks'; + +import { + closeDialog, + selectLanguage, + useAppDispatch, + useAppSelector, +} from '../../..'; +import { FinalMessage } from '../Dialogs/FinalMessage'; + +type ITabs = { + name: string; + dialogs: ReactNode[]; +}[]; + +export interface TroubleShootContextInterface { + tabs: ITabs; + currentTab: number; + setCurrentTab: (data: number) => void; + currentDialog: number; + setCurrentDialog: (data: number) => void; + onNext: () => void; + onPrevious: () => void; + onCloseDialog: () => void; + title: string; +} + +export const TroubleShootContext: Context = + createContext( + {} as TroubleShootContextInterface, + ); + +export interface TroubleShootContextProviderProps { + children: ReactNode; +} + +const dialogsImages: React.ReactElement[][] = [ + [], + [], + [], + [], + [], + [], + [], + [], + [], + [], +]; + +interface IGuidedDialogContent { + title?: string; + subtitle?: string; + title2?: string; + bulletList?: string[]; + messageBoxList?: Record[]; +} + +export const UsbToubleShootProvider: FC = ({ + children, +}) => { + const lang = useAppSelector(selectLanguage); + const [tabs, setTabs, tabsRef] = useStateWithRef([]); + const [currentTab, setCurrentTab, tabRef] = useStateWithRef(0); + const [currentDialog, setCurrentDialog, dialogRef] = useStateWithRef(0); + const [title, setTitle] = useState(''); + + const dispatch = useAppDispatch(); + + const onNext = () => { + if ( + dialogRef.current + 1 > + tabsRef.current[tabRef.current].dialogs.length - 1 + ) { + const newCurrentTab = Math.min( + tabsRef.current.length - 1, + tabRef.current + 1, + ); + if (tabRef.current !== tabsRef.current.length - 1) { + setCurrentDialog(0); + } + setCurrentTab(newCurrentTab); + } else { + setCurrentDialog( + Math.min( + tabsRef.current[tabRef.current].dialogs.length - 1, + dialogRef.current + 1, + ), + ); + } + }; + + const onPrevious = () => { + if (dialogRef.current - 1 < 0) { + if (tabRef.current === 0) { + setCurrentDialog(0); + } else { + setCurrentDialog( + tabsRef.current[tabRef.current - 1].dialogs.length - 1, + ); + setCurrentTab(Math.max(0, tabRef.current - 1)); + } + } else { + setCurrentDialog(Math.max(0, dialogRef.current - 1)); + } + }; + + addKeyboardEvents({ + ArrowRight: onNext, + ArrowLeft: onPrevious, + }); + + const getDialogArray = ( + images: React.ReactElement[], + contents: IGuidedDialogContent[], + first?: boolean, + ) => + contents.map((content, index) => ( + + )); + + const init = () => { + const initTabs = lang.strings.usbtroubleShoot.diagnostics.tabs.map( + (tab, index) => ({ + name: tab.asideTitle, + dialogs: getDialogArray( + dialogsImages[index], + tab.pages as any, + index === 0, + ), + }), + ); + initTabs[initTabs.length - 1].dialogs.push(); + setTabs(initTabs); + setTitle(lang.strings.usbtroubleShoot.diagnostics.title); + }; + + useEffect(() => { + init(); + }, []); + + const onCloseDialog = () => { + setCurrentTab(0); + setCurrentDialog(0); + dispatch(closeDialog('usbTroubleshoot')); + }; + + const ctx = useMemo( + () => ({ + currentTab, + setCurrentTab, + currentDialog, + setCurrentDialog, + tabs, + onNext, + onPrevious, + onCloseDialog, + title, + }), + [ + currentTab, + setCurrentTab, + currentDialog, + setCurrentDialog, + tabs, + onNext, + onPrevious, + onCloseDialog, + title, + ], + ); + + return ( + + {children} + + ); +}; + +export function useTroubleShoot(): TroubleShootContextInterface { + return useContext(TroubleShootContext); +} diff --git a/packages/cysync-core/src/dialogs/UsbTroubleShoot/index.tsx b/packages/cysync-core/src/dialogs/UsbTroubleShoot/index.tsx new file mode 100644 index 000000000..21acf5785 --- /dev/null +++ b/packages/cysync-core/src/dialogs/UsbTroubleShoot/index.tsx @@ -0,0 +1,65 @@ +import { + DialogBox, + DialogBoxBody, + WalletDialogMainContainer, + MilestoneAside, + BlurOverlay, + DialogBoxBackgroundBar, + CloseButton, +} from '@cypherock/cysync-ui'; +import React, { FC } from 'react'; + +import { closeDialog, useAppDispatch } from '~/store'; + +import { UsbToubleShootProvider, useTroubleShoot } from './context'; + +export const TroubleShootDialog: FC = () => { + const { tabs, currentTab, currentDialog, title } = useTroubleShoot(); + const dispatch = useAppDispatch(); + + return ( + + + <> + t.name)} + activeTab={currentTab} + /> + + + + + {tabs[currentTab]?.dialogs[currentDialog]} + + + + dispatch(closeDialog('usbTroubleshoot'))} + /> + } + position="top" + useLightPadding + /> + + + + + ); +}; + +export const UsbTroubleShoot: FC = () => ( + + + +); diff --git a/packages/cysync-core/src/dialogs/index.tsx b/packages/cysync-core/src/dialogs/index.tsx index 2bcb02414..ae8bf28c9 100644 --- a/packages/cysync-core/src/dialogs/index.tsx +++ b/packages/cysync-core/src/dialogs/index.tsx @@ -24,6 +24,7 @@ import { import { ReceiveDialog } from './Receive'; import { SendDialog } from './Send'; import { SignMessageDialog } from './SignMessage'; +import { UsbTroubleShoot } from './UsbTroubleShoot'; import { WalletActionsDialogBox } from './WalletActions'; import { WalletConnectDialog } from './WalletConnect'; import { WalletSyncError } from './WalletSyncError'; @@ -33,6 +34,7 @@ export const dialogs: Record = { walletActions: WalletActionsDialogBox, walletConnect: WalletConnectDialog, guidedFlow: GuidedFlow, + usbTroubleshoot: UsbTroubleShoot, addAccount: AddAccountDialog, sendDialog: SendDialog, historyDialog: HistoryDialog, diff --git a/packages/cysync-core/src/pages/MainApp/Settings/Tabs/AppSettings.tsx b/packages/cysync-core/src/pages/MainApp/Settings/Tabs/AppSettings.tsx index bf5393e5c..b992d6fc8 100644 --- a/packages/cysync-core/src/pages/MainApp/Settings/Tabs/AppSettings.tsx +++ b/packages/cysync-core/src/pages/MainApp/Settings/Tabs/AppSettings.tsx @@ -6,6 +6,7 @@ import { openRemovePasswordDialog, openResetCySyncDialog, openSetPasswordDialog, + openUsbTroubleShootDialog, } from '~/actions'; import { useLockscreen } from '~/context'; import { selectLanguage, useAppDispatch, useAppSelector } from '~/store'; @@ -47,6 +48,10 @@ export const AppSettings: React.FC = () => { keyValueStore.isAutoUpdateCySyncEnabled.set(isAutoUpdateCySyncEnabled); }, [isAutoUpdateCySyncEnabled]); + const handleUsbTroubleShoot = () => { + dispatch(openUsbTroubleShootDialog()); + }; + return ( <> { onToggle={setAutoUpdateCySyncEnabled} /> - */} - {/* - + - */} + ); }; diff --git a/packages/cysync-core/src/store/dialog/index.ts b/packages/cysync-core/src/store/dialog/index.ts index 56d2e3652..a1c7ac0c3 100644 --- a/packages/cysync-core/src/store/dialog/index.ts +++ b/packages/cysync-core/src/store/dialog/index.ts @@ -31,6 +31,9 @@ const initialState: IDialogState = { guidedFlow: { isOpen: false, }, + usbTroubleshoot: { + isOpen: false, + }, walletSyncError: { isOpen: false, }, diff --git a/packages/cysync-core/src/store/dialog/types.ts b/packages/cysync-core/src/store/dialog/types.ts index dcc676c87..26b00a9b5 100644 --- a/packages/cysync-core/src/store/dialog/types.ts +++ b/packages/cysync-core/src/store/dialog/types.ts @@ -97,6 +97,11 @@ export interface IDialogState { }; }; + usbTroubleshoot: { + isOpen: boolean; + data?: undefined; + }; + walletConnect: { isOpen: boolean; data?: undefined; diff --git a/packages/ui/icons/loading.svg b/packages/ui/icons/loading.svg new file mode 100644 index 000000000..e4dacea49 --- /dev/null +++ b/packages/ui/icons/loading.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/ui/icons/pendrive.svg b/packages/ui/icons/pendrive.svg new file mode 100644 index 000000000..dbcf6590a --- /dev/null +++ b/packages/ui/icons/pendrive.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/ui/src/components/molecules/Dialog/GuidedFlowDialogBox.tsx b/packages/ui/src/components/molecules/Dialog/CustomFlowDialogBox.tsx similarity index 53% rename from packages/ui/src/components/molecules/Dialog/GuidedFlowDialogBox.tsx rename to packages/ui/src/components/molecules/Dialog/CustomFlowDialogBox.tsx index 3cf92427b..7c87ded70 100644 --- a/packages/ui/src/components/molecules/Dialog/GuidedFlowDialogBox.tsx +++ b/packages/ui/src/components/molecules/Dialog/CustomFlowDialogBox.tsx @@ -3,6 +3,7 @@ import { styled } from 'styled-components'; import { ArrowButton, + Button, Flex, LangDisplay, Typography, @@ -11,6 +12,7 @@ import { import { BulletList } from '../BulletList'; import { GoldenArrowList } from '../GoldenArrowList'; import { MessageBox, MessageBoxType } from '../MessageBox'; +import { WaitingDiv, WaitingDivType } from '../WaitingDiv'; import { DialogBoxBody, DialogBoxFooter, DialogBoxHeader } from '.'; @@ -22,8 +24,9 @@ const InnerContainer = styled.div` overflow-y: auto; `; -export interface GuidedFlowDialogBoxProps { +export interface CustomFlowDialogBoxProps { title?: string; + title2?: string; subtitle?: string; bulletList?: string[]; messageBoxList?: Record[]; @@ -38,11 +41,14 @@ export interface GuidedFlowDialogBoxProps { disableNext?: boolean; onNext: React.MouseEventHandler; onPrevious: React.MouseEventHandler; + isFirstDialog?: boolean; + waitingDiv?: boolean; } -export const GuidedFlowDialogBox: FC = ({ +export const CustomFlowDialogBox: FC = ({ heading, image, title, + title2, children, isLoading, loadingText, @@ -55,6 +61,8 @@ export const GuidedFlowDialogBox: FC = ({ onPrevious, disablePrev, disableNext, + isFirstDialog, + waitingDiv, }) => ( <> {heading && ( @@ -86,6 +94,11 @@ export const GuidedFlowDialogBox: FC = ({ )} + {title2 && ( + + + + )} {isLoading && loadingText && ( @@ -104,57 +117,85 @@ export const GuidedFlowDialogBox: FC = ({ )} - {messageBoxList && ( - - {messageBoxList.map((messageBox, index) => { - const key = Object.keys(messageBox)[0]; - const args = key.split('-'); + {messageBoxList && + (waitingDiv ? ( + + {messageBoxList.map((messageBox, index) => { + const key = Object.keys(messageBox)[0]; + const args = key.split('-'); + const type = args[0] as WaitingDivType; + if (!type) return null; - const type = args[0] as MessageBoxType; - if (!type) return null; + let textColor: TypographyColor | undefined; + if (args.length > 1) textColor = args[1] as TypographyColor; - let textColor: TypographyColor | undefined; - if (args.length > 1) textColor = args[1] as TypographyColor; + return ( + + ); + })} + + ) : ( + + {messageBoxList.map((messageBox, index) => { + const key = Object.keys(messageBox)[0]; + const args = key.split('-'); - return ( - - ); - })} - - )} + const type = args[0] as MessageBoxType; + if (!type) return null; + + let textColor: TypographyColor | undefined; + if (args.length > 1) textColor = args[1] as TypographyColor; + + return ( + + ); + })} + + ))} {footer} - {!footer && ( - <> - - - - )} + {!footer && + (isFirstDialog ? ( + + ) : ( + <> + + + + ))} ); -GuidedFlowDialogBox.defaultProps = { +CustomFlowDialogBox.defaultProps = { children: undefined, isLoading: false, loadingText: undefined, subtitle: undefined, title: undefined, + title2: undefined, footer: undefined, heading: undefined, goldenArrowList: undefined, @@ -162,4 +203,6 @@ GuidedFlowDialogBox.defaultProps = { messageBoxList: undefined, disablePrev: false, disableNext: false, + isFirstDialog: false, + waitingDiv: false, }; diff --git a/packages/ui/src/components/molecules/Dialog/index.ts b/packages/ui/src/components/molecules/Dialog/index.ts index 44c1c839a..b884c230f 100644 --- a/packages/ui/src/components/molecules/Dialog/index.ts +++ b/packages/ui/src/components/molecules/Dialog/index.ts @@ -5,4 +5,4 @@ export * from './SuccessDialog'; export * from './ProgressDialog'; export * from './ConfirmationDialog'; export * from './IconDialogBox'; -export * from './GuidedFlowDialogBox'; +export * from './CustomFlowDialogBox'; diff --git a/packages/ui/src/components/molecules/WaitingDiv.tsx b/packages/ui/src/components/molecules/WaitingDiv.tsx new file mode 100644 index 000000000..2812a47cb --- /dev/null +++ b/packages/ui/src/components/molecules/WaitingDiv.tsx @@ -0,0 +1,68 @@ +import React, { FC } from 'react'; + +import { Loading } from '../../assets'; +import { + Container, + Flex, + LangDisplay, + Typography, + TypographyColor, +} from '../atoms'; +import { BgColor, BorderColor } from '../utils'; + +export type WaitingDivType = 'info' | 'warning' | 'danger'; +const borderColorMap: Record = { + info: 'input', + warning: 'warning', + danger: 'danger', +}; +const bgColorMap: Record = { + info: 'input', + warning: 'warning', + danger: 'error', +}; +export const WaitingDiv: FC<{ + text: string; + altText?: string; + textColor?: TypographyColor; + type: WaitingDivType; + rightImage?: React.ReactNode; + variables?: any; +}> = ({ text, altText, type, textColor, rightImage, variables }) => ( + + + + + + + + {!altText && rightImage && rightImage} + + {altText && ( + + + + + {rightImage && rightImage} + + )} + + +); + +WaitingDiv.defaultProps = { + rightImage: undefined, + altText: undefined, + textColor: undefined, + variables: undefined, +}; diff --git a/packages/ui/src/components/molecules/index.ts b/packages/ui/src/components/molecules/index.ts index 93bad68f4..ce16a77e2 100644 --- a/packages/ui/src/components/molecules/index.ts +++ b/packages/ui/src/components/molecules/index.ts @@ -23,6 +23,7 @@ export * from './Layouts'; export * from './LeanBox'; export * from './Markdown'; export * from './MessageBox'; +export * from './WaitingDiv'; export * from './Milestone'; export * from './Notification'; export * from './Prefabs'; diff --git a/packages/ui/src/stories/molecules/Dialogs/GuidedFlowDialogBox.stories.tsx b/packages/ui/src/stories/molecules/Dialogs/GuidedFlowDialogBox.stories.tsx index 972309829..c63f01d54 100644 --- a/packages/ui/src/stories/molecules/Dialogs/GuidedFlowDialogBox.stories.tsx +++ b/packages/ui/src/stories/molecules/Dialogs/GuidedFlowDialogBox.stories.tsx @@ -2,13 +2,13 @@ import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { confirmAlphabeticDeviceImage } from '../../../assets'; -import { Button, GuidedFlowDialogBox } from '../../../components'; +import { Button, CustomFlowDialogBox } from '../../../components'; import * as BulletListStories from '../BulletList.stories'; import * as GoldenArrowListStories from '../GoldenArrowList.stories'; import * as MessageBoxStories from '../MessageBox.stories'; -const meta: Meta = { - component: GuidedFlowDialogBox, +const meta: Meta = { + component: CustomFlowDialogBox, tags: ['autodocs'], }; diff --git a/packages/ui/src/stories/molecules/WaitingDiv.stories.tsx b/packages/ui/src/stories/molecules/WaitingDiv.stories.tsx new file mode 100644 index 000000000..cec853f8e --- /dev/null +++ b/packages/ui/src/stories/molecules/WaitingDiv.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { WaitingDiv } from '../../components'; + +const meta: Meta = { + component: WaitingDiv, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + text: 'This is a info message', + type: 'info', + }, +}; + +export const Warning: Story = { + args: { + text: 'This is a warning message', + type: 'warning', + }, +};