diff --git a/docs/protocol/account-id.md b/docs/protocol/account-id.md
index c1efed30b7..6a11e21478 100644
--- a/docs/protocol/account-id.md
+++ b/docs/protocol/account-id.md
@@ -5,6 +5,7 @@ title: Address (Account ID)
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
+import NetworkMarquee from '@site/src/components/NetworkMarquee';
NEAR accounts are identified by a unique address, which takes one of two forms:
1. [**Implicit address**](#implicit-address), which are 64 characters long (e.g. `fb9243ce...`)
@@ -129,3 +130,6 @@ You can use the same command to create sub-accounts of an existing named account
:::tip
Accounts have **no control** over their sub-accounts, they are different entities. This means that `near` cannot control `bob.near`, and `bob.near` cannot control `sub.bob.near`.
:::
+
+## One Account, Multiple Blockchains
+
diff --git a/docs/protocol/account-model.md b/docs/protocol/account-model.md
index 8a23a3bc91..a95f125004 100644
--- a/docs/protocol/account-model.md
+++ b/docs/protocol/account-model.md
@@ -4,6 +4,8 @@ title: NEAR Accounts
sidebar_label: Overview
---
+import NetworkMarquee from '@site/src/components/NetworkMarquee';
+
Users participate in the NEAR ecosystem through their NEAR accounts. These accounts are identified by a [unique address](./account-id.md), can optionally hold a [smart contract](../smart-contracts/what-is.md), and are controlled through [Access Keys](./access-keys.md).
By signing [transactions](./transactions.md) with their account, users can:
@@ -39,6 +41,9 @@ NEAR accounts can have multiple [keys](access-keys.md), each with their own set
#### [Simple to Develop Smart Contracts](../smart-contracts/what-is.md)
NEAR accounts can optionally hold an application - known as a [smart contract](../smart-contracts/what-is.md) - which can be written in Javascript or Rust.
+## Multi-Chain Connectivity with NEAR
+
+
---
## Comparison With Ethereum {#compared-to-ethereum}
diff --git a/website/package.json b/website/package.json
index 64b85f0198..9f4db00887 100644
--- a/website/package.json
+++ b/website/package.json
@@ -65,6 +65,7 @@
"react-bootstrap": "^2.9.1",
"react-bootstrap-typeahead": "^6.3.2",
"react-dom": "^18.2.0",
+ "react-fast-marquee": "^1.6.5",
"react-is": "^18.2.0",
"react-markdown": "^10.1.0",
"react-monaco-editor": "^0.54.0",
diff --git a/website/src/components/NetworkMarquee.js b/website/src/components/NetworkMarquee.js
new file mode 100644
index 0000000000..48b5f4ad6a
--- /dev/null
+++ b/website/src/components/NetworkMarquee.js
@@ -0,0 +1,170 @@
+import React, { useMemo } from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
+import styles from './NetworkMarquee.module.scss';
+import Marquee from "react-fast-marquee";
+
+const NetworkMarquee = () => {
+ const { colorMode } = useColorMode();
+ const isDarkTheme = colorMode === 'dark';
+
+ const evmNetworks = useMemo(() => [
+ {
+ name: 'Ethereum',
+ image: '/img/crypto/eth.png',
+ },
+ {
+ name: 'Avalanche',
+ image: '/img/crypto/avax.png',
+ },
+ {
+ name: 'Polygon',
+ image: '/img/crypto/pol.png',
+ },
+ {
+ name: 'Arbitrum',
+ image: '/img/crypto/arb.png',
+ },
+ {
+ name: 'Base',
+ image: '/img/crypto/base.png',
+ },
+ {
+ name: 'BNB Chain',
+ image: '/img/crypto/bnb.png',
+ }
+ ], []);
+
+ const nonEvmNetworks = useMemo(() => [
+ {
+ name: 'Bitcoin',
+ image: '/img/crypto/btc.png',
+ },
+ {
+ name: 'Solana',
+ image: '/img/crypto/sol.png',
+ },
+ {
+ name: 'Sui',
+ image: '/img/crypto/sui.png',
+ },
+ {
+ name: 'Aptos',
+ image: '/img/crypto/apt.png',
+ },
+ {
+ name: 'XRP Ledger',
+ image: '/img/crypto/xrp.png',
+ }
+ ], []);
+
+ const allNetworks = useMemo(() => [...evmNetworks, ...nonEvmNetworks, ...evmNetworks, ...nonEvmNetworks], [evmNetworks, nonEvmNetworks]);
+
+ return (
+
+
+
Supported Networks
+
+ Chain Signatures lets NEAR account sign and execute transactions across multiple blockchains, seamlessly and securely
+
+
+ Learn More
+
+
+
+
+
+
+ 1
+ NEAR Account
+ Unified Access
+
+
+ {evmNetworks.length}+
+ EVM Networks
+ Widely Adopted
+
+
+ {nonEvmNetworks.length}
+ Others Networks
+ Alternative Architectures
+
+
+
+
Why Choose Chain Signatures?
+
+
+
🎯
+
+
Single Account, Multi-Chain Operations
+
+ Manage interactions with external blockchains from one NEAR account. Simplifies key management and reduces the need for multiple wallets
+
+
+
+
+
⚡
+
+
Reduced Cross-Chain Development Overhead
+
+ Write smart contracts on NEAR that directly sign for cross-chain transactions, cutting down on code redundancy and potential points of failure
+
+
+
+
+
🔐
+
+
Secure Transaction Signing with MPC
+
+ Decentralized signing process using Multi-Party Computation. No single entity controls the signing key, reducing centralized custodianship risks
+
+
+
+
+
₿
+
+
Bitcoin DeFi & Cross-Chain NFTs
+
+ Build DeFi applications leveraging Bitcoin liquidity, atomic swaps, and cross-chain NFT platforms with native cryptocurrency payments
+
+
+
+
+
+
+ );
+};
+
+export default NetworkMarquee;
\ No newline at end of file
diff --git a/website/src/components/NetworkMarquee.module.scss b/website/src/components/NetworkMarquee.module.scss
new file mode 100644
index 0000000000..5388686a84
--- /dev/null
+++ b/website/src/components/NetworkMarquee.module.scss
@@ -0,0 +1,540 @@
+:root {
+ --near-primary: #00d4ff;
+ --near-secondary: #7b68ee;
+ --near-accent: #ff6b9d;
+ --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ --transition-fast: all 0.3s ease;
+ --gradient-brand: linear-gradient(135deg, var(--near-primary) 0%, var(--near-secondary) 100%);
+ --gradient-rainbow: linear-gradient(90deg, var(--near-primary) 0%, var(--near-secondary) 50%, var(--near-accent) 100%);
+ --shadow-light: 0 8px 32px rgba(0, 0, 0, 0.1);
+ --shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.3);
+ --radius-lg: 24px;
+ --radius-md: 16px;
+ --spacing-xs: 8px;
+ --spacing-sm: 12px;
+ --spacing-md: 16px;
+ --spacing-lg: 24px;
+ --spacing-xl: 32px;
+}
+
+.networkMarquee {
+ position: relative;
+ padding: 0 var(--spacing-xl) var(--spacing-xl);
+ margin: 40px 0;
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+ box-shadow: var(--shadow-dark);
+ transition: var(--transition-fast);
+ animation: fadeInUp 0.6s ease-out;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: var(--gradient-rainbow);
+ }
+}
+.carouselHeaderContainer{
+ text-align: center;
+ margin-bottom: var(--spacing-lg);
+}
+
+.lightTheme {
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+ box-shadow: var(--shadow-light);
+
+ .carouselDescription {
+ color: #2d3748;
+ opacity: 1;
+ font-weight: 500;
+ }
+
+ .featureItem {
+ background: rgba(255, 255, 255, 0.6);
+ border: 1px solid rgba(0, 0, 0, 0.08);
+ color: #2d3748;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.9);
+ border-color: rgba(0, 212, 255, 0.3);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+ }
+ }
+
+ .networkCardInner {
+ background: rgba(255, 255, 255, 0.8);
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.95);
+ border-color: rgba(0, 212, 255, 0.4);
+ transform: translateY(-2px) scale(1.01);
+ }
+ }
+
+ .networkName {
+ color: #2d3748;
+ }
+
+ .statItem {
+ background: rgba(255, 255, 255, 0.6);
+ border: 1px solid rgba(0, 0, 0, 0.1);
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.9);
+ border-color: rgba(0, 212, 255, 0.3);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+ }
+ }
+
+ .statLabel {
+ color: #2d3748;
+ }
+
+ .statDescription {
+ color: rgba(45, 55, 72, 0.7);
+ }
+
+ .featuresSection {
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
+ }
+}
+
+.darkTheme {
+ background: linear-gradient(135deg, #2a3441 0%, #1c252e 100%);
+ box-shadow: var(--shadow-dark);
+
+ .carouselDescription {
+ color: #ffffff;
+ opacity: 1;
+ font-weight: 500;
+ }
+
+ .featureItem {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ color: #ffffff;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.12);
+ border-color: rgba(0, 212, 255, 0.4);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+ }
+ }
+
+ .networkCardInner {
+ background: rgba(255, 255, 255, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.12);
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.15);
+ border-color: rgba(0, 212, 255, 0.6);
+ transform: translateY(-2px) scale(1.01);
+ }
+ }
+
+ .networkName {
+ color: #ffffff;
+ }
+
+ .statItem {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.12);
+ border-color: rgba(0, 212, 255, 0.4);
+ }
+ }
+
+ .statLabel {
+ color: #ffffff;
+ }
+
+ .statDescription {
+ color: rgba(255, 255, 255, 0.7);
+ }
+
+ .featuresSection {
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+}
+
+// Header and description
+.carouselHeader {
+ text-align: center;
+ margin: var(--spacing-xl) 0 var(--spacing-lg);
+ font-size: 36px;
+ font-weight: 700;
+ line-height: 1;
+ background: var(--gradient-brand);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.carouselDescription {
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 1.6;
+ margin: var(--spacing-sm) auto 0;
+ max-width: 600px;
+ text-align: center;
+ transition: var(--transition-fast);
+}
+
+.learnMoreLink {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ margin-top: var(--spacing-md);
+ padding: 12px 24px;
+ font-size: 16px;
+ font-weight: 600;
+ text-decoration: none;
+ border-radius: var(--radius-md);
+ background: var(--gradient-brand);
+ color: white;
+ transition: var(--transition-smooth);
+ box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
+
+ &:hover {
+ transform: translateY(-2px) scale(1.05);
+ box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
+ text-decoration: none;
+ color: white;
+ }
+
+ &:focus {
+ outline: 2px solid var(--near-primary);
+ outline-offset: 2px;
+ }
+}
+
+.featuresSection {
+ margin: var(--spacing-xl) 0 0 0;
+ padding: var(--spacing-xl) 0 0 0;
+}
+
+.featuresTitle {
+ text-align: center;
+ font-size: 28px;
+ font-weight: 700;
+ margin-bottom: var(--spacing-xl);
+ background: var(--gradient-brand);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ line-height: 1.2;
+}
+
+.featuresContainer {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--spacing-lg);
+ margin: 0 auto;
+ max-width: 900px;
+}
+
+.featureItem {
+ display: flex;
+ align-items: flex-start;
+ padding: var(--spacing-lg);
+ border-radius: var(--radius-md);
+ backdrop-filter: blur(10px);
+ transition: var(--transition-smooth);
+ position: relative;
+ gap: var(--spacing-md);
+
+ &:hover {
+ transform: translateY(-4px) scale(1.02);
+
+ .featureIcon {
+ transform: scale(1.2) rotate(10deg);
+ filter: brightness(1.2);
+ }
+
+ .featureHighlight {
+ color: var(--near-primary);
+ text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+ }
+ }
+}
+
+.featureIcon {
+ font-size: 32px;
+ line-height: 1;
+ flex-shrink: 0;
+ transition: var(--transition-smooth);
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+ margin-top: 4px;
+}
+
+.featureContent {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs);
+}
+
+.featureHighlight {
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 1.3;
+ transition: var(--transition-fast);
+}
+
+.featureDescription {
+ font-size: 15px;
+ line-height: 1.5;
+ margin: 0;
+ opacity: 0.8;
+ transition: var(--transition-fast);
+}
+
+// Network card styles
+.networkCardInner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: var(--spacing-lg) 20px;
+ margin: 0 var(--spacing-md);
+ min-width: 120px;
+ height: 140px;
+ border-radius: var(--radius-md);
+ backdrop-filter: blur(10px);
+ cursor: pointer;
+ transition: var(--transition-smooth);
+
+ &:hover {
+ .networkLogo {
+ transform: scale(1.1) rotate(5deg);
+ filter: brightness(1.1) saturate(1.2);
+ }
+
+ .networkName {
+ color: var(--near-primary);
+ font-weight: 600;
+ }
+ }
+
+ &:focus {
+ outline: 2px solid var(--near-primary);
+ outline-offset: 2px;
+ }
+}
+
+.networkLogo {
+ width: 48px;
+ height: 48px;
+ margin-bottom: var(--spacing-sm);
+ border-radius: 50%;
+ object-fit: contain;
+ transition: var(--transition-smooth);
+}
+
+.networkName {
+ font-size: 14px;
+ font-weight: 500;
+ text-align: center;
+ line-height: 1.2;
+ transition: var(--transition-fast);
+}
+
+.statsContainer {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: var(--spacing-xl);
+ margin-top: var(--spacing-lg);
+}
+
+.statItem {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: var(--spacing-lg) var(--spacing-md);
+ border-radius: var(--radius-md);
+ transition: var(--transition-smooth);
+
+ &:hover {
+ transform: translateY(-4px) scale(1.02);
+
+ .statNumber {
+ transform: scale(1.1);
+ text-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
+ }
+
+ .statLabel {
+ color: var(--near-primary);
+ }
+ }
+}
+
+.statNumber {
+ font-size: 48px;
+ font-weight: 700;
+ line-height: 1;
+ margin-bottom: var(--spacing-xs);
+ background: var(--gradient-brand);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ transition: var(--transition-smooth);
+}
+
+.statLabel {
+ font-size: 16px;
+ font-weight: 600;
+ margin-bottom: 4px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ transition: var(--transition-fast);
+}
+
+.statDescription {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.3;
+ transition: var(--transition-fast);
+}
+
+.darkTheme {
+ .networkCardInner:hover .networkName {
+ text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+ }
+
+ .statItem:hover {
+ .statNumber {
+ text-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
+ }
+
+ .statLabel {
+ text-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
+ }
+ }
+}
+
+@media (max-width: 1024px) {
+ .networkMarquee {
+ padding: var(--spacing-lg);
+ }
+
+ .statsContainer {
+ gap: var(--spacing-lg);
+ }
+}
+
+@media (max-width: 768px) {
+ .networkMarquee {
+ padding: 20px;
+ margin: var(--spacing-lg) 0;
+ }
+
+ .featuresSection {
+ margin: var(--spacing-lg) 0 0 0;
+ padding: var(--spacing-lg) 0 0 0;
+ }
+
+ .featuresTitle {
+ font-size: 24px;
+ margin-bottom: var(--spacing-lg);
+ }
+
+ .featuresContainer {
+ grid-template-columns: 1fr;
+ gap: var(--spacing-md);
+ margin: 0 auto;
+ }
+
+ .featureItem {
+ padding: var(--spacing-md);
+ gap: var(--spacing-sm);
+ }
+
+ .featureIcon {
+ font-size: 28px;
+ }
+
+ .featureHighlight {
+ font-size: 16px;
+ }
+
+ .featureDescription {
+ font-size: 14px;
+ }
+
+ .statsContainer {
+ grid-template-columns: 1fr;
+ gap: var(--spacing-lg);
+ text-align: center;
+ }
+
+ .networkCardInner {
+ min-width: 100px;
+ height: 120px;
+ padding: var(--spacing-md) var(--spacing-sm);
+ margin: 0 var(--spacing-sm);
+ }
+
+ .networkLogo {
+ width: 40px;
+ height: 40px;
+ margin-bottom: var(--spacing-xs);
+ }
+
+ .networkName {
+ font-size: 12px;
+ }
+
+ .statNumber {
+ font-size: 36px;
+ }
+
+ .statLabel {
+ font-size: 14px;
+ }
+
+ .statDescription {
+ font-size: 12px;
+ }
+}
+
+@media (max-width: 480px) {
+ .networkMarquee {
+ padding: var(--spacing-md);
+ border-radius: var(--radius-md);
+ }
+
+ .networkCardInner {
+ min-width: 80px;
+ height: 100px;
+ padding: var(--spacing-sm) var(--spacing-xs);
+ margin: 0 var(--spacing-xs);
+ }
+
+ .networkLogo {
+ width: 32px;
+ height: 32px;
+ }
+
+ .statItem {
+ padding: var(--spacing-md) var(--spacing-sm);
+ }
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
\ No newline at end of file
diff --git a/website/static/img/crypto/apt.png b/website/static/img/crypto/apt.png
new file mode 100644
index 0000000000..590840c74d
Binary files /dev/null and b/website/static/img/crypto/apt.png differ
diff --git a/website/static/img/crypto/arb.png b/website/static/img/crypto/arb.png
new file mode 100644
index 0000000000..66aec273fe
Binary files /dev/null and b/website/static/img/crypto/arb.png differ
diff --git a/website/static/img/crypto/avax.png b/website/static/img/crypto/avax.png
new file mode 100644
index 0000000000..8458ede988
Binary files /dev/null and b/website/static/img/crypto/avax.png differ
diff --git a/website/static/img/crypto/base.png b/website/static/img/crypto/base.png
new file mode 100644
index 0000000000..c6f23c9743
Binary files /dev/null and b/website/static/img/crypto/base.png differ
diff --git a/website/static/img/crypto/bnb.png b/website/static/img/crypto/bnb.png
new file mode 100644
index 0000000000..c7ccdbb88e
Binary files /dev/null and b/website/static/img/crypto/bnb.png differ
diff --git a/website/static/img/crypto/btc.png b/website/static/img/crypto/btc.png
new file mode 100644
index 0000000000..048f5fd4bd
Binary files /dev/null and b/website/static/img/crypto/btc.png differ
diff --git a/website/static/img/crypto/eth.png b/website/static/img/crypto/eth.png
new file mode 100644
index 0000000000..32f55ef352
Binary files /dev/null and b/website/static/img/crypto/eth.png differ
diff --git a/website/static/img/crypto/pol.png b/website/static/img/crypto/pol.png
new file mode 100644
index 0000000000..b0ba1f257d
Binary files /dev/null and b/website/static/img/crypto/pol.png differ
diff --git a/website/static/img/crypto/sol.png b/website/static/img/crypto/sol.png
new file mode 100644
index 0000000000..6ba8780953
Binary files /dev/null and b/website/static/img/crypto/sol.png differ
diff --git a/website/static/img/crypto/sui.png b/website/static/img/crypto/sui.png
new file mode 100644
index 0000000000..e8f346ba33
Binary files /dev/null and b/website/static/img/crypto/sui.png differ
diff --git a/website/static/img/crypto/xrp.png b/website/static/img/crypto/xrp.png
new file mode 100644
index 0000000000..6faeb868e0
Binary files /dev/null and b/website/static/img/crypto/xrp.png differ