feat: created new troubleshoot component

.changeset/nasty-panthers-type.md

@@ -0,0 +1,6 @@
+---
+'@cypherock/cysync-core': patch
+'@cypherock/cysync-ui': patch
+---
+
+Added new USBTroubleShoot Dialog

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

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?',

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,

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 && <WalletNotCreatedDialog />}
-      <GuidedFlowDialogBox
+      <CustomFlowDialogBox
         image={informationIconReactElement}
         onNext={onNext}
         onPrevious={onPrevious}

packages/cysync-core/src/dialogs/GuidedFlow/context/index.tsx

@@ -9,7 +9,7 @@ import {
   EnterSeedphraseDeviceGraphics,
   EnterWalletNameDeviceGraphics,
   GenerateNewWalletDeviceGraphics,
-  GuidedFlowDialogBox,
+  CustomFlowDialogBox,
   Image,
   MessageBoxType,
   SelectSeedphraseWordCountDeviceGraphics,
@@ -234,7 +234,7 @@ export const GuidedFlowProvider: FC<GuidedFlowContextProviderProps> = ({
     first?: boolean,
   ) =>
     contents.map((content, index) => (
-      <GuidedFlowDialogBox
+      <CustomFlowDialogBox
         key={`${index + 1}`}
         image={images[index]}
         {...content}

packages/cysync-core/src/dialogs/UsbTroubleShoot/Dialogs/FinalMessage.tsx

@@ -0,0 +1,70 @@
+import {
+  Flex,
+  Button,
+  LangDisplay,
+  GenerateNewWalletDeviceGraphics,
+  CustomFlowDialogBox,
+} from '@cypherock/cysync-ui';
+import { createSelector } from '@reduxjs/toolkit';
+import React, { FC, useState } from 'react';
+
+import { ContactSupportDialogProvider } from '~/dialogs/ContactSupport/context';
+import { ContactForm } from '~/dialogs/ContactSupport/Dialogs';
+import { useTroubleShoot } from '~/dialogs/UsbTroubleShoot/context';
+import { selectLanguage, selectWallets, useAppSelector } from '~/store';
+
+const selectWalletsAndLang = createSelector(
+  [selectLanguage, selectWallets],
+  (a, b) => ({ lang: a, ...b }),
+);
+
+const informationIconReactElement = <GenerateNewWalletDeviceGraphics />;
+
+interface ButtonsProps {
+  setShowContactForm: (show: boolean) => void;
+}
+
+const Buttons: FC<ButtonsProps> = ({ setShowContactForm }) => {
+  const { onCloseDialog } = useTroubleShoot();
+  const { lang } = useAppSelector(selectWalletsAndLang);
+
+  const handlePrimaryClick = () => {
+    setShowContactForm(true);
+  };
+
+  return (
+    <Flex gap={16} $zIndex={1}>
+      <Button variant="secondary" onClick={onCloseDialog}>
+        <LangDisplay
+          text={lang.strings.usbtroubleShoot.finalIssue.buttons.secondary}
+        />
+      </Button>
+      <Button variant="primary" onClick={handlePrimaryClick}>
+        <LangDisplay
+          text={lang.strings.usbtroubleShoot.finalIssue.buttons.primary}
+        />
+      </Button>
+    </Flex>
+  );
+};
+
+export const FinalMessage: FC = () => {
+  const lang = useAppSelector(selectLanguage);
+  const { onNext, onPrevious } = useTroubleShoot();
+  const [showContactForm, setShowContactForm] = useState(false);
+
+  return showContactForm ? (
+    <ContactSupportDialogProvider>
+      <ContactForm key="contact-support-form" />
+    </ContactSupportDialogProvider>
+  ) : (
+    <CustomFlowDialogBox
+      image={informationIconReactElement}
+      onNext={onNext}
+      onPrevious={onPrevious}
+      title={lang.strings.usbtroubleShoot.finalIssue.title}
+      subtitle={lang.strings.usbtroubleShoot.finalIssue.subtitle}
+      footer={<Buttons setShowContactForm={setShowContactForm} />}
+    />
+  );
+};