fix(devwallet): bug in route changes (#2646)

kadena-community · Nov 28, 2024 · 52ed74f · 52ed74f
1 parent ba377db
commit 52ed74f
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 141 deletions.
diff --git a/.changeset/wicked-masks-love.md b/.changeset/wicked-masks-love.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/dev-wallet/src/App/Layout/KLogo.tsx b/packages/apps/dev-wallet/src/App/Layout/KLogo.tsx
@@ -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>
+);
diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
@@ -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,
@@ -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
@@ -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}

diff --git a/packages/apps/dev-wallet/src/pages/contacts/Components/ContactForm.tsx b/packages/apps/dev-wallet/src/pages/contacts/Components/ContactForm.tsx
@@ -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);
@@ -56,8 +54,6 @@ export function ContactForm({
   });
 
   useEffect(() => {
-    console.log({ input });
-
     if (!input) {
       reset(
         {

diff --git a/packages/apps/dev-wallet/src/pages/transfer-v2/Steps/TransferForm.tsx b/packages/apps/dev-wallet/src/pages/transfer-v2/Steps/TransferForm.tsx
@@ -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';
@@ -316,6 +323,7 @@ export function TransferForm({
               render={({ field }) => (
                 <Select
                   // label="Token"
+                  aria-label="Asset"
                   placeholder="Asset"
                   startVisual={<Label>Asset:</Label>}
                   size="sm"
@@ -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"
@@ -363,6 +372,7 @@ export function TransferForm({
                   control={control}
                   render={({ field }) => (
                     <Select
+                      aria-label="Chain"
                       startVisual={<Label>Chain:</Label>}
                       // label="Chain"
                       size="sm"
@@ -437,7 +447,7 @@ export function TransferForm({
                     return ch !== senderChain;
                   });
                   return (
-                    <>
+                    <Fragment key={index}>
                       <Stack
                         gap="sm"
                         flexDirection={'column'}
@@ -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>}
@@ -652,6 +663,7 @@ export function TransferForm({
                               }}
                               render={({ field }) => (
                                 <TextField
+                                  aria-label="Amount"
                                   onChange={(e) => {
                                     const value = e.target.value;
                                     field.onChange(value);
@@ -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"
@@ -830,7 +843,7 @@ export function TransferForm({
                           </button>
                         </Stack>
                       )}
-                    </>
+                    </Fragment>
                   );
                 })}
               </>
@@ -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"
@@ -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}
@@ -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}
@@ -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}
@@ -957,6 +974,7 @@ export function TransferForm({
               control={control}
               render={({ field }) => (
                 <RadioGroup
+                  aria-label="Sign Options"
                   direction={'column'}
                   defaultValue={'normalTransfer'}
                   value={field.value}

diff --git a/packages/apps/dev-wallet/src/pages/transfer/transfer.tsx b/packages/apps/dev-wallet/src/pages/transfer/transfer.tsx
@@ -378,6 +378,7 @@ export function Transfer() {
                   render={({ field }) => (
                     <Select
                       label="From"
+                      aria-label="From"
                       size="sm"
                       selectedKey={field.value}
                       onSelectionChange={(accountId) => {
@@ -440,6 +441,7 @@ export function Transfer() {
                 <Stack alignItems={'flex-end'} gap={'sm'}>
                   <TextField
                     type="number"
+                    aria-label="Amount"
                     placeholder="Enter amount"
                     {...register('amount')}
                   />
@@ -453,6 +455,7 @@ export function Transfer() {
                       name="transferAll"
                       render={({ field }) => (
                         <Checkbox
+                          aria-label="Max Amount"
                           isSelected={field.value}
                           onChange={field.onChange}
                         >

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx
@@ -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';
@@ -24,7 +23,6 @@ export interface ISideBarProps extends PropsWithChildren {
   navigation?: ReactElement;
   context?: ReactElement;
   logo?: ReactElement;
-  minifiedLogo?: ReactElement;
 }
 
 export const SideBar: FC<ISideBarProps> = ({
@@ -33,7 +31,6 @@ export const SideBar: FC<ISideBarProps> = ({
   navigation,
   context,
   logo,
-  minifiedLogo,
 }) => {
   const { isExpanded, handleToggleExpand } = useLayout();
 
@@ -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 (
@@ -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"

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -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,
@@ -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>
@@ -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>
@@ -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"

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
@@ -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
@@ -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