Skip to content

Commit b5da04a

Browse files
SyedAsadKazmiaelmanaa
SyedAsadKazmi
authored and
aelmanaa
committed
Add Getting Started and CCIP-BnM UI Faucet for Aptos
1 parent 470c70c commit b5da04a

File tree

9 files changed

+3752
-2516
lines changed

9 files changed

+3752
-2516
lines changed

‎astro.config.ts‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -109,18 +109,30 @@ export default defineConfig({
109109
adapter: vercel(),
110110
vite: {
111111
plugins: [yaml()],
112+
resolve: {
113+
// Ensure only ONE copy of these ends up in any chunk
114+
dedupe: ["react", "react-dom", "@aptos-labs/ts-sdk", "@aptos-labs/wallet-adapter-react"],
115+
},
112116
build: {
113117
target: "esnext", // Use latest ES features, no transpilation for modern browsers
114118
// Optimize CSS delivery
115119
cssMinify: true,
116120
// Increase the threshold for inlining assets to reduce render-blocking CSS
117121
assetsInlineLimit: 20000, // Inline CSS files up to 20KB to eliminate render-blocking
118-
// Removed manual chunking to prevent serverless function bloat
119-
// rollupOptions: {
120-
// output: {
121-
// manualChunks: ...
122-
// }
123-
// },
122+
// ⬇️ Split vendor families so duplicate minified helpers don't share a chunk
123+
rollupOptions: {
124+
output: {
125+
manualChunks(id) {
126+
if (!id.includes("node_modules")) return
127+
if (id.includes("@aptos-labs")) return "aptos"
128+
if (id.includes("@aptos-connect") || id.includes("@identity-connect")) return "aptos-ic"
129+
if (id.includes("@solana")) return "solana"
130+
if (id.includes("@keystonehq") || id.includes("react-qr-reader") || id.includes("qrcode.react")) {
131+
return "keystone-legacy"
132+
}
133+
},
134+
},
135+
},
124136
},
125137
esbuild: {
126138
target: "esnext", // Match build target for consistency

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@
4848
"dependencies": {
4949
"@11ty/eleventy-fetch": "^4.0.1",
5050
"@apollo/client": "^3.14.0",
51+
"@aptos-labs/ts-sdk": "^3.1.3",
52+
"@aptos-labs/wallet-adapter-react": "^7.0.5",
5153
"@astro-community/astro-embed-youtube": "^0.5.7",
5254
"@astrojs/mdx": "^4.3.6",
5355
"@astrojs/partytown": "^2.1.4",

‎src/config/sidebar.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1273,6 +1273,10 @@ export const SIDEBAR: Partial<Record<Sections, SectionEntry[]>> = {
12731273
title: "Solana",
12741274
url: "ccip/getting-started/svm",
12751275
},
1276+
{
1277+
title: "Aptos",
1278+
url: "ccip/getting-started/aptos",
1279+
},
12761280
],
12771281
},
12781282
{

‎src/content/ccip/getting-started/aptos.mdx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
section: ccip
3+
date: Last Modified
4+
title: "Getting Started with Chainlink CCIP on Aptos"
5+
metadata:
6+
description: "Get started with Chainlink CCIP on Aptos: essential guides and resources to integrate cross‑chain messaging and token transfers using the Move language."
7+
excerpt: "Chainlink CCIP, Cross-chain interoperability, Getting started, Aptos, Move VM, Blockchain integration, Cross-chain dApps, Token bridges, Cross-chain messaging, Aptos FA, Fungible Assets"
8+
datePublished: "2025-09-15"
9+
lastModified: "2025-09-15"
10+
whatsnext: { "Aptos Tutorials": "/ccip/tutorials/aptos", "CCIP Directory": "/ccip/directory" }
11+
---
12+
13+
## Aptos Support in CCIP
14+
15+
Chainlink CCIP supports Aptos, enabling cross-chain interoperability between the Aptos blockchain and other blockchain families, including EVM chains.
16+
17+
## What You Can Build with CCIP on Aptos
18+
19+
- **Cross-Chain Token Transfers**: Transfer tokens from/to Aptos.
20+
- **Cross-Chain Data Messaging**: Send arbitrary data between Aptos modules and smart contracts on other chains.
21+
- **Programmable Token Transfers**: Combine token transfers with messaging to trigger specific actions on destination chains.
22+
- **Cross-Chain Token (CCT) Standard**: Enable your Fungible Asset tokens in CCIP to be transferred to/from Aptos.
23+
24+
## Getting Started with Aptos CCIP
25+
26+
Aptos tutorials can be found [here](/ccip/tutorials/aptos).

‎src/content/ccip/test-tokens.mdx‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ metadata:
1313
import { ClickToZoom, Aside } from "@components"
1414
import { MintTokenButton } from "@features/ccip/components/MintTokenButton"
1515

16-
import { SVMTestTokensClient } from "@features/ccip/components/faucet"
16+
import { SVMTestTokensClient, AptosTestTokensClient } from "@features/ccip/components/faucet"
1717
import CcipCommon from "@features/ccip/CcipCommon.astro"
1818

1919
CCIP provides test tokens that you can mint on testnets for development and testing.
@@ -44,6 +44,30 @@ The faucet requires wallet signature verification. When you request tokens, your
4444
- Message signing is free (no SOL required) and grants no spending permissions.
4545
- After signature verification, the server executes the token mint transaction.
4646

47+
### Aptos Testnet
48+
49+
Use the dedicated faucet interface for CCIP-BnM tokens:
50+
51+
<AptosTestTokensClient client:only="react" />
52+
53+
#### Amount
54+
55+
- The faucet mints **1 CCIP‑BnM** per request.
56+
57+
#### Transaction requirement
58+
59+
The Aptos faucet call is an **on-chain entry-function transaction** initiated from your wallet (not a server-side mint).
60+
61+
- Your wallet will prompt you to sign and submit a transaction that calls the faucet’s `drip` entry function on **Aptos Testnet**.
62+
63+
- Faucet module address: [`0xf92c11250dd30e7d11090326b6057c3ed5555fc1a2d29765ea0307bbebd4e77e`](https://explorer.aptoslabs.com/object/0xf92c11250dd30e7d11090326b6057c3ed5555fc1a2d29765ea0307bbebd4e77e/modules/packages/Faucet?network=testnet).
64+
65+
- You need a small amount of **testnet APT for gas**. If you don’t have any, use the [official Aptos Testnet faucet](https://aptos.dev/network/faucet) to fund your address.
66+
67+
- Transaction signing only authorizes that specific function call; it does not grant blanket spending permissions/approvals.
68+
69+
- (Optional) If your environment enables [gas sponsorship](https://aptos.dev/build/guides/sponsored-transactions), another account may cover gas and you won’t need test APT.
70+
4771
## About CCIP Test Tokens
4872

4973
CCIP supports specialized test tokens designed for cross-chain testing. These tokens are available on all CCIP-supported testnets.

‎src/features/ccip/components/faucet/AptosTestTokens.module.css‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
/* Container - matches existing mint-component pattern */
2+
.container {
3+
display: flex;
4+
margin-top: var(--space-4x);
5+
border: var(--border-width-primary) solid var(--color-border-primary);
6+
border-radius: var(--border-radius-primary);
7+
min-height: 5rem;
8+
flex-direction: column;
9+
padding: var(--space-4x);
10+
background: var(--color-background-primary);
11+
}
12+
13+
/* Wallet connection help */
14+
.walletConnectionHelp {
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
gap: var(--space-4x);
19+
text-align: center;
20+
padding: var(--space-4x);
21+
}
22+
23+
/* Wallet selection grid */
24+
.walletSelection {
25+
width: 100%;
26+
max-width: 400px;
27+
margin: 0 auto;
28+
}
29+
30+
.walletList {
31+
display: flex;
32+
flex-direction: column;
33+
gap: var(--space-2x);
34+
}
35+
36+
.walletList button {
37+
width: 100%;
38+
}
39+
40+
/* Connect button wrapper */
41+
.connectButtonWrapper {
42+
width: 100%;
43+
max-width: 300px;
44+
margin: 0 auto;
45+
}
46+
47+
.helpText {
48+
color: var(--color-text-secondary);
49+
font-size: var(--text-sm);
50+
}
51+
52+
/* Primary action area */
53+
.primaryAction {
54+
display: flex;
55+
flex-direction: column;
56+
gap: var(--space-3x);
57+
}
58+
59+
.walletStatus {
60+
text-align: center;
61+
}
62+
63+
.tokenInfo {
64+
color: var(--color-text-secondary);
65+
font-size: var(--text-sm);
66+
margin-top: var(--space-1x);
67+
}
68+
69+
/* Technical details */
70+
.technicalDetails {
71+
margin-top: var(--space-4x);
72+
border: var(--border-width-primary) solid var(--color-border-secondary);
73+
border-radius: var(--border-radius-primary);
74+
padding: var(--space-2x);
75+
}
76+
77+
.technicalDetails summary {
78+
cursor: pointer;
79+
font-weight: 500;
80+
color: var(--color-text-primary);
81+
}
82+
83+
.detailsContent {
84+
padding-top: var(--space-2x);
85+
font-size: var(--text-sm);
86+
color: var(--color-text-secondary);
87+
}
88+
89+
.detailsContent p {
90+
margin: var(--space-1x) 0;
91+
}
92+
93+
/* Success state */
94+
.successMessage {
95+
margin-top: var(--space-4x);
96+
padding: var(--space-3x);
97+
background-color: var(--color-success-background, var(--green-50));
98+
border: var(--border-width-primary) solid var(--color-success-border, var(--green-200));
99+
border-radius: var(--border-radius-primary);
100+
max-width: 300px;
101+
margin-left: auto;
102+
margin-right: auto;
103+
text-align: center;
104+
}
105+
106+
.successSubtext {
107+
font-size: var(--text-sm);
108+
color: var(--color-text-secondary);
109+
margin-top: var(--space-1x);
110+
}
111+
112+
.transactionDetails {
113+
margin-top: var(--space-2x);
114+
padding: var(--space-2x);
115+
background-color: var(--color-background-secondary);
116+
border-radius: var(--border-radius-sm);
117+
font-family: monospace;
118+
font-size: var(--text-xs);
119+
word-break: break-all;
120+
cursor: pointer;
121+
}
122+
123+
.transactionDetails:hover {
124+
background-color: var(--color-background-tertiary);
125+
}
126+
127+
.successActions {
128+
display: flex;
129+
flex-direction: column;
130+
gap: var(--space-2x);
131+
margin-top: var(--space-3x);
132+
width: 100%;
133+
}
134+
135+
.successActions a,
136+
.successActions button {
137+
text-decoration: none;
138+
width: 100%;
139+
text-align: center;
140+
}
141+
142+
/* Error state */
143+
.errorMessage {
144+
margin-top: var(--space-4x);
145+
padding: var(--space-4x);
146+
background-color: var(--color-error-background, var(--red-50));
147+
border: var(--border-width-primary) solid var(--color-error-border, var(--red-200));
148+
border-radius: var(--border-radius-primary);
149+
}
150+
151+
.errorContent {
152+
display: flex;
153+
flex-direction: column;
154+
gap: var(--space-2x);
155+
}
156+
157+
.errorTitle {
158+
margin: 0;
159+
font-weight: 600;
160+
color: var(--color-text-primary);
161+
}
162+
163+
.errorSubtext {
164+
font-size: var(--text-sm);
165+
color: var(--color-text-secondary);
166+
}
167+
168+
.errorTimer {
169+
font-size: var(--text-sm);
170+
color: var(--color-text-primary);
171+
font-weight: 500;
172+
margin-top: var(--space-2x);
173+
padding: var(--space-2x);
174+
background-color: var(--color-background-secondary);
175+
border-radius: var(--border-radius-sm);
176+
font-family: monospace;
177+
}
178+
179+
/* Loading state */
180+
.loadingSpinner {
181+
display: inline-block;
182+
width: 1rem;
183+
height: 1rem;
184+
border: 2px solid var(--color-border-secondary);
185+
border-radius: 50%;
186+
border-top-color: var(--color-primary);
187+
animation: spin 1s ease-in-out infinite;
188+
margin-right: var(--space-1x);
189+
}
190+
191+
@keyframes spin {
192+
to {
193+
transform: rotate(360deg);
194+
}
195+
}
196+
197+
/* Responsive design */
198+
@media (max-width: 768px) {
199+
.container {
200+
margin-top: var(--space-2x);
201+
padding: var(--space-3x);
202+
}
203+
204+
.successActions {
205+
flex-direction: column;
206+
}
207+
208+
.successActions button,
209+
.successActions a {
210+
width: 100%;
211+
text-align: center;
212+
}
213+
}
214+
215+
/* Dark theme support */
216+
[data-theme="dark"] .container {
217+
background: var(--color-background-primary);
218+
border-color: var(--color-border-primary);
219+
}
220+
221+
[data-theme="dark"] .successMessage {
222+
background-color: var(--green-900);
223+
border-color: var(--green-700);
224+
}
225+
226+
[data-theme="dark"] .errorMessage {
227+
background-color: var(--red-900);
228+
border-color: var(--red-700);
229+
}

0 commit comments

Comments
 (0)