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 ( + + {statsToDisplay.map((stat, index) => { + const value = + typeof stat.value === "function" ? stat.value() : stat.value; + return ( + } + titleClassName="whitespace-nowrap" + value={ + + } + fallbackValue={stat.fallbackValue} + /> + ); + })} + + ); +}; + +export default RotatingStatPanel; diff --git a/src/components/Common/Stats/index.tsx b/src/components/Common/Stats/index.tsx index 5bdba950ef..b7ae34f6e6 100644 --- a/src/components/Common/Stats/index.tsx +++ b/src/components/Common/Stats/index.tsx @@ -16,9 +16,17 @@ const Fallback: React.FC<{ children: React.ReactNode }> = ({ children }) => { ); }; -export const StatsPanel: React.FC<{ children: ReactNode }> = ({ children }) => { +export const StatsPanel: React.FC<{ + children: ReactNode; + className?: string; +}> = ({ children, className }) => { return ( -
+
{children}
); diff --git a/src/components/Common/VideoCard/index.tsx b/src/components/Common/VideoCard/index.tsx index d6c355025d..5600099fe2 100644 --- a/src/components/Common/VideoCard/index.tsx +++ b/src/components/Common/VideoCard/index.tsx @@ -1,7 +1,7 @@ import Link from "@docusaurus/Link"; import PlaySVG from "@site/static/img/svgIcons/play.svg"; import clsx from "clsx"; -import React from "react"; +import React, { ReactNode } from "react"; export const PlayButton: React.FC<{}> = ({}) => { return ( @@ -33,7 +33,7 @@ export const ImageOnlyVideoCard: React.FC<{ const VideoCard: React.FC<{ title: string; label: string; - description?: string; + description?: ReactNode; image: string; link: string; withPlayButton?: boolean; diff --git a/src/components/LandingPage/BackgroundPanel/index.tsx b/src/components/LandingPage/BackgroundPanel/index.tsx index 9749bd7be5..dcdc78f835 100644 --- a/src/components/LandingPage/BackgroundPanel/index.tsx +++ b/src/components/LandingPage/BackgroundPanel/index.tsx @@ -27,16 +27,16 @@ const BackgroundPanel: React.FC<{ {inView && }
-
+
{children}
diff --git a/src/components/LandingPage/PreHero/Counters.tsx b/src/components/LandingPage/PreHero/Counters.tsx index 914a8b7a6f..b582cb6869 100644 --- a/src/components/LandingPage/PreHero/Counters.tsx +++ b/src/components/LandingPage/PreHero/Counters.tsx @@ -25,9 +25,9 @@ export const SpringCounter: React.FC<{ function paint() { if (spring.current) { spring.current.update(60); - const nextValue = format(Math.round(spring.current.x)); + const nextValue = format(spring.current.x); if (lastValue !== nextValue) { - ref.current.innerText = format(Math.round(spring.current.x)); + ref.current.innerText = format(spring.current.x); lastValue = nextValue; } } @@ -39,7 +39,7 @@ export const SpringCounter: React.FC<{ return () => { lastHandle >= 0 && cancelAnimationFrame(lastHandle); }; - }, []); + }, [format, target, initialValue, initialTarget]); useEffect(() => { if (!spring.current) { diff --git a/src/components/NodeProvidersPage/Stats/index.tsx b/src/components/NodeProvidersPage/Stats/index.tsx index c6ca21a18a..303f6f49d7 100644 --- a/src/components/NodeProvidersPage/Stats/index.tsx +++ b/src/components/NodeProvidersPage/Stats/index.tsx @@ -30,7 +30,7 @@ const Stats: React.FC = () => { ); return ( - + = () => { const statsToDisplay = activeIndexes.map((index, i) => stats[i][index]); return ( - + {statsToDisplay.map((stat, index) => ( } titleClassName="whitespace-nowrap" value={ diff --git a/src/pages/defi.tsx b/src/pages/defi.tsx index fdb7be9b57..8d2bb665b7 100644 --- a/src/pages/defi.tsx +++ b/src/pages/defi.tsx @@ -4,26 +4,87 @@ import DarkHeroStyles from "@site/src/components/Common/DarkHeroStyles"; import transitions from "@site/static/transitions.json"; import Layout from "@theme/Layout"; import { motion } from "framer-motion"; -import React, { useEffect, useRef, useState } from "react"; +import React, { useRef } from "react"; +import { QueryClient, QueryClientProvider } from "react-query"; import AnimateSpawn from "../components/Common/AnimateSpawn"; import { CardWithDescription } from "../components/Common/Card"; import LinkArrowRight from "../components/Common/Icons/LinkArrowRight"; +import LinkArrowUpRight from "../components/Common/Icons/LinkArrowUpRight"; +import RotatingStatPanel, { + RotatingStat, +} from "../components/Common/RotatingStatsPanel"; import ShareMeta from "../components/Common/ShareMeta"; import TranslatedLayout from "../components/Common/TranslatedLayout/TranslatedLayout"; +import BackgroundPanel from "../components/LandingPage/BackgroundPanel"; import { useDarkHeaderInHero } from "../utils/use-dark-header-in-hero"; +const queryClient = new QueryClient(); + +function Stats() { + const globalData = useGlobalData(); + const cryptoPrices = globalData["crypto-price"]["default"] as { + icp: number; + btc: number; + }; + + const stats: RotatingStat[][] = [ + [ + { + title: "ckBTC/ckETH max TPS", + value: 800, + format: (v) => `~${v.toFixed(0)} TPS`, + }, + { + title: "ckBTC TX fee", + value: cryptoPrices.btc * 0.0000001, + format: (v) => `$${v.toFixed(4)}`, + }, + ], + [ + { + title: "Gas fees", + value: 0, + format: (v) => `$${v.toFixed(0)}`, + }, + { + title: "ckETH TX fee", + value: 0.004, + format: (v) => `$${v.toFixed(3)}`, + }, + ], + [ + { + title: "ICP TX fee", + value: cryptoPrices.icp * 0.0001, + format: (v) => `$${v.toFixed(4)}`, + }, + { + title: "ckBTC/ckETH finality", + value: 1, + format: (v) => + Math.round(v * 10) == 10 + ? `1-2s` + : `${v.toFixed(1)}-${(v + 1).toFixed(1)}s`, + }, + ], + ]; + + return ( + + ); +} + function DefiPage() { const heroRef = useRef(null); const isDark = useDarkHeaderInHero(heroRef); - const globalData = useGlobalData(); - const icpPrice = globalData["icp-price"]["default"] as number; return ( @@ -47,16 +108,15 @@ function DefiPage() { className="tw-heading-3 md:tw-heading-2 mb-2 md:mb-6" variants={transitions.item} > - Next generation DeFi + X-chain DeFi - Imagine a decentralized order-book exchange built exclusively - using smart contracts that directly serve a web experience - like those of centralized exchanges, that incorporates the - world's digital assets without need for insecure bridges. + From fully on-chain order book DEXs, to bridgeless X-chain + swaps, the Internet Computer provides an unmatched tech stack + for DEXs to thrive on and DeFi to flourish.
@@ -79,277 +139,89 @@ function DefiPage() { >
Everything -
on-chain +
on chain
- 2022 revealed the serious risks of trading and holding tokens on - centralized exchanges. Even decentralized exchanges with frontends - hosted on centralized cloud providers are not safe from hacks or - rug pulls. Thanks to the web-serving capability of canister smart - contracts on the Internet Computer, and their ability to host - large amounts of data, DeFi platforms can exist 100% on the - blockchain with no dependency on centralized components. + The risks of trading and holding tokens on centralized exchanges + is high. Even decentralized exchanges with frontends hosted on + centralized cloud providers are not safe from hacks or rug pulls. + Thanks to the web-serving capability of canister smart contracts + on the Internet Computer, and their ability to host large amounts + of data, DeFi platforms can exist 100% on the blockchain with no + dependency on centralized components.
-
- - - 6,500+ TX/s - - - Typical network usage - - - - - $0 - - Gas fees - - - - ${(icpPrice * 0.0001).toFixed(5)} - - TX fee - - - - 1-2s - - Finality - -
+ + +
-
- -

- Native BTC DeFi -

-

- 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. -

-

- - - More on BTC Integration - -

-
- -

- Bringing ERC-20 tokens to ICP -

-

- 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. -

-

- - - More on Chain-key signatures - -

-
- -

- Chain-Key Tokens -

-

- 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. -

-

- - - More on Chain-key Tokens - -

-
- - -

SNS DAOs

-

- 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. -

-

- - - More on SNS DAOs - -

-
- -

- EVM on the Internet Computer -

-

- The Bitfinity EVM allows developers to run Solidity - smart-contracts at web-speed, directly on the Internet Computer. -

- - - Check out Bitfinity EVM - -
-
- {/* */} -
- -
- - Highest-throughput -
- blockchain -
- - The speed of the Internet Computer alone enables DeFi - applications that are simply impossible to build anywhere else - without compromising on decentralization or costs. - - - - See stats for yourself - - + +
+
+
-
- -

Internet Computer

- -
- - 550M+ TXs / day - {" "} -
-
- - -

Solana

- -
- - 30M+ TXs / day - {" "} -
-
- -

Ethereum

- -
- 1M / day{" "} -
-
+
+
+

+ X-chain swaps +

+

+ 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 + + +

+
- -
+
+ +
-
- +
+ - What’s already being built + Move between chains on ICP DEXs - - - - See more DeFi Dapps - -
-
@@ -361,35 +233,35 @@ function DefiPage() {

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.

- Check out ICDex + Check out ICDex - +
- Finterest + Sonic

- First-ever bridgeless lending protocol + SNS DAO-controlled DEX

- 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.

- Check out Finterest + Participate and swap on Sonic
@@ -401,67 +273,229 @@ function DefiPage() {

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.

- - Check out ICP.Swap + Check out ICP.Swap
+ + + + Go to all DeFi Dapps + +
+ +
+ +
+
+ + ckBTC/ckETH wallets + + + X-chain wallets already exist on the Internet Computer that + allow users to store and transfer ckBTC, ckETH and more with + ease. + + + + All ICP wallets + + +
+
-
+
+ + + +

AstroX ME

+

+ Secure assets such as ckBTC and ckETH across all your + devices without the need for a seed phrase. +

+ +
+ + + +

NNS

+

+ Chose your ckBTC account to send and receive BTC from the + Bitcoin network. Full ETH functionality coming soon. +

+ +
+ + + +

Plug

+

+ Store, swap and manage digital assets, inlcuding ckBTC and ckETH on a + simple mobile app or use your favorite browser. +

+ +
+
+ +
+ +
+
+ + + Build X-chain DeFi + + + + The Internet Computer offers an array of innovative features to + build next-gen DeFi. + + +
+
+ +

+ Bringing ERC-20 tokens to ICP +

+

+ 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 + + +

+
+ +

+ Access Web2 without Oracles +

+

+ 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. +

+

+ + + More on HTTPS Outcalls + +

+
+
+
+ +
- Build the future of DeFi + More tools - The Internet Computer offers a plethora of out-of-the-box features you can use in your DeFi application. - + */}
diff --git a/src/pages/ethereum-integration.tsx b/src/pages/ethereum-integration.tsx index 8271391309..abcec2f2ce 100644 --- a/src/pages/ethereum-integration.tsx +++ b/src/pages/ethereum-integration.tsx @@ -6,12 +6,13 @@ import clsx from "clsx"; import { motion } from "framer-motion"; import React, { useRef } from "react"; import AnimateSpawn from "../components/Common/AnimateSpawn"; -import { ExternalLink, GitHubLink } from "../components/Common/CardIcons"; +import { CardWithDescription } from "../components/Common/Card"; import LinkArrowRight from "../components/Common/Icons/LinkArrowRight"; import LinkArrowUpRight from "../components/Common/Icons/LinkArrowUpRight"; import Newsletter from "../components/Common/Newsletter/Newsletter"; import ShareMeta from "../components/Common/ShareMeta"; import TranslatedLayout from "../components/Common/TranslatedLayout/TranslatedLayout"; +import VideoCard from "../components/Common/VideoCard"; import { useDarkHeaderInHero } from "../utils/use-dark-header-in-hero"; const MotionLink = motion(Link); @@ -117,17 +118,17 @@ function EthereumIntegrationPage() { >
- Smart Contracts on the Internet Computer are the glue between the - world’s most important blockchains. + Canister smart contracts on ICP are the glue between blockchains + and the gateway to X-chain advantages. - + {/* Get updates about ETH <> ICP - + */}
@@ -140,16 +141,24 @@ function EthereumIntegrationPage() { className="tw-heading-3 sm:tw-heading-60 mb-6 sm:mb-10" variants={transitions.item} > - World Computer capabilities for Ethereum + Extend Ethereum with ICP capabilities - - + Ethereum is the world’s top blockchain for DeFi with TVL in the + billions. Integrating with ICP offers X-chain benefits such as + increased asset liquidity, expanded market access, improved + scalability and throughput. Plus, access to ICP’s unique + capabilities: + {/* More on trustless multi-chain - + */}

100% on-chain Web3

- 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.

Gasless token swaps

- 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.

-

- Extended DAO functionality -

+

Web2 integration

- 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.

+ +

+ Signing Ethereum transactions +

+

+ 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 + +

+

- Protocol-level ETH integration + X-chain DeFi

- 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.

-

+

+ + + Start swapping ckETH + + - About extending ETH + + Go to ckETH dashboard

- +

- Chain-key -
- ETH & ERC-20 + EVM on the Internet Computer

- 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 + Check out Bitfinity

-

- EVM on the Internet Computer +

+ Full protocol integration

-

- 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 + Join the Ethereum Integration discussion

+ {/* +
+
+
+ +
-
- +
+

+ ICP.Lab 6.0: X-Chain +

+

+ 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. +

+
    +
  • + Date & Location: January 22nd - 25th, 2024 in Zurich +
  • +
  • Application closes on December 15th, 2023
  • +
+

+ + Track TX activity on the ICP Dashboard + + +

+
+
+
+ +
*/} + +
+

+ Build your own Ethereum +
+ X-chain solution +

+ + + Interacting with Ethereum on the Internet Computer (Beta) +
+ // Workshop + + } + /> +
+
+
+ - -

Community collab

-

- 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. -

-

- - - Find out more and apply for ICP.Lab - -

-
- + + + + + + +
-
+
- -
- - Build your own Ethereum -
- multi-chain solution -
-
- -
- -

IC Web3 Canister

-

- 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. -

-
- -
-
- - -

EVM Utils Canister

-

- 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

-

- 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. -

-
- -
-
- -

- Paranic cross-chain asset bridge -

-

- 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. -

-
- -
-
- -

ERC-721 IC assets tutorial

-

- 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. -

-
- -
-
- -

Uniswap user interface

-

- 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. -

-
- -
-
- - -

No key wallet

-

- This is an example project of a canister-based Ethereum wallet - using chain-key ECDSA signing. -

-
- -
-
-
-
); diff --git a/src/pages/icp-tokens.tsx b/src/pages/icp-tokens.tsx index 88534acc17..7bb4309955 100644 --- a/src/pages/icp-tokens.tsx +++ b/src/pages/icp-tokens.tsx @@ -18,7 +18,10 @@ const MotionLink = motion(Link); const NnsTvl: React.FC = () => { const globalData = useGlobalData(); - const icpPrice = globalData["icp-price"]["default"] as number; + const cryptoPrice = globalData["crypto-price"]["default"] as { + icp: number; + btc: number; + }; const stakingMetricsQuery = useQuery("staking-metrics", getStakingMetrics); let tvl = <> ; @@ -30,7 +33,11 @@ const NnsTvl: React.FC = () => { )?.samples[0]?.value; if (maybeMetric) { - tvl = <>${((maybeMetric * icpPrice) / 100000000000000000).toFixed(1)}B; + tvl = ( + <> + ${((maybeMetric * cryptoPrice.icp) / 100000000000000000).toFixed(1)}B + + ); } } @@ -65,7 +72,10 @@ const WalletCard: React.FC<{ function TokenHolders(): JSX.Element { const globalData = useGlobalData(); - const icpPrice = globalData["icp-price"]["default"] as number; + const cryptoPrice = globalData["crypto-price"]["default"] as { + icp: number; + btc: number; + }; const ref = useRef(null); const isDark = useDarkHeaderInHero(ref); @@ -230,7 +240,7 @@ function TokenHolders(): JSX.Element { variants={transitions.item} > - ${(icpPrice * 0.0001).toFixed(5)} + ${(cryptoPrice.icp * 0.0001).toFixed(5)}
Ledger TX Fee diff --git a/src/utils/network-stats.ts b/src/utils/network-stats.ts index b71c0a01df..255ca6775e 100644 --- a/src/utils/network-stats.ts +++ b/src/utils/network-stats.ts @@ -283,3 +283,14 @@ export function getLastEnergyConsumptionRateKwh(): Promise { .then((res) => res.json()) .then((res) => +res.energy_consumption_rate[0][1]); } + +export function getMaxTransactionsPerSecOver90Days(): Promise { + return fetch( + `https://ic-api.internetcomputer.org/api/v3/metrics/max-transactions-per-sec-over-90-days` + ) + .then( + (res) => + res.json() as Promise<{ max_transactions_per_sec: [number, string] }> + ) + .then((res) => +res.max_transactions_per_sec[1]); +} diff --git a/static/img/defi/astroxme.webp b/static/img/defi/astroxme.webp new file mode 100644 index 0000000000..e5b8ad00d4 Binary files /dev/null and b/static/img/defi/astroxme.webp differ diff --git a/static/img/defi/bitfinity.webp b/static/img/defi/bitfinity.webp new file mode 100644 index 0000000000..acaba02359 Binary files /dev/null and b/static/img/defi/bitfinity.webp differ diff --git a/static/img/defi/defi-hero.webp b/static/img/defi/defi-hero.webp index 31fb5307e7..220a56e84e 100644 Binary files a/static/img/defi/defi-hero.webp and b/static/img/defi/defi-hero.webp differ diff --git a/static/img/defi/https-outcalls.webp b/static/img/defi/https-outcalls.webp new file mode 100644 index 0000000000..2f8e0ac361 Binary files /dev/null and b/static/img/defi/https-outcalls.webp differ diff --git a/static/img/defi/image-2.webp b/static/img/defi/image-2.webp index f3dcc1fdb9..917109d5de 100644 Binary files a/static/img/defi/image-2.webp and b/static/img/defi/image-2.webp differ diff --git a/static/img/defi/nns.webp b/static/img/defi/nns.webp new file mode 100644 index 0000000000..384ccdd32e Binary files /dev/null and b/static/img/defi/nns.webp differ diff --git a/static/img/defi/plug.webp b/static/img/defi/plug.webp new file mode 100644 index 0000000000..904e5f529a Binary files /dev/null and b/static/img/defi/plug.webp differ diff --git a/static/img/defi/sonic.webp b/static/img/defi/sonic.webp new file mode 100644 index 0000000000..c950f6c177 Binary files /dev/null and b/static/img/defi/sonic.webp differ diff --git a/static/img/defi/x-chain-swaps.webp b/static/img/defi/x-chain-swaps.webp new file mode 100644 index 0000000000..24e45f6700 Binary files /dev/null and b/static/img/defi/x-chain-swaps.webp differ diff --git a/static/img/ethereum-integration/icon-3.svg b/static/img/ethereum-integration/icon-3.svg index 75f76abe80..ca52e48d88 100644 --- a/static/img/ethereum-integration/icon-3.svg +++ b/static/img/ethereum-integration/icon-3.svg @@ -1,22 +1,7 @@ - - - - - + + - - - - - - - - - - - - - + diff --git a/static/img/ethereum-integration/image-1.webp b/static/img/ethereum-integration/image-1.webp new file mode 100644 index 0000000000..9a43601372 Binary files /dev/null and b/static/img/ethereum-integration/image-1.webp differ diff --git a/static/img/ethereum-integration/image-2.webp b/static/img/ethereum-integration/image-2.webp new file mode 100644 index 0000000000..02704efa3a Binary files /dev/null and b/static/img/ethereum-integration/image-2.webp differ diff --git a/static/img/ethereum-integration/image-3.webp b/static/img/ethereum-integration/image-3.webp new file mode 100644 index 0000000000..cdd8f94486 Binary files /dev/null and b/static/img/ethereum-integration/image-3.webp differ diff --git a/static/img/ethereum-integration/image-4.webp b/static/img/ethereum-integration/image-4.webp new file mode 100644 index 0000000000..5956ab3d59 Binary files /dev/null and b/static/img/ethereum-integration/image-4.webp differ diff --git a/static/img/shareImages/share-defi.jpg b/static/img/shareImages/share-defi.jpg index 1705aa99b3..57f62e9d24 100644 Binary files a/static/img/shareImages/share-defi.jpg and b/static/img/shareImages/share-defi.jpg differ diff --git a/submodules/sdk b/submodules/sdk index 4476953b6e..a302661f52 160000 --- a/submodules/sdk +++ b/submodules/sdk @@ -1 +1 @@ -Subproject commit 4476953b6e05fcebbcb45b7c43ab8b13c8523668 +Subproject commit a302661f52ad6ec18d70cb1f2d32250289adf8ee