Skip to content

Commit

Permalink
begin WC
Browse files Browse the repository at this point in the history
  • Loading branch information
@BitHighlander
BitHighlander committed Apr 14, 2024
1 parent 3d2e197 commit da1e263
Show file tree
Hide file tree
Showing 7 changed files with 1,174 additions and 253 deletions.
893 changes: 893 additions & 0 deletions .yarn/releases/yarn-4.1.0.cjs
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/keepkey-desktop-app/headers/csps/chains/kkdesktop.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@ import type { Csp } from '../../types'
export const csp: Csp = {
'connect-src': [
'http://localhost:1646',
'https://wallet-connect-dapp-ochre.vercel.app',
]
}
98 changes: 49 additions & 49 deletions packages/keepkey-desktop-app/src/Routes/RoutesCommon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,13 @@ export const routes: NestedRoute[] = [
// main: TransactionHistory,
// category: RouteCategory.Explore,
// },
{
path: '/authenticator',
label: 'navBar.authenticator',
icon: <FaLock />,
category: RouteCategory.Explore,
main: Authenticator,
},
// {
// path: '/authenticator',
// label: 'navBar.authenticator',
// icon: <FaLock />,
// category: RouteCategory.Explore,
// main: Authenticator,
// },
{
path: '/browser',
label: 'navBar.browser',
Expand All @@ -75,48 +75,48 @@ export const routes: NestedRoute[] = [
},
],
},
{
path: '/assets',
label: 'navBar.assets',
main: Assets,
icon: <AssetsIcon />,
category: RouteCategory.Wallet,
routes: [
{
path: '/:chainId/:assetSubId',
label: 'Overview',
icon: <AssetsIcon />,
main: null,
hide: true,
routes: [
{
path: '/',
label: 'navBar.overview',
main: Asset,
},
{
path: '/transactions',
label: 'navBar.transactions',
main: AssetTxHistory,
},
],
},
{
path: '/keepkey/:chainId/:assetSubId',
label: 'Overview',
icon: <AssetsIcon />,
main: null,
hide: true,
routes: [
{
path: '/',
label: 'navBar.overview',
main: KeepkeyAsset,
},
],
},
],
},
// {
// path: '/assets',
// label: 'navBar.assets',
// main: Assets,
// icon: <AssetsIcon />,
// category: RouteCategory.Wallet,
// routes: [
// {
// path: '/:chainId/:assetSubId',
// label: 'Overview',
// icon: <AssetsIcon />,
// main: null,
// hide: true,
// routes: [
// {
// path: '/',
// label: 'navBar.overview',
// main: Asset,
// },
// {
// path: '/transactions',
// label: 'navBar.transactions',
// main: AssetTxHistory,
// },
// ],
// },
// {
// path: '/keepkey/:chainId/:assetSubId',
// label: 'Overview',
// icon: <AssetsIcon />,
// main: null,
// hide: true,
// routes: [
// {
// path: '/',
// label: 'navBar.overview',
// main: KeepkeyAsset,
// },
// ],
// },
// ],
// },
// {
// path: '/accounts',
// label: 'navBar.accounts',
Expand Down
189 changes: 85 additions & 104 deletions packages/keepkey-desktop-app/src/components/Layout/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { ChevronDownIcon, HamburgerIcon } from '@chakra-ui/icons'
import {
Box,
Button,
Expand All @@ -11,115 +10,97 @@ import {
Image,
useColorModeValue,
useDisclosure,
} from '@chakra-ui/react'
import KeepKeyIconBlack from 'assets/kk-icon-black.png'
import { useModal } from 'hooks/useModal/useModal'
import { WalletConnectToDappsHeaderButton } from 'plugins/walletConnectToDapps/components/header/WalletConnectToDappsHeaderButton'
import { useWalletConnect } from 'plugins/walletConnectToDapps/WalletConnectBridgeContext'
import { useCallback, useEffect } from 'react'
import { Link, useHistory } from 'react-router-dom'

import { AutoCompleteSearch } from './AutoCompleteSearch/AutoCompleteSearch'
import { ChainMenu } from './NavBar/ChainMenu'
import { SideNavContent } from './SideNavContent'
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';
import { WalletActions } from 'context/WalletProvider/actions';
import { ChainMenu } from './NavBar/ChainMenu';
import { SideNavContent } from './SideNavContent';
import { useWallet } from 'hooks/useWallet/useWallet';

export const Header = () => {
const { onToggle, isOpen, onClose } = useDisclosure()
const history = useHistory()
const bg = useColorModeValue('white', 'gray.800')
const borderColor = useColorModeValue('gray.100', 'gray.750')
const { chainSelector } = useModal()
const { isConnected, legacyWeb3 } = useWalletConnect()
const { onToggle, isOpen, onClose } = useDisclosure();
const [browserUrl, setBrowserUrl] = useState('');
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');
}
}, [history]);

/**
* FOR DEVELOPERS:
* Open the hidden flags menu via keypress
*/
const handleKeyPress = useCallback(
(event: { altKey: unknown; shiftKey: unknown; keyCode: number }) => {
if (event.altKey && event.shiftKey && event.keyCode === 70) {
history.push('/flags')
}
},
[history],
)
const openWalletConnect = async function() {
try {

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

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'
// position='sticky'
// zIndex='banner'
// top={0}
paddingTop={{ base: 'env(safe-area-inset-top)', md: 0 }}
>
<HStack height='4.5rem' 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='48px' src={KeepKeyIconBlack} alt='Go to Dashboard' />
</Link>
</Flex>
<HStack
width='100%'
flex={1}
justifyContent='center'
display={{ base: 'none', md: 'block' }}
>
<AutoCompleteSearch />
</HStack>
<Flex justifyContent='flex-end' flex={1} rowGap={4} columnGap={2}>
<Box display={{ base: 'none', md: 'block' }}>
<WalletConnectToDappsHeaderButton />
<>
<Flex
direction='column'
bg={bg}
width='full'
paddingTop={{ base: 'env(safe-area-inset-top)', md: 0 }}
>
<HStack height='4.5rem' 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>
{/*{isConnected && (*/}
{/* <Box display={{ base: 'none', md: 'block' }}>*/}
{/* <Button rightIcon={<ChevronDownIcon />} onClick={() => chainSelector.open({})}>*/}
{/* <Image*/}
{/* boxSize={6}*/}
{/* src={*/}
{/* legacyWeb3?.image*/}
{/* ? legacyWeb3.image*/}
{/* : `https://pioneers.dev/coins/${legacyWeb3?.name*/}
{/* .toLowerCase()*/}
{/* .replaceAll('mainnet', '')*/}
{/* .replaceAll(' ', '')}.png`*/}
{/* }*/}
{/* />*/}
{/* {legacyWeb3?.chainId}*/}
{/* </Button>*/}
{/* </Box>*/}
{/*)}*/}
<ChainMenu display={{ base: 'none', md: 'block' }} />
</Flex>
<Flex justifyContent={{ base: 'center', md: 'flex-start' }}>
<Link to='/'>
<Image boxSize='48px' src={KeepKeyIconBlack} alt='Go to Dashboard' />
</Link>
</Flex>
<Flex justifyContent='flex-end' flex={1} rowGap={4} columnGap={2}>
<Button onClick={openWalletConnect}>
<Avatar size="xs" src="placeholder" />
Wallet Connect
</Button>
<ChainMenu display={{ base: 'none', md: 'block' }} />
</Flex>
</HStack>
</HStack>
</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>
</>
)
}
</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>
</>
);
};
Loading

0 comments on commit da1e263

Please sign in to comment.