Skip to content

Commit 7c270b2

Browse files
fbsobreirafbsobreira
committed
feat: add social media preview
 - Add Open Graph and Twitter Card meta tags for social sharing - Add static OG image (og-image.png) for reliable previews - Keep dynamic opengraph-image.tsx generator as backup - Rename "KleverChain" to "Klever Blockchain" across all pages
1 parent f476856 commit 7c270b2

File tree

14 files changed

+377
-50
lines changed

14 files changed

+377
-50
lines changed

‎README.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
[![CI](https://github.com/klever-io/klv-bridge-assets/actions/workflows/ci.yml/badge.svg)](https://github.com/klever-io/klv-bridge-assets/actions/workflows/ci.yml)
44
[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
55

6-
A transparency dashboard for the Klever Bridge, providing real-time verification that wrapped tokens on KleverChain are fully backed by assets locked on source chains.
6+
A transparency dashboard for the Klever Bridge, providing real-time verification that wrapped tokens on Klever Blockchain are fully backed by assets locked on source chains.
77

88
## Overview
99

10-
The Klever Bridge enables cross-chain asset transfers between KleverChain and other blockchain networks. This dashboard provides transparent, real-time proof that all wrapped tokens are 100% backed by locked collateral.
10+
The Klever Bridge enables cross-chain asset transfers between Klever Blockchain and other blockchain networks. This dashboard provides transparent, real-time proof that all wrapped tokens are 100% backed by locked collateral.
1111

1212
### Features
1313

14-
- **Real-time Balance Verification** - Live data from bridge contracts and KleverChain
14+
- **Real-time Balance Verification** - Live data from bridge contracts and Klever Blockchain
1515
- **Multi-chain Support** - Ethereum (live), BSC, Polygon, Arbitrum, Tron (coming soon)
1616
- **Backing Ratio Display** - Visual indicators showing locked vs minted amounts
1717
- **On-chain Verification Links** - Direct links to block explorers for independent verification
@@ -26,7 +26,7 @@ The Klever Bridge enables cross-chain asset transfers between KleverChain and ot
2626
| Polygon | Coming Soon | [PolygonScan](https://polygonscan.com) |
2727
| Arbitrum | Coming Soon | [Arbiscan](https://arbiscan.io) |
2828
| Tron | Coming Soon | [Tronscan](https://tronscan.org) |
29-
| KleverChain | Live | [KleverScan](https://kleverscan.org) |
29+
| Klever Blockchain | Live | [KleverScan](https://kleverscan.org) |
3030

3131
## Tech Stack
3232

@@ -68,7 +68,7 @@ Open [http://localhost:3000](http://localhost:3000) to view the dashboard.
6868

6969
| Variable | Description | Default |
7070
|----------|-------------|---------|
71-
| `NEXT_PUBLIC_KLEVER_API_URL` | KleverChain API endpoint | `https://api.mainnet.klever.org` |
71+
| `NEXT_PUBLIC_KLEVER_API_URL` | Klever Blockchain API endpoint | `https://api.mainnet.klever.org` |
7272

7373
## Available Scripts
7474

@@ -108,7 +108,7 @@ public/assets/
108108
1. Edit `src/config/bridge-assets.json`
109109
2. Add token configuration with:
110110
- Symbol, name, decimals
111-
- KleverChain base token ID
111+
- Klever Blockchain base token ID
112112
- Liquidity tokens for each chain
113113
- Source chain configurations (bridge/token contracts)
114114
3. Add token logo to `public/assets/`
@@ -121,14 +121,14 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed instructions.
121121

122122
The Klever Bridge uses a multi-token model:
123123

124-
- **Base Token**: Universal wrapped token on KleverChain (e.g., `USDT-XXXX`)
124+
- **Base Token**: Universal wrapped token on Klever Blockchain (e.g., `USDT-XXXX`)
125125
- **Liquidity Tokens**: Per-chain tracking tokens (e.g., `ETHUSDT-XXXX`, `BSCUSDT-XXXX`)
126126

127127
### Data Flow
128128

129129
1. Token configuration loaded from JSON registry
130130
2. EVM balances fetched via wagmi multicall
131-
3. KleverChain data fetched from Klever API
131+
3. Klever Blockchain data fetched from Klever API
132132
4. Data aggregated and backing ratio calculated
133133
5. UI displays real-time verification status
134134

‎next.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const nextConfig: NextConfig = {
3636
},
3737
{
3838
key: "Content-Security-Policy",
39-
value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https:; font-src 'self' data:;",
39+
value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https:; font-src 'self' data:; worker-src 'self' blob:;",
4040
},
4141
],
4242
},

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,10 @@
4848
"typescript": "^5.9.3",
4949
"wrangler": "^4.58.0"
5050
},
51-
"packageManager": "pnpm@9.15.2"
51+
"packageManager": "pnpm@9.15.2",
52+
"pnpm": {
53+
"overrides": {
54+
"@smithy/config-resolver": ">=4.4.0"
55+
}
56+
}
5257
}

‎pnpm-lock.yaml‎

Lines changed: 8 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/og-image.png‎

458 KB
Loading

‎src/app/about/page.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export default function AboutPage() {
1919
</h2>
2020
<p className="text-[var(--muted-foreground)] leading-relaxed">
2121
Klever Bridge is a cross-chain bridge that enables seamless transfer of assets
22-
between KleverChain and other blockchain networks including Ethereum, BNB Smart Chain,
23-
Polygon, and Arbitrum. The bridge allows users to wrap their tokens on KleverChain
22+
between Klever Blockchain and other blockchain networks including Ethereum, BNB Smart Chain,
23+
Polygon, and Arbitrum. The bridge allows users to wrap their tokens on Klever Blockchain
2424
while maintaining full backing by the original assets locked in bridge contracts.
2525
</p>
2626
</section>
@@ -50,7 +50,7 @@ export default function AboutPage() {
5050
<div>
5151
<h3 className="font-medium text-[var(--foreground)]">Mint</h3>
5252
<p className="text-sm">
53-
An equivalent amount of wrapped tokens is minted on KleverChain, representing
53+
An equivalent amount of wrapped tokens is minted on Klever Blockchain, representing
5454
the locked assets 1:1.
5555
</p>
5656
</div>
@@ -62,7 +62,7 @@ export default function AboutPage() {
6262
<div>
6363
<h3 className="font-medium text-[var(--foreground)]">Redeem</h3>
6464
<p className="text-sm">
65-
When users want to withdraw, wrapped tokens are burned on KleverChain and
65+
When users want to withdraw, wrapped tokens are burned on Klever Blockchain and
6666
the original tokens are released from the bridge contract.
6767
</p>
6868
</div>
@@ -77,7 +77,7 @@ export default function AboutPage() {
7777
</h2>
7878
<p className="text-[var(--muted-foreground)] leading-relaxed mb-4">
7979
This transparency portal provides real-time verification that all wrapped tokens
80-
on KleverChain are fully backed by locked assets on source chains. You can verify:
80+
on Klever Blockchain are fully backed by locked assets on source chains. You can verify:
8181
</p>
8282
<ul className="space-y-2 text-[var(--muted-foreground)]">
8383
<li className="flex items-start gap-2">
@@ -90,7 +90,7 @@ export default function AboutPage() {
9090
<svg className="w-5 h-5 text-[var(--success)] flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
9191
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
9292
</svg>
93-
<span><strong>Minted supply</strong> — Total wrapped tokens circulating on KleverChain</span>
93+
<span><strong>Minted supply</strong> — Total wrapped tokens circulating on Klever Blockchain</span>
9494
</li>
9595
<li className="flex items-start gap-2">
9696
<svg className="w-5 h-5 text-[var(--success)] flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -118,7 +118,7 @@ export default function AboutPage() {
118118
<div className="bg-[var(--muted)]/30 rounded-lg p-4 space-y-3 text-sm">
119119
<div>
120120
<span className="font-mono text-[var(--primary)]">USDT-XXXX</span>
121-
<span className="text-[var(--muted-foreground)]"> — Base token (universal wrapped USDT on KleverChain)</span>
121+
<span className="text-[var(--muted-foreground)]"> — Base token (universal wrapped USDT on Klever Blockchain)</span>
122122
</div>
123123
<div>
124124
<span className="font-mono text-[var(--primary)]">ETHUSDT-XXXX</span>
@@ -143,7 +143,7 @@ export default function AboutPage() {
143143
{ name: "Polygon", logo: "/assets/chains/polygon.png", badge: "Coming Soon" },
144144
{ name: "Arbitrum", logo: "/assets/chains/arbitrum.png", badge: "Coming Soon" },
145145
{ name: "Tron", logo: "/assets/chains/tron.png", badge: "Coming Soon" },
146-
{ name: "KleverChain", logo: "/assets/chains/klever.png", badge: "Live" },
146+
{ name: "Klever Blockchain", logo: "/assets/chains/klever.png", badge: "Live" },
147147
].map((chain) => (
148148
<div
149149
key={chain.name}

‎src/app/apple-icon.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { ImageResponse } from "next/og";
2+
3+
export const size = {
4+
width: 180,
5+
height: 180,
6+
};
7+
export const contentType = "image/png";
8+
9+
export default function Icon() {
10+
return new ImageResponse(
11+
(
12+
<div
13+
style={{
14+
width: "100%",
15+
height: "100%",
16+
display: "flex",
17+
alignItems: "center",
18+
justifyContent: "center",
19+
background: "transparent",
20+
}}
21+
>
22+
<svg
23+
width="160"
24+
height="160"
25+
viewBox="0 0 32 32"
26+
fill="none"
27+
xmlns="http://www.w3.org/2000/svg"
28+
>
29+
<defs>
30+
<linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%">
31+
<stop offset="0%" stopColor="#e91e8c"/>
32+
<stop offset="100%" stopColor="#9333ea"/>
33+
</linearGradient>
34+
</defs>
35+
<path
36+
d="M16 2C12 4 8 4 4 4v12c0 8 5 12 12 14 7-2 12-6 12-14V4c-4 0-8 0-12-2z"
37+
fill="url(#g)"
38+
/>
39+
<path
40+
d="M10 15l4 5 8-9"
41+
stroke="white"
42+
strokeWidth="2.5"
43+
strokeLinecap="round"
44+
strokeLinejoin="round"
45+
fill="none"
46+
/>
47+
</svg>
48+
</div>
49+
),
50+
{
51+
...size,
52+
}
53+
);
54+
}

‎src/app/icon.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎src/app/layout.tsx‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,31 @@ import { ErrorBoundary } from "@/components/error-boundary";
55
import "./globals.css";
66

77
export const metadata: Metadata = {
8-
title: "Klever Bridge Assets",
9-
description: "Asset transparency for Klever Blockchain Bridge wrapped tokens",
8+
title: "Klever Bridge Proof",
9+
description: "Asset transparency for Klever Blockchain Bridge wrapped tokens. Verify that locked assets on source chains match minted supply on Klever Blockchain.",
10+
metadataBase: new URL("https://bridge-proof.klever.org"),
11+
openGraph: {
12+
title: "Klever Bridge Proof",
13+
description: "Verify bridge asset backing - locked assets on Ethereum match minted tokens on Klever Blockchain",
14+
url: "https://bridge-proof.klever.org",
15+
siteName: "Klever Bridge Proof",
16+
images: [
17+
{
18+
url: "/og-image.png",
19+
width: 1200,
20+
height: 630,
21+
alt: "Klever Bridge Proof - Asset Transparency Dashboard",
22+
},
23+
],
24+
locale: "en_US",
25+
type: "website",
26+
},
27+
twitter: {
28+
card: "summary_large_image",
29+
title: "Klever Bridge Proof",
30+
description: "Verify bridge asset backing - locked assets on Ethereum match minted tokens on Klever Blockchain",
31+
images: ["/og-image.png"],
32+
},
1033
};
1134

1235
export default function RootLayout({

0 commit comments

Comments
 (0)