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 + +
+ + {allNetworks.map((network, index) => ( +
+ {`${network.name} + {network.name} +
+ ))} +
+ +
+
+ 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