diff --git a/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.23.1-release-please-0c89317-6961-1.0-8374c6c564.patch b/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.23.1-release-please-0c89317-6961-1.0-8374c6c564.patch new file mode 100644 index 0000000..a318d77 --- /dev/null +++ b/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.23.1-release-please-0c89317-6961-1.0-8374c6c564.patch @@ -0,0 +1,30 @@ +diff --git a/dist/client/config.d.ts b/dist/client/config.d.ts +index 2425167caa8b0f75217fe90db01527b1baad7b68..c74ebe6e930dd82d478b726e34e42a0baa1b128f 100644 +--- a/dist/client/config.d.ts ++++ b/dist/client/config.d.ts +@@ -24,8 +24,8 @@ export declare const BLOCK_SCOUT_URLS: { + }; + export declare const SUBGRAPH_VERSION = "0.22"; + export declare const SUBGRAPH_URLS: { +- readonly mainnet: "https://subgraph.mainnet.fluence.dev/subgraphs/v0.22"; +- readonly testnet: "https://subgraph.testnet.fluence.dev/subgraphs/v0.22"; ++ readonly mainnet: "https://subgraph.mainnet.fluence.dev/subgraphs/name/fluence-deal-contracts-2bd115d4"; ++ readonly testnet: "https://subgraph.testnet.fluence.dev/subgraphs/name/fluence-deal-contracts-2bd115d4"; + readonly stage: "https://subgraph.stage.fluence.dev/subgraphs/v0.22"; + readonly local: "http://localhost:8000/subgraphs/name/fluence-deal-contracts"; + }; +diff --git a/dist/client/config.js b/dist/client/config.js +index 81b322ce3436ea2d60935c67ac6ccb0c52657238..8ad032ce17cea644252e2bf84515fb2bc642f127 100644 +--- a/dist/client/config.js ++++ b/dist/client/config.js +@@ -18,8 +18,8 @@ export const BLOCK_SCOUT_URLS = { + }; + export const SUBGRAPH_VERSION = "0.22"; + export const SUBGRAPH_URLS = { +- mainnet: `https://subgraph.mainnet.fluence.dev/subgraphs/v${SUBGRAPH_VERSION}`, +- testnet: `https://subgraph.testnet.fluence.dev/subgraphs/v${SUBGRAPH_VERSION}`, ++ mainnet: `https://subgraph.mainnet.fluence.dev/subgraphs/name/fluence-deal-contracts-2bd115d4`, ++ testnet: `https://subgraph.testnet.fluence.dev/subgraphs/name/fluence-deal-contracts-2bd115d4`, + stage: `https://subgraph.stage.fluence.dev/subgraphs/v${SUBGRAPH_VERSION}`, + local: "http://localhost:8000/subgraphs/name/fluence-deal-contracts", + }; diff --git a/.yarnrc.yml b/.yarnrc.yml index 44a41e5..bc99813 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -1,3 +1,5 @@ nodeLinker: node-modules +npmRegistryServer: "https://npm.fluence.dev" + yarnPath: .yarn/releases/yarn-4.4.0.cjs \ No newline at end of file diff --git a/package.json b/package.json index e05a022..37f500a 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@fluencelabs/deal-ts-clients": "patch:@fluencelabs/deal-ts-clients@npm%3A0.22.3#~/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.22.3-1617de2acc.patch", + "@fluencelabs/deal-ts-clients": "patch:@fluencelabs/deal-ts-clients@npm%3A0.23.1-release-please-0c89317-6961-1.0#~/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.23.1-release-please-0c89317-6961-1.0-8374c6c564.patch", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-aspect-ratio": "^1.0.3", "@radix-ui/react-checkbox": "^1.0.4", diff --git a/src/App.tsx b/src/App.tsx index 04291d3..0d94534 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,7 +12,6 @@ import { Deals } from './pages/deals' import { OfferInfo } from './pages/offer' import { Offers } from './pages/offers' import { PeerInfo } from './pages/peer' -import { Proofs } from './pages/proofs' import { ProviderDeals, ProviderInfo, @@ -42,7 +41,6 @@ export const App: React.FC = () => { - diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx index b300201..5589749 100644 --- a/src/components/Menu.tsx +++ b/src/components/Menu.tsx @@ -37,11 +37,6 @@ const MENU: { link: ROUTES.capacities, routes: [ROUTES.capacities, ROUTES.capacityInfo], }, - { - title: 'Proofs', - link: ROUTES.proofs, - routes: [ROUTES.proofs, ROUTES.peerInfo], - }, ] export const Menu: React.FC = () => { diff --git a/src/components/ProofStatus.tsx b/src/components/ProofStatus.tsx deleted file mode 100644 index e8b90ee..0000000 --- a/src/components/ProofStatus.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react' - -import { Status } from './Status' -import { Text } from './Text' - -interface ProofStatusProps { - status: 'success' | 'failed' -} - -export const ProofStatus: React.FC = ({ status }) => { - if (status === 'success') { - return ( - - - Success - - - ) - } - - if (status === 'failed') { - return ( - - - Failed - - - ) - } - - return ( - - - undefined - - - ) -} diff --git a/src/constants/index.ts b/src/constants/index.ts index 07fa57c..9ee31b5 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -11,7 +11,6 @@ export const ROUTES = { dealInfo: '/deal/:id', capacities: '/capacities', capacityInfo: '/capacity/:id', - proofs: '/proofs', peerInfo: '/peer/:id', computeUnitInfo: '/compute-unit/:id', config: '/config', diff --git a/src/pages/capacity/CapacityInfo.tsx b/src/pages/capacity/CapacityInfo.tsx index 5052690..ef4c5dd 100644 --- a/src/pages/capacity/CapacityInfo.tsx +++ b/src/pages/capacity/CapacityInfo.tsx @@ -23,7 +23,6 @@ import { ROUTES } from '../../constants' import { BLOCKSCOUT_URL } from '../../constants/config' import { ListComputeUnitsTable } from './ListComputeUnitsTable' -import { ProofsTable } from './ProofsTable' const Record: React.FC<{ title: ReactNode @@ -327,8 +326,6 @@ export const CapacityInfo: React.FC = () => { - - diff --git a/src/pages/capacity/ProofsTable.tsx b/src/pages/capacity/ProofsTable.tsx deleted file mode 100644 index b8d146c..0000000 --- a/src/pages/capacity/ProofsTable.tsx +++ /dev/null @@ -1,189 +0,0 @@ -import React, { useState } from 'react' -import Skeleton from 'react-loading-skeleton' -import styled from '@emotion/styled' -import { - OrderType, - ProofStatsByCapacityCommitmentOrderBy, -} from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/filters' -import { ProofStatsByCapacityCommitment } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/schemes' - -import { Pagination } from '../../components/Pagination' -import { Space } from '../../components/Space' -import { - Cell, - Row, - RowBlock, - RowHeader, - RowTrigger, - ScrollableTable, - TableBody, - TableColumnTitle, - TableHeader, - TablePagination, -} from '../../components/Table' -import { Text } from '../../components/Text' -import { useApiQuery, usePagination } from '../../hooks' - -const template = [ - '30px', - 'minmax(10px, 1fr)', - 'minmax(10px, 1fr)', - 'minmax(10px, 1fr)', - 'minmax(10px, 1fr)', - 'minmax(10px, 1fr)', -] - -const PROOFS_PER_PAGE = 6 - -type ProofSort = `${ProofStatsByCapacityCommitmentOrderBy}:${OrderType}` - -interface ProofsTableProps { - capacityCommitmentId: string -} - -export const ProofsTable: React.FC = ({ - capacityCommitmentId, -}) => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [order, setOrder] = useState('epoch:desc') - const [orderBy, orderType] = order.split(':') as [ - ProofStatsByCapacityCommitmentOrderBy, - OrderType, - ] - - const { page, selectPage, limit, offset, getTotalPages } = - usePagination(PROOFS_PER_PAGE) - - const { data: proofs, isLoading } = useApiQuery( - (client) => - client.getProofsByCapacityCommitment( - capacityCommitmentId, - offset, - limit + 1, - orderBy, - orderType, - ), - [page, orderBy, orderType], - { - key: `capacity-commitment-proofs:${JSON.stringify({ - capacityCommitmentId, - offset, - limit, - order, - orderBy, - })}`, - ttl: 1_000 * 60, // 1 minute - }, - ) - - const { data: currentEpoch, isLoading: isEpochLoading } = useApiQuery( - async (client) => client.currentEpoch(), - ) - - const hasNextPage = proofs && proofs.data.length > limit - const pageProofs = proofs && proofs.data.slice(0, limit) - - return ( - - History of epoches - - - - Epoch - Epoch period (blocks) - Expected Number of CUs - Successful CUs / Failed CU - Total proofs - Average proofs per CU - - - {pageProofs?.map((proof) => ( - - ))} - - - - - {!proofs ? ( - - ) : ( - - )} - - - ) -} - -interface ProofRow { - proof: ProofStatsByCapacityCommitment - currentEpoch: number -} - -const ProofRow: React.FC = ({ proof, currentEpoch }) => { - return ( - - - - - {/* Epoch */} - - {proof.createdAtEpoch} - - {/* Epoch period (blocks) */} - - - {proof.epochBlockStart} -{' '} - {proof.createdAtEpoch != currentEpoch - ? proof.epochBlockEnd - : '...'} - - - {/* Expected Number of CUs */} - - {proof.computeUnitsExpected} - - {/* Successful CUs / Failed CU */} - - - {proof.computeUnitsSuccess} - -  /  - - {proof.createdAtEpoch != currentEpoch - ? proof.computeUnitsFailed - : '-'} - - - {/* Total proofs */} - - {proof.submittedProofs} - - {/* Average proofs per CU */} - - {proof.submittedProofsPerCU.toFixed(1)} - - - - - - ) -} - -const ProofsTableWrapper = styled.div` - display: flex; - flex-direction: column; - width: 80%; -` diff --git a/src/pages/compute-unit/ComputeUnitInfo.tsx b/src/pages/compute-unit/ComputeUnitInfo.tsx index fc322c2..c971de6 100644 --- a/src/pages/compute-unit/ComputeUnitInfo.tsx +++ b/src/pages/compute-unit/ComputeUnitInfo.tsx @@ -15,8 +15,6 @@ import { useApiQuery } from '../../hooks' import { ROUTES } from '../../constants' -import { ComputeUnitProofsTable } from './ComputeUnitProofsTable' - export const ComputeUnitInfo: React.FC = () => { const params = useParams() @@ -34,7 +32,7 @@ export const ComputeUnitInfo: React.FC = () => { return ( ) @@ -46,7 +44,7 @@ export const ComputeUnitInfo: React.FC = () => { items={[ { label: 'Compute units', - path: '/proofs', + path: '/compute-unit', }, { label: id, @@ -115,8 +113,6 @@ export const ComputeUnitInfo: React.FC = () => { {computeUnit.peerId} - - diff --git a/src/pages/compute-unit/ComputeUnitProofsTable.tsx b/src/pages/compute-unit/ComputeUnitProofsTable.tsx deleted file mode 100644 index 6201dbb..0000000 --- a/src/pages/compute-unit/ComputeUnitProofsTable.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import React from 'react' -import Skeleton from 'react-loading-skeleton' -import { - ProofsFilters, - ProofsOrderBy, -} from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/filters' -import { ProofBasic } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/schemes' - -import { A } from '../../components/A' -import { Pagination } from '../../components/Pagination' -import { ProofStatus } from '../../components/ProofStatus.tsx' -import { Space } from '../../components/Space' -import { - Cell, - Row, - RowBlock, - RowHeader, - RowTrigger, - ScrollableTable, - TableBody, - TableColumnTitle, - TableColumnTitleWithSort, - TableHeader, - TablePagination, -} from '../../components/Table' -import { Text } from '../../components/Text' -import { useApiQuery, useOrder, usePagination } from '../../hooks' -import { useFilters } from '../../hooks/useFilters' -import { formatUnixTimestamp } from '../../utils/formatUnixTimestamp' - -const template = [ - '30px', - 'minmax(10px, 1fr)', - 'minmax(10px, 1fr)', - 'minmax(10px, 1fr)', - '200px', -] - -interface ComputeUnitProofsTableProps { - computeUnitId: string -} - -export const ComputeUnitProofsTable: React.FC = ({ - computeUnitId, -}) => { - const [filters] = useFilters({ - computeUnitId, - }) - - const { orderBy, orderType, handleSort } = - useOrder('createdAt:asc') - - const { page, selectPage, limit, offset, getTotalPages, getPageItems } = - usePagination(5) - - const { data: proofs, isLoading } = useApiQuery( - (client) => - client.getProofs(filters, offset, limit + 1, orderBy, orderType), - [page, orderBy, orderType], - { - key: `compute-unit-proofs:${JSON.stringify({ - filters, - offset, - limit, - orderBy, - orderType, - })}`, - ttl: 1_000 * 60, // 1 minute - }, - ) - - const { hasNextPage, pageItems } = getPageItems(proofs?.data ?? []) - - return ( - <> - - - Epoch - Tx - - Timestamp - - Status - - - {pageItems.map((proof) => ( - - ))} - - - - - {!proofs ? ( - - ) : ( - - )} - - - ) -} - -interface ProofRowProps { - proof: ProofBasic -} - -const ProofRow: React.FC = ({ proof }) => { - const createdAt = formatUnixTimestamp(proof.createdAt) - - return ( - - - - - {/* Epoch */} - - {proof.createdAtEpoch} - - {/* Tx */} - - - {proof.transactionId} - - - {/* Timestamp */} - - {createdAt.date} - {createdAt.time} - - {/* Status: currently only submitted (success) proofs returned from DealExplorerClient. */} - - - - - - - - ) -} diff --git a/src/pages/peer/PeerInfo.tsx b/src/pages/peer/PeerInfo.tsx index e19c02c..3211aeb 100644 --- a/src/pages/peer/PeerInfo.tsx +++ b/src/pages/peer/PeerInfo.tsx @@ -45,7 +45,7 @@ export const PeerInfo: React.FC = () => { items={[ { label: 'Peers', - path: '/proofs', + path: '/peers', }, { label: id ?? '', diff --git a/src/pages/proofs/Proofs.tsx b/src/pages/proofs/Proofs.tsx deleted file mode 100644 index f66f8a4..0000000 --- a/src/pages/proofs/Proofs.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import styled from '@emotion/styled' -import { ProofsFilters } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/filters' - -import { PageHeader } from '../../components/PageHeader' -import { Search } from '../../components/Search' -import { Space } from '../../components/Space' -import { Text } from '../../components/Text' -import { useFilters } from '../../hooks/useFilters' - -import { ProofsTable } from './ProofsTable' - -export const Proofs: React.FC = () => { - const [filters, setFilter] = useFilters() - - return ( - <> - - List of proofs - - setFilter('search', search)} - placeholder="Search by Tx / Provider ID / Peer ID" - /> - - - - - - ) -} - -const FiltersBlock = styled.div` - display: flex; - gap: 16px; -` diff --git a/src/pages/proofs/ProofsTable.tsx b/src/pages/proofs/ProofsTable.tsx deleted file mode 100644 index f5db292..0000000 --- a/src/pages/proofs/ProofsTable.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import React, { useState } from 'react' -import Skeleton from 'react-loading-skeleton' -import styled from '@emotion/styled' -import { - OrderType, - ProofsFilters, - ProofsOrderBy, -} from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/filters' -import { ProofBasic } from '@fluencelabs/deal-ts-clients/dist/dealExplorerClient/types/schemes' - -import { A } from '../../components/A' -import { Pagination } from '../../components/Pagination' -import { Space } from '../../components/Space' -import { - Cell, - Row, - RowBlock, - RowHeader, - RowTrigger, - ScrollableTable, - TableBody, - TableColumnTitle, - TableColumnTitleWithSort, - TableHeader, - TablePagination, -} from '../../components/Table' -import { Text } from '../../components/Text' -import { useApiQuery, usePagination } from '../../hooks' -import { formatUnixTimestamp } from '../../utils/formatUnixTimestamp' -import { formatHexData, stopPropagation } from '../../utils/helpers' - -import { colors } from '../../constants/colors' -import { BLOCKSCOUT_URL } from '../../constants/config' - -const template = [ - 'minmax(10px, 1fr)', - 'minmax(10px, 1fr)', - 'minmax(10px, 1fr)', - 'minmax(10px, 1fr)', - 'minmax(10px, 1fr)', - 'minmax(10px, 1fr)', - 'minmax(10px, 1fr)', -] - -type ProofsSort = `${ProofsOrderBy}:${OrderType}` - -interface ProofsTableProps { - filters: ProofsFilters -} - -const PROOFS_PER_PAGE = 10 - -export const ProofsTable: React.FC = ({ filters }) => { - const [order, setOrder] = useState('createdAt:desc') - const [orderBy, orderType] = order.split(':') as [ProofsOrderBy, OrderType] - - const { page, selectPage, limit, offset, getTotalPages } = - usePagination(PROOFS_PER_PAGE) - - const { data: proofs, isLoading } = useApiQuery( - (client) => - client.getProofs(filters, offset, limit + 1, orderBy, orderType), - [page, orderBy, orderType, filters], - { - key: `proofs:${JSON.stringify({ - filters, - offset, - limit, - order, - orderBy, - })}`, - ttl: 1_000 * 60, // 1 minute - }, - ) - - const hasNextPage = proofs && proofs.data.length > limit - const pageProofs = proofs && proofs.data.slice(0, limit) - - const handleSort = (key: ProofsOrderBy, order: OrderType) => { - setOrder(`${key}:${order}`) - } - - return ( - <> - - - Proof tx - Timestamp - Provider - Capacity commitment - Peer id - Compute unit - - Epoch - - - - {pageProofs?.map((proof) => ( - - ))} - - - - - {!proofs ? ( - - ) : ( - - )} - - - ) -} - -interface ProofRowProps { - proof: ProofBasic -} - -const ProofRow: React.FC = ({ proof }) => { - const createdAt = formatUnixTimestamp(proof.createdAt) - - return ( - - - - - {/* Proof tx */} - - - {formatHexData(proof.transactionId, 8, 10)} - - - {/* Timestamp */} - - {createdAt.date} - {createdAt.time} - - {/* Provider id */} - - - {formatHexData(proof.providerId)} - - - {/* Capacity commitment */} - - - {formatHexData(proof.capacityCommitmentId)} - - - {/* Peer id */} - - - {formatHexData(proof.peerId)} - - - {/* Compute unit */} - - - {formatHexData(proof.computeUnitId)} - - - {/* Epoch */} - - {proof.createdAtEpoch} - - - - - - ) -} - -const StyledA = styled.a` - gap: 4px; - font-size: 12px; - color: ${colors.blue}; -` diff --git a/src/pages/proofs/index.ts b/src/pages/proofs/index.ts deleted file mode 100644 index b540968..0000000 --- a/src/pages/proofs/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Proofs' diff --git a/yarn.lock b/yarn.lock index f1409f0..7e43d6e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -914,9 +914,9 @@ __metadata: languageName: node linkType: hard -"@fluencelabs/deal-ts-clients@npm:0.22.3": - version: 0.22.3 - resolution: "@fluencelabs/deal-ts-clients@npm:0.22.3" +"@fluencelabs/deal-ts-clients@npm:0.23.1-release-please-0c89317-6961-1.0": + version: 0.23.1-release-please-0c89317-6961-1.0 + resolution: "@fluencelabs/deal-ts-clients@npm:0.23.1-release-please-0c89317-6961-1.0" dependencies: "@graphql-typed-document-node/core": "npm:^3.2.0" debug: "npm:^4.3.4" @@ -928,13 +928,13 @@ __metadata: graphql-tag: "npm:^2.12.6" ipfs-http-client: "npm:^60.0.1" multiformats: "npm:^13.0.1" - checksum: 10c0/871afe9e643297cc639510e1f441011dcc5966a70012bb46ca265ad940d50e2b98114c9a279553821b56dae777f7ed5fd8fd8981e0e09d88467a940e5959db96 + checksum: 10c0/b94f928c6552d49536c37de7d0726e5d377b04b63a0816830ed7633f09c6b1f39222c4f8868bdeba024c487b934bc8885c8097694e060cf6b72c6ee73569517c languageName: node linkType: hard -"@fluencelabs/deal-ts-clients@patch:@fluencelabs/deal-ts-clients@npm%3A0.22.3#~/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.22.3-1617de2acc.patch": - version: 0.22.3 - resolution: "@fluencelabs/deal-ts-clients@patch:@fluencelabs/deal-ts-clients@npm%3A0.22.3#~/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.22.3-1617de2acc.patch::version=0.22.3&hash=1ab8ee" +"@fluencelabs/deal-ts-clients@patch:@fluencelabs/deal-ts-clients@npm%3A0.23.1-release-please-0c89317-6961-1.0#~/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.23.1-release-please-0c89317-6961-1.0-8374c6c564.patch": + version: 0.23.1-release-please-0c89317-6961-1.0 + resolution: "@fluencelabs/deal-ts-clients@patch:@fluencelabs/deal-ts-clients@npm%3A0.23.1-release-please-0c89317-6961-1.0#~/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.23.1-release-please-0c89317-6961-1.0-8374c6c564.patch::version=0.23.1-release-please-0c89317-6961-1.0&hash=cb35f1" dependencies: "@graphql-typed-document-node/core": "npm:^3.2.0" debug: "npm:^4.3.4" @@ -946,7 +946,7 @@ __metadata: graphql-tag: "npm:^2.12.6" ipfs-http-client: "npm:^60.0.1" multiformats: "npm:^13.0.1" - checksum: 10c0/fb40b9001e22de708e217c9c07ee110b9abdf2a667b397c5a0175c19c7711e587888fed1762a01a7262d64703b4f60a39c239cc1331142b05640bb894edf27c8 + checksum: 10c0/d60556f416b23c80cbb2cf4c4aabf98626eab2a67a815d21abfc3bd5fa69cb1cc553b103249971144becc1937e4745981ede46962a80e30b243e7b5be7990190 languageName: node linkType: hard @@ -6488,7 +6488,7 @@ __metadata: "@emotion/babel-plugin": "npm:^11.11.0" "@emotion/react": "npm:^11.11.1" "@emotion/styled": "npm:^11.11.0" - "@fluencelabs/deal-ts-clients": "patch:@fluencelabs/deal-ts-clients@npm%3A0.22.3#~/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.22.3-1617de2acc.patch" + "@fluencelabs/deal-ts-clients": "patch:@fluencelabs/deal-ts-clients@npm%3A0.23.1-release-please-0c89317-6961-1.0#~/.yarn/patches/@fluencelabs-deal-ts-clients-npm-0.23.1-release-please-0c89317-6961-1.0-8374c6c564.patch" "@radix-ui/react-accordion": "npm:^1.1.2" "@radix-ui/react-aspect-ratio": "npm:^1.0.3" "@radix-ui/react-checkbox": "npm:^1.0.4"