Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(devwallet): bug in route changes #2646

Merged
merged 2 commits into from
Nov 7, 2024
Merged

fix(devwallet): bug in route changes #2646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
823b256
fix bug in route changes
sstraatemans Nov 7, 2024
12fc3de
fix console warnings
sstraatemans Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .changeset/wicked-masks-love.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
31 changes: 31 additions & 0 deletions packages/apps/dev-wallet/src/App/Layout/KLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import type { FC } from 'react';

export const KLogo: FC<{ height: number; className?: string }> = (props) => (
<svg
data-style="kdacolor"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g clipPath="url(#clip0_509_65640)">
<path
d="M28.4352 28L19.739 27.9956L8.89978 19.5354L13.3083 16L28.4352 28Z"
fill="#4A9079"
/>
<path
d="M28.4352 4H19.7434L8.89978 12.4646L13.3083 16L28.4352 4Z"
fill="#4A9079"
/>
<path
d="M8.89675 27.9957L3.5 23.7317V8.26851L8.89675 4.00452V27.9957Z"
fill="#4A9079"
/>
</g>
<defs>
<clipPath id="clip0_509_65640">
<rect width="32" height="32" fill="white" />
</clipPath>
</defs>
</svg>
);
40 changes: 8 additions & 32 deletions packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,15 @@ import {
MonoDarkMode,
MonoKey,
MonoLightMode,
MonoLogout,
MonoNetworkCheck,
MonoSignature,
MonoSwapHoriz,
MonoTableRows,
} from '@kadena/kode-icons/system';

import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector';
import { useWallet } from '@/modules/wallet/wallet.hook';
import {
Button,
ContextMenu,
ContextMenuItem,
Themes,
useTheme,
} from '@kadena/kode-ui';

import { Button, Themes, useTheme } from '@kadena/kode-ui';
import {
SideBarItem,
SideBarItemsInline,
Expand All @@ -30,22 +23,24 @@ import {
} from '@kadena/kode-ui/patterns';
import { FC } from 'react';
import { Link } from 'react-router-dom';
import { KLogo } from './KLogo';

export const SideBar: FC = () => {
const { theme, setTheme } = useTheme();
const { isExpanded } = useLayout();
const { lockProfile } = useWallet();

const toggleTheme = (): void => {
const newTheme = theme === Themes.dark ? Themes.light : Themes.dark;
setTheme(newTheme);
};

const handleLogout = () => {
lockProfile();
};
return (
<SideBarUI
logo={
<Link to="/">
<KLogo height={40} />
</Link>
}
appContext={
<SideBarItem visual={<MonoNetworkCheck />} label="Select network">
<NetworkSelector
Expand Down Expand Up @@ -110,25 +105,6 @@ export const SideBar: FC = () => {
context={
<>
<SideBarItemsInline>
<SideBarItem visual={<MonoContacts />} label="Profile">
<ContextMenu
trigger={
<Button
isCompact
variant={isExpanded ? 'outlined' : 'transparent'}
endVisual={<MonoContacts />}
>
{isExpanded ? 'Profile' : undefined}
</Button>
}
>
<ContextMenuItem
endVisual={<MonoLogout />}
label="Logout"
onClick={handleLogout}
/>
</ContextMenu>
</SideBarItem>
<SideBarItem
visual={<MonoContrast />}
onPress={toggleTheme}
Expand Down
4 changes: 0 additions & 4 deletions packages/apps/dev-wallet/src/pages/contacts/Components/ContactForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,6 @@ export function ContactForm({
onDone: (contect: IContact) => void;
isOpen: boolean;
}) {
console.log({ input });

const prompt = usePrompt();
const { activeNetwork } = useWallet();
const [error, setError] = useState<string | null>(null);
Expand All @@ -56,8 +54,6 @@ export function ContactForm({
});

useEffect(() => {
console.log({ input });

if (!input) {
reset(
{
Expand Down
24 changes: 21 additions & 3 deletions packages/apps/dev-wallet/src/pages/transfer-v2/Steps/TransferForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,14 @@ import {
TextField,
} from '@kadena/kode-ui';
import { PactNumber } from '@kadena/pactjs';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
Fragment,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { Controller, useForm } from 'react-hook-form';
import { DiscoverdAccounts } from '../../transfer/components/DiscoverdAccounts';
import { linkClass } from '../../transfer/style.css';
Expand Down Expand Up @@ -316,6 +323,7 @@ export function TransferForm({
render={({ field }) => (
<Select
// label="Token"
aria-label="Asset"
placeholder="Asset"
startVisual={<Label>Asset:</Label>}
size="sm"
Expand All @@ -335,6 +343,7 @@ export function TransferForm({
render={({ field }) => (
<Stack flex={1} flexDirection={'column'}>
<Select
aria-label="Address"
startVisual={<Label>Address:</Label>}
// label="Account"
placeholder="Select and address"
Expand Down Expand Up @@ -363,6 +372,7 @@ export function TransferForm({
control={control}
render={({ field }) => (
<Select
aria-label="Chain"
startVisual={<Label>Chain:</Label>}
// label="Chain"
size="sm"
Expand Down Expand Up @@ -437,7 +447,7 @@ export function TransferForm({
return ch !== senderChain;
});
return (
<>
<Fragment key={index}>
<Stack
gap="sm"
flexDirection={'column'}
Expand Down Expand Up @@ -515,6 +525,7 @@ export function TransferForm({
<Stack flexDirection={'column'}>
<Combobox
// label={index === 0 ? 'Account' : undefined}
aria-label="Receiver Address"
inputValue={field.value ?? ''}
placeholder="Select ot enter an address"
startVisual={<Label>Address:</Label>}
Expand Down Expand Up @@ -652,6 +663,7 @@ export function TransferForm({
}}
render={({ field }) => (
<TextField
aria-label="Amount"
onChange={(e) => {
const value = e.target.value;
field.onChange(value);
Expand All @@ -673,6 +685,7 @@ export function TransferForm({
control={control}
render={({ field }) => (
<Select
aria-label="Chain"
startVisual={<Label>Chain:</Label>}
// label={index === 0 ? 'Chain' : undefined}
placeholder="Select a chain"
Expand Down Expand Up @@ -830,7 +843,7 @@ export function TransferForm({
</button>
</Stack>
)}
</>
</Fragment>
);
})}
</>
Expand All @@ -854,6 +867,7 @@ export function TransferForm({
control={control}
render={({ field }) => (
<Select
aria-label="Gas Payer"
startVisual={<Label>Gas Payer:</Label>}
placeholder="Select the gas payer"
size="sm"
Expand Down Expand Up @@ -885,6 +899,7 @@ export function TransferForm({
control={control}
render={({ field }) => (
<TextField
aria-label="Gas Price"
startVisual={<Label>Gas Price:</Label>}
placeholder="Enter gas price"
value={field.value}
Expand All @@ -905,6 +920,7 @@ export function TransferForm({
control={control}
render={({ field }) => (
<TextField
aria-label="Enter gas limit"
placeholder="Enter gas limit"
startVisual={<Label>Gas Limit:</Label>}
value={field.value}
Expand All @@ -927,6 +943,7 @@ export function TransferForm({
control={control}
render={({ field }) => (
<TextField
aria-label="TTL"
startVisual={<Label>TTL:</Label>}
placeholder="Enter TTL (Timer to live)"
value={field.value}
Expand Down Expand Up @@ -957,6 +974,7 @@ export function TransferForm({
control={control}
render={({ field }) => (
<RadioGroup
aria-label="Sign Options"
direction={'column'}
defaultValue={'normalTransfer'}
value={field.value}
Expand Down
3 changes: 3 additions & 0 deletions packages/apps/dev-wallet/src/pages/transfer/transfer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,7 @@ export function Transfer() {
render={({ field }) => (
<Select
label="From"
aria-label="From"
size="sm"
selectedKey={field.value}
onSelectionChange={(accountId) => {
Expand Down Expand Up @@ -440,6 +441,7 @@ export function Transfer() {
<Stack alignItems={'flex-end'} gap={'sm'}>
<TextField
type="number"
aria-label="Amount"
placeholder="Enter amount"
{...register('amount')}
/>
Expand All @@ -453,6 +455,7 @@ export function Transfer() {
name="transferAll"
render={({ field }) => (
<Checkbox
aria-label="Max Amount"
isSelected={field.value}
onChange={field.onChange}
>
Expand Down
16 changes: 3 additions & 13 deletions packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ import classNames from 'classnames';
import type { FC, PropsWithChildren, ReactElement } from 'react';
import React from 'react';
import type { PressEvent } from './../../components';
import { Button, Media, Stack } from './../../components';
import { Button, Stack } from './../../components';
import { useLayout } from './components/LayoutProvider';
import { KLogo } from './components/Logo/KLogo';
import { KadenaLogo } from './components/Logo/KadenaLogo';
import { SideBarAppContext } from './components/SideBarAppContext';
import { SideBarContext } from './components/SideBarContext';
import { SideBarNavigation } from './components/SideBarNavigation';
Expand All @@ -24,7 +23,6 @@ export interface ISideBarProps extends PropsWithChildren {
navigation?: ReactElement;
context?: ReactElement;
logo?: ReactElement;
minifiedLogo?: ReactElement;
}

export const SideBar: FC<ISideBarProps> = ({
Expand All @@ -33,7 +31,6 @@ export const SideBar: FC<ISideBarProps> = ({
navigation,
context,
logo,
minifiedLogo,
}) => {
const { isExpanded, handleToggleExpand } = useLayout();

Expand All @@ -44,11 +41,7 @@ export const SideBar: FC<ISideBarProps> = ({
};

const ShowLogo = () => {
if (!isExpanded) {
return minifiedLogo ? minifiedLogo : <KLogo height={40} />;
}

return logo ? logo : <KadenaLogo height={40} />;
return logo ? logo : <KLogo height={40} />;
};

return (
Expand All @@ -65,10 +58,7 @@ export const SideBar: FC<ISideBarProps> = ({
})}
>
<Stack className={classNames(menuMenuIconClass)}>
<div>
<Media lessThan="md">{ShowLogo()}</Media>
<Media greaterThanOrEqual="md">{ShowLogo()}</Media>
</div>
{ShowLogo()}

<Button
variant="transparent"
Expand Down
10 changes: 2 additions & 8 deletions packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { Button, Stack } from './../../components';
import { SideBarBreadcrumbs } from './components/Breadcrumbs/SideBarBreadcrumbs';
import { SideBarBreadcrumbsItem } from './components/Breadcrumbs/SideBarBreadcrumbsItem';
import { LayoutProvider, useLayout } from './components/LayoutProvider';
import { KadenaLogo } from './components/Logo/KadenaLogo';
import { KLogo } from './components/Logo/KLogo';
import {
RightAside,
Expand Down Expand Up @@ -75,7 +74,7 @@ const InnerLayout = () => {
<RightAsideContent>content</RightAsideContent>
</RightAside>
<SideBarLayout
minifiedLogo={
logo={
<a href="https://kadena.io" target="_blank" rel="noreferrer">
<KLogo height={40} />
</a>
Expand All @@ -94,11 +93,6 @@ const InnerLayout = () => {
sidebar={
<SideBar
logo={
<a href="https://kadena.io" target="_blank" rel="noreferrer">
<KadenaLogo height={40} />
</a>
}
minifiedLogo={
<a href="https://kadena.io" target="_blank" rel="noreferrer">
<KLogo height={40} />
</a>
Expand Down Expand Up @@ -312,7 +306,7 @@ const InnerLayoutFull = () => {
}}
logo={
<a href="https://kadena.io" target="_blank" rel="noreferrer">
<KadenaLogo height={40} />
<KLogo height={40} />
</a>
}
variant="full"
Expand Down
12 changes: 11 additions & 1 deletion packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,12 @@ export const SideBarLayout: FC<ISideBarLayout> = ({
variant = 'default',
location,
}) => {
const { isExpanded, setLocation } = useLayout();
const {
isExpanded,
setLocation,
isRightAsideExpanded,
setIsRightAsideExpanded,
} = useLayout();

// set the active URL in your app.
//we dont know what route system is being used so the active URL will be given as a prop to the component
Expand All @@ -41,6 +46,11 @@ export const SideBarLayout: FC<ISideBarLayout> = ({
setLocation(location);
}, [location?.url, location?.hash]);

useEffect(() => {
if (!isRightAsideExpanded) return;
setIsRightAsideExpanded(false);
}, [location?.url]);

return (
<MediaContextProvider>
<Stack
Expand Down
Loading
Loading