feat: change blockchain info position
This commit is contained in:
DIYgod
parent
bcba59cd6a
commit
10d5e06d8f
|
|
@ -26,6 +26,7 @@
|
|||
"@codemirror/view": "^0.20.3",
|
||||
"@floating-ui/react-dom-interactions": "^0.6.3",
|
||||
"@headlessui/react": "^1.6.0",
|
||||
"@heroicons/react": "^1.0.6",
|
||||
"@prisma/client": "^3.14.0",
|
||||
"@proselog/jwt": "^0.1.1",
|
||||
"@rainbow-me/rainbowkit": "^0.4.5",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ specifiers:
|
|||
'@codemirror/view': ^0.20.3
|
||||
'@floating-ui/react-dom-interactions': ^0.6.3
|
||||
'@headlessui/react': ^1.6.0
|
||||
'@heroicons/react': ^1.0.6
|
||||
'@iconify-json/bi': ^1.1.3
|
||||
'@iconify-json/bxs': ^1.1.2
|
||||
'@iconify-json/carbon': ^1.1.5
|
||||
|
|
@ -109,6 +110,7 @@ dependencies:
|
|||
'@codemirror/view': 0.20.7
|
||||
'@floating-ui/react-dom-interactions': 0.6.6_twyhzqqpkwvvgrmyeapdo6i4my
|
||||
'@headlessui/react': 1.6.5_biqbaboplfbrettd7655fr4n2y
|
||||
'@heroicons/react': 1.0.6_react@18.2.0
|
||||
'@prisma/client': 3.15.2_prisma@3.15.2
|
||||
'@proselog/jwt': 0.1.1
|
||||
'@rainbow-me/rainbowkit': 0.4.5_aka5rz2z3n4fmzij3aevaifnqm
|
||||
|
|
@ -1010,6 +1012,14 @@ packages:
|
|||
react-dom: 18.2.0_react@18.2.0
|
||||
dev: false
|
||||
|
||||
/@heroicons/react/1.0.6_react@18.2.0:
|
||||
resolution: {integrity: sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==}
|
||||
peerDependencies:
|
||||
react: '>= 16'
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@humanwhocodes/config-array/0.9.5:
|
||||
resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
|
||||
engines: {node: '>=10.10.0'}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,140 @@
|
|||
import { APP_NAME, OUR_DOMAIN } from "~/lib/env"
|
||||
import { UniLink } from "../ui/UniLink"
|
||||
import { Profile, Note } from "~/lib/types"
|
||||
import { Disclosure } from "@headlessui/react"
|
||||
import { ChevronUpIcon } from "@heroicons/react/solid"
|
||||
|
||||
export const BlockchainInfo: React.FC<{
|
||||
site?: Profile
|
||||
page?: Note
|
||||
}> = ({ site, page }) => {
|
||||
return (
|
||||
<div className="text-sm">
|
||||
<Disclosure>
|
||||
{({ open }: { open: boolean }) => (
|
||||
<>
|
||||
<Disclosure.Button className="flex w-full justify-between rounded-lg px-4 py-2 text-left font-medium text-gray-900 hover:bg-zinc-100 transition-colors md:rounded-xl">
|
||||
<span>
|
||||
🔔 This{" "}
|
||||
{page
|
||||
? page.tags?.includes("post")
|
||||
? "post"
|
||||
: "page"
|
||||
: "blog"}{" "}
|
||||
has been permanently stored on the blockchain and signed by its
|
||||
creator.
|
||||
</span>
|
||||
<ChevronUpIcon
|
||||
className={`${
|
||||
open ? "rotate-180" : "rotate-90"
|
||||
} h-5 w-5 text-gray-500 transform transition-transform`}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="px-5 pt-4 pb-2 text-sm text-gray-500">
|
||||
<ul>
|
||||
<li className="mt-2">
|
||||
<div className="font-bold">Blockchain Transactions</div>
|
||||
<div>
|
||||
{page
|
||||
? page?.related_urls
|
||||
?.filter((url) =>
|
||||
url.startsWith("https://scan.crossbell.io/tx/"),
|
||||
)
|
||||
.map((url) => {
|
||||
return (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-block mr-4 break-all"
|
||||
href={url}
|
||||
key={url}
|
||||
>
|
||||
{url
|
||||
.replace("https://scan.crossbell.io/tx/", "")
|
||||
.slice(0, 10)}
|
||||
...
|
||||
{url
|
||||
.replace("https://scan.crossbell.io/tx/", "")
|
||||
.slice(-10)}
|
||||
</a>
|
||||
)
|
||||
})
|
||||
: site?.metadata?.transactions.map((hash: string) => {
|
||||
return (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-block mr-4 break-all"
|
||||
href={`https://scan.crossbell.io/tx/${hash}`}
|
||||
key={hash}
|
||||
>
|
||||
{hash.slice(0, 10)}...{hash.slice(-10)}
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</li>
|
||||
<li className="mt-2">
|
||||
<div className="font-bold">IPFS Address</div>
|
||||
<div>
|
||||
{page
|
||||
? page.related_urls
|
||||
?.filter((url) =>
|
||||
url.startsWith("https://gateway.ipfs.io/ipfs/"),
|
||||
)
|
||||
.map((url) => {
|
||||
return (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-block mr-4 break-all"
|
||||
href={url}
|
||||
key={url}
|
||||
>
|
||||
{url.replace(
|
||||
"https://gateway.ipfs.io/ipfs/",
|
||||
"ipfs://",
|
||||
)}
|
||||
</a>
|
||||
)
|
||||
})
|
||||
: site?.metadata?.uri && (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-block mr-4 break-all"
|
||||
href={site?.metadata?.uri.replace(
|
||||
"ipfs://",
|
||||
"https://gateway.ipfs.io/ipfs/",
|
||||
)}
|
||||
key={site?.metadata?.uri}
|
||||
>
|
||||
{site?.metadata?.uri}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
<li className="mt-2">
|
||||
<div className="font-bold">Author Address</div>
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-block mr-4 break-all"
|
||||
href={`https://scan.crossbell.io/address/${
|
||||
page?.metadata?.owner || site?.metadata?.owner
|
||||
}`}
|
||||
key={page?.metadata?.owner || site?.metadata?.owner}
|
||||
>
|
||||
{page?.metadata?.owner || site?.metadata?.owner}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</Disclosure.Panel>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
import { APP_NAME, OUR_DOMAIN } from "~/lib/env"
|
||||
import { UniLink } from "../ui/UniLink"
|
||||
import { IS_PROD } from "~/lib/constants"
|
||||
import { useAccount } from "wagmi"
|
||||
import { useEffect, useState } from "react"
|
||||
import { Profile, Note } from "~/lib/types"
|
||||
|
||||
export const SiteFooter: React.FC<{
|
||||
|
|
@ -12,110 +9,7 @@ export const SiteFooter: React.FC<{
|
|||
return (
|
||||
<footer className="text-zinc-500 border-t">
|
||||
<div className="max-w-screen-md mx-auto px-5 py-10 text-xs">
|
||||
<p className="font-medium mb-4 text-gray-700">
|
||||
🔔 This{" "}
|
||||
{page ? (page.tags?.includes("post") ? "post" : "page") : "blog"} has
|
||||
been permanently stored on the blockchain and signed by its creator.
|
||||
</p>
|
||||
<ul className="mb-6">
|
||||
<li className="mt-2">
|
||||
<div className="font-bold">Blockchain Transactions</div>
|
||||
<div>
|
||||
{page
|
||||
? page?.related_urls
|
||||
?.filter((url) =>
|
||||
url.startsWith("https://scan.crossbell.io/tx/"),
|
||||
)
|
||||
.map((url) => {
|
||||
return (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-block mr-4 break-all"
|
||||
href={url}
|
||||
key={url}
|
||||
>
|
||||
{url
|
||||
.replace("https://scan.crossbell.io/tx/", "")
|
||||
.slice(0, 10)}
|
||||
...
|
||||
{url
|
||||
.replace("https://scan.crossbell.io/tx/", "")
|
||||
.slice(-10)}
|
||||
</a>
|
||||
)
|
||||
})
|
||||
: site?.metadata?.transactions.map((hash: string) => {
|
||||
return (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-block mr-4 break-all"
|
||||
href={`https://scan.crossbell.io/tx/${hash}`}
|
||||
key={hash}
|
||||
>
|
||||
{hash.slice(0, 10)}...{hash.slice(-10)}
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</li>
|
||||
<li className="mt-2">
|
||||
<div className="font-bold">IPFS Address</div>
|
||||
<div>
|
||||
{page
|
||||
? page.related_urls
|
||||
?.filter((url) =>
|
||||
url.startsWith("https://gateway.ipfs.io/ipfs/"),
|
||||
)
|
||||
.map((url) => {
|
||||
return (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-block mr-4 break-all"
|
||||
href={url}
|
||||
key={url}
|
||||
>
|
||||
{url.replace(
|
||||
"https://gateway.ipfs.io/ipfs/",
|
||||
"ipfs://",
|
||||
)}
|
||||
</a>
|
||||
)
|
||||
})
|
||||
: site?.metadata?.uri && (
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-block mr-4 break-all"
|
||||
href={site?.metadata?.uri.replace(
|
||||
"ipfs://",
|
||||
"https://gateway.ipfs.io/ipfs/",
|
||||
)}
|
||||
key={site?.metadata?.uri}
|
||||
>
|
||||
{site?.metadata?.uri}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
<li className="mt-2">
|
||||
<div className="font-bold">Author Address</div>
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-block mr-4 break-all"
|
||||
href={`https://scan.crossbell.io/address/${site?.metadata?.owner}`}
|
||||
key={site?.metadata?.owner}
|
||||
>
|
||||
{site?.metadata?.owner}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-medium text-sm text-gray-800">
|
||||
<p className="font-medium text-base text-gray-800">
|
||||
©{" "}
|
||||
<UniLink href="/" className="hover:text-indigo-500">
|
||||
{site?.username}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { SiteFooter } from "./SiteFooter"
|
|||
import { SiteHeader } from "./SiteHeader"
|
||||
import { useRouter } from "next/router"
|
||||
import { useStore } from "~/lib/store"
|
||||
import { BlockchainInfo } from "~/components/common/BlockchainInfo"
|
||||
|
||||
export type SiteLayoutProps = {
|
||||
site?: Profile
|
||||
|
|
@ -46,8 +47,9 @@ export const SiteLayout: React.FC<SiteLayoutProps> = ({
|
|||
/>
|
||||
<SiteHeader site={site} />
|
||||
<style>{site?.css}</style>
|
||||
<div className={clsx(`max-w-screen-md mx-auto px-5 pb-12`, `pt-12`)}>
|
||||
{children}
|
||||
<div className="max-w-screen-md mx-auto px-5 pt-12">{children}</div>
|
||||
<div className="max-w-screen-md mx-auto pt-12 pb-10">
|
||||
<BlockchainInfo site={site} page={page} />
|
||||
</div>
|
||||
<SiteFooter site={site} page={page} />
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue