diff --git a/docusaurus.config.js b/docusaurus.config.js
index 5ca49b5262..376cfc3fd9 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -10,7 +10,7 @@ const lightCodeTheme = require("./codeblock-theme");
const darkCodeTheme = require("prism-react-renderer/themes/dracula");
const simplePlantUML = require("@akebifiky/remark-simple-plantuml");
const homeShowcaseProjectsPlugin = require("./plugins/home-showcase");
-const icpPricePlugin = require("./plugins/icp-price");
+const cryptoPricePlugin = require("./plugins/crypto-price");
const xdrPricePlugin = require("./plugins/xdr-price");
const icpXdrPricePlugin = require("./plugins/icp-xdr-price");
const tailwindPlugin = require("./plugins/tailwind");
@@ -481,7 +481,7 @@ const config = {
"docusaurus-plugin-sass",
customWebpack,
tailwindPlugin,
- icpPricePlugin,
+ cryptoPricePlugin,
icpXdrPricePlugin,
xdrPricePlugin,
homeShowcaseProjectsPlugin,
diff --git a/plugins/crypto-price.js b/plugins/crypto-price.js
new file mode 100644
index 0000000000..18928458a8
--- /dev/null
+++ b/plugins/crypto-price.js
@@ -0,0 +1,27 @@
+const fetch = require("node-fetch-retry");
+
+/** @type {import('@docusaurus/types').PluginModule} */
+const icpPricePlugin = async function (context, options) {
+ return {
+ name: "crypto-price",
+ async loadContent() {
+ const tickers = await Promise.all([
+ fetch("https://api.coinbase.com/v2/prices/ICP-USD/buy", {
+ retry: 10,
+ pause: 500,
+ }).then((res) => res.json()),
+ fetch("https://api.coinbase.com/v2/prices/BTC-USD/buy", {
+ retry: 10,
+ pause: 500,
+ }).then((res) => res.json()),
+ ]);
+ return { icp: +tickers[0].data.amount, btc: +tickers[1].data.amount };
+ },
+ async contentLoaded({ content, actions }) {
+ const { setGlobalData } = actions;
+ setGlobalData(content);
+ },
+ };
+};
+
+module.exports = icpPricePlugin;
diff --git a/plugins/icp-price.js b/plugins/icp-price.js
deleted file mode 100644
index 230bd82e62..0000000000
--- a/plugins/icp-price.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const fetch = require("node-fetch-retry");
-
-/** @type {import('@docusaurus/types').PluginModule} */
-const icpPricePlugin = async function (context, options) {
- return {
- name: "icp-price",
- async loadContent() {
- const ticker = await fetch(
- "https://api.coinbase.com/v2/prices/ICP-USD/buy",
- { retry: 10, pause: 500 }
- ).then((res) => res.json());
- return +ticker.data.amount;
- },
- async contentLoaded({ content, actions }) {
- const { setGlobalData } = actions;
- setGlobalData(content);
- },
- };
-};
-
-module.exports = icpPricePlugin;
diff --git a/src/components/Common/RotatingStatsPanel/index.tsx b/src/components/Common/RotatingStatsPanel/index.tsx
new file mode 100644
index 0000000000..2543f9f7dc
--- /dev/null
+++ b/src/components/Common/RotatingStatsPanel/index.tsx
@@ -0,0 +1,122 @@
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { SpringCounter } from "../../LandingPage/PreHero/Counters";
+import { Stat, StatsPanel } from "../Stats";
+
+export type RotatingStat = {
+ title: string;
+ value: number | (() => number);
+ format: (value: number) => string;
+ fallbackValue?: string;
+};
+
+const FadeInOutTitle: React.FC<{
+ title: string;
+}> = ({ title }) => {
+ const [currentTitle, setCurrentTitle] = useState(title);
+ const [nextTitle, setNextTitle] = useState(title);
+
+ useEffect(() => {
+ setNextTitle(title);
+ const handle = setTimeout(() => {
+ setCurrentTitle(title);
+ }, 300);
+ return () => clearTimeout(handle);
+ }, [title]);
+
+ return (
+
+
+ {currentTitle}
+
+ {currentTitle !== nextTitle && (
+
+ {nextTitle}
+
+ )}
+
+ );
+};
+
+const layoutClasses = {
+ 2: "grid grid-cols-1 sm:grid-cols-2 md:justify-between gap-10",
+ 3: "grid grid-cols-1 md:grid-cols-3 md:justify-between gap-10",
+ 4: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 md:justify-between gap-10",
+};
+
+const RotatingStatPanel: React.FC<{
+ stats: RotatingStat[][];
+ rotationIndexes: number[];
+}> = ({ stats, rotationIndexes }) => {
+ const [activeIndexes, setActiveIndexes] = useState(
+ rotationIndexes.map(() => 0)
+ );
+ const [rotationIndex, setRotationIndex] = useState(0);
+ const [windowFocused, setWindowFocused] = useState(true);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ if (!windowFocused) {
+ return;
+ }
+
+ const newActiveIndexes = [...activeIndexes];
+ const nextIndexToChange = rotationIndexes[rotationIndex];
+ newActiveIndexes[nextIndexToChange] =
+ (newActiveIndexes[nextIndexToChange] + 1) %
+ stats[nextIndexToChange].length;
+
+ setActiveIndexes(newActiveIndexes);
+ setRotationIndex((i) => (i + 1) % rotationIndexes.length);
+ }, 2000);
+
+ return () => clearInterval(interval);
+ }, [activeIndexes, rotationIndex, windowFocused]);
+
+ useEffect(() => {
+ const onVisibilityChange = () => setWindowFocused(!document.hidden);
+ document.addEventListener("visibilitychange", onVisibilityChange);
+ return () => {
+ document.removeEventListener("visibilitychange", onVisibilityChange);
+ };
+ }, []);
+
+ const statsToDisplay = activeIndexes.map((index, i) => stats[i][index]);
+
+ const layoutClass = layoutClasses[statsToDisplay.length];
+
+ return (
+
- Via chain-key signatures, the Internet Computer is capable of - signing native transactions on other blockchains without using - bridges. Today, you can already swap BTC with ICP without ever - having to use insecure wrapped tokens. In the near future, this - could extent to ETH or even Dogecoin. -
-
-
-
- Building on chain-key signatures and HTTPS outcalls, DEXs are - currently working on solutions to support a plethora of ERC-20 - tokens on ICP. Plugging into Ethereum RPC API providers, ICP smart - contracts will sign transactions for any ERC-20 token without - relying on insecure bridges. Plans to integrate the Internet - Computer with Ethereum network at a protocol level are also - underway. -
-
-
-
- Imagine being able to pay for a takeaway coffee with BTC or - sending satoshis to friends on your favorite Web3 chat app. - Chain-key tokens, a cryptographically secure replacement to - wrapped tokens, allow end-users to seamlessly transfer tokens - between blockchains with speed without relying on third-party - bridges or custodians. Chain-key bitcoin (ckBTC) is the first - chain-key token on ICP, pioneering the way. Trade BTC on ICP DEXs, - use BTC for fundraising and much more. -
-
-
-
- SNS is a powerful tool that allows developers to assign control of - their dapp to a DAO whose governance token holders become part - owners and contributors of the dapp. Once a dapp has tokenized, - DEXs can easily support its governance token as SNS follows the - ICRC-1 standard. -
-
-
-
- The Bitfinity EVM allows developers to run Solidity - smart-contracts at web-speed, directly on the Internet Computer. -
- -+ Via Chain-Key Signatures, the Internet Computer has the + ability to sign native transactions on other blockchains + without using risky bridges. Today, users can seamlessly swap + between BTC/ETH in seconds for a few cents with 0 gas fees by + using ckBTC, ckETH, and soon ckERC-20 tokens.{" "} +
+
+
+ Track TX activity on the ICP Dashboard
+
ICDex provides the world’s first fully on-chain order book DEX. Create limit orders or swap tokens instantly with complete - transparency and decentralization - 100% on-chain. + transparency and decentralization. ckBTC/ckETH swaps now + possible.
-- Finterest is a truly decentralized borrowing protocol running on - the Internet Computer built to support native Bitcoin borrowing - and lending. + One-stop access to decentralized finance and the first DEX on + the Internet Computer to become an SNS DAO. Swap tokens, earn + fees as a liquidity provider and participate in governance and + decision-making through Sonic token membership. Now supports + ckBTC/ckETH pair.
-ICP.Swap offers the largest number of tokens on the Internet - Computer. Trade the latest meme coins or the most successful SNS - DAO governance tokens. + Computer, including ckBTC and ckETH. Trade the latest meme coins + or the most successful SNS DAO governance tokens.
-+ Secure assets such as ckBTC and ckETH across all your + devices without the need for a seed phrase. +
+ ++ Chose your ckBTC account to send and receive BTC from the + Bitcoin network. Full ETH functionality coming soon. +
+ ++ Store, swap and manage digital assets, inlcuding ckBTC and ckETH on a + simple mobile app or use your favorite browser. +
+ ++ Building on Chain-Key Signatures and HTTPS outcalls, Oisy, a + browser-based Ethereum wallet secured by the Internet Computer, + can already natively support a plethora of ERC-20 tokens. + Plugging into services such as Infura and the like, ICP smart + contracts sign transactions for any ERC-20 token without relying + on insecure bridges. +
+
+
+ Build a fully on-chain ETH wallet
+
+ Blockchains today have to rely on oracles if they want to access + price data from Web2 APIs. Using HTTPS outcalls, the Internet + Computer can query up-to-date prices from any traditional Web2 + API without oracles, which reduces costs and increases speed. + Making calls to the Exchange Rate Canister, you can already + query price data. +
+
+
+
- Make your Ethereum dapp fully decentralized by hosting frontend, - and data on the Internet Computer. + Decentralize your Ethereum dapp by hosting frontend and backend + data on the Internet Computer.
- Using ckERC-20 tokens, users can swap and transfer tokens for a - few cents with 0 gas fees. + Using ckETH and ckERC-20 tokens, users can swap tokens for a few + cents with 0 gas fees.
- Extend what your DAO can control. Powerful ICP canister smart - contracts bring your whole dapp on chain. + Connect smart contracts to the world outside blockchain. Fetch + real-time price data and more from Web2.
+ Today, ICP smart contracts are capable of offering the on-chain + Ethereum full node API by using the{" "} + + HTTPS outcalls feature + {" "} + to cloud API providers to securely query the Ethereum blockchain, + and send transactions to it. +
++ Chain-key (ck) ECDSA , which is already available to any canister + smart contract on the Internet Computer, can invoke smart + contracts calls on the Ethereum blockchain by creating and signing + transactions to be executed by the Ethereum network. +
+
+
+ About ckECDSA signing & multi-chain
- Integrating ICP and ETH consists of two phases. In phase 1, a - canister smart contract will offer the on-chain Ethereum full node - API by using{" "} - - HTTPS outcalls - {" "} - to cloud API providers to securely query the Ethereum blockchain, - and send transaction to it. Signing Ethereum transactions is - enabled by{" "} + In June 2023, average transaction fees for USDC and USDT were + $4.21 and $5.46 respectively, making swaps below a certain amount + is completely impractical. The Ethereum integration enables the + use of chain-key (ck) tokens such as ckETH and ckERC-20 on the + Internet Computer, including ckUSDC or ckUSDT. This feature allow + users to send and receive ETH value on ICP DEXs for a few cents + with 1-2s finality, and no gas fees. +
++ ckETH is now live on the mainnet and exposes ICRC-1 and 2 ledger + interfaces (the fungible token standard of ICP), making it simple + for all ICP wallets to offer ckETH support. Total value of ckETH + is fully backed 1:1 by ETH, and can always be verified by viewing + the on-chain{" "} - chain-key ECDSA + dashboard {" "} - already available to any canister smart contract on the Internet - Computer. -
-- Phase 2 involves full protocol-level integration to realize an - on-chain Ethereum API on the Internet Computer. This API will be - enabled by running Ethereum full nodes next to each ICP replica on - a large ICP subnet, and communicating with these subnets from the - replicas through ICP consensus + and metrics of the canisters. ckERC-20 is coming soon.
-+
+
+
- In June 2023, average transaction fees for USDC and USDT were - $4.21 and $5.46 respectively, which makes trading on DEXs below - certain amounts completely impractical. The Ethereum integration - enables the use of chain-key (ck) tokens such as ckETH and - ckERC-20 on the Internet Computer, including ckUSDC or ckUSDT to - vastly extend the capabilities of ICP DEXs for users to swap, or - transfer tokens for cents with 1-2s finality. + An Ethereum Virtual Machine (EVM) is coming to the Internet + Computer built by Bitfinity — a team of developers from the ICP + community. Bitfinity is delivering a turn-key solution for + developers to operate their ETH dapps on the Internet Computer + using Solidity, which brings ICP's 1-2s finality, and near 0 + transaction fees to established Ethereum dapps, providing an + incredibly efficient Ethereum scaling solution.
- Follow the community discussion
- Bitfinity's EVM running on the Internet Computer offers a turn-key - solution for developers to run their existing solidity code and - dapps on the Internet Computer. Combining a familiar EVM - environment with ICPs 1 sec block times, 1-2s finaility, and - ~0$.02 Tx cost. +
+ Full protocol-level integration involves realizing an on-chain + Ethereum API on the Internet Computer that will enble smart + contracts on the Internet Computer to call smart contracts on + Ethereum and vice versa. This API will be enabled by running + Ethereum full nodes next to each ICP replica on a large ICP + subnet, and communicating with these subnets from the replicas + through ICP consensus. This end-to-end framework for + protocol-level integration with Ethereum is still in development, + although individual Internet Computer technology features can + already be combined to interact with Ethereum.
+
- Check out Bitfinity
+ ICP Lab 6.0 xChain is a program is designed for teams and + individuals currently building cross-chain or multi-chain + applications on the Internet Computer blockchain. If you’re + striving towards a cross-chain future, leveraging ICP’s + unique capabilities, then this is the right program for you. +
+
+
+ Track TX activity on the ICP Dashboard
+
- In February 2023, the ICP DeFi community convened at the DFINITY - headquarters in Zurich during a DeFi focused ICP.Lab to discuss - an Ethereum integration. The outcome: As a protocol-level - integration will take some time to complete, the community came - up with a short-term solution to bring liquidity from Ethereum - to the Internet Computer — one that enables using ETH and ERC-20 - tokens for use cases such as the IC’s DEXs, lending protocols, - or marketplaces.{" "} -
-- Several ICP teams have started integrating cross-chain ETH - solutions into their platforms using components already - available such as chain-key ECDSA signing. -
-
-
-
- The ic-web3 library by Rocklabs has been extended to offer an - on-chain Ethereum RPC API, using HTTPS outcalls as transport to - communicate with Ethereum RPC API providers. -
-- An ICP community member has implemented a helper canister to - offer Ethereum-related functionality for Motoko programmers. Run - this canister to gain access to functionality such as Keccak - hashing or creating transactions to enable your Motoko canister - with this functionality. -
-- Omnic cross-chain messaging is a community-built protocol - offering infrastructure for cross-chain message exchange between - the IC and other blockchains, including Ethereum. Omnic uses - chain-key ECDSA signing for obtaining a strong trust model. -
-- The Paranic project allows for exchanging assets between the IC - and other blockchains, including Ethereum. The project uses the - Omnic cross-chain messaging protocol as foundational layer. -
-- This tutorial explains hosting metadata for ERC-721 NFTs on the - Internet Computer and thus allows Ethereum NFT deployments to - reduce their dependency on public cloud providers for hosting - the NFT metadata such as images. This makes Ethereum NFTs much - more potent than today when being hosted on public cloud. -
-- A demo that hosts a Uniswap user interface on the Internet - Computer to solve the shortcoming of the typical way of - deploying Ethereum frontends on public cloud services. The - blueprint of this project can be applied to any Ethereum dapp to - strengthen its trust model by hosting the frontend on the IC - instead of a public cloud provider. -
-- This is an example project of a canister-based Ethereum wallet - using chain-key ECDSA signing. -
-