feat: make Tailwind UI the new UI default (#1902)

* feat: change imports to point to `ui-old` package

* chore: changeset

* docs: add ui-tailwind readme

* refactor: rename `ui` dir to `ui-deprecated`

* refactor: rename `ui-tailwind` dir to `ui`

* fix: format and version

* fix: apply tailwind styles to minifront and node_status

* fix: move firebase configs

* fix: remove irrelevant comments

.changeset/silent-parrots-carry.md

@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': major
+---
+
+Refactor UI package from css-in-js to Tailwind

apps/minifront/package.json

@@ -31,7 +31,7 @@
     "@penumbra-zone/protobuf": "workspace:*",
     "@penumbra-zone/transport-dom": "workspace:*",
     "@penumbra-zone/types": "workspace:*",
-    "@penumbra-zone/ui": "workspace:*",
+    "@penumbra-zone/ui-deprecated": "workspace:*",
     "@penumbra-zone/zquery": "workspace:*",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
@@ -66,6 +66,7 @@
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
+    "vite": "^5.2.11",
     "vitest": "^1.6.0"
   }
 }

apps/minifront/postcss.config.js

@@ -1 +1 @@
-export { default } from '@penumbra-zone/ui/postcss.config.js';
+export { default } from '@penumbra-zone/ui-deprecated/postcss.config.js';

apps/minifront/src/components/dashboard/assets-table/equivalent-values.tsx

@@ -1,7 +1,7 @@
 import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 import { asValueView } from '@penumbra-zone/getters/equivalent-value';
 import { getDisplayDenomFromView, getEquivalentValues } from '@penumbra-zone/getters/value-view';
-import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/value';
+import { ValueViewComponent } from '@penumbra-zone/ui-deprecated/components/ui/value';
 
 export const EquivalentValues = ({ valueView }: { valueView?: ValueView }) => {
   const equivalentValuesAsValueViews = (getEquivalentValues.optional(valueView) ?? []).map(

apps/minifront/src/components/dashboard/assets-table/index.tsx

@@ -1,15 +1,15 @@
 import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb';
-import { AddressComponent, AddressIcon } from '@penumbra-zone/ui/components/ui/address';
-import { Button } from '@penumbra-zone/ui/components/ui/button';
+import { AddressComponent, AddressIcon } from '@penumbra-zone/ui-deprecated/components/ui/address';
+import { Button } from '@penumbra-zone/ui-deprecated/components/ui/button';
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
-} from '@penumbra-zone/ui/components/ui/table';
-import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/value';
+} from '@penumbra-zone/ui-deprecated/components/ui/table';
+import { ValueViewComponent } from '@penumbra-zone/ui-deprecated/components/ui/value';
 import { EquivalentValues } from './equivalent-values';
 import { Fragment } from 'react';
 import { PagePath } from '../../metadata/paths';
@@ -21,7 +21,7 @@ import { AbridgedZQueryState } from '@penumbra-zone/zquery/src/types';
 import { shouldDisplay } from '../../../fetchers/balances/should-display';
 import { sortByPriorityScore } from '../../../fetchers/balances/by-priority-score';
 import { LineWave } from 'react-loader-spinner';
-import { cn } from '@penumbra-zone/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui-deprecated/lib/utils';
 
 const getTradeLink = (balance: BalancesResponse): string => {
   const metadata = getMetadataFromBalancesResponse.optional(balance);

apps/minifront/src/components/dashboard/layout.tsx

@@ -1,4 +1,4 @@
-import { Card } from '@penumbra-zone/ui/components/ui/card';
+import { Card } from '@penumbra-zone/ui-deprecated/components/ui/card';
 import { dashboardTabs, dashboardTabsHelper } from './constants';
 import { Outlet } from 'react-router-dom';
 import { EduInfoCard } from '../shared/edu-panels/edu-info-card';

apps/minifront/src/components/dashboard/transaction-table.tsx

@@ -5,7 +5,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@penumbra-zone/ui/components/ui/table';
+} from '@penumbra-zone/ui-deprecated/components/ui/table';
 import { Link } from 'react-router-dom';
 import { shorten } from '@penumbra-zone/types/string';
 import { memo } from 'react';

apps/minifront/src/components/extension-not-connected.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { Dialog } from '@penumbra-zone/ui/Dialog';
-import { Button } from '@penumbra-zone/ui/components/ui/button';
-import { Toaster } from '@penumbra-zone/ui/components/ui/toaster';
-import { SplashPage } from '@penumbra-zone/ui/components/ui/splash-page';
-import { errorToast, warningToast } from '@penumbra-zone/ui/lib/toast/presets';
+import { Dialog } from '@penumbra-zone/ui-deprecated/Dialog';
+import { Button } from '@penumbra-zone/ui-deprecated/components/ui/button';
+import { Toaster } from '@penumbra-zone/ui-deprecated/components/ui/toaster';
+import { SplashPage } from '@penumbra-zone/ui-deprecated/components/ui/splash-page';
+import { errorToast, warningToast } from '@penumbra-zone/ui-deprecated/lib/toast/presets';
 import {
   PenumbraClient,
   PenumbraManifest,

apps/minifront/src/components/extension-not-installed.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@penumbra-zone/ui/components/ui/button';
-import { SplashPage } from '@penumbra-zone/ui/components/ui/splash-page';
+import { Button } from '@penumbra-zone/ui-deprecated/components/ui/button';
+import { SplashPage } from '@penumbra-zone/ui-deprecated/components/ui/splash-page';
 import { HeadTag } from './metadata/head-tag';
 
 const CHROME_EXTENSION_ID = 'lkpmkhpnhknhmibgnmmhdhgdilepfghe';

apps/minifront/src/components/extension-transport-disconnected.tsx

@@ -1,6 +1,6 @@
-import { SplashPage } from '@penumbra-zone/ui/components/ui/splash-page';
+import { SplashPage } from '@penumbra-zone/ui-deprecated/components/ui/splash-page';
 import { HeadTag } from './metadata/head-tag';
-import { Button } from '@penumbra-zone/ui/components/ui/button';
+import { Button } from '@penumbra-zone/ui-deprecated/components/ui/button';
 
 export const ExtensionTransportDisconnected = () => {
   return (

apps/minifront/src/components/header/header.tsx

@@ -1,6 +1,6 @@
-import { CondensedBlockSyncStatus } from '@penumbra-zone/ui/components/ui/block-sync-status';
-import { IncompatibleBrowserBanner } from '@penumbra-zone/ui/components/ui/incompatible-browser-banner';
-import { TestnetBanner } from '@penumbra-zone/ui/components/ui/testnet-banner';
+import { CondensedBlockSyncStatus } from '@penumbra-zone/ui-deprecated/components/ui/block-sync-status';
+import { IncompatibleBrowserBanner } from '@penumbra-zone/ui-deprecated/components/ui/incompatible-browser-banner';
+import { TestnetBanner } from '@penumbra-zone/ui-deprecated/components/ui/testnet-banner';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { getChainId } from '../../fetchers/chain-id';

apps/minifront/src/components/header/menu/desktop-nav.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@penumbra-zone/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui-deprecated/lib/utils';
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
 import { usePagePath } from '../../../fetchers/page-path';
 import { dashboardLink, headerLinks } from '../constants';

apps/minifront/src/components/header/menu/menu.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@penumbra-zone/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui-deprecated/lib/utils';
 import { DesktopNav } from './desktop-nav';
 import { MobileNav } from './mobile-nav';
 import { ProviderMenu } from './provider';

apps/minifront/src/components/header/menu/mobile-nav.tsx

@@ -3,7 +3,7 @@ import {
   SheetContent,
   SheetHeader,
   SheetTrigger,
-} from '@penumbra-zone/ui/components/ui/sheet';
+} from '@penumbra-zone/ui-deprecated/components/ui/sheet';
 import { HamburgerMenuIcon } from '@radix-ui/react-icons';
 import { headerLinks } from '../constants';
 import { Link } from 'react-router-dom';

apps/minifront/src/components/header/menu/provider.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@penumbra-zone/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui-deprecated/lib/utils';
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
 import { getChainId } from '../../../fetchers/chain-id';
 import { useEffect, useState } from 'react';

apps/minifront/src/components/header/menu/tablet-nav.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@penumbra-zone/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui-deprecated/lib/utils';
 import * as NavigationMenu from '@radix-ui/react-navigation-menu';
 import { usePagePath } from '../../../fetchers/page-path';
 import { dashboardLink, headerLinks } from '../constants';

apps/minifront/src/components/ibc/ibc-in/assets-table.tsx

@@ -8,9 +8,9 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@penumbra-zone/ui/components/ui/table';
-import { Avatar, AvatarImage } from '@penumbra-zone/ui/components/ui/avatar';
-import { Identicon } from '@penumbra-zone/ui/components/ui/identicon';
+} from '@penumbra-zone/ui-deprecated/components/ui/table';
+import { Avatar, AvatarImage } from '@penumbra-zone/ui-deprecated/components/ui/avatar';
+import { Identicon } from '@penumbra-zone/ui-deprecated/components/ui/identicon';
 import { LineWave } from 'react-loader-spinner';
 import { getIconWithUmFallback } from './asset-utils.tsx';
 

apps/minifront/src/components/ibc/ibc-in/chain-dropdown.tsx

@@ -1,20 +1,24 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import { useManager } from '@cosmos-kit/react';
-import { Popover, PopoverContent, PopoverTrigger } from '@penumbra-zone/ui/components/ui/popover';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@penumbra-zone/ui-deprecated/components/ui/popover';
 import { ChevronsUpDown } from 'lucide-react';
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from '@penumbra-zone/ui/components/ui/command';
-import { Button } from '@penumbra-zone/ui/components/ui/button';
+} from '@penumbra-zone/ui-deprecated/components/ui/command';
+import { Button } from '@penumbra-zone/ui-deprecated/components/ui/button';
 import { ibcInSelector } from '../../../state/ibc-in';
 import { useStore } from '../../../state';
-import { Avatar, AvatarImage } from '@penumbra-zone/ui/components/ui/avatar';
-import { Identicon } from '@penumbra-zone/ui/components/ui/identicon';
+import { Avatar, AvatarImage } from '@penumbra-zone/ui-deprecated/components/ui/avatar';
+import { Identicon } from '@penumbra-zone/ui-deprecated/components/ui/identicon';
 
 export interface ChainInfo {
   chainName: string;

apps/minifront/src/components/ibc/ibc-in/destination-addr.tsx

@@ -1,7 +1,7 @@
 import { AllSlices } from '../../../state';
 import { useStoreShallow } from '../../../utils/use-store-shallow';
-import { AccountSwitcher } from '@penumbra-zone/ui/components/ui/account-switcher';
-import { CopyToClipboard } from '@penumbra-zone/ui/components/ui/copy-to-clipboard';
+import { AccountSwitcher } from '@penumbra-zone/ui-deprecated/components/ui/account-switcher';
+import { CopyToClipboard } from '@penumbra-zone/ui-deprecated/components/ui/copy-to-clipboard';
 import { useEffect } from 'react';
 
 const addrsSelector = ({ ibcIn }: AllSlices) => ({

apps/minifront/src/components/ibc/ibc-in/ibc-in-request.tsx

@@ -7,11 +7,11 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@penumbra-zone/ui/components/ui/select';
-import { Avatar, AvatarImage } from '@penumbra-zone/ui/components/ui/avatar';
-import { Identicon } from '@penumbra-zone/ui/components/ui/identicon';
+} from '@penumbra-zone/ui-deprecated/components/ui/select';
+import { Avatar, AvatarImage } from '@penumbra-zone/ui-deprecated/components/ui/avatar';
+import { Identicon } from '@penumbra-zone/ui-deprecated/components/ui/identicon';
 import { DestinationAddr } from './destination-addr';
-import { Button } from '@penumbra-zone/ui/components/ui/button';
+import { Button } from '@penumbra-zone/ui-deprecated/components/ui/button';
 import { LockClosedIcon } from '@radix-ui/react-icons';
 import { NumberInput } from '../../shared/number-input';
 import { getIconWithUmFallback } from './asset-utils.tsx';

apps/minifront/src/components/ibc/ibc-in/wallet-addr-card.tsx

@@ -1,4 +1,4 @@
-import { Identicon } from '@penumbra-zone/ui/components/ui/identicon';
+import { Identicon } from '@penumbra-zone/ui-deprecated/components/ui/identicon';
 
 interface UserInfoProps {
   address: string;

apps/minifront/src/components/ibc/ibc-in/wallet-connect-button.tsx

@@ -1,11 +1,11 @@
 import { WalletStatus } from 'cosmos-kit';
-import { WalletIcon } from '@penumbra-zone/ui/components/ui/icons/wallet';
+import { WalletIcon } from '@penumbra-zone/ui-deprecated/components/ui/icons/wallet';
 import { MouseEventHandler } from 'react';
 import { useStore } from '../../../state';
 import { ibcInSelector } from '../../../state/ibc-in';
 
 import { useChainConnector } from './hooks';
-import { cn } from '@penumbra-zone/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui-deprecated/lib/utils';
 
 export const ConnectWalletButton = () => {
   const { connect, openView, status } = useChainConnector();

apps/minifront/src/components/ibc/ibc-out/chain-selector.tsx

@@ -4,8 +4,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@penumbra-zone/ui/components/ui/select';
-import { cn } from '@penumbra-zone/ui/lib/utils';
+} from '@penumbra-zone/ui-deprecated/components/ui/select';
+import { cn } from '@penumbra-zone/ui-deprecated/lib/utils';
 import { AllSlices } from '../../../state';
 import { Chain } from '@penumbra-labs/registry';
 import { useStoreShallow } from '../../../utils/use-store-shallow';

apps/minifront/src/components/ibc/ibc-out/ibc-out-form.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@penumbra-zone/ui/components/ui/button';
-import { Input } from '@penumbra-zone/ui/components/ui/input';
+import { Button } from '@penumbra-zone/ui-deprecated/components/ui/button';
+import { Input } from '@penumbra-zone/ui-deprecated/components/ui/input';
 import { ChainSelector } from './chain-selector';
 import { useStore } from '../../../state';
 import {

apps/minifront/src/components/ibc/layout.tsx

@@ -1,4 +1,4 @@
-import { Card } from '@penumbra-zone/ui/components/ui/card';
+import { Card } from '@penumbra-zone/ui-deprecated/components/ui/card';
 import { IbcOutForm } from './ibc-out/ibc-out-form';
 import { InterchainUi } from './ibc-in/interchain-ui';
 import { LongArrowIcon } from './long-arrow';

apps/minifront/src/components/layout.tsx

@@ -1,10 +1,10 @@
 import { Outlet } from 'react-router-dom';
 import { HeadTag } from './metadata/head-tag';
 import { Header } from './header/header';
-import { Toaster } from '@penumbra-zone/ui/components/ui/toaster';
+import { Toaster } from '@penumbra-zone/ui-deprecated/components/ui/toaster';
 import { Footer } from './footer/footer';
 import { SyncingDialog } from './syncing-dialog';
-import '@penumbra-zone/ui/styles/globals.css';
+import '@penumbra-zone/ui-deprecated/styles/globals.css';
 
 export const Layout = () => {
   return (

apps/minifront/src/components/not-found.tsx

@@ -1,4 +1,4 @@
-import { SplashPage } from '@penumbra-zone/ui/components/ui/splash-page';
+import { SplashPage } from '@penumbra-zone/ui-deprecated/components/ui/splash-page';
 
 export const NotFound = () => {
   return <SplashPage title='404'>That page could not be found. </SplashPage>;

apps/minifront/src/components/send/layout.tsx

@@ -1,4 +1,4 @@
-import { Card } from '@penumbra-zone/ui/components/ui/card';
+import { Card } from '@penumbra-zone/ui-deprecated/components/ui/card';
 import { sendTabs, sendTabsHelper } from './constants';
 import { SendTab } from './types';
 import { usePagePath } from '../../fetchers/page-path';

apps/minifront/src/components/send/receive.tsx

@@ -1,4 +1,4 @@
-import { SelectAccount } from '@penumbra-zone/ui/components/ui/select';
+import { SelectAccount } from '@penumbra-zone/ui-deprecated/components/ui/select';
 import { getAddrByIndex } from '../../fetchers/address';
 
 export const Receive = () => {

apps/minifront/src/components/send/send-form/index.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@penumbra-zone/ui/components/ui/button';
-import { Input } from '@penumbra-zone/ui/components/ui/input';
+import { Button } from '@penumbra-zone/ui-deprecated/components/ui/button';
+import { Input } from '@penumbra-zone/ui-deprecated/components/ui/input';
 import { useStore } from '../../../state';
 import { sendSelector, sendValidationErrors } from '../../../state/send';
 import { InputBlock } from '../../shared/input-block';

apps/minifront/src/components/shared/edu-panels/edu-info-card.tsx

@@ -1,6 +1,6 @@
-import { Card } from '@penumbra-zone/ui/components/ui/card';
-import { cn } from '@penumbra-zone/ui/lib/utils';
-import { GradientHeader } from '@penumbra-zone/ui/components/ui/gradient-header';
+import { Card } from '@penumbra-zone/ui-deprecated/components/ui/card';
+import { cn } from '@penumbra-zone/ui-deprecated/lib/utils';
+import { GradientHeader } from '@penumbra-zone/ui-deprecated/components/ui/gradient-header';
 import { EduPanel, eduPanelContent } from './content';
 import { motion } from 'framer-motion';
 

apps/minifront/src/components/shared/error-boundary.tsx

@@ -4,7 +4,7 @@ import {
   PenumbraNotInstalledError,
   PenumbraProviderNotConnectedError,
 } from '@penumbra-zone/client';
-import { SplashPage } from '@penumbra-zone/ui/components/ui/splash-page';
+import { SplashPage } from '@penumbra-zone/ui-deprecated/components/ui/splash-page';
 import { NotFound } from '../not-found';
 import { ExtensionTransportDisconnected } from '../extension-transport-disconnected';
 import { ExtensionNotInstalled } from '../extension-not-installed';

apps/minifront/src/components/shared/gas-fee.tsx

@@ -2,9 +2,9 @@ import { Fee, FeeTier_Tier } from '@penumbra-zone/protobuf/penumbra/core/compone
 import {
   SegmentedPicker,
   SegmentedPickerOption,
-} from '@penumbra-zone/ui/components/ui/segmented-picker';
+} from '@penumbra-zone/ui-deprecated/components/ui/segmented-picker';
 import { InputBlock } from './input-block';
-import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/value';
+import { ValueViewComponent } from '@penumbra-zone/ui-deprecated/components/ui/value';
 import { Metadata, ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 
 const FEE_TIER_OPTIONS: SegmentedPickerOption<FeeTier_Tier>[] = [

apps/minifront/src/components/shared/input-block.tsx

@@ -1,7 +1,7 @@
-import { cn } from '@penumbra-zone/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui-deprecated/lib/utils';
 import { Validation, validationResult } from './validation-result';
 import { ReactNode } from 'react';
-import { Box } from '@penumbra-zone/ui/components/ui/box';
+import { Box } from '@penumbra-zone/ui-deprecated/components/ui/box';
 
 interface InputBlockProps {
   label: string;

apps/minifront/src/components/shared/input-token.tsx

@@ -1,6 +1,6 @@
 import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb';
-import { BalanceValueView } from '@penumbra-zone/ui/components/ui/balance-value-view';
-import { cn } from '@penumbra-zone/ui/lib/utils';
+import { BalanceValueView } from '@penumbra-zone/ui-deprecated/components/ui/balance-value-view';
+import { cn } from '@penumbra-zone/ui-deprecated/lib/utils';
 import BalanceSelector from './selectors/balance-selector';
 import { Validation } from './validation-result';
 import { InputBlock } from './input-block';

apps/minifront/src/components/shared/number-input/index.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { Input, InputProps } from '@penumbra-zone/ui/components/ui/input';
+import { Input, InputProps } from '@penumbra-zone/ui-deprecated/components/ui/input';
 import { useWheelPrevent } from './use-wheel-prevent';
 
 export const NumberInput: FC<InputProps> = props => {

apps/minifront/src/components/shared/selectors/asset-selector.tsx

@@ -3,19 +3,24 @@ import {
   DialogClose,
   DialogContent,
   DialogHeader,
-} from '@penumbra-zone/ui/components/ui/dialog';
-import { AssetIcon } from '@penumbra-zone/ui/components/ui/asset-icon';
+} from '@penumbra-zone/ui-deprecated/components/ui/dialog';
+import { AssetIcon } from '@penumbra-zone/ui-deprecated/components/ui/asset-icon';
 import { Metadata, ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
-import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/value';
+import { ValueViewComponent } from '@penumbra-zone/ui-deprecated/components/ui/value';
 import { useCallback, useEffect, useId, useMemo, useState } from 'react';
-import { IconInput } from '@penumbra-zone/ui/components/ui/icon-input';
+import { IconInput } from '@penumbra-zone/ui-deprecated/components/ui/icon-input';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { Box } from '@penumbra-zone/ui/components/ui/box';
+import { Box } from '@penumbra-zone/ui-deprecated/components/ui/box';
 import { motion } from 'framer-motion';
 import { metadataBySearch } from './search-filters';
-import { cn } from '@penumbra-zone/ui/lib/utils';
+import { cn } from '@penumbra-zone/ui-deprecated/lib/utils';
 import { LoadingIndicator } from './loading-indicator';
-import { Table, TableBody, TableCell, TableRow } from '@penumbra-zone/ui/components/ui/table';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+} from '@penumbra-zone/ui-deprecated/components/ui/table';
 
 interface AssetSelectorProps {
   assets: Metadata[];