feat: #51: sync UI package (#57)

* feat(ui): sync with penumbra-zone/ui

* ui package imports

* fix(ui): move penumbra packages to dev dependencies

* fix(ui): don't export components directory from UI

* feat(ui): #1336: start separating ui components

* feat(ui): #1336: Put all components in directories

* fix(ui): linting and tests

* chore: add changesets

* fix: put the repo/ui package name back

* fix: after the merge

---------

Co-Authored-By: Tal Derei <[email protected]>

* feat(ui): #51: remove unused components and their dependencies

* chore: changeset

* fix: update pnpm lock

* fix: forgotten update

* fix: one-way-swap

---------

Co-authored-by: Tal Derei <[email protected]>

.changeset/fuzzy-games-care.md

@@ -0,0 +1,6 @@
+---
+'@repo/ui': major
+'chrome-extension': patch
+---
+
+Refactor UI package: sync it with the penumbra-zone/ui and remove unused components

apps/extension/src/routes/page/onboarding/confirm-backup.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button } from '@repo/ui/components/ui/button';
-import { BackIcon } from '@repo/ui/components/ui/back-icon';
+import { BackIcon } from '@repo/ui/components/ui/icons/back-icon';
 import {
   Card,
   CardContent,

apps/extension/src/routes/page/onboarding/generate.tsx

@@ -2,7 +2,7 @@ import { ExclamationTriangleIcon, LockClosedIcon } from '@radix-ui/react-icons';
 import { SeedPhraseLength } from '@penumbra-zone/crypto-web/mnemonic';
 import { useEffect, useState } from 'react';
 import { Button } from '@repo/ui/components/ui/button';
-import { BackIcon } from '@repo/ui/components/ui/back-icon';
+import { BackIcon } from '@repo/ui/components/ui/icons/back-icon';
 import { Card, CardContent, CardHeader, CardTitle } from '@repo/ui/components/ui/card';
 import { CopyToClipboard } from '@repo/ui/components/ui/copy-to-clipboard';
 import { FadeTransition } from '@repo/ui/components/ui/fade-transition';

apps/extension/src/routes/page/onboarding/import.tsx

@@ -1,4 +1,4 @@
-import { BackIcon } from '@repo/ui/components/ui/back-icon';
+import { BackIcon } from '@repo/ui/components/ui/icons/back-icon';
 import { Button } from '@repo/ui/components/ui/button';
 import {
   Card,

apps/extension/src/routes/page/onboarding/set-password.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, MouseEvent, useState } from 'react';
-import { BackIcon } from '@repo/ui/components/ui/back-icon';
+import { BackIcon } from '@repo/ui/components/ui/icons/back-icon';
 import { Button } from '@repo/ui/components/ui/button';
 import {
   Card,

apps/extension/src/routes/page/restore-password/set-password.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button } from '@repo/ui/components/ui/button';
-import { BackIcon } from '@repo/ui/components/ui/back-icon';
+import { BackIcon } from '@repo/ui/components/ui/icons/back-icon';
 import {
   Card,
   CardContent,

apps/extension/src/routes/popup/approval/transaction/index.tsx

@@ -1,4 +1,4 @@
-import { TransactionViewComponent } from '@repo/ui/components/ui/tx/view/transaction';
+import { TransactionViewComponent } from '@repo/ui/components/ui/tx';
 import { useStore } from '../../../../state';
 import { txApprovalSelector } from '../../../../state/tx-approval';
 import { JsonViewer } from '@repo/ui/components/ui/json-viewer';

apps/extension/src/routes/popup/home/block-sync.tsx

@@ -1,4 +1,4 @@
-import { CondensedBlockSyncStatus } from '@repo/ui/components/ui/block-sync-status/condensed';
+import { CondensedBlockSyncStatus } from '@repo/ui/components/ui/block-sync-status';
 import { useSyncProgress } from '../../../hooks/full-sync-height';
 
 export const BlockSync = () => {

apps/extension/src/routes/popup/home/index.tsx

@@ -1,4 +1,4 @@
-import { SelectAccount } from '@repo/ui/components/ui/select-account';
+import { SelectAccount } from '@repo/ui/components/ui/select';
 import { IndexHeader } from './index-header';
 import { useStore } from '../../../state';
 import { BlockSync } from './block-sync';

apps/extension/src/routes/popup/settings/settings-screen/settings-header.tsx

@@ -1,4 +1,4 @@
-import { BackIcon } from '@repo/ui/components/ui/back-icon';
+import { BackIcon } from '@repo/ui/components/ui/icons/back-icon';
 import { usePopupNav } from '../../../../utils/navigate';
 
 export const SettingsHeader = ({ title }: { title: string }) => {

apps/extension/src/shared/components/default-frontend-form/index.tsx

@@ -1,4 +1,4 @@
-import { SelectList } from '@repo/ui/components/ui/select-list';
+import { SelectList } from '@repo/ui/components/ui/select';
 import { ChainRegistryClient } from '@penumbra-labs/registry';
 import { AllSlices } from '../../../state';
 import { useStoreShallow } from '../../../utils/use-store-shallow';

apps/extension/src/shared/components/default-frontend-form/new-frontend-input.tsx

@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { SelectList } from '@repo/ui/components/ui/select-list';
+import { SelectList } from '@repo/ui/components/ui/select';
 import { cn } from '@repo/ui/lib/utils';
 import { isValidUrl } from '../../utils/is-valid-url';
 

apps/extension/src/shared/components/grpc-endpoint-form/index.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, useRef } from 'react';
-import { SelectList } from '@repo/ui/components/ui/select-list';
+import { SelectList } from '@repo/ui/components/ui/select';
 import { Button } from '@repo/ui/components/ui/button';
 import { Network, Loader2 } from 'lucide-react';
 import { useGrpcEndpointForm } from './use-grpc-endpoint-form';

apps/extension/src/shared/components/numeraires-form.tsx

@@ -3,7 +3,7 @@ import { AllSlices, useStore } from '../../state';
 import { useChainIdQuery } from '../../hooks/chain-id';
 import { useMemo, useState } from 'react';
 import { ServicesMessage } from '../../message/services';
-import { SelectList } from '@repo/ui/components/ui/select-list';
+import { SelectList } from '@repo/ui/components/ui/select';
 import { bech32mAssetId } from '@penumbra-zone/bech32m/passet';
 import { getAssetId } from '@penumbra-zone/getters/metadata';
 import { Button } from '@repo/ui/components/ui/button';

packages/ui/components/ui/account-switcher.test.tsx → packages/ui/components/ui/account-switcher/account-switcher.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { AccountSwitcher } from './account-switcher';
+import { AccountSwitcher } from '.';
 import { fireEvent, render } from '@testing-library/react';
 
 describe('<AccountSwitcher />', () => {

packages/ui/components/ui/account-switcher.tsx → packages/ui/components/ui/account-switcher/index.tsx

@@ -1,8 +1,8 @@
 import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { cn } from '../../lib/utils';
-import { Button } from './button';
-import { Input } from './input';
+import { cn } from '../../../lib/utils';
+import { Button } from '../button';
+import { Input } from '../input';
 
 const MAX_INDEX = 2 ** 32;
 

packages/ui/components/ui/address-view/address-view.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AddressViewComponent } from '.';
+import {
+  Address,
+  AddressIndex,
+  AddressView,
+  AddressView_Decoded,
+} from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
+import { addressFromBech32m } from '@penumbra-zone/bech32m/penumbra';
+
+const meta: Meta<typeof AddressViewComponent> = {
+  component: AddressViewComponent,
+  title: 'AddressViewComponent',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof AddressViewComponent>;
+
+const EXAMPLE_VIEW = new AddressView({
+  addressView: {
+    case: 'decoded',
+
+    value: new AddressView_Decoded({
+      address: new Address({ inner: new Uint8Array(80) }),
+      index: new AddressIndex({
+        account: 0,
+        randomizer: new Uint8Array([0, 0, 0]),
+      }),
+    }),
+  },
+});
+
+const EXAMPLE_VIEW_OPAQUE = new AddressView({
+  addressView: {
+    case: 'opaque',
+    value: {
+      address: addressFromBech32m(
+        'penumbra1e8k5cyds484dxvapeamwveh5khqv4jsvyvaf5wwxaaccgfghm229qw03pcar3ryy8smptevstycch0qk3uu0rgkvtjpxy3cu3rjd0agawqtlz6erev28a6sg69u7cxy0t02nd4',
+      ),
+    },
+  },
+});
+
+export const Decoded: Story = {
+  args: {
+    view: EXAMPLE_VIEW,
+  },
+};
+
+export const Copiable: Story = {
+  args: {
+    view: EXAMPLE_VIEW,
+    copyable: true,
+  },
+};
+
+export const Opaque: Story = {
+  args: {
+    view: EXAMPLE_VIEW_OPAQUE,
+  },
+};

packages/ui/components/ui/tx/view/address-view.test.tsx → packages/ui/components/ui/address-view/address-view.test.tsx

@@ -4,7 +4,7 @@ import {
   AddressView,
   AddressView_Decoded,
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
-import { AddressViewComponent } from './address-view';
+import { AddressViewComponent } from '.';
 import { describe, expect, test } from 'vitest';
 import { render } from '@testing-library/react';
 

packages/ui/components/ui/tx/view/address-view.tsx → packages/ui/components/ui/address-view/index.tsx

@@ -1,7 +1,7 @@
-import { AddressIcon } from '../../address-icon';
+import { AddressIcon } from '../address/address-icon';
 import { AddressView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
-import { CopyToClipboardIconButton } from '../../copy-to-clipboard-icon-button';
-import { AddressComponent } from '../../address-component';
+import { CopyToClipboardIconButton } from '../copy-to-clipboard/copy-to-clipboard-icon-button';
+import { AddressComponent } from '../address/address-component';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
 
 interface AddressViewProps {

packages/ui/components/ui/address-component.tsx → packages/ui/components/ui/address/address-component.tsx

@@ -1,7 +1,7 @@
 import { Address } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
 
-interface AddressComponentProps {
+export interface AddressComponentProps {
   address: Address;
   ephemeral?: boolean;
 }

packages/ui/components/ui/address-icon.tsx → packages/ui/components/ui/address/address-icon.tsx

@@ -1,8 +1,8 @@
-import { Identicon } from './identicon';
+import { Identicon } from '../identicon';
 import { Address } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
 
-interface AddressIconProps {
+export interface AddressIconProps {
   address: Address;
   size: number;
 }

packages/ui/components/ui/address/index.tsx

@@ -0,0 +1,2 @@
+export { AddressIcon, type AddressIconProps } from './address-icon';
+export { AddressComponent, type AddressComponentProps } from './address-component';

packages/ui/components/ui/asset-icon/asset-icon.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AssetIcon } from '.';
+import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
+
+const meta: Meta<typeof AssetIcon> = {
+  component: AssetIcon,
+  title: 'AssetIcon',
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof AssetIcon>;
+
+const EXAMPLE_METADATA = new Metadata({
+  base: 'upenumbra',
+  display: 'penumbra',
+  symbol: 'UM',
+  images: [
+    {
+      svg: 'https://raw.githubusercontent.com/prax-wallet/registry/main/images/um.svg',
+    },
+  ],
+});
+
+export const Small: Story = {
+  args: {
+    metadata: EXAMPLE_METADATA,
+  },
+};
+
+export const ExtraSmall: Story = {
+  args: {
+    metadata: EXAMPLE_METADATA,
+    size: 'xs',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    metadata: EXAMPLE_METADATA,
+    size: 'lg',
+  },
+};

packages/ui/components/ui/tx/view/asset-icon/index.tsx → packages/ui/components/ui/asset-icon/index.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
-import { Identicon } from '../../../identicon';
-import { cn } from '../../../../../lib/utils';
+import { Identicon } from '../identicon';
+import { cn } from '../../../lib/utils';
 import { DelegationTokenIcon } from './delegation-token-icon';
 import { getDisplay } from '@penumbra-zone/getters/metadata';
 import { assetPatterns } from '@penumbra-zone/types/assets';