diff --git a/package.json b/package.json index 459acc4a3..d2a48f92e 100644 --- a/package.json +++ b/package.json @@ -76,9 +76,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.51.3", "react-singleton-hook": "^3.4.0", - "remark": "^14.0.3", "rudder-sdk-js": "^2.48.6", - "strip-markdown": "^5.0.1", "styled-components": "^5.3.11", "typescript": "^5.4.5", "wagmi": "^2.12.17", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 93a801424..ceba9ff17 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -176,15 +176,9 @@ importers: react-singleton-hook: specifier: ^3.4.0 version: 3.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - remark: - specifier: ^14.0.3 - version: 14.0.3 rudder-sdk-js: specifier: ^2.48.6 version: 2.48.18 - strip-markdown: - specifier: ^5.0.1 - version: 5.0.1 styled-components: specifier: ^5.3.11 version: 5.3.11(@babel/core@7.25.2)(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1) @@ -8172,12 +8166,6 @@ packages: remark-rehype@9.1.0: resolution: {integrity: sha512-oLa6YmgAYg19zb0ZrBACh40hpBLteYROaPLhBXzLgjqyHQrN+gVP9N/FJvfzuNNuzCutktkroXEZBrxAxKhh7Q==} - remark-stringify@10.0.3: - resolution: {integrity: sha512-koyOzCMYoUHudypbj4XpnAKFbkddRMYZHwghnxd7ue5210WzGw6kOBwauJTRUMq16jsovXx8dYNvSSWP89kZ3A==} - - remark@14.0.3: - resolution: {integrity: sha512-bfmJW1dmR2LvaMJuAnE88pZP9DktIFYXazkTfOIKZzi3Knk9lT0roItIA24ydOucI3bV/g/tXBA6hzqq3FV9Ew==} - require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} @@ -8575,9 +8563,6 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} - strip-markdown@5.0.1: - resolution: {integrity: sha512-IvoKZrXtWAnlEjRfDlT3yRtGRvpX3RSg+nwAHONmshpSCoxgjZV2xX9ZYvEmwupmYobJtws9oDdTwLUu/5PoMQ==} - sturdy-websocket@0.1.12: resolution: {integrity: sha512-PA7h8LdjaMoIlC5HAwLVzae4raGWgyroscV4oUpEiTtEFINcNa47/CKYT3e98o+FfsJgrclI2pYpaJrz0aaoew==} @@ -12581,7 +12566,7 @@ snapshots: '@parcel/source-map': 2.1.1 '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) '@parcel/utils': 2.12.0 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13)) abortcontroller-polyfill: 1.7.5 base-x: 3.0.10 browserslist: 4.24.0 @@ -12609,7 +12594,7 @@ snapshots: '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) '@parcel/utils': 2.12.0 '@parcel/watcher': 2.4.1 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13)) transitivePeerDependencies: - '@swc/helpers' @@ -12683,7 +12668,7 @@ snapshots: '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13)) '@parcel/rust': 2.12.0 '@parcel/utils': 2.12.0 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13)) '@parcel/optimizer-svgo@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))': dependencies: @@ -12715,7 +12700,7 @@ snapshots: '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.13)) '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) '@parcel/utils': 2.12.0 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13)) '@swc/core': 1.7.28(@swc/helpers@0.5.13) semver: 7.6.3 transitivePeerDependencies: @@ -12904,7 +12889,7 @@ snapshots: '@parcel/core': 2.12.0(@swc/helpers@0.5.13) '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13)) '@parcel/utils': 2.12.0 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13)) nullthrows: 1.1.1 '@parcel/transformer-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))': @@ -12915,7 +12900,7 @@ snapshots: '@parcel/rust': 2.12.0 '@parcel/source-map': 2.1.1 '@parcel/utils': 2.12.0 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13)) '@swc/helpers': 0.5.13 browserslist: 4.24.0 nullthrows: 1.1.1 @@ -12988,7 +12973,7 @@ snapshots: '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) '@parcel/source-map': 2.1.1 - '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) + '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13)) utility-types: 3.11.0 transitivePeerDependencies: - '@parcel/core' @@ -13066,7 +13051,7 @@ snapshots: '@parcel/watcher-win32-ia32': 2.4.1 '@parcel/watcher-win32-x64': 2.4.1 - '@parcel/workers@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13)': + '@parcel/workers@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))': dependencies: '@parcel/core': 2.12.0(@swc/helpers@0.5.13) '@parcel/diagnostic': 2.12.0 @@ -13075,8 +13060,6 @@ snapshots: '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.13))(@swc/helpers@0.5.13) '@parcel/utils': 2.12.0 nullthrows: 1.1.1 - transitivePeerDependencies: - - '@swc/helpers' '@peculiar/asn1-schema@2.3.13': dependencies: @@ -20992,21 +20975,6 @@ snapshots: mdast-util-to-hast: 11.3.0 unified: 10.1.2 - remark-stringify@10.0.3: - dependencies: - '@types/mdast': 3.0.15 - mdast-util-to-markdown: 1.5.0 - unified: 10.1.2 - - remark@14.0.3: - dependencies: - '@types/mdast': 3.0.15 - remark-parse: 10.0.2 - remark-stringify: 10.0.3 - unified: 10.1.2 - transitivePeerDependencies: - - supports-color - require-directory@2.1.1: {} require-from-string@2.0.2: {} @@ -21404,12 +21372,6 @@ snapshots: strip-json-comments@3.1.1: {} - strip-markdown@5.0.1: - dependencies: - '@types/mdast': 3.0.15 - '@types/unist': 2.0.11 - unified: 10.1.2 - sturdy-websocket@0.1.12: dependencies: lodash.defaults: 4.2.0 diff --git a/src/components/sidebar-navigation/UserDropdownMenu.tsx b/src/components/sidebar-navigation/UserDropdownMenu.tsx index 46f955fbd..df869b0d5 100644 --- a/src/components/sidebar-navigation/UserDropdownMenu.tsx +++ b/src/components/sidebar-navigation/UserDropdownMenu.tsx @@ -123,7 +123,7 @@ export const UserDropdownMenu = ({ collapsed }: Props) => { method: 'storage_balance_of', args: { account_id: signedAccountId }, }); - setAvailableStorage(BigInt(storage.available) / BigInt(10 ** 19)); + if (storage) setAvailableStorage(BigInt(storage.available) / BigInt(10 ** 19)); } if (!wallet || !signedAccountId) return; diff --git a/src/pages/[accountId]/widget/[componentName].tsx b/src/pages/[accountId]/widget/[componentName].tsx new file mode 100644 index 000000000..77236f29b --- /dev/null +++ b/src/pages/[accountId]/widget/[componentName].tsx @@ -0,0 +1,56 @@ +import { useRouter } from 'next/router'; +import { useContext, useEffect, useState } from 'react'; + +import { RootContentContainer } from '@/components/RootContentContainer'; +import { VmComponent } from '@/components/vm/VmComponent'; +import { NearContext } from '@/components/wallet-selector/WalletSelector'; +import { privacyDomainName, termsDomainName } from '@/config'; +import { useBosComponents } from '@/hooks/useBosComponents'; +import { useGatewayEvents } from '@/hooks/useGatewayEvents'; +import { useDefaultLayout } from '@/hooks/useLayout'; +import { useSignInRedirect } from '@/hooks/useSignInRedirect'; +import type { NextPageWithLayout } from '@/utils/types'; + +const ViewComponentPage: NextPageWithLayout = () => { + const router = useRouter(); + const componentSrc = `${router.query.accountId}/widget/${router.query.componentName}`; + const [componentProps, setComponentProps] = useState>({}); + const { wallet, signedAccountId } = useContext(NearContext); + const components = useBosComponents(); + const { requestAuthentication } = useSignInRedirect(); + const { emitGatewayEvent, shouldPassGatewayEventProps } = useGatewayEvents(); + + useEffect(() => { + const { requestAuth, createAccount } = componentProps; + if (requestAuth && !signedAccountId) { + requestAuthentication(!!createAccount); + } + }, [signedAccountId, componentProps, requestAuthentication]); + + useEffect(() => { + setComponentProps(router.query); + }, [router.query]); + + return ( + + + + ); +}; + +ViewComponentPage.getLayout = useDefaultLayout; + +export default ViewComponentPage; diff --git a/src/pages/[componentAccountId]/widget/[componentName].tsx b/src/pages/[componentAccountId]/widget/[componentName].tsx deleted file mode 100644 index 6100d71bf..000000000 --- a/src/pages/[componentAccountId]/widget/[componentName].tsx +++ /dev/null @@ -1,136 +0,0 @@ -import type { GetServerSideProps, InferGetServerSidePropsType } from 'next'; -import { useRouter } from 'next/router'; -import { useContext, useEffect, useState } from 'react'; -import { remark } from 'remark'; -import strip from 'strip-markdown'; - -import { MetaTags } from '@/components/MetaTags'; -import { RootContentContainer } from '@/components/RootContentContainer'; -import { VmComponent } from '@/components/vm/VmComponent'; -import { NearContext } from '@/components/wallet-selector/WalletSelector'; -import { privacyDomainName, termsDomainName } from '@/config'; -import { useBosComponents } from '@/hooks/useBosComponents'; -import { useGatewayEvents } from '@/hooks/useGatewayEvents'; -import { useDefaultLayout } from '@/hooks/useLayout'; -import { useSignInRedirect } from '@/hooks/useSignInRedirect'; -import type { NextPageWithLayout } from '@/utils/types'; - -type ComponentMetaPreview = { - title: string; - description: string; - imageUrl: string | null; -}; - -type ComponentPayload = Record }>; -type ComponentMetadata = { - name: string; - description: string; - linktree: { - website: string; - }; - image: ImageData; - tags: Record; -}; - -type ImageData = { - ipfs_cid?: string; -}; - -function returnImageUrl(data: ImageData | undefined) { - if (data?.ipfs_cid) { - return `https://i.near.social/large/https://ipfs.near.social/ipfs/${data.ipfs_cid}`; - } - return null; -} - -async function fetchPreviewData(accountId: string, componentName: string): Promise { - try { - const response = await fetch(`https://api.near.social/get?keys=${accountId}/widget/${componentName}/**`); - const responseData: ComponentPayload = await response.json(); - const metadata = responseData[accountId]?.widget?.[componentName]?.metadata; - - if (!metadata) { - return null; - } - - const strippedDescriptionVFile = await remark().use(strip).process(metadata.description); - // recommended conversion from remark docs - const strippedDescription = String(strippedDescriptionVFile); - - return { - title: `${metadata.name} by ${accountId} on BOS`, - description: strippedDescription, - imageUrl: returnImageUrl(metadata.image), - }; - } catch (error) { - console.error(error); - return null; - } -} - -export const getServerSideProps: GetServerSideProps<{ - meta: ComponentMetaPreview | null; -}> = async ({ params }) => { - const componentAccountId = params?.componentAccountId; - const componentName = params?.componentName; - - if (typeof componentAccountId !== 'string' || typeof componentName !== 'string') { - return { - notFound: true, - }; - } - - const meta = await fetchPreviewData(componentAccountId, componentName); - - return { - props: { - meta, - }, - }; -}; - -const ViewComponentPage: NextPageWithLayout = ({ meta }: InferGetServerSidePropsType) => { - const router = useRouter(); - const componentSrc = `${router.query.componentAccountId}/widget/${router.query.componentName}`; - const [componentProps, setComponentProps] = useState>({}); - const { wallet, signedAccountId } = useContext(NearContext); - const components = useBosComponents(); - const { requestAuthentication } = useSignInRedirect(); - const { emitGatewayEvent, shouldPassGatewayEventProps } = useGatewayEvents(); - - useEffect(() => { - const { requestAuth, createAccount } = componentProps; - if (requestAuth && !signedAccountId) { - requestAuthentication(!!createAccount); - } - }, [signedAccountId, componentProps, requestAuthentication]); - - useEffect(() => { - setComponentProps(router.query); - }, [router.query]); - - return ( - - {meta && } - - - - ); -}; - -ViewComponentPage.getLayout = useDefaultLayout; - -export default ViewComponentPage;