![{contributors[0]}]({`https://github.com/${contributors[0]}.png?size=100`})
+ 
+ 
event.preventDefault()}
+ />
+ 
+ Try it out
+
+ )}
+
+
+
+ {isHome ? (
+ <>
+
+
+
+
+ {children}
+
+
+
+
+ ) : (
+
+
+
+
+ {mdxProperties?.sections?.length > 1 && (
+
+ )}
+
+
+ )}
+
+
+
+ On this page
+
+ -
+ {mdxProperties?.sections?.map(
+ ({
+ id,
+ navtitle,
+ title,
+ indent,
+ }) => (
+
- + + {navtitle || title} + + + ) + )} +
+
+ {children}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {mdxProperties.meta?.proposal?.snapshot && (
+
+ {mdxProperties.meta?.ensip && (
+
+
+
+ )}
+ {hasCommit && (
+ Contributors
+
+
+
+
+ )}
+ {hasCommit && (
+ Hash
+
+
+
+
+ )}
+ {/* {mdxProperties.filepath && (
+ Last Modified
+
+
+ )} */}
+ Path
+ {mdxProperties.filepath}
+
+ {mdxProperties.status && (
+
+ );
+};
diff --git a/app/src/layout/details/variations/ENSIPDetails.tsx b/app/src/layout/details/variations/ENSIPDetails.tsx
new file mode 100644
index 000000000..71c96c944
--- /dev/null
+++ b/app/src/layout/details/variations/ENSIPDetails.tsx
@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import { FiClock } from 'react-icons/fi';
+
+import { MdxENSIPProps } from '@/lib/mdxPageProps';
+
+export const ENSIPDetails: FC<{ mdxProperties: MdxENSIPProps }> = ({
+ mdxProperties,
+}) => {
+ return (
+
+
+ )}
+ {mdxProperties.created && (
+ Status
+
+ {
+ {
+ final: (
+
+ ✅ Final
+
+ ),
+ draft: (
+
+ ✍️ Draft
+
+ ),
+ }[mdxProperties.status]
+ }
+
+
+
+ )}
+ {mdxProperties.discourse && (
+ Created
+
+
+
+
+ )}
+ {/* {mdxProperties.snapshot && (
+ Discourse
+
+
+
+ )} */}
+ {mdxProperties.type && (
+ Vote
+
+
+
+ )}
+ Type
+
+ {
+ {
+ social: (
+
+ 👨👩👧👦 Social
+
+ ),
+ executable: (
+
+ 👷 Executable
+
+ ),
+ }[mdxProperties.type]
+ }
+
+
+ {mdxProperties.status && (
+
+ );
+};
diff --git a/app/src/layout/details/variations/GitCommitLink.tsx b/app/src/layout/details/variations/GitCommitLink.tsx
new file mode 100644
index 000000000..70d174cd2
--- /dev/null
+++ b/app/src/layout/details/variations/GitCommitLink.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+// eslint-disable-next-line unicorn/prefer-node-protocol
+import crypto from 'crypto';
+import { usePathname } from 'next/navigation';
+import { FC, PropsWithChildren } from 'react';
+
+import { cx } from '@/lib/cx';
+
+const prefix = 'docs';
+const repo = 'ensdomains/docs-v2';
+
+export const GitCommitLink: FC<
+ PropsWithChildren<{ file: string; hash: string }>
+> = ({ file, hash, children }) => {
+ const file_hash = crypto
+ .createHash('sha256')
+ .update(prefix + file)
+ .digest('hex');
+ const pathname = usePathname();
+ const isDAO = pathname.startsWith('/dao');
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/app/src/layout/details/variations/SnapshotDetails.tsx b/app/src/layout/details/variations/SnapshotDetails.tsx
new file mode 100644
index 000000000..428409e52
--- /dev/null
+++ b/app/src/layout/details/variations/SnapshotDetails.tsx
@@ -0,0 +1,133 @@
+import { gql, request } from 'graphql-request';
+
+import { TruncatedAddress } from '@/components/TruncatedAddress';
+import { MdxDAOProposalProps } from '@/lib/mdxPageProps';
+
+// eslint-disable-next-line prettier/prettier, unicorn/template-indent
+const query = gql`
+ query Proposals($proposal: String!) {
+ proposals(first: 1, where: { id: $proposal }) {
+ id
+ title
+ choices
+ scores
+ start
+ end
+ state
+ author
+ scores_total
+ }
+ }
+`;
+
+export type ProposalData = {
+ // 0xfe73d1b06675d6bc1cc074f440c347274d13c55b513ea02ec950efe639adbbb0
+ id: string;
+ // "[Social] Proposal: Transfer ENS Treasury and Contract Ownership"
+ title: string;
+ // ["Yes", "No"]
+ choices: string[];
+ // Start time of the proposal
+ start: number;
+ // End time of the proposal
+ end: number;
+ //
+ state: 'closed' | '';
+ // Author "0x5BFCB4BE4d7B43437d5A0c57E908c048a4418390"
+ author: string;
+ // Votes
+ scores: number[];
+ // Total votes
+ scores_total: number;
+};
+
+export const fetchSnapshotData = async (proposal?: string) => {
+ if (!proposal) return;
+
+ const data = await request<{ proposals: ProposalData[] }>(
+ 'https://hub.snapshot.org/graphql',
+ query,
+ { proposal }
+ );
+
+ return data.proposals[0] as ProposalData;
+};
+
+export const SnapshotDetails = async ({
+ data,
+}: // snapshotData,
+{
+ data: MdxDAOProposalProps;
+ snapshotData: ProposalData;
+}) => {
+ const snapshotData = await fetchSnapshotData(data.snapshot);
+
+ return (
+
+
+ )}
+ {mdxProperties.created && (
+ Status
+
+ {
+ {
+ final: (
+
+ ✅ Final
+
+ ),
+ draft: (
+
+ ✍️ Draft
+
+ ),
+ obsolete: (
+
+ ❌ Obsolete
+
+ ),
+ }[mdxProperties.status]
+ }
+
+
+
+ )}
+ Created
+
+
+
+
+
+ );
+};
diff --git a/app/src/layout/details/variations/TallyDetails.tsx b/app/src/layout/details/variations/TallyDetails.tsx
new file mode 100644
index 000000000..ab2720975
--- /dev/null
+++ b/app/src/layout/details/variations/TallyDetails.tsx
@@ -0,0 +1,189 @@
+import { gql, request } from 'graphql-request';
+import { FC } from 'react';
+
+import { TruncatedAddress } from '@/components/TruncatedAddress';
+import { MdxDAOProposalProps } from '@/lib/mdxPageProps';
+
+const API_KEY = process.env.TALLY_API_KEY;
+
+// eslint-disable-next-line prettier/prettier, unicorn/template-indent
+const query = gql`
+ query ProposalStatusHistory($governanceId: AccountID!, $proposalId: ID!) {
+ proposal(proposalId: $proposalId, governanceId: $governanceId) {
+ end {
+ id
+ timestamp
+ }
+ start {
+ id
+ timestamp
+ }
+ governance {
+ chainId
+ timelockId
+ quorum
+ tokens {
+ decimals
+ }
+ }
+ voteStats {
+ support
+ weight
+ percent
+ }
+ tallyProposal {
+ createdAt
+ creator {
+ name
+ address
+ }
+ }
+ proposer {
+ name
+ address
+ picture
+ }
+ createdTransaction {
+ block {
+ id
+ timestamp
+ }
+ }
+ statusChanges {
+ type
+ txHash
+ block {
+ id
+ timestamp
+ }
+ }
+ }
+ }
+`;
+
+export type TallyProposalData = {
+ createdTransaction: {
+ block: {};
+ };
+ end: { timestamp: string };
+ start: { timestamp: string };
+ proposer: { name: string; address: string; picture: string };
+ statusChanges: {
+ type: 'PENDING' | 'ACTIVE' | 'SUCCEEDED' | 'QUEUED' | 'EXECUTED';
+ txHash: string;
+ block: {};
+ }[];
+ tallyProposal: {
+ createdAt: string;
+ creator: { name: string; address: string };
+ };
+ voteStats: { percent: string; support: string; weight: string }[];
+};
+
+export const fetchTallyData = async (proposal?: string) => {
+ if (!proposal) return;
+
+ const data = await request<{ proposal: TallyProposalData }>(
+ 'https://api.tally.xyz/query',
+ query,
+ {
+ proposalId: proposal,
+ // ens.eth governance id
+ governanceId: 'eip155:1:0x323A76393544d5ecca80cd6ef2A560C6a395b7E3',
+ },
+ {
+ 'Api-Key': API_KEY,
+ }
+ );
+
+ return data.proposal;
+};
+
+const large2Smol = (x: number) => {
+ let newValue = x;
+ const suffixes = ['', 'K', 'M', 'B', 'T'];
+ let suffixNumber = 0;
+
+ while (newValue >= 1000) {
+ newValue /= 1000;
+ suffixNumber++;
+ }
+
+ return Math.round(newValue * 100) / 100 + suffixes[suffixNumber];
+};
+
+export const TallyDetails: FC<{
+ data: MdxDAOProposalProps;
+}> = async ({ data }) => {
+ // TODO: Re-enable Tally API
+ const tallyData = undefined; // await fetchTallyData(data.tally);
+
+ if (!tallyData) {
+ return <>;
+ }
+
+ return (
+ Results
+
+ 
+
+
+
+
+
+
+
+
+ Proposer
+
+
+
+ {snapshotData?.choices.map((choice, index) => (
+
+ {/* {hasContributors && (
+
+
+ ))}
+
+
+ {choice}
+
+
+ {`${
+ Math.round(
+ (snapshotData.scores[index] /
+ snapshotData.scores_total) *
+ 10_000
+ ) / 100
+ }%`}
+
+
+
+
+
+
+ )} */}
+ Contributors
+
+
+
+ );
+};
diff --git a/app/src/layout/footer/PageFooter.tsx b/app/src/layout/footer/PageFooter.tsx
new file mode 100644
index 000000000..0dbaaf362
--- /dev/null
+++ b/app/src/layout/footer/PageFooter.tsx
@@ -0,0 +1,138 @@
+import Link from 'next/link';
+import { FC } from 'react';
+import { FaXTwitter } from 'react-icons/fa6';
+
+// import { navigation } from '@/lib/headers';
+import { MdxPageProps } from '@/lib/mdxPageProps';
+
+import { ContributeLink } from './contribute/ContributeLink';
+import { Feedback } from './feedback/FeedbackSection';
+
+// function PageLink({ label, page, previous = false }) {
+// return (
+// <>
+//
+//
+// {page.title}
+//
+//
+// );
+// }
+
+// function PageNavigation() {
+// const pathname = usePathname();
+// const allPages = navigation
+// .find(([path, group]) => pathname.match(path) && group)[1]
+// .flatMap((group) => group.links);
+// const currentPageIndex = allPages
+// .filter((a) => a)
+// .findIndex((page) => page.href === pathname);
+
+// if (currentPageIndex === -1) {
+// return;
+// }
+
+// const previousPage = allPages[currentPageIndex - 1];
+// const nextPage = allPages[currentPageIndex + 1];
+
+// if (!previousPage && !nextPage) {
+// return;
+// }
+
+// return (
+// Results
+
+ 
+
+
+
+
+
+
+
+ Proposer
+
+ {tallyData.proposer.name ?? (
+
+
+ {tallyData?.voteStats.map(
+ ({ support, percent, weight }, _index) => (
+
+ {/* {hasContributors && (
+
+
+ )
+ )}
+
+
+ {support}
+
+
+ {large2Smol(
+ Number.parseInt(weight) / 10e17
+ )}
+
+
+
+
+
+
+ )} */}
+ Contributors
+
+// {previousPage && (
+//
+// );
+// }
+function GitHubIcon(properties) {
+ return (
+
+ );
+}
+
+function DiscordIcon(properties) {
+ return (
+
+ );
+}
+
+function SocialLink({ href, icon: Icon, children }) {
+ return (
+
+ {children}
+
+//
+// )}
+// {nextPage && (
+//
+//
+// )}
+//
+
+ );
+}
+
+export const Footer: FC<{
+ mdxProperties: MdxPageProps;
+}> = ({ mdxProperties }) => {
+ return (
+
+ );
+};
diff --git a/app/src/layout/footer/contribute/ContributeLink.tsx b/app/src/layout/footer/contribute/ContributeLink.tsx
new file mode 100644
index 000000000..c19cf3b0c
--- /dev/null
+++ b/app/src/layout/footer/contribute/ContributeLink.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { FC } from 'react';
+import { FiGithub } from 'react-icons/fi';
+
+const ROOT_REPO = 'ensdomains/docs-v2';
+
+export const ContributeLink: FC<{ url?: string }> = ({ url }) => {
+ if (!url) {
+ const asPath = usePathname();
+
+ url = `/pages${asPath}.mdx`;
+ console.warn(
+ 'Failed to get url, defaulting back to asPath from useRouter',
+ url
+ );
+
+ return <>;
+ }
+
+ return (
+
+ + © Copyright {new Date().getFullYear()}. All rights + reserved. +
+
+
+ Follow us on X
+
+
+ Follow us on GitHub
+
+
+ Join our Discord server
+
+
+