diff --git a/web/package.json b/web/package.json index 78bc5cef..4f0a2425 100644 --- a/web/package.json +++ b/web/package.json @@ -66,8 +66,9 @@ }, "dependencies": { "@cyntler/react-doc-viewer": "^1.16.3", + "@internationalized/date": "^3.7.0", "@kleros/kleros-app": "^2.0.2", - "@kleros/ui-components-library": "^2.19.0", + "@kleros/ui-components-library": "3.0.1-rc1", "@reown/appkit": "^1.6.6", "@reown/appkit-adapter-wagmi": "^1.6.6", "@sentry/react": "^7.93.0", diff --git a/web/src/app.tsx b/web/src/app.tsx index 301a884e..1269a76a 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -3,6 +3,7 @@ import { Navigate, Route } from "react-router-dom"; import { SentryRoutes } from "./utils/sentry"; import "react-loading-skeleton/dist/skeleton.css"; import "react-toastify/dist/ReactToastify.css"; +import "@kleros/ui-components-library/dist/esm/ui-components-library.css"; import Web3Provider from "context/Web3Provider"; import IsListProvider from "context/IsListProvider"; import QueryClientProvider from "context/QueryClientProvider"; @@ -15,6 +16,7 @@ import { NewTransactionProvider } from "./context/NewTransactionContext"; import AttachmentDisplay from "./pages/AttachmentDisplay"; import AtlasProvider from "./context/AtlasProvider"; import Settings from "./pages/Settings"; +import { StyledH1 } from "./components/StyledTags"; const App: React.FC = () => { return ( @@ -32,7 +34,7 @@ const App: React.FC = () => { } /> } /> } /> - 404 not found} /> + 404 not found} /> diff --git a/web/src/components/ConnectWallet/AccountDisplay.tsx b/web/src/components/ConnectWallet/AccountDisplay.tsx index bc44bafc..bf1d95ce 100644 --- a/web/src/components/ConnectWallet/AccountDisplay.tsx +++ b/web/src/components/ConnectWallet/AccountDisplay.tsx @@ -10,6 +10,7 @@ import { getChain } from "consts/chains"; import { shortenAddress } from "utils/shortenAddress"; import { landscapeStyle } from "styles/landscapeStyle"; +import { StyledLabel } from "../StyledTags"; const Container = styled.div` display: flex; @@ -153,13 +154,13 @@ export const AddressOrName: React.FC = ({ address: propAddress } chainId: 1, }); - return ; + return {data ?? (isAddress(address!) ? shortenAddress(address) : address)}; }; export const ChainDisplay: React.FC = () => { const chainId = useChainId(); const chain = getChain(chainId); - return ; + return {chain?.name}; }; const AccountDisplay: React.FC = () => { diff --git a/web/src/components/ConnectWallet/index.tsx b/web/src/components/ConnectWallet/index.tsx index 4102e141..eddf305a 100644 --- a/web/src/components/ConnectWallet/index.tsx +++ b/web/src/components/ConnectWallet/index.tsx @@ -22,9 +22,9 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className