begin support revamp

keepkey · Feb 10, 2025 · a995cc9 · a995cc9
1 parent a7937f4
commit a995cc9
Show file tree

Hide file tree

Showing 5 changed files with 180 additions and 83 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/packages/keepkey-desktop-app/package.json b/packages/keepkey-desktop-app/package.json
@@ -194,6 +194,7 @@
     "js-file-download": "^0.4.12",
     "keccak256": "^1.0.6",
     "keepkey-ollama": "^0.0.1",
+    "keepkey-support-widget-export": "^1.0.7",
     "lit-html": "^2.2.5",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",

diff --git a/packages/keepkey-desktop-app/src/components/Layout/Header/Header.tsx b/packages/keepkey-desktop-app/src/components/Layout/Header/Header.tsx
@@ -1,4 +1,6 @@
+import { HamburgerIcon } from '@chakra-ui/icons'
 import {
+  Avatar,
   Box,
   Button,
   Drawer,
@@ -10,104 +12,126 @@ import {
   Image,
   useColorModeValue,
   useDisclosure,
-  Avatar,
-  useToast
-} from '@chakra-ui/react';
-import { HamburgerIcon } from '@chakra-ui/icons';
-import KeepKeyIconBlack from 'assets/kk-icon-black.png';
-import { useCallback, useEffect, useState } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+  useToast,
+} from '@chakra-ui/react'
+import KeepKeyIconBlack from 'assets/kk-icon-black.png'
 import { WalletActions } from 'context/WalletProvider/actions'
+import { useWallet } from 'hooks/useWallet/useWallet'
+import { useCallback, useEffect, useState } from 'react'
+import { Link, useHistory } from 'react-router-dom'
+
 // import { ChainMenu } from './NavBar/ChainMenu';
-import { SideNavContent } from './SideNavContent';
-import { useWallet } from 'hooks/useWallet/useWallet';
+import { SideNavContent } from './SideNavContent'
 
 export const Header = () => {
-  const { onToggle, isOpen, onClose } = useDisclosure();
-  const [browserUrl, setBrowserUrl] = useState('');
-  const [walletConnectOpen, setWalletConnectOpen] = useState(false);
-  const history = useHistory();
-  const bg = useColorModeValue('white', 'gray.800');
-  const borderColor = useColorModeValue('gray.100', 'gray.750');
-  const { dispatch } = useWallet();
-  const toast = useToast();
+  const { onToggle, isOpen, onClose } = useDisclosure()
+  const [browserUrl, setBrowserUrl] = useState('')
+  const [walletConnectOpen, setWalletConnectOpen] = useState(false)
+  const history = useHistory()
+  const bg = useColorModeValue('white', 'gray.800')
+  const borderColor = useColorModeValue('gray.100', 'gray.750')
+  const { dispatch } = useWallet()
+  const toast = useToast()
 
-  const handleKeyPress = useCallback((event) => {
-    if (event.altKey && event.shiftKey && event.keyCode === 70) {
-      history.push('/flags');
+  const handleKeyPress = useCallback(
+    event => {
+      if (event.altKey && event.shiftKey && event.keyCode === 70) {
+        history.push('/flags')
+      }
+    },
+    [history],
+  )
+
+  const openWalletConnect = async function () {
+    try {
+      history.push('/browser')
+      //dispatch
+      dispatch({ type: WalletActions.SET_WALLET_CONNECT_OPEN, payload: !walletConnectOpen })
+      setWalletConnectOpen(!walletConnectOpen)
+      // history.push('/browser?walletconnect=true');
+    } catch (e) {
+      console.error(e)
+      toast({
+        title: 'Error',
+        description: 'Failed to open the wallet connect',
+        status: 'error',
+        duration: 9000,
+        isClosable: true,
+      })
     }
-  }, [history]);
+  }
 
-  const openWalletConnect = async function() {
+  const goToKeepKey = async function () {
     try {
-      history.push('/browser');
+      history.push('/browser')
+      dispatch({ type: WalletActions.SET_BROWSER_URL, payload: 'https://app.keepkey.info' })
       //dispatch
-      dispatch({ type: WalletActions.SET_WALLET_CONNECT_OPEN, payload: !walletConnectOpen });
-      setWalletConnectOpen(!walletConnectOpen);
+      // dispatch({ type: WalletActions.SET_WALLET_CONNECT_OPEN, payload: !walletConnectOpen });
+      // setWalletConnectOpen(!walletConnectOpen);
       // history.push('/browser?walletconnect=true');
     } catch (e) {
-      console.error(e);
+      console.error(e)
       toast({
-        title: "Error",
-        description: "Failed to open the wallet connect",
-        status: "error",
+        title: 'Error',
+        description: 'Failed to open the wallet connect',
+        status: 'error',
         duration: 9000,
-        isClosable: true
-      });
+        isClosable: true,
+      })
     }
-  };
+  }
 
   useEffect(() => {
-    document.addEventListener('keydown', handleKeyPress);
-    return () => document.removeEventListener('keydown', handleKeyPress);
-  }, [handleKeyPress]);
+    document.addEventListener('keydown', handleKeyPress)
+    return () => document.removeEventListener('keydown', handleKeyPress)
+  }, [handleKeyPress])
 
   return (
-      <>
-        <Flex
-            direction='column'
-            bg={bg}
-            width='full'
-            paddingTop={{ base: 'env(safe-area-inset-top)', md: 0 }}
-        >
-          <HStack height='2.3rem' width='full' borderBottomWidth={1} borderColor={borderColor}>
-            <HStack width='full' margin='0 auto' px={{ base: 0, md: 4 }} spacing={0} columnGap={4}>
-              <Box flex={1} display={{ base: 'block', md: 'none' }}>
-                <IconButton
-                    aria-label='Open menu'
-                    variant='ghost'
-                    onClick={onToggle}
-                    icon={<HamburgerIcon />}
-                />
-              </Box>
-              <Flex justifyContent={{ base: 'center', md: 'flex-start' }}>
-                <Link to='/'>
-                  <Image boxSize='33px' src={KeepKeyIconBlack} alt='Go to Dashboard' />
-                </Link>
-              </Flex>
-              <Flex justifyContent='flex-end' flex={1} rowGap={4} columnGap={2}>
-                <Avatar onClick={openWalletConnect} size="xs" src="https://i.imgur.com/ZCBkgPX.png" />
-                {/*<Button*/}
-                {/*    onClick={openWalletConnect}*/}
-                {/*    size="md"           // Set the size of the button*/}
-                {/*    leftIcon={<Avatar size="xs" src="https://pbs.twimg.com/profile_images/1737473466847125504/SN4QL9k3_400x400.jpg" />}  // Set the avatar as the icon of the button*/}
-                {/*>*/}
-                {/*</Button>*/}
-                {/*<ChainMenu display={{ base: 'none', md: 'block' }} />*/}
-              </Flex>
-            </HStack>
+    <>
+      <Flex
+        direction='column'
+        bg={bg}
+        width='full'
+        paddingTop={{ base: 'env(safe-area-inset-top)', md: 0 }}
+      >
+        <HStack height='2.3rem' width='full' borderBottomWidth={1} borderColor={borderColor}>
+          <HStack width='full' margin='0 auto' px={{ base: 0, md: 4 }} spacing={0} columnGap={4}>
+            <Box flex={1} display={{ base: 'block', md: 'none' }}>
+              <IconButton
+                aria-label='Open menu'
+                variant='ghost'
+                onClick={onToggle}
+                icon={<HamburgerIcon />}
+              />
+            </Box>
+            <Flex justifyContent={{ base: 'center', md: 'flex-start' }}>
+              <Link onClick={goToKeepKey}>
+                <Image boxSize='33px' src={KeepKeyIconBlack} alt='Go to Dashboard' />
+              </Link>
+            </Flex>
+            <Flex justifyContent='flex-end' flex={1} rowGap={4} columnGap={2}>
+              <Avatar onClick={openWalletConnect} size='xs' src='https://i.imgur.com/ZCBkgPX.png' />
+              {/*<Button*/}
+              {/*    onClick={openWalletConnect}*/}
+              {/*    size="md"           // Set the size of the button*/}
+              {/*    leftIcon={<Avatar size="xs" src="https://pbs.twimg.com/profile_images/1737473466847125504/SN4QL9k3_400x400.jpg" />}  // Set the avatar as the icon of the button*/}
+              {/*>*/}
+              {/*</Button>*/}
+              {/*<ChainMenu display={{ base: 'none', md: 'block' }} />*/}
+            </Flex>
           </HStack>
-        </Flex>
-        <Drawer isOpen={isOpen} onClose={onClose} placement='left'>
-          <DrawerOverlay />
-          <DrawerContent
-              paddingTop='env(safe-area-inset-top)'
-              paddingBottom='max(1rem, env(safe-area-inset-top))'
-              overflowY='auto'
-          >
-            <SideNavContent onClose={onClose} />
-          </DrawerContent>
-        </Drawer>
-      </>
-  );
-};
+        </HStack>
+      </Flex>
+      <Drawer isOpen={isOpen} onClose={onClose} placement='left'>
+        <DrawerOverlay />
+        <DrawerContent
+          paddingTop='env(safe-area-inset-top)'
+          paddingBottom='max(1rem, env(safe-area-inset-top))'
+          overflowY='auto'
+        >
+          <SideNavContent onClose={onClose} />
+        </DrawerContent>
+      </Drawer>
+    </>
+  )
+}
diff --git a/packages/keepkey-desktop-app/src/pages/ConnectWallet/ConnectWallet.tsx b/packages/keepkey-desktop-app/src/pages/ConnectWallet/ConnectWallet.tsx
@@ -13,6 +13,7 @@ import { useWallet } from 'hooks/useWallet/useWallet'
 import { useEffect } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { generatePath, matchPath, useHistory } from 'react-router'
+import { WalletAdvanced } from 'keepkey-support-widget-export/next'
 
 export const ConnectWallet = () => {
   const { state, dispatch } = useWallet()
@@ -143,14 +144,15 @@ export const ConnectWallet = () => {
               <Button
                 as={Link}
                 isExternal
-                href='https://discord.gg/stfRnW3Jys'
+                href='https://support.keepkey.info'
                 width='360px'
                 size='lg'
                 rightIcon={<ExternalLinkIcon />}
                 colorScheme='green'
               >
                 <Text translation={'common.getSupport'} />
               </Button>
+              <WalletAdvanced></WalletAdvanced>
             </Flex>
           </Flex>
         </Flex>

diff --git a/yarn.lock b/yarn.lock
@@ -19573,6 +19573,7 @@ __metadata:
     js-file-download: "npm:^0.4.12"
     keccak256: "npm:^1.0.6"
     keepkey-ollama: "npm:^0.0.1"
+    keepkey-support-widget-export: "npm:^1.0.7"
     lit-html: "npm:^2.2.5"
     localforage: "npm:^1.10.0"
     lodash: "npm:^4.17.21"
@@ -19845,6 +19846,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"keepkey-support-widget-export@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "keepkey-support-widget-export@npm:1.0.7"
+  dependencies:
+    react-icons: "npm:^5.4.0"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 10/03b1c5345c37e0952af8906d49d4d5c5af7114265f2e23697b96b018724bdb39a7b7fb09d9297c62574cdd29769d2e059430c8f638708297f1c09318b84271f9
+  languageName: node
+  linkType: hard
+
 "keyv@npm:^4.0.0":
   version: 4.5.2
   resolution: "keyv@npm:4.5.2"
@@ -23934,6 +23947,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-icons@npm:^5.4.0":
+  version: 5.4.0
+  resolution: "react-icons@npm:5.4.0"
+  peerDependencies:
+    react: "*"
+  checksum: 10/c900d475c64852b316d16bdc1a436c93e18e0ffb321ebc43a1d8741191baba736e0ef4c6d871399056832b69413cd13b56ae6a18eaa5ad17041df805d803651c
+  languageName: node
+  linkType: hard
+
 "react-infinite-scroller@npm:^1.2.6":
   version: 1.2.6
   resolution: "react-infinite-scroller@npm:1.2.6"