From 6339ff4628ae22e9f91541ced9c5f6cc6899a9fe Mon Sep 17 00:00:00 2001
From: Bram Borggreve <beeman@beeman.nl>
Date: Tue, 16 Jan 2024 08:06:45 +0000
Subject: [PATCH 1/3] feat: add dashboard grid

---
 .../app/features/dashboard/dashboard-feature.tsx   | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/features/dashboard/dashboard-feature.tsx b/apps/web/src/app/features/dashboard/dashboard-feature.tsx
index 46d6d5e..af27d6c 100644
--- a/apps/web/src/app/features/dashboard/dashboard-feature.tsx
+++ b/apps/web/src/app/features/dashboard/dashboard-feature.tsx
@@ -1,11 +1,17 @@
-import { UiCard, UiContainer } from '@pubkey-ui/core'
+import { UiContainer, UiDashboardGrid } from '@pubkey-ui/core'
+import { IconApps, IconBug, IconListDetails, IconServer } from '@tabler/icons-react'
 
 export function DashboardFeature() {
   return (
     <UiContainer>
-      <UiCard title="Dashboard">
-        <div>GM</div>
-      </UiCard>
+      <UiDashboardGrid
+        links={[
+          { to: '/account', label: 'Account', icon: IconListDetails },
+          { to: '/clusters', label: 'Clusters', icon: IconServer },
+          { to: '/demo', label: 'Demo', icon: IconApps },
+          { to: '/dev', label: 'Dev', icon: IconBug },
+        ]}
+      />
     </UiContainer>
   )
 }

From 77dd990682ea6d0425141812018f14b2a76a8a30 Mon Sep 17 00:00:00 2001
From: Bram Borggreve <beeman@beeman.nl>
Date: Fri, 19 Jan 2024 23:41:13 +0000
Subject: [PATCH 2/3] feat: add keypairs sections

---
 apps/web/src/app/app-layout.tsx               |  3 +-
 apps/web/src/app/app-routes.tsx               |  4 +-
 apps/web/src/app/app.tsx                      | 17 ++--
 .../features/dashboard/dashboard-feature.tsx  |  3 +-
 .../features/keypair/keypair-data-access.tsx  | 86 +++++++++++++++++++
 .../app/features/keypair/keypair-feature.tsx  | 24 ++++++
 .../src/app/features/keypair/keypair-ui.tsx   | 86 +++++++++++++++++++
 .../core/src/lib/ui-form/ui-form-field.ts     |  1 +
 .../core/src/lib/ui-form/ui-form-select.tsx   |  2 +-
 packages/core/src/lib/ui-form/ui-form.tsx     |  1 +
 10 files changed, 216 insertions(+), 11 deletions(-)
 create mode 100644 apps/web/src/app/features/keypair/keypair-data-access.tsx
 create mode 100644 apps/web/src/app/features/keypair/keypair-feature.tsx
 create mode 100644 apps/web/src/app/features/keypair/keypair-ui.tsx

diff --git a/apps/web/src/app/app-layout.tsx b/apps/web/src/app/app-layout.tsx
index 9a40718..6b9dbe3 100644
--- a/apps/web/src/app/app-layout.tsx
+++ b/apps/web/src/app/app-layout.tsx
@@ -17,7 +17,8 @@ export function AppLayout({ children }: { children: ReactNode }) {
           links={[
             { label: 'Dashboard', link: '/dashboard' },
             { label: 'Account', link: '/account' },
-            { label: 'Demo', link: '/demo' },
+            { label: 'Clusters', link: '/clusters' },
+            { label: 'UI Demo', link: '/ui-demo' },
             { label: 'Dev', link: '/dev' },
           ]}
           profile={
diff --git a/apps/web/src/app/app-routes.tsx b/apps/web/src/app/app-routes.tsx
index a810ba6..13c115e 100644
--- a/apps/web/src/app/app-routes.tsx
+++ b/apps/web/src/app/app-routes.tsx
@@ -8,6 +8,7 @@ import { DevFeature } from './features/dev/dev-feature'
 const AccountList = lazy(() => import('./features/account/account-list-feature'))
 const AccountDetail = lazy(() => import('./features/account/account-detail-feature'))
 const ClusterFeature = lazy(() => import('./features/cluster/cluster-feature'))
+const KeypairFeature = lazy(() => import('./features/keypair/keypair-feature'))
 
 const routes: RouteObject[] = [
   { path: '/', element: <Navigate to="/dashboard" replace /> },
@@ -15,8 +16,9 @@ const routes: RouteObject[] = [
   { path: '/account/:address', element: <AccountDetail /> },
   { path: '/clusters', element: <ClusterFeature /> },
   { path: '/dashboard', element: <DashboardFeature /> },
-  { path: '/demo/*', element: <DemoFeature /> },
+  { path: '/ui-demo/*', element: <DemoFeature /> },
   { path: '/dev', element: <DevFeature /> },
+  { path: '/keypairs', element: <KeypairFeature /> },
   { path: '*', element: <UiNotFound /> },
 ]
 
diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index 543aa3b..ce5e98e 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -4,6 +4,7 @@ import { AppLayout } from './app-layout'
 import { AppRoutes, ThemeLink } from './app-routes'
 import { ClusterProvider } from './features/cluster/cluster-data-access'
 import { SolanaProvider } from './features/solana/solana-provider'
+import { KeypairProvider } from './features/keypair/keypair-data-access'
 
 const client = new QueryClient()
 
@@ -11,13 +12,15 @@ export function App() {
   return (
     <QueryClientProvider client={client}>
       <UiThemeProvider link={ThemeLink}>
-        <ClusterProvider>
-          <SolanaProvider>
-            <AppLayout>
-              <AppRoutes />
-            </AppLayout>
-          </SolanaProvider>
-        </ClusterProvider>
+        <KeypairProvider>
+          <ClusterProvider>
+            <SolanaProvider>
+              <AppLayout>
+                <AppRoutes />
+              </AppLayout>
+            </SolanaProvider>
+          </ClusterProvider>
+        </KeypairProvider>
       </UiThemeProvider>
     </QueryClientProvider>
   )
diff --git a/apps/web/src/app/features/dashboard/dashboard-feature.tsx b/apps/web/src/app/features/dashboard/dashboard-feature.tsx
index af27d6c..cfc1be2 100644
--- a/apps/web/src/app/features/dashboard/dashboard-feature.tsx
+++ b/apps/web/src/app/features/dashboard/dashboard-feature.tsx
@@ -1,5 +1,5 @@
 import { UiContainer, UiDashboardGrid } from '@pubkey-ui/core'
-import { IconApps, IconBug, IconListDetails, IconServer } from '@tabler/icons-react'
+import { IconApps, IconBug, IconKey, IconListDetails, IconServer } from '@tabler/icons-react'
 
 export function DashboardFeature() {
   return (
@@ -10,6 +10,7 @@ export function DashboardFeature() {
           { to: '/clusters', label: 'Clusters', icon: IconServer },
           { to: '/demo', label: 'Demo', icon: IconApps },
           { to: '/dev', label: 'Dev', icon: IconBug },
+          { to: '/keypairs', label: 'Keypairs', icon: IconKey },
         ]}
       />
     </UiContainer>
diff --git a/apps/web/src/app/features/keypair/keypair-data-access.tsx b/apps/web/src/app/features/keypair/keypair-data-access.tsx
new file mode 100644
index 0000000..48295a5
--- /dev/null
+++ b/apps/web/src/app/features/keypair/keypair-data-access.tsx
@@ -0,0 +1,86 @@
+import { Keypair as SolanaKeypair } from '@solana/web3.js'
+import { atom, useAtomValue, useSetAtom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+import { createContext, ReactNode, useContext } from 'react'
+import { ellipsify } from '../account/account-ui'
+
+export interface Keypair {
+  name: string
+  publicKey: string
+  secretKey: string
+  active?: boolean
+  solana?: SolanaKeypair
+}
+
+export const defaultKeypairs: Keypair[] = []
+
+const keypairAtom = atomWithStorage<Keypair>('solana-keypair', defaultKeypairs[0])
+const keypairsAtom = atomWithStorage<Keypair[]>('solana-keypairs', defaultKeypairs)
+
+const activeKeypairsAtom = atom<Keypair[]>((get) => {
+  const keypairs = get(keypairsAtom)
+  const keypair = get(keypairAtom)
+  return keypairs.map((item) => ({
+    ...item,
+    active: item?.name === keypair?.name,
+  }))
+})
+
+const activeKeypairAtom = atom<Keypair>((get) => {
+  const keypairs = get(activeKeypairsAtom)
+
+  return keypairs.find((item) => item.active) || keypairs[0]
+})
+
+export interface KeypairProviderContext {
+  keypair: Keypair
+  keypairs: Keypair[]
+  addKeypair: (keypair: Keypair) => void
+  deleteKeypair: (keypair: Keypair) => void
+  setKeypair: (keypair: Keypair) => void
+  generateKeypair: () => void
+}
+
+const Context = createContext<KeypairProviderContext>({} as KeypairProviderContext)
+
+export function KeypairProvider({ children }: { children: ReactNode }) {
+  const keypair = useAtomValue(activeKeypairAtom)
+  const keypairs = useAtomValue(activeKeypairsAtom)
+  const setKeypair = useSetAtom(keypairAtom)
+  const setKeypairs = useSetAtom(keypairsAtom)
+
+  function addNewKeypair(kp: SolanaKeypair) {
+    const keypair: Keypair = {
+      name: ellipsify(kp.publicKey.toString()),
+      publicKey: kp.publicKey.toString(),
+      secretKey: `[${kp.secretKey.join(',')}]`,
+    }
+    setKeypairs([...keypairs, keypair])
+    if (!keypairs.length) {
+      activateKeypair(keypair)
+    }
+  }
+
+  function activateKeypair(keypair: Keypair) {
+    const kp = SolanaKeypair.fromSecretKey(new Uint8Array(JSON.parse(keypair.secretKey)))
+    setKeypair({ ...keypair, solana: kp })
+  }
+
+  const value: KeypairProviderContext = {
+    keypair,
+    keypairs: keypairs.sort((a, b) => (a.name > b.name ? 1 : -1)),
+    addKeypair: (keypair: Keypair) => {
+      setKeypairs([...keypairs, keypair])
+    },
+    deleteKeypair: (keypair: Keypair) => {
+      setKeypairs(keypairs.filter((item) => item.name !== keypair.name))
+    },
+    setKeypair: (keypair: Keypair) => activateKeypair(keypair),
+    generateKeypair: () => addNewKeypair(SolanaKeypair.generate()),
+  }
+  return <Context.Provider value={value}>{children}</Context.Provider>
+}
+
+export function useKeypair() {
+  return useContext(Context)
+}
diff --git a/apps/web/src/app/features/keypair/keypair-feature.tsx b/apps/web/src/app/features/keypair/keypair-feature.tsx
new file mode 100644
index 0000000..6be1fee
--- /dev/null
+++ b/apps/web/src/app/features/keypair/keypair-feature.tsx
@@ -0,0 +1,24 @@
+import { Button, Container, Group, Text, Title } from '@mantine/core'
+import { UiStack } from '@pubkey-ui/core'
+
+import { KeypairUiModal, KeypairUiTable } from './keypair-ui'
+import { useKeypair } from './keypair-data-access'
+
+export default function KeypairFeature() {
+  const { generateKeypair } = useKeypair()
+  return (
+    <Container py="xl" my="xl">
+      <UiStack gap="xl">
+        <UiStack align="center" gap="xl">
+          <Title order={2}>Keypairs</Title>
+          <Text>Manage and select your Solana keypairs</Text>
+          <Group>
+            <Button onClick={generateKeypair}>Generate Keypair</Button>
+            <KeypairUiModal />
+          </Group>
+        </UiStack>
+        <KeypairUiTable />
+      </UiStack>
+    </Container>
+  )
+}
diff --git a/apps/web/src/app/features/keypair/keypair-ui.tsx b/apps/web/src/app/features/keypair/keypair-ui.tsx
new file mode 100644
index 0000000..d4a805b
--- /dev/null
+++ b/apps/web/src/app/features/keypair/keypair-ui.tsx
@@ -0,0 +1,86 @@
+import { ActionIcon, Anchor, Button, Group, Modal, Table, Text, TextInput } from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
+import { IconCurrencySolana, IconTrash } from '@tabler/icons-react'
+import { useState } from 'react'
+import { useKeypair } from './keypair-data-access'
+import { UiAlert, UiDebugModal } from '@pubkey-ui/core'
+
+export function KeypairUiModal() {
+  const { addKeypair } = useKeypair()
+  const [opened, { close, open }] = useDisclosure(false)
+  const [name, setName] = useState('')
+
+  return (
+    <>
+      <Button onClick={open}>Add Keypair</Button>
+      <Modal opened={opened} onClose={close} title="Add Keypair">
+        <TextInput type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
+
+        <Button
+          onClick={() => {
+            addKeypair({ name, publicKey: '', secretKey: '' })
+            close()
+          }}
+        >
+          Save
+        </Button>
+      </Modal>
+    </>
+  )
+}
+
+export function KeypairUiTable() {
+  const { keypairs, generateKeypair, setKeypair, deleteKeypair } = useKeypair()
+
+  return keypairs.length ? (
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Name / Network / Endpoint</Table.Th>
+          <Table.Th align="center">Actions</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {keypairs?.map((item) => (
+          <Table.Tr key={item.name}>
+            <Table.Td>
+              <Text size="lg">
+                {item?.active ? (
+                  item.name
+                ) : (
+                  <Anchor component="button" title="Select keypair" onClick={() => setKeypair(item)}>
+                    {item.name}
+                  </Anchor>
+                )}
+              </Text>
+              <Text c="dimmed" size="xs">
+                {item.publicKey}
+              </Text>
+            </Table.Td>
+            <Table.Td>
+              <Group gap="xs">
+                <ActionIcon disabled={!item.solana} size="sm" variant="light">
+                  <IconCurrencySolana />
+                </ActionIcon>
+                <UiDebugModal data={item} />
+                <ActionIcon
+                  size="sm"
+                  variant="light"
+                  disabled={item.active}
+                  onClick={() => {
+                    if (!window.confirm('Are you sure?')) return
+                    deleteKeypair(item)
+                  }}
+                >
+                  <IconTrash size={16} />
+                </ActionIcon>
+              </Group>
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
+  ) : (
+    <UiAlert title="No keypairs found" message={<Button onClick={() => generateKeypair()}>Generate Keypair</Button>} />
+  )
+}
diff --git a/packages/core/src/lib/ui-form/ui-form-field.ts b/packages/core/src/lib/ui-form/ui-form-field.ts
index 0fd286e..8b553cf 100644
--- a/packages/core/src/lib/ui-form/ui-form-field.ts
+++ b/packages/core/src/lib/ui-form/ui-form-field.ts
@@ -16,6 +16,7 @@ export interface UiFormField<T> {
   placeholder?: string
   required?: boolean
   readOnly?: boolean
+  multiple?: boolean
   disabled?: boolean
   rows?: number
   type: UiFormFieldType
diff --git a/packages/core/src/lib/ui-form/ui-form-select.tsx b/packages/core/src/lib/ui-form/ui-form-select.tsx
index cc0fbe9..194e319 100644
--- a/packages/core/src/lib/ui-form/ui-form-select.tsx
+++ b/packages/core/src/lib/ui-form/ui-form-select.tsx
@@ -1,6 +1,6 @@
 import { UiFormField, UiFormFieldType } from './ui-form-field'
 
-export type UiFormSelect<T> = Omit<UiFormField<T>, 'key' | 'rows' | 'type'>
+export type UiFormSelect<T> = Omit<UiFormField<T>, 'key' | 'rows' | 'type'> & { multiple?: boolean }
 
 export function formFieldSelect<T>(key: keyof T, options: UiFormSelect<T>): UiFormField<T> {
   return {
diff --git a/packages/core/src/lib/ui-form/ui-form.tsx b/packages/core/src/lib/ui-form/ui-form.tsx
index 90ffba5..64759e3 100644
--- a/packages/core/src/lib/ui-form/ui-form.tsx
+++ b/packages/core/src/lib/ui-form/ui-form.tsx
@@ -134,6 +134,7 @@ export function UiForm<T>({
                   key={field.key?.toString()}
                   description={field.description}
                   label={field.label}
+                  multiple={field.multiple}
                   placeholder={field.placeholder ?? field.label}
                   required={field.required}
                   data={field.options ?? []}

From d2865eec5dccfe81940517b8481fe723cffa445e Mon Sep 17 00:00:00 2001
From: Bram Borggreve <beeman@beeman.nl>
Date: Sat, 20 Jan 2024 01:14:36 +0000
Subject: [PATCH 3/3] feat: add Solana section

---
 apps/web/src/app/app-layout.tsx               |  1 +
 apps/web/src/app/app-routes.tsx               |  2 +
 .../features/cluster/cluster-data-access.tsx  |  2 +-
 .../src/app/features/cluster/cluster-ui.tsx   |  6 ++-
 .../solana/solana-account-info-feature.tsx    | 17 +++++++
 .../solana/solana-create-token-feature.tsx    |  9 ++++
 .../features/solana/solana-data-access.tsx    | 20 ++++++++
 .../app/features/solana/solana-feature.tsx    | 18 +++++++
 .../solana/ui/solana-ui-account-info.tsx      | 18 +++++++
 .../solana/ui/solana-ui-address-input.tsx     | 50 +++++++++++++++++++
 .../solana/ui/solana-ui-get-account-info.tsx  | 21 ++++++++
 .../solana/ui/solana-ui-sol-price.tsx         |  5 ++
 apps/web/src/app/ui-x/index.ts                |  2 +
 apps/web/src/app/ui-x/ui-page.tsx             | 34 -------------
 14 files changed, 169 insertions(+), 36 deletions(-)
 create mode 100644 apps/web/src/app/features/solana/solana-account-info-feature.tsx
 create mode 100644 apps/web/src/app/features/solana/solana-create-token-feature.tsx
 create mode 100644 apps/web/src/app/features/solana/solana-data-access.tsx
 create mode 100644 apps/web/src/app/features/solana/solana-feature.tsx
 create mode 100644 apps/web/src/app/features/solana/ui/solana-ui-account-info.tsx
 create mode 100644 apps/web/src/app/features/solana/ui/solana-ui-address-input.tsx
 create mode 100644 apps/web/src/app/features/solana/ui/solana-ui-get-account-info.tsx
 create mode 100644 apps/web/src/app/features/solana/ui/solana-ui-sol-price.tsx
 create mode 100644 apps/web/src/app/ui-x/index.ts
 delete mode 100644 apps/web/src/app/ui-x/ui-page.tsx

diff --git a/apps/web/src/app/app-layout.tsx b/apps/web/src/app/app-layout.tsx
index 6b9dbe3..20f42ac 100644
--- a/apps/web/src/app/app-layout.tsx
+++ b/apps/web/src/app/app-layout.tsx
@@ -18,6 +18,7 @@ export function AppLayout({ children }: { children: ReactNode }) {
             { label: 'Dashboard', link: '/dashboard' },
             { label: 'Account', link: '/account' },
             { label: 'Clusters', link: '/clusters' },
+            { label: 'Solana', link: '/solana' },
             { label: 'UI Demo', link: '/ui-demo' },
             { label: 'Dev', link: '/dev' },
           ]}
diff --git a/apps/web/src/app/app-routes.tsx b/apps/web/src/app/app-routes.tsx
index 13c115e..f630ddb 100644
--- a/apps/web/src/app/app-routes.tsx
+++ b/apps/web/src/app/app-routes.tsx
@@ -9,6 +9,7 @@ const AccountList = lazy(() => import('./features/account/account-list-feature')
 const AccountDetail = lazy(() => import('./features/account/account-detail-feature'))
 const ClusterFeature = lazy(() => import('./features/cluster/cluster-feature'))
 const KeypairFeature = lazy(() => import('./features/keypair/keypair-feature'))
+const SolanaFeature = lazy(() => import('./features/solana/solana-feature'))
 
 const routes: RouteObject[] = [
   { path: '/', element: <Navigate to="/dashboard" replace /> },
@@ -16,6 +17,7 @@ const routes: RouteObject[] = [
   { path: '/account/:address', element: <AccountDetail /> },
   { path: '/clusters', element: <ClusterFeature /> },
   { path: '/dashboard', element: <DashboardFeature /> },
+  { path: '/solana/*', element: <SolanaFeature /> },
   { path: '/ui-demo/*', element: <DemoFeature /> },
   { path: '/dev', element: <DevFeature /> },
   { path: '/keypairs', element: <KeypairFeature /> },
diff --git a/apps/web/src/app/features/cluster/cluster-data-access.tsx b/apps/web/src/app/features/cluster/cluster-data-access.tsx
index 8ffb3ad..ae41b3b 100644
--- a/apps/web/src/app/features/cluster/cluster-data-access.tsx
+++ b/apps/web/src/app/features/cluster/cluster-data-access.tsx
@@ -89,7 +89,7 @@ export function ClusterProvider({ children }: { children: ReactNode }) {
       setClusters(clusters.filter((item) => item.name !== cluster.name))
     },
     setCluster: (cluster: Cluster) => setCluster(cluster),
-    getExplorerUrl: (path: string) => `https://explorer.solana.com/${path}${getClusterUrlParam(cluster)}`,
+    getExplorerUrl: (path: string) => `https://solana.fm/${path}${getClusterUrlParam(cluster)}`,
   }
   return <Context.Provider value={value}>{children}</Context.Provider>
 }
diff --git a/apps/web/src/app/features/cluster/cluster-ui.tsx b/apps/web/src/app/features/cluster/cluster-ui.tsx
index 24b54b7..2adfda4 100644
--- a/apps/web/src/app/features/cluster/cluster-ui.tsx
+++ b/apps/web/src/app/features/cluster/cluster-ui.tsx
@@ -8,7 +8,11 @@ import { ReactNode, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { ClusterNetwork, useCluster } from './cluster-data-access'
 
-export function ExplorerLink({ path, label, ...props }: { path: string; label: string } & AnchorProps) {
+export function ExplorerLink({
+  path,
+  label = 'View on Explorer',
+  ...props
+}: { path: string; label?: string } & AnchorProps) {
   const { getExplorerUrl } = useCluster()
   return (
     <Anchor href={getExplorerUrl(path)} target="_blank" rel="noopener noreferrer" {...props}>
diff --git a/apps/web/src/app/features/solana/solana-account-info-feature.tsx b/apps/web/src/app/features/solana/solana-account-info-feature.tsx
new file mode 100644
index 0000000..a42c06f
--- /dev/null
+++ b/apps/web/src/app/features/solana/solana-account-info-feature.tsx
@@ -0,0 +1,17 @@
+import { useState } from 'react'
+import { UiCard, UiStack } from '@pubkey-ui/core'
+import { SolanaUiAddressInput } from './ui/solana-ui-address-input'
+import { SolanaUiGetAccountInfo } from './ui/solana-ui-get-account-info'
+
+export function SolanaAccountInfoFeature() {
+  const [address, setAddress] = useState('')
+
+  return (
+    <UiCard>
+      <UiStack>
+        <SolanaUiAddressInput address={address} setAddress={setAddress} />
+        {address?.length ? <SolanaUiGetAccountInfo address={address} /> : null}
+      </UiStack>
+    </UiCard>
+  )
+}
diff --git a/apps/web/src/app/features/solana/solana-create-token-feature.tsx b/apps/web/src/app/features/solana/solana-create-token-feature.tsx
new file mode 100644
index 0000000..dc94c45
--- /dev/null
+++ b/apps/web/src/app/features/solana/solana-create-token-feature.tsx
@@ -0,0 +1,9 @@
+import { UiCard } from '@pubkey-ui/core'
+
+export function SolanaCreateTokenFeature() {
+  return (
+    <UiCard title="Create Token">
+      <div>Token</div>
+    </UiCard>
+  )
+}
diff --git a/apps/web/src/app/features/solana/solana-data-access.tsx b/apps/web/src/app/features/solana/solana-data-access.tsx
new file mode 100644
index 0000000..0beaa70
--- /dev/null
+++ b/apps/web/src/app/features/solana/solana-data-access.tsx
@@ -0,0 +1,20 @@
+import { PublicKey } from '@solana/web3.js'
+import { useConnection } from '@solana/wallet-adapter-react'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+
+export function useSolanaQueries({ address }: { address: string }) {
+  const { connection } = useConnection()
+  const publicKey = useMemo(() => new PublicKey(address), [address])
+
+  return {
+    getAccountInfo: {
+      queryKey: ['getAccountInfo', { endpoint: connection?.rpcEndpoint, publicKey }],
+      queryFn: () => connection.getParsedAccountInfo(publicKey),
+    },
+  }
+}
+
+export function useSolanaGetAccountInfo({ address }: { address: string }) {
+  return useQuery(useSolanaQueries({ address }).getAccountInfo)
+}
diff --git a/apps/web/src/app/features/solana/solana-feature.tsx b/apps/web/src/app/features/solana/solana-feature.tsx
new file mode 100644
index 0000000..3fcfb6c
--- /dev/null
+++ b/apps/web/src/app/features/solana/solana-feature.tsx
@@ -0,0 +1,18 @@
+import { UiGridRoutes, UiPage } from '@pubkey-ui/core'
+import { ClusterUiSelect } from '../cluster/cluster-ui'
+import { SolanaAccountInfoFeature } from './solana-account-info-feature'
+import { SolanaCreateTokenFeature } from './solana-create-token-feature'
+
+export default function SolanaFeature() {
+  return (
+    <UiPage title="Solana" rightAction={<ClusterUiSelect />}>
+      <UiGridRoutes
+        basePath="/solana"
+        routes={[
+          { label: 'Account Info', path: 'account-info', element: <SolanaAccountInfoFeature /> },
+          { label: 'Create Token', path: 'create-token', element: <SolanaCreateTokenFeature /> },
+        ]}
+      />
+    </UiPage>
+  )
+}
diff --git a/apps/web/src/app/features/solana/ui/solana-ui-account-info.tsx b/apps/web/src/app/features/solana/ui/solana-ui-account-info.tsx
new file mode 100644
index 0000000..856e68d
--- /dev/null
+++ b/apps/web/src/app/features/solana/ui/solana-ui-account-info.tsx
@@ -0,0 +1,18 @@
+import { AccountInfo, ParsedAccountData } from '@solana/web3.js'
+import { UiDebugModal, UiGroup } from '@pubkey-ui/core'
+import { Group, Text } from '@mantine/core'
+import { SolanaUiSolPrice } from './solana-ui-sol-price'
+
+export function SolanaUiAccountInfo({ data }: { data?: AccountInfo<Buffer | ParsedAccountData> | null }) {
+  return (
+    <UiGroup>
+      <Group>
+        <Text size="xs" c="dimmed">
+          <SolanaUiSolPrice lamports={data?.lamports} /> SOL
+        </Text>
+      </Group>
+
+      <UiDebugModal data={data} />
+    </UiGroup>
+  )
+}
diff --git a/apps/web/src/app/features/solana/ui/solana-ui-address-input.tsx b/apps/web/src/app/features/solana/ui/solana-ui-address-input.tsx
new file mode 100644
index 0000000..d462f99
--- /dev/null
+++ b/apps/web/src/app/features/solana/ui/solana-ui-address-input.tsx
@@ -0,0 +1,50 @@
+import { ActionIcon, Text, TextInput, TextInputProps } from '@mantine/core'
+import { useForm } from '@mantine/form'
+import { PublicKey } from '@solana/web3.js'
+import { IconCurrencySolana, IconSearch } from '@tabler/icons-react'
+
+export function SolanaUiAddressInput({
+  address,
+  setAddress,
+  ...props
+}: TextInputProps & {
+  address: string
+  setAddress: (address: string) => void
+}) {
+  const form = useForm({
+    initialValues: { address },
+    validate: {
+      address: validateSolanaPublicKey,
+    },
+  })
+
+  return (
+    <form onSubmit={form.onSubmit(({ address }) => setAddress(address))}>
+      <TextInput
+        withAsterisk
+        label="Address"
+        placeholder="Enter Solana address (base58)"
+        leftSection={
+          <Text c="dimmed" display="flex">
+            <IconCurrencySolana />
+          </Text>
+        }
+        rightSection={
+          <ActionIcon disabled={!form.isDirty()} type="submit" color="brand" mr={0}>
+            <IconSearch size={16} />
+          </ActionIcon>
+        }
+        {...props}
+        {...form.getInputProps('address')}
+      />
+    </form>
+  )
+}
+
+function validateSolanaPublicKey(value: string) {
+  try {
+    new PublicKey(value)
+  } catch (e) {
+    return 'Invalid public key'
+  }
+}
diff --git a/apps/web/src/app/features/solana/ui/solana-ui-get-account-info.tsx b/apps/web/src/app/features/solana/ui/solana-ui-get-account-info.tsx
new file mode 100644
index 0000000..c870be5
--- /dev/null
+++ b/apps/web/src/app/features/solana/ui/solana-ui-get-account-info.tsx
@@ -0,0 +1,21 @@
+import { useSolanaGetAccountInfo } from '../solana-data-access'
+import { UiLoader, UiWarning } from '@pubkey-ui/core'
+import { Stack } from '@mantine/core'
+import { ExplorerLink } from '../../cluster/cluster-ui'
+
+import { SolanaUiAccountInfo } from './solana-ui-account-info'
+
+export function SolanaUiGetAccountInfo({ address }: { address: string }) {
+  const query = useSolanaGetAccountInfo({ address })
+
+  return query.isLoading ? (
+    <UiLoader />
+  ) : query.data?.value ? (
+    <Stack gap={0}>
+      <SolanaUiAccountInfo data={query.data.value} />
+      <ExplorerLink size="xs" c="brand" path={`address/${address}`} />
+    </Stack>
+  ) : (
+    <UiWarning message={`No data for address ${address}`} />
+  )
+}
diff --git a/apps/web/src/app/features/solana/ui/solana-ui-sol-price.tsx b/apps/web/src/app/features/solana/ui/solana-ui-sol-price.tsx
new file mode 100644
index 0000000..ed42839
--- /dev/null
+++ b/apps/web/src/app/features/solana/ui/solana-ui-sol-price.tsx
@@ -0,0 +1,5 @@
+import { LAMPORTS_PER_SOL } from '@solana/web3.js'
+
+export function SolanaUiSolPrice({ lamports = 0 }: { lamports?: number }) {
+  return Math.round(lamports / LAMPORTS_PER_SOL) / 1000
+}
diff --git a/apps/web/src/app/ui-x/index.ts b/apps/web/src/app/ui-x/index.ts
new file mode 100644
index 0000000..e3ea7b4
--- /dev/null
+++ b/apps/web/src/app/ui-x/index.ts
@@ -0,0 +1,2 @@
+export const solanaPurple = '#9945FF'
+export const solanaGreen = '#14F195'
diff --git a/apps/web/src/app/ui-x/ui-page.tsx b/apps/web/src/app/ui-x/ui-page.tsx
deleted file mode 100644
index fe1972e..0000000
--- a/apps/web/src/app/ui-x/ui-page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Box, Group, Title } from '@mantine/core'
-import { UiContainer, UiGroup, UiStack } from '@pubkey-ui/core'
-import { ReactNode } from 'react'
-
-export function UiPage({
-  children,
-  leftAction,
-  rightAction,
-  title,
-}: {
-  children: ReactNode
-  leftAction?: ReactNode
-  rightAction?: ReactNode
-  title?: ReactNode
-}) {
-  return (
-    <UiContainer>
-      <UiStack>
-        <Box>
-          <UiGroup>
-            <Group>
-              {leftAction ? leftAction : null}
-              <Title order={2}>{title ?? ''}</Title>
-            </Group>
-            {rightAction ? <Group>{rightAction}</Group> : null}
-          </UiGroup>
-        </Box>
-        <UiStack my="xs" gap="xl">
-          {children}
-        </UiStack>
-      </UiStack>
-    </UiContainer>
-  )
-}