diff --git a/tools/bridge-frontend/Dockerfile b/tools/bridge-frontend/Dockerfile index 6aa25dea99..e94d21f1fa 100644 --- a/tools/bridge-frontend/Dockerfile +++ b/tools/bridge-frontend/Dockerfile @@ -9,10 +9,12 @@ WORKDIR /home/obscuro/go-obscuro/tools/bridge-frontend # ARG for build-time variable ARG API_HOST +ARG API_HOST_ENVIRONMENT ARG GOOGLE_ANALYTICS_ID # ENV for URL to be used in the app ENV NEXT_PUBLIC_BRIDGE_API_HOST=${API_HOST} +ENV NEXT_PUBLIC_BRIDGE_API_HOST_ENVIRONMENT=${API_HOST_ENVIRONMENT} ENV NEXT_PUBLIC_BRIDGE_GOOGLE_ANALYTICS_ID=${GOOGLE_ANALYTICS_ID} RUN npm install diff --git a/tools/bridge-frontend/public/assets/images/cover.png b/tools/bridge-frontend/public/assets/images/cover.png new file mode 100644 index 0000000000..6e7887f3b6 Binary files /dev/null and b/tools/bridge-frontend/public/assets/images/cover.png differ diff --git a/tools/bridge-frontend/src/components/head-seo.tsx b/tools/bridge-frontend/src/components/head-seo.tsx new file mode 100644 index 0000000000..d73efd55c3 --- /dev/null +++ b/tools/bridge-frontend/src/components/head-seo.tsx @@ -0,0 +1,62 @@ +import Head from "next/head"; +import { siteMetadata } from "../lib/siteMetadata"; +import { SeoProps } from "../types"; + +const HeadSeo = ({ + title, + description, + canonicalUrl, + ogTwitterImage, + ogImageUrl, + ogType, + includeDefaultKeywords = true, + children, +}: SeoProps) => { + return ( + + {/* Basic metadata */} + {title} + + + + {includeDefaultKeywords && ( + + )} + {/* Beagle Security */} + + {/* to indicate the browser shouldn't interpret the response as something other than the specified content type */} + + {/* twitter metadata */} + + + + + + {/* canonical link */} + + {/* open graph metadata */} + + + + + + + + {children} + + ); +}; + +export default HeadSeo; diff --git a/tools/bridge-frontend/src/lib/constants.ts b/tools/bridge-frontend/src/lib/constants.ts index 6006fb8955..1721ba7312 100644 --- a/tools/bridge-frontend/src/lib/constants.ts +++ b/tools/bridge-frontend/src/lib/constants.ts @@ -33,6 +33,7 @@ export const getOptions = (query: { }; export const apiHost = process.env.NEXT_PUBLIC_BRIDGE_API_HOST; +export const environment = process.env.NEXT_PUBLIC_BRIDGE_API_HOST_ENVIRONMENT; export const l1Bridge = process.env.NEXT_PUBLIC_BRIDGE_L1; export const l2Bridge = process.env.NEXT_PUBLIC_BRIDGE_L2; diff --git a/tools/bridge-frontend/src/lib/siteMetadata.ts b/tools/bridge-frontend/src/lib/siteMetadata.ts new file mode 100644 index 0000000000..34ec555cc6 --- /dev/null +++ b/tools/bridge-frontend/src/lib/siteMetadata.ts @@ -0,0 +1,17 @@ +import { environment, socialLinks } from "./constants"; + +export const siteMetadata = { + companyName: "TEN Bridge", + metaTitle: " TEN Bridge | Cross-Chain Transactions Made Easy", + description: + "Bridge tokens between Layer 1 and Layer 2 networks effortlessly with TEN Bridge. Ensure secure and efficient cross-chain transactions", + keywords: + "token bridging, cross-chain transactions, Layer 1 to Layer 2 bridge, blockchain bridge, Ten Bridge, crypto bridging, TEN network, TEN blockchain, TEN ecosystem", + siteUrl: `https://${environment}-bridge.ten.xyz`, + siteLogo: `/assets/images/cover.png`, + siteLogoSquare: `/assets/images/cover.png`, + email: "team@ten.xyz", + twitter: socialLinks.twitter, + twitterHandle: socialLinks.twitterHandle, + github: socialLinks.github, +}; diff --git a/tools/bridge-frontend/src/types/index.ts b/tools/bridge-frontend/src/types/index.ts new file mode 100644 index 0000000000..94f84794ca --- /dev/null +++ b/tools/bridge-frontend/src/types/index.ts @@ -0,0 +1,12 @@ +import React from "react"; + +export interface SeoProps { + title: string; + description: string; + canonicalUrl: string; + ogTwitterImage: string; + ogImageUrl: string; + ogType: string; + includeDefaultKeywords?: boolean; + children?: React.ReactNode; +} diff --git a/tools/tenscan/frontend/pages/_app.tsx b/tools/tenscan/frontend/pages/_app.tsx index d2115793f1..9c63ee0a42 100644 --- a/tools/tenscan/frontend/pages/_app.tsx +++ b/tools/tenscan/frontend/pages/_app.tsx @@ -68,27 +68,7 @@ export default function App({ Component, pageProps }: AppProps) { ogImageUrl={siteMetadata.siteLogo} ogTwitterImage={siteMetadata.siteLogo} ogType={"website"} - > - - - - - - + > -
-
-
-

Batches

- {BatchesData?.length > 0 && ( -

- Showing batches #{firstBatchHeight}{" "} - {lastBatchHeight !== firstBatchHeight && - "to #" + lastBatchHeight} - {/* uncomment the following line when total count feature is implemented */} - {/* of {formatNumber(Total)} batches. */} -

- )} + <> + + +
+
+
+

Batches

+ {BatchesData?.length > 0 && ( +

+ Showing batches #{firstBatchHeight}{" "} + {lastBatchHeight !== firstBatchHeight && + "to #" + lastBatchHeight} + {/* uncomment the following line when total count feature is implemented */} + {/* of {formatNumber(Total)} batches. */} +

+ )} +
+
- -
- + + ); } diff --git a/tools/tenscan/frontend/pages/blocks/index.tsx b/tools/tenscan/frontend/pages/blocks/index.tsx index 158a1214dd..756add84b4 100644 --- a/tools/tenscan/frontend/pages/blocks/index.tsx +++ b/tools/tenscan/frontend/pages/blocks/index.tsx @@ -6,6 +6,8 @@ import { Metadata } from "next"; import { useBlocksService } from "@/src/services/useBlocksService"; import { getItem } from "@/src/lib/utils"; import { ItemPosition } from "@/src/types/interfaces"; +import HeadSeo from "@/src/components/head-seo"; +import { siteMetadata } from "@/src/lib/siteMetadata"; export const metadata: Metadata = { title: "Blocks", @@ -32,31 +34,41 @@ export default function Blocks() { ); return ( - -
-
-
-

Blocks

- {BlocksData?.length > 0 && ( -

- Showing blocks #{firstBlockNumber}{" "} - {lastBlockNumber !== firstBlockNumber && - "to #" + lastBlockNumber} - {/* uncomment the following line when total count feature is implemented */} - {/* of {formatNumber(Total)} blocks. */} -

- )} + <> + + +
+
+
+

Blocks

+ {BlocksData?.length > 0 && ( +

+ Showing blocks #{firstBlockNumber}{" "} + {lastBlockNumber !== firstBlockNumber && + "to #" + lastBlockNumber} + {/* uncomment the following line when total count feature is implemented */} + {/* of {formatNumber(Total)} blocks. */} +

+ )} +
+
- -
- + + ); } diff --git a/tools/tenscan/frontend/pages/personal/index.tsx b/tools/tenscan/frontend/pages/personal/index.tsx index 4662608164..28c4e74e70 100644 --- a/tools/tenscan/frontend/pages/personal/index.tsx +++ b/tools/tenscan/frontend/pages/personal/index.tsx @@ -6,6 +6,8 @@ import { useWalletConnection } from "@/src/components/providers/wallet-provider" import ConnectWalletButton from "@/src/components/modules/common/connect-wallet"; import EmptyState from "@/src/components/modules/common/empty-state"; import { ethereum } from "@/src/lib/utils"; +import HeadSeo from "@/src/components/head-seo"; +import { siteMetadata } from "@/src/lib/siteMetadata"; export const metadata: Metadata = { title: "Personal Transactions", @@ -16,24 +18,34 @@ export default function PersonalPage() { const { walletConnected } = useWalletConnection(); return ( - - {walletConnected ? ( - - ) : ( - - } - /> - )} - + <> + + + {walletConnected ? ( + + ) : ( + + } + /> + )} + + ); } diff --git a/tools/tenscan/frontend/pages/rollups/index.tsx b/tools/tenscan/frontend/pages/rollups/index.tsx index 8793dd2ad4..f9932f73f8 100644 --- a/tools/tenscan/frontend/pages/rollups/index.tsx +++ b/tools/tenscan/frontend/pages/rollups/index.tsx @@ -6,6 +6,8 @@ import { Metadata } from "next"; import { columns } from "@/src/components/modules/rollups/columns"; import { getItem } from "@/src/lib/utils"; import { ItemPosition } from "@/src/types/interfaces"; +import HeadSeo from "@/src/components/head-seo"; +import { siteMetadata } from "@/src/lib/siteMetadata"; export const metadata: Metadata = { title: "Rollups", @@ -33,30 +35,40 @@ export default function Rollups() { const lastRollupID = Number(getItem(RollupsData, "ID", ItemPosition.LAST)); return ( - -
-
-
-

Rollups

- {RollupsData?.length > 0 && ( -

- Showing rollups #{firstRollupID}{" "} - {lastRollupID !== firstRollupID && "to #" + lastRollupID} - {/* uncomment the following line when total count feature is implemented */} - {/* of {formatNumber(Total)} rollups. */} -

- )} + <> + + +
+
+
+

Rollups

+ {RollupsData?.length > 0 && ( +

+ Showing rollups #{firstRollupID}{" "} + {lastRollupID !== firstRollupID && "to #" + lastRollupID} + {/* uncomment the following line when total count feature is implemented */} + {/* of {formatNumber(Total)} rollups. */} +

+ )} +
+
- -
- + + ); } diff --git a/tools/tenscan/frontend/pages/transactions/index.tsx b/tools/tenscan/frontend/pages/transactions/index.tsx index 2a63269e16..a94c0e45d4 100644 --- a/tools/tenscan/frontend/pages/transactions/index.tsx +++ b/tools/tenscan/frontend/pages/transactions/index.tsx @@ -6,6 +6,8 @@ import { useTransactionsService } from "@/src/services/useTransactionsService"; import { Metadata } from "next"; import { getItem } from "@/src/lib/utils"; import { ItemPosition } from "@/src/types/interfaces"; +import HeadSeo from "@/src/components/head-seo"; +import { siteMetadata } from "@/src/lib/siteMetadata"; export const metadata: Metadata = { title: "Transactions", @@ -41,33 +43,45 @@ export default function Transactions() { ); return ( - -
-
-
-

Transactions

- {TransactionsData?.length > 0 && ( -

- Showing transactions in batch - {firstBatchHeight !== lastBatchHeight && "es"} # - {firstBatchHeight}{" "} - {firstBatchHeight !== lastBatchHeight && - "to #" + lastBatchHeight} - {/* uncomment the following line when total count feature is implemented */} - {/* of {formatNumber(Total)} transactions. */} -

- )} + <> + + +
+
+
+

+ Transactions +

+ {TransactionsData?.length > 0 && ( +

+ Showing transactions in batch + {firstBatchHeight !== lastBatchHeight && "es"} # + {firstBatchHeight}{" "} + {firstBatchHeight !== lastBatchHeight && + "to #" + lastBatchHeight} + {/* uncomment the following line when total count feature is implemented */} + {/* of {formatNumber(Total)} transactions. */} +

+ )} +
+
- -
- + + ); } diff --git a/tools/tenscan/frontend/public/assets/images/cover.png b/tools/tenscan/frontend/public/assets/images/cover.png new file mode 100644 index 0000000000..e39c8a99fc Binary files /dev/null and b/tools/tenscan/frontend/public/assets/images/cover.png differ diff --git a/tools/tenscan/frontend/src/components/head-seo.tsx b/tools/tenscan/frontend/src/components/head-seo.tsx index f6007c6b7f..3cafb9c345 100644 --- a/tools/tenscan/frontend/src/components/head-seo.tsx +++ b/tools/tenscan/frontend/src/components/head-seo.tsx @@ -9,6 +9,7 @@ const HeadSeo = ({ ogTwitterImage, ogImageUrl, ogType, + includeDefaultKeywords = true, children, }: SeoProps) => { return ( @@ -18,6 +19,9 @@ const HeadSeo = ({ + {includeDefaultKeywords && ( + + )} {/* twitter metadata */} @@ -42,6 +46,25 @@ const HeadSeo = ({ key="og-image" /> + + + + + {children} ); diff --git a/tools/tenscan/frontend/src/lib/siteMetadata.ts b/tools/tenscan/frontend/src/lib/siteMetadata.ts index de13a1ea29..60be30ad23 100644 --- a/tools/tenscan/frontend/src/lib/siteMetadata.ts +++ b/tools/tenscan/frontend/src/lib/siteMetadata.ts @@ -2,15 +2,65 @@ import { socialLinks } from "./constants"; export const siteMetadata = { companyName: "Tenscan", - metaTitle: - "Ten, a decentralized Layer 2 Rollup protocol designed to hyper-scale and encrypt the Ethereum blockchain.", + metaTitle: "Tenscan - Real-Time Blockchain Explorer", description: - "Tenscan allows you to explore and search activities taking place on the Ten Layer 2 blockchain", - siteUrl: "https://ten.xyz", - siteLogo: ``, - siteLogoSquare: ``, - email: "team@obscu.ro", + "Tenscan allows you to explore and search the TEN blockchain. View transaction history and smart contract interactions without compromising sensitive data.", + keywords: + "blockchain explorer, real-time blockchain data, dapps, l2, encryption, layer2, crypto transactions, blockchain analysis, Tenscan, block explorer,TEN, TEN Protocol, TEN chain, TEN network, TEN blockchain, TEN explorer", + siteUrl: "https://tenscan.io", + siteLogo: `/assets/images/cover.png`, + siteLogoSquare: `/assets/images/cover.png`, + email: "team@ten.xyz", twitter: socialLinks.twitter, twitterHandle: socialLinks.twitterHandle, github: socialLinks.github, + + rollups: { + title: "Tenscan | Rollups", + description: "View the latest rollups on the TEN network.", + canonicalUrl: "https://tenscan.io/rollups", + ogImageUrl: "/assets/images/cover.png", + ogTwitterImage: "/assets/images/cover.png", + ogType: "website", + }, + + blocks: { + title: "Tenscan | Blocks", + description: + "Analyze blocks on TEN in real-time. Access block height, timestamp, transaction count, and miner details instantly", + canonicalUrl: "https://tenscan.io/blocks", + ogImageUrl: "/assets/images/cover.png", + ogTwitterImage: "/assets/images/cover.png", + ogType: "website", + }, + + batches: { + title: "Tenscan | Batches", + description: + "Explore the history of batches on TEN. Access detailed batch lists, transaction summaries, and batch metadata", + canonicalUrl: "https://tenscan.io/batches", + ogImageUrl: "/assets/images/cover.png", + ogTwitterImage: "/assets/images/cover.png", + ogType: "website", + }, + + transactions: { + title: "Tenscan | Public Transactions", + description: + "Explore all public transactions on TEN. View essential details including batch, batch age, transaction hash, and finality status", + canonicalUrl: "https://tenscan.io/transactions", + ogImageUrl: "/assets/images/cover.png", + ogTwitterImage: "/assets/images/cover.png", + ogType: "website", + }, + + personal: { + title: "Tenscan | Personal Transactions", + description: + "Access detailed information about your transactions on TEN. View sender, receiver, amount, confirmation status and more", + canonicalUrl: "https://tenscan.io/personal", + ogImageUrl: "/assets/images/cover.png", + ogTwitterImage: "/assets/images/cover.png", + ogType: "website", + }, }; diff --git a/tools/tenscan/frontend/src/types/interfaces/index.ts b/tools/tenscan/frontend/src/types/interfaces/index.ts index 48b87edb9e..bd25e0b37a 100644 --- a/tools/tenscan/frontend/src/types/interfaces/index.ts +++ b/tools/tenscan/frontend/src/types/interfaces/index.ts @@ -7,7 +7,8 @@ export interface SeoProps { ogTwitterImage: string; ogImageUrl: string; ogType: string; - children: React.ReactNode; + includeDefaultKeywords?: boolean; + children?: React.ReactNode; } export interface ErrorType { diff --git a/tools/walletextension/frontend/public/assets/images/cover.png b/tools/walletextension/frontend/public/assets/images/cover.png new file mode 100644 index 0000000000..8afca0118e Binary files /dev/null and b/tools/walletextension/frontend/public/assets/images/cover.png differ diff --git a/tools/walletextension/frontend/src/components/head-seo.tsx b/tools/walletextension/frontend/src/components/head-seo.tsx index e353162253..9510d6329c 100644 --- a/tools/walletextension/frontend/src/components/head-seo.tsx +++ b/tools/walletextension/frontend/src/components/head-seo.tsx @@ -9,6 +9,7 @@ const HeadSeo = ({ ogTwitterImage, ogImageUrl, ogType, + includeDefaultKeywords = true, children, }: SeoProps) => { return ( @@ -18,6 +19,9 @@ const HeadSeo = ({ + {includeDefaultKeywords && ( + + )} {/* Beagle Security */} + + + + + {children} ); diff --git a/tools/walletextension/frontend/src/lib/siteMetadata.ts b/tools/walletextension/frontend/src/lib/siteMetadata.ts index 00f812a90b..c5cd2666e8 100644 --- a/tools/walletextension/frontend/src/lib/siteMetadata.ts +++ b/tools/walletextension/frontend/src/lib/siteMetadata.ts @@ -1,15 +1,16 @@ import { socialLinks } from "./constants"; export const siteMetadata = { - companyName: "Ten Gateway", - metaTitle: - "Ten, a decentralized Layer 2 Rollup protocol designed to hyper-scale and encrypt the Ethereum blockchain.", + companyName: "TEN Gateway", + metaTitle: "Secure Blockchain Authentication - TEN Gateway", description: - "Ten, a decentralized Ethereum Layer 2 Rollup protocol designed to hyper-scale, encrypt and prevent negative MEV on Ethereum.", - siteUrl: "https://ten.xyz", - siteLogo: ``, - siteLogoSquare: ``, - email: "team@obscu.ro", + "Your secure entry point to the TEN ecosystem. Easily authenticate your accounts and access dApps built on TEN. Experience seamless, confidential blockchain interactions.", + keywords: + "blockchain authentication, secure login, crypto account access, dapps, l2, encryption, layer2, digital identity, TEN Gateway, blockchain security, TEN network, TEN blockchain, TEN ecosystem", + siteUrl: "https://testnet.ten.xyz", + siteLogo: `/assets/images/cover.png`, + siteLogoSquare: `/assets/images/cover.png`, + email: "team@ten.xyz", twitter: socialLinks.twitter, twitterHandle: socialLinks.twitterHandle, github: socialLinks.github, diff --git a/tools/walletextension/frontend/src/pages/_app.tsx b/tools/walletextension/frontend/src/pages/_app.tsx index afe1f352c6..46e445773b 100644 --- a/tools/walletextension/frontend/src/pages/_app.tsx +++ b/tools/walletextension/frontend/src/pages/_app.tsx @@ -33,27 +33,7 @@ export default function App({ Component, pageProps }: AppProps) { ogImageUrl={siteMetadata.siteLogo} ogTwitterImage={siteMetadata.siteLogo} ogType={"website"} - > - - - - - - + >