chore(devwallet): use createportal (#2634)

.changeset/dull-kids-pump.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/dev-wallet/src/App/Layout/Layout.tsx

@@ -5,7 +5,6 @@ import {
   MonoWorkspaces,
 } from '@kadena/kode-icons/system';
 
-import { Aside } from '@/Components/Aside/Aside';
 import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector';
 import { BreadCrumbs } from '@/pages/BreadCrumbs/BreadCrumbs';
 import { Themes, useTheme } from '@kadena/kode-ui';
@@ -41,7 +40,6 @@ export const Layout: FC = () => {
   return (
     <>
       <SideBarLayout
-        aside={<Aside />}
         topBanner={<BetaHeader />}
         breadcrumbs={<BreadCrumbs />}
         location={innerLocation}

packages/apps/dev-wallet/src/Components/AccountInput/AccountInput.tsx

@@ -61,6 +61,7 @@ export function AccountInput({
         />
       )}
       <TextField
+        aria-label="Account"
         startVisual={
           <Stack gap={'sm'}>
             <MonoAccountBalanceWallet />
@@ -90,7 +91,6 @@ export function AccountInput({
               contract,
               (key) => key,
             );
-            console.log(accounts);
             setDiscovering(false);
             if (accounts.length > 1) {
               setDiscoveredAccounts(accounts);

packages/apps/dev-wallet/src/Components/Assets/AddToken.tsx → packages/apps/dev-wallet/src/Components/Assets/AddTokenForm.tsx

@@ -3,7 +3,13 @@ import { useWallet } from '@/modules/wallet/wallet.hook';
 import { queryAllChainsClient } from '@kadena/client-utils/core';
 import { composePactCommand, execution } from '@kadena/client/fp';
 import { Button, Notification, Stack, TextField } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import {
+  RightAside,
+  RightAsideContent,
+  RightAsideFooter,
+  RightAsideHeader,
+  useLayout,
+} from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
@@ -12,7 +18,7 @@ interface TokenForm {
   symbol: string;
 }
 
-export function AddToken() {
+export function AddTokenForm({ isOpen }: { isOpen: boolean }) {
   const { register, handleSubmit } = useForm<TokenForm>({
     defaultValues: {
       contract: '',
@@ -21,7 +27,7 @@ export function AddToken() {
   });
 
   const { activeNetwork } = useWallet();
-  const { handleSetAsideExpanded } = useLayout();
+  const { setIsRightAsideExpanded } = useLayout();
   const [error, setError] = useState<string | null>(null);
 
   async function onSubmit(data: TokenForm) {
@@ -57,25 +63,42 @@ export function AddToken() {
       } as const;
 
       await accountRepository.addFungible(token);
-      handleSetAsideExpanded(false);
+      setIsRightAsideExpanded(false);
     } catch (e: any) {
       setError(e?.message || e);
     }
   }
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Stack flexDirection={'column'} gap={'md'}>
-        <TextField
-          label="SmartContract"
-          {...register('contract', { required: true })}
-        />
-        <TextField label="Symbol" {...register('symbol', { required: true })} />
-        {error && <Notification role="alert">{error}</Notification>}
-        <Stack width="100%" justifyContent="flex-end" gap="md">
+    <RightAside isOpen={isOpen}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <RightAsideHeader label="Add New Asset" />
+        <RightAsideContent>
+          <Stack width="100%" flexDirection="column" gap="md">
+            <TextField
+              label="SmartContract"
+              {...register('contract', { required: true })}
+            />
+            <TextField
+              label="Symbol"
+              {...register('symbol', { required: true })}
+            />
+            {error && <Notification role="alert">{error}</Notification>}
+          </Stack>
+        </RightAsideContent>
+        <RightAsideFooter>
+          <Button
+            variant="outlined"
+            onPress={() => {
+              setIsRightAsideExpanded(false);
+            }}
+            type="reset"
+          >
+            Cancel
+          </Button>
           <Button type="submit">Add Token</Button>
-        </Stack>
-      </Stack>
-    </form>
+        </RightAsideFooter>
+      </form>
+    </RightAside>
   );
 }