feat: implement create persona feature (#13)

* feat: add viem package

* feat: mvp for create persona feature

* fix: signer address overflows card & formatter fix

* build: fix lib/account build issues

* refactor: factor sidebar into multiple components, split messages & queries

* chore: fix wack bottom bar resize behavior & code formatting

---------

Co-authored-by: Ryan Martin <rmrt1n@users.noreply.github.com>

package.json

@@ -11,6 +11,7 @@
     "format": "prettier --ignore-path .gitignore --ignore-path 'src/routeTree.gen.ts' --write ."
   },
   "dependencies": {
+    "@noble/curves": "^1.4.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
@@ -28,7 +29,8 @@
     "react-dom": "^18.2.0",
     "react-resizable-panels": "^2.0.11",
     "tailwind-merge": "^2.2.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "viem": "^2.7.20"
   },
   "devDependencies": {
     "@tanstack/router-vite-plugin": "^1.16.5",

src/components/bottom-bar.tsx

@@ -21,13 +21,13 @@ export function BottomBar() {
   const handleExpand = () => {
     const panel = ref.current
     if (panel) {
-      setCollapsed(!(panel.getSize() >= 65))
+      setCollapsed(panel.getSize() <= 3)
     }
   }
   const expandBottomBar = () => {
     const panel = ref.current
     if (panel) {
-      panel.resize(panel.getSize() >= 65 ? 3 : 65)
+      panel.resize(panel.getSize() > 3 ? 3 : 65)
     }
   }
 

src/components/entity-group-sheets.tsx

@@ -40,7 +40,10 @@ import { worldQueryOptions } from '@/lib/query-options'
 import { Entity, WorldField } from '@/lib/types'
 
 const sampleEntity = (selected: string[], components: WorldField[]): Entity => {
-  const componentsMap: { [key: string]: string } = components.reduce((acc, c) => ({ ...acc, [c.name]: c.fields }), {})
+  const componentsMap: { [key: string]: string } = components.reduce(
+    (acc, c) => ({ ...acc, [c.name]: c.fields }),
+    {},
+  )
   return {
     id: 0,
     components: selected.reduce((acc, c) => ({ ...acc, [c]: componentsMap[c] }), {}),
@@ -67,6 +70,7 @@ export function NewEntityGroupSheet() {
     if (entityGroupName.length === 0) {
       e.preventDefault()
       setEntityGroupError('Please enter a name for the entity group')
+      return
     }
     if (selected.length === 0) {
       e.preventDefault()
@@ -128,7 +132,9 @@ export function NewEntityGroupSheet() {
                 <AccordionItem value="default" className="border-0 space-y-2">
                   <AccordionTrigger className="py-2 text-sm">Sample entities</AccordionTrigger>
                   <AccordionContent>
-                    {hasSelectedComponents && <EntityCard entity={sampleEntity(selected, components)} />}
+                    {hasSelectedComponents && (
+                      <EntityCard entity={sampleEntity(selected, components)} />
+                    )}
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>
@@ -242,7 +248,9 @@ export function EditEntityGroupSheet({ entityGroup }: EditEntityGroupProps) {
                 <AccordionItem value="default" className="border-0 space-y-2">
                   <AccordionTrigger className="py-2 text-sm">Sample entities</AccordionTrigger>
                   <AccordionContent>
-                    {hasSelectedComponents && <EntityCard entity={sampleEntity(selected, components)} />}
+                    {hasSelectedComponents && (
+                      <EntityCard entity={sampleEntity(selected, components)} />
+                    )}
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>

src/components/entity-views.tsx

@@ -98,7 +98,7 @@ function ComponentDetails({ name, component }: ComponentDetailsProps) {
       </summary>
       <div>
         {attributes.map((attr) => (
-          <p key={attr} className="ml-3 text-muted-foreground font-medium">
+          <p key={attr} className="ml-3 text-muted-foreground font-medium break-all">
             {attr}: {formatAttribute(component[attr])}
           </p>
         ))}