diff --git a/frontend/package.json b/frontend/package.json index b875d67..2c89d3e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,6 +14,7 @@ "@bitcoinerlab/secp256k1": "^1.2.0", "@heroicons/react": "^2.0.18", "@hookform/resolvers": "^3.9.1", + "@radix-ui/react-accordion": "^1.2.3", "@radix-ui/react-checkbox": "^1.1.3", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-dialog": "^1.1.4", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index bd31ce2..ec9f2d7 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,16 +1,18 @@ -import { SnackbarProvider } from 'notistack'; -import { Route, BrowserRouter as Router, Routes } from 'react-router-dom'; -import 'reflect-metadata'; -import Layout from './components/layout/Layout'; -import { ErrorHandlerProvider } from './contexts/ErrorHandlerContext'; -import { WalletProvider } from './contexts/WalletContext/WalletContext'; -import ArbiterDashboard from './pages/ArbiterDashboard/ArbiterDashboard'; -import ArbiterList from './pages/ArbiterList/ArbiterList'; -import CompensationList from './pages/CompensationList/CompensationList'; -import DAppList from './pages/DAppList/DAppList'; -import RegisterArbiter from './pages/RegisterArbiter/RegisterArbiter'; -import RegisterDApp from './pages/RegisterDApp/RegisterDApp'; -import TransactionList from './pages/TransactionList/TransactionList'; +import { SnackbarProvider } from "notistack"; +import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; +import "reflect-metadata"; +import Layout from "./components/layout/Layout"; +import { ErrorHandlerProvider } from "./contexts/ErrorHandlerContext"; +import { WalletProvider } from "./contexts/WalletContext/WalletContext"; +import ArbiterDashboard from "./pages/ArbiterDashboard/ArbiterDashboard"; +import ArbiterList from "./pages/ArbiterList/ArbiterList"; +import CompensationList from "./pages/CompensationList/CompensationList"; +import DAppList from "./pages/DAppList/DAppList"; +import HelpPage from "./pages/HelpPage/HelpPage"; +import GlossaryPage from "./pages/GlossaryPage/GlossaryPage"; +import RegisterArbiter from "./pages/RegisterArbiter/RegisterArbiter"; +import RegisterDApp from "./pages/RegisterDApp/RegisterDApp"; +import TransactionList from "./pages/TransactionList/TransactionList"; function App() { return ( @@ -29,12 +31,17 @@ function App() { } /> } /> } /> - } /> + } + /> } /> } /> } /> } /> } /> + } /> + } /> diff --git a/frontend/src/components/layout/Navbar.tsx b/frontend/src/components/layout/Navbar.tsx index 7918448..402ed0f 100644 --- a/frontend/src/components/layout/Navbar.tsx +++ b/frontend/src/components/layout/Navbar.tsx @@ -1,13 +1,13 @@ -import { useEVMContext } from '@/contexts/EVMContext/EVMContext'; -import { useWalletContext } from '@/contexts/WalletContext/WalletContext'; -import { useActiveEVMChainConfig } from '@/services/chains/hooks/useActiveEVMChainConfig'; -import { cn } from '@/utils/shadcn'; -import { Bars3Icon, WalletIcon, XMarkIcon } from '@heroicons/react/24/outline'; -import { FC, useCallback, useMemo, useState } from 'react'; -import { Link, useLocation } from 'react-router-dom'; -import { ChildTooltip } from '../base/ChildTooltip'; -import { Button } from '../ui/button'; -import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'; +import { useEVMContext } from "@/contexts/EVMContext/EVMContext"; +import { useWalletContext } from "@/contexts/WalletContext/WalletContext"; +import { useActiveEVMChainConfig } from "@/services/chains/hooks/useActiveEVMChainConfig"; +import { cn } from "@/utils/shadcn"; +import { Bars3Icon, WalletIcon, XMarkIcon } from "@heroicons/react/24/outline"; +import { FC, useCallback, useMemo, useState } from "react"; +import { Link, useLocation } from "react-router-dom"; +import { ChildTooltip } from "../base/ChildTooltip"; +import { Button } from "../ui/button"; +import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"; export const Navbar: FC = () => { const location = useLocation(); @@ -16,14 +16,14 @@ export const Navbar: FC = () => { const navigation = useMemo(() => { const nav = [ - { name: 'Arbiters', href: '/' }, - { name: 'Transactions', href: '/transactions' }, - { name: 'Compensations', href: '/compensations' }, - { name: 'DApps', href: '/dapps' }, + { name: "Arbiters", href: "/" }, + { name: "Transactions", href: "/transactions" }, + { name: "Compensations", href: "/compensations" }, + { name: "DApps", href: "/dapps" }, + { name: "Help", href: "/help" }, ]; - if (evmAccount) - nav.push({ name: 'My dashboard', href: '/dashboard' }); + if (evmAccount) nav.push({ name: "My dashboard", href: "/dashboard" }); return nav; }, [evmAccount]); @@ -36,8 +36,14 @@ export const Navbar: FC = () => { Arbiter Portal -
- +
+ BETA
@@ -50,9 +56,9 @@ export const Navbar: FC = () => { to={item.href} className={cn( item.href === location.pathname - ? 'border-primary text-gray-900' - : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700', - 'inline-flex items-center border-b-2 px-1 pt-1 font-normal' + ? "border-primary text-gray-900" + : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700", + "inline-flex items-center border-b-2 px-1 pt-1 font-normal" )} > {item.name} @@ -69,8 +75,12 @@ export const Navbar: FC = () => {
{/* Icon button to toggle mobile menu */}
@@ -84,9 +94,9 @@ export const Navbar: FC = () => { onClick={() => setOpen(false)} className={cn( item.href === location.pathname - ? 'border-primary text-primary bg-primary/10' - : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700', - 'block border-l-4 py-2 pl-2' + ? "border-primary text-primary bg-primary/10" + : "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700", + "block border-l-4 py-2 pl-2" )} > {item.name} @@ -103,8 +113,8 @@ export const Navbar: FC = () => {
- ) -} + ); +}; const Wallet: FC = () => { const { evmAccount } = useWalletContext(); @@ -118,27 +128,31 @@ const Wallet: FC = () => { disconnect(); }, [disconnect]); - return (<> - { - evmAccount && - - - - {evmAccount.slice(0, 6)}...{evmAccount.slice(-4)} - - - - - - - - } - { - !evmAccount && - - } - ) -} \ No newline at end of file + return ( + <> + {evmAccount && ( + + + + {evmAccount.slice(0, 6)}...{evmAccount.slice(-4)} + + + + + + + + )} + {!evmAccount && ( + + )} + + ); +}; diff --git a/frontend/src/components/ui/accordion.tsx b/frontend/src/components/ui/accordion.tsx new file mode 100644 index 0000000..53e2790 --- /dev/null +++ b/frontend/src/components/ui/accordion.tsx @@ -0,0 +1,55 @@ +import * as React from "react"; +import * as AccordionPrimitive from "@radix-ui/react-accordion"; +import { ChevronDown } from "lucide-react"; +import { cn } from "@/utils/shadcn"; + +const Accordion = AccordionPrimitive.Root; + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AccordionItem.displayName = "AccordionItem"; + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)); +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+
+)); + +AccordionContent.displayName = AccordionPrimitive.Content.displayName; + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/frontend/src/pages/GlossaryPage/GlossaryPage.tsx b/frontend/src/pages/GlossaryPage/GlossaryPage.tsx new file mode 100644 index 0000000..2b01e84 --- /dev/null +++ b/frontend/src/pages/GlossaryPage/GlossaryPage.tsx @@ -0,0 +1,825 @@ +import { PageContainer } from "@/components/base/PageContainer"; +import { PageTitle } from "@/components/base/PageTitle"; +import { PageTitleRow } from "@/components/base/PageTitleRow"; +import { FC, useState, useEffect } from "react"; +import { BookA, Search, FileText, ArrowLeft } from "lucide-react"; +import { Input } from "@/components/ui/input"; +import { Link } from "react-router-dom"; +import { Button } from "@/components/ui/button"; + +// Define the structure of a glossary term +interface GlossaryTerm { + term: string; + definition: React.ReactNode; + tags?: string[]; +} + +const GlossaryPage: FC = () => { + const [searchTerm, setSearchTerm] = useState(""); + const [activeLetterFilter, setActiveLetterFilter] = useState( + null + ); + + // Function to scroll to a specific section + const scrollToLetter = (letter: string) => { + const element = document.getElementById(`section-${letter}`); + if (element) { + element.scrollIntoView({ behavior: "smooth" }); + setActiveLetterFilter(letter); + } + }; + + // Reset filter when search term changes + useEffect(() => { + if (searchTerm) { + setActiveLetterFilter(null); + } + }, [searchTerm]); + + // Generate alphabet for quick navigation + const alphabet = Array.from({ length: 26 }, (_, i) => + String.fromCharCode(65 + i) + ); + + // Comprehensive list of glossary terms + const glossaryTerms: GlossaryTerm[] = [ + { + term: "Active (Arbiter Status)", + definition: + 'An arbiter is considered "Active" when it is registered, has sufficient stake, is not paused, has not exceeded its deadline, and is not currently frozen or working on another transaction. Only active arbiters can be selected by DApps. See also: Paused, Frozen, Working.', + tags: ["arbiter", "status"], + }, + { + term: "Address (EVM)", + definition: + 'A unique identifier for an account on the Elastos Smart Chain (ESC) or another EVM-compatible blockchain. EVM addresses start with "0x" and are 40 hexadecimal characters long (e.g., 0x1234...). This is the type of address used by wallets like MetaMask.', + tags: ["address", "wallet", "evm"], + }, + { + term: "Address (Bitcoin)", + definition: + 'A unique identifier for receiving Bitcoin. The protocol currently expects standard "legacy" (P2PKH) addresses, which start with "1" (mainnet) or "m"/"n" (testnet). Important: The arbiter\'s operator and revenue can have separate Bitcoin addresses.', + tags: ["address", "bitcoin", "wallet"], + }, + { + term: "API (Application Programming Interface)", + definition: + "A set of rules and specifications that software programs can follow to communicate with each other. The Arbiter Signer uses APIs to interact with external services like mempool.space.", + tags: ["technical", "integration"], + }, + { + term: "Arbitration", + definition: + "The process of resolving a dispute in a Bitcoin transaction that is secured by the BeL2 protocol. This is initiated by a DApp when there's an issue. The selected arbiter may be required to sign the Bitcoin transaction to resolve the dispute.", + tags: ["core concept", "dispute"], + }, + { + term: "Arbitration Fee", + definition: + "The fee that an arbiter charges for providing arbitration services. This is calculated as a percentage of the arbiter's total stake, annualized. DApps pay this fee when registering a transaction, even if arbitration is not ultimately needed. See also: Fee Rate.", + tags: ["fees", "economics"], + }, + { + term: "Arbitration Request", + definition: + "An action taken by a DApp when it needs assistance from an arbiter to resolve a problem with a Bitcoin transaction. This triggers the arbiter's potential signing responsibility.", + tags: ["request", "process"], + }, + { + term: "Arbitration Timeout", + definition: + 'The maximum time an arbiter has to respond to an arbitration request (by submitting a signature, if required). If the arbiter misses this deadline, a "Timeout Compensation" claim can be made. The timeout duration is a system-wide parameter set in the ConfigManager contract.', + tags: ["timeout", "parameters"], + }, + { + term: "Arbiter", + definition: + "An entity (individual or organization) that registers with the BeL2 Arbitration Protocol to provide transaction guarantees. Arbiters stake assets (ELA or NFTs) as collateral.", + tags: ["core concept", "roles"], + }, + { + term: "Arbiter Dashboard", + definition: + "The section of the Arbiter Portal where registered arbiters can manage their settings, view their transaction history, and monitor their status.", + tags: ["ui", "management"], + }, + { + term: "Arbiter Signer", + definition: + "A separate, off-chain application (written in Go) that arbiters must run. This application listens for events, signs Bitcoin transactions when required, and submits the signatures to the ESC. It is distinct from the Arbiter Portal (which is a web frontend).", + tags: ["application", "signing", "technical"], + }, + { + term: "BPoSNFT", + definition: + "A type of Non-Fungible Token (NFT) on the Elastos blockchain, representing voting power in the Delegated Proof of Stake (DPoS) consensus mechanism. These NFTs can be staked by arbiters as collateral.", + tags: ["nft", "staking", "collateral"], + }, + { + term: "BTC", + definition: "The symbol for Bitcoin.", + tags: ["bitcoin", "currency"], + }, + { + term: "BTC Address", + definition: "See Address (Bitcoin).", + tags: ["address", "bitcoin"], + }, + { + term: "BTC Public Key", + definition: + "The public key corresponding to a Bitcoin private key, used to derive Bitcoin addresses and verify signatures. The arbiter provides their operator's and revenue's public key as a hexadecimal string (starting with \"0x\").", + tags: ["bitcoin", "cryptography", "key"], + }, + { + term: "BTC Transaction", + definition: + "A Bitcoin transaction, represented as a hexadecimal string (rawData in the code).", + tags: ["bitcoin", "transaction"], + }, + { + term: "BTC TxHash", + definition: "See Transaction Hash (Bitcoin).", + tags: ["bitcoin", "transaction", "hash"], + }, + { + term: "BTCUtils.sol", + definition: + "A Solidity library contract that provides functions for parsing and manipulating Bitcoin transaction data within the EVM environment.", + tags: ["contract", "technical", "bitcoin"], + }, + { + term: "Chain ID", + definition: + "A unique identifier for a specific blockchain network. The Arbiter Portal and contracts need to be configured for the correct chain ID (e.g., Elastos Smart Chain Mainnet or Testnet).", + tags: ["blockchain", "network", "configuration"], + }, + { + term: "Claim (Compensation Claim)", + definition: + "A request for compensation made by a user (through a DApp) when they believe an arbiter has acted incorrectly. There are different claim types for different scenarios (see Compensation Type).", + tags: ["dispute", "compensation"], + }, + { + term: "Claim ID", + definition: "A unique identifier for a compensation claim.", + tags: ["dispute", "identifiers", "compensation"], + }, + { + term: "Claimer", + definition: + "The entity (typically the DApp) that initiates a compensation claim.", + tags: ["dispute", "roles", "compensation"], + }, + { + term: "Collateral", + definition: + 'The assets (ELA or NFTs) staked by an arbiter as a guarantee of their good behavior. This collateral can be "slashed" (taken) if the arbiter misbehaves.', + tags: ["staking", "security", "economics"], + }, + { + term: "CompensationManager.sol", + definition: + "The smart contract responsible for managing compensation claims.", + tags: ["contract", "compensation", "technical"], + }, + { + term: "Compensation Type", + definition: + "The reason for a compensation claim. The supported types are: IllegalSignature (the arbiter signed a Bitcoin transaction without a proper arbitration request), Timeout (the arbiter failed to respond to an arbitration request within the deadline), FailedArbitration (the arbiter submitted an incorrect or invalid signature), and ArbiterFee (which allows arbiters to claim their fee after the transaction deadline).", + tags: ["dispute", "compensation", "claim types"], + }, + { + term: "ConfigManager.sol", + definition: + "The smart contract that stores and manages system-wide configuration parameters (e.g., minimum stake, fee rates, timeout durations).", + tags: ["contract", "configuration", "technical"], + }, + { + term: "Contract Address", + definition: "The unique address of a smart contract on the blockchain.", + tags: ["technical", "blockchain", "address"], + }, + { + term: "DApp (Decentralized Application)", + definition: + "An application that interacts with the blockchain and uses the BeL2 Arbitration Protocol to secure its Bitcoin transactions.", + tags: ["applications", "core concept"], + }, + { + term: "DApp Registry", + definition: + "The smart contract (DAppRegistry.sol) that keeps track of registered DApps that are authorized to use the Arbitration Protocol.", + tags: ["contract", "registry", "technical"], + }, + { + term: "Deadline (Arbiter)", + definition: + "The timestamp until which an arbiter has committed to providing services. Arbiters can extend their deadline.", + tags: ["arbiter", "time", "commitment"], + }, + { + term: "Deadline (Transaction)", + definition: "The time at which the transaction must be completed.", + tags: ["transaction", "time", "parameters"], + }, + { + term: "Decentralized", + definition: + "A system that is not controlled by a single entity, but rather distributed among multiple participants.", + tags: ["concept", "architecture"], + }, + { + term: "Deposited Fee", + definition: + "The fee (in ELA) paid by a DApp when registering a transaction with the Arbitration Protocol.", + tags: ["fees", "economics"], + }, + { + term: "DER Signature", + definition: + "A standard format for encoding ECDSA signatures (used in Bitcoin). The arbiter_signer converts the raw signature into DER format before submitting it to the contract.", + tags: ["cryptography", "bitcoin", "technical"], + }, + { + term: "ECDSA (Elliptic Curve Digital Signature Algorithm)", + definition: + "The cryptographic algorithm used for signing Bitcoin transactions.", + tags: ["cryptography", "bitcoin", "technical"], + }, + { + term: "ELA", + definition: + "The native cryptocurrency of the Elastos Smart Chain (ESC). Arbiters can stake ELA as collateral.", + tags: ["currency", "staking", "elastos"], + }, + { + term: "ERC721", + definition: + "A standard for Non-Fungible Tokens (NFTs) on Ethereum and compatible blockchains.", + tags: ["nft", "standards", "ethereum"], + }, + { + term: "ESC (Elastos Smart Chain)", + definition: + "An EVM-compatible blockchain that is part of the Elastos ecosystem. The Arbiter Portal's smart contracts are deployed on ESC.", + tags: ["blockchain", "elastos", "network"], + }, + { + term: "EVM (Ethereum Virtual Machine)", + definition: + "The runtime environment for smart contracts on Ethereum and compatible blockchains (like ESC).", + tags: ["technical", "ethereum", "smart contracts"], + }, + { + term: "Event", + definition: + "A notification emitted by a smart contract when a specific action occurs. The arbiter_signer listens for events to detect arbitration requests.", + tags: ["technical", "smart contracts", "notification"], + }, + { + term: "Fee Rate (Arbiter)", + definition: + "The annualized percentage fee that an arbiter charges for their services. This is a percentage of the arbiter's total stake, not a percentage of each transaction.", + tags: ["fees", "economics", "arbiter"], + }, + { + term: "Frozen (Arbiter Status)", + definition: + 'An arbiter is temporarily "frozen" after submitting a signature, to prevent immediate withdrawal of stake or acceptance of new transactions.', + tags: ["arbiter", "status", "security"], + }, + { + term: "Gas", + definition: + "A unit of computational effort required to execute operations on the EVM network. Transactions require gas, which is paid for in the native currency (ELA on ESC).", + tags: ["fees", "technical", "blockchain"], + }, + { + term: "Hexadecimal (Hex)", + definition: + 'A base-16 number system commonly used to represent data in blockchain contexts (e.g., addresses, transaction hashes, private keys). Hex strings are often prefixed with "0x".', + tags: ["technical", "data format"], + }, + { + term: "Implementation Contract", + definition: + "In the context of upgradeable contracts, the contract that contains the core logic. See Proxy Contract.", + tags: ["contract", "technical", "upgradability"], + }, + { + term: "Keystore File", + definition: + "A file that securely stores a private key, encrypted with a password. The arbiter_signer uses keystore files to manage the arbiter's Bitcoin and Ethereum private keys.", + tags: ["security", "private key", "technical"], + }, + { + term: "Mainnet", + definition: + "The main, live network of a blockchain (as opposed to a testnet).", + tags: ["network", "environment"], + }, + { + term: "Mempool", + definition: + 'Short for "memory pool." In the context of Bitcoin, this is a collection of unconfirmed transactions waiting to be included in a block. The arbiter_signer uses the mempool.space API to access Bitcoin transaction data, including potentially retrieving unconfirmed transactions from the mempool.', + tags: ["bitcoin", "transactions", "technical"], + }, + { + term: "Mock (or Mock Contract)", + definition: + "A simplified version of a contract or service used for testing. They simulate the behavior of the real services without performing the actual cryptographic computations.", + tags: ["development", "testing", "technical"], + }, + { + term: "Multicall", + definition: + "A technique that allows multiple contract calls to be bundled into a single EVM transaction. This improves efficiency and reduces gas costs. The arbiter_signer uses multicall for some contract interactions.", + tags: ["technical", "optimization", "smart contracts"], + }, + { + term: "Network Mode", + definition: + 'Indicates whether the system is operating on the "mainnet" (the live, production network) or a "testnet" (a testing network).', + tags: ["network", "configuration", "environment"], + }, + { + term: "NFT (Non-Fungible Token)", + definition: + "A unique, indivisible token representing ownership of a digital or physical asset. In the BeL2 context, BPoS NFTs (representing voting power on Elastos) can be used as collateral by arbiters.", + tags: ["token", "asset", "collateral"], + }, + { + term: "Nonce (EVM)", + definition: + "A number associated with an EVM address that is incremented with each transaction sent from that address. It prevents replay attacks.", + tags: ["ethereum", "security", "transaction"], + }, + { + term: "Off-Chain", + definition: + "Operations or data that are not recorded on the blockchain. The arbiter_signer application runs off-chain.", + tags: ["architecture", "technical"], + }, + { + term: "On-Chain", + definition: + "Operations or data that are recorded on the blockchain (e.g., smart contract interactions, token transfers).", + tags: ["architecture", "technical", "blockchain"], + }, + { + term: "Operator", + definition: + "An EVM address authorized to perform actions on behalf of an arbiter (e.g., submit signatures). The operator can be the same as the arbiter's owner address, or a separate address.", + tags: ["roles", "management", "delegation"], + }, + { + term: "Owner", + definition: + 'In the context of the smart contracts, the "owner" is the account that has special privileges, such as deploying and upgrading contracts, and setting system-wide parameters. For an individual arbiter, the "owner" is the address that initially registered the arbiter.', + tags: ["roles", "permissions", "management"], + }, + { + term: "Paused (Arbiter Status)", + definition: + "An arbiter can be manually paused, preventing them from being selected for new transactions.", + tags: ["arbiter", "status", "management"], + }, + { + term: "Pending (DApp Status)", + definition: + "A DApp's initial status after registration, before it has been authorized by the protocol administrators.", + tags: ["dapp", "status", "registration"], + }, + { + term: "Postmark", + definition: + "An SMTP (email) provider used by the backend for sending notifications.", + tags: ["notifications", "service", "technical"], + }, + { + term: "Private Key", + definition: + "A secret cryptographic key that allows control over funds and the ability to sign transactions. Never share your private keys. Arbiters need both an Ethereum private key and a Bitcoin private key.", + tags: ["security", "cryptography", "key management"], + }, + { + term: "Proof", + definition: + 'In the context of ZKPs, a cryptographic proof is a piece of data that demonstrates the validity of a statement without revealing the underlying information. In the current implementation, "proof" often refers to a signature or other evidence of arbiter misbehavior.', + tags: ["cryptography", "security", "verification"], + }, + { + term: "ProtonMail", + definition: + "An SMTP (email) provider, one of the options for sending notifications.", + tags: ["notifications", "service"], + }, + { + term: "Proxy Contract", + definition: + 'A contract that delegates calls to an "implementation" contract. This pattern is used for upgradeable contracts. The proxy contract\'s address remains constant, while the implementation contract can be updated.', + tags: ["contract", "upgradability", "technical"], + }, + { + term: "Public Key", + definition: + "A cryptographic key derived from a private key. Public keys are used to verify signatures and to derive addresses.", + tags: ["cryptography", "key", "security"], + }, + { + term: "Raw Transaction (Bitcoin)", + definition: + "The hexadecimal representation of a Bitcoin transaction. This is the data that is signed by an arbiter.", + tags: ["bitcoin", "transaction", "technical"], + }, + { + term: "Receipt (Transaction Receipt)", + definition: + "A record of a transaction that has been included in a block on the blockchain. It contains information about the transaction's status, gas used, and any events that were emitted.", + tags: ["transaction", "blockchain", "technical"], + }, + { + term: "reflect-metadata", + definition: + "A library that's a build time (or transpile-time) dependency, and part of the devDependencies. This usually indicates that the dependency isn't directly used at runtime in the browser but is required for certain TypeScript features to work.", + tags: ["development", "technical", "dependency"], + }, + { + term: "Registration Fee (DApp)", + definition: + "A one-time fee (currently 10 ELA) that DApps must pay to register with the Arbitration Protocol.", + tags: ["fees", "dapp", "registration"], + }, + { + term: "Revenue Address (EVM/BTC)", + definition: + "The addresses (EVM and Bitcoin) where an arbiter receives their earned fees.", + tags: ["fees", "address", "earnings"], + }, + { + term: "RPC (Remote Procedure Call)", + definition: + "A protocol that allows one program to request a service from a program located on another computer (or, in this case, on a blockchain node) without needing to understand the network's details. The arbiter_signer uses RPC to communicate with the Elastos Smart Chain and (potentially) a Bitcoin node.", + tags: ["technical", "communication", "protocol"], + }, + { + term: "Satoshi", + definition: + "The smallest unit of Bitcoin (1 BTC = 100,000,000 satoshis).", + tags: ["bitcoin", "unit", "currency"], + }, + { + term: "Secp256k1", + definition: + "The elliptic curve used for cryptographic signatures in both Bitcoin and EVM-based blockchains.", + tags: ["cryptography", "technical", "algorithm"], + }, + { + term: "Sendinblue", + definition: + "An SMTP (email) provider, one of the options for sending notifications.", + tags: ["notifications", "service"], + }, + { + term: "Serialization", + definition: + "The process of converting a data structure (like a transaction) into a byte format that can be stored or transmitted.", + tags: ["technical", "data format"], + }, + { + term: "Sighash (Signature Hash)", + definition: + 'A hash of the Bitcoin transaction data that is signed by an arbiter. The specific data included in the sighash depends on the "sighash flag".', + tags: ["bitcoin", "cryptography", "signature"], + }, + { + term: "Sighash Flag", + definition: + "A flag that determines which parts of a Bitcoin transaction are included in the signature hash. SIGHASH_ALL (value 0x01) is the most common and signs all inputs and outputs.", + tags: ["bitcoin", "cryptography", "technical"], + }, + { + term: "Signature Validation Service", + definition: + "A contract (ISignatureValidationService.sol) that verifies the validity of a digital signature. The current implementation uses a mock version (MockSignatureValidationService.sol).", + tags: ["contract", "verification", "signature"], + }, + { + term: "Smart Contract", + definition: + "A program stored on the blockchain that automatically executes code when certain conditions are met. The core logic of the BeL2 Arbitration Protocol is implemented in smart contracts.", + tags: ["blockchain", "code", "automation"], + }, + { + term: "SMTP (Simple Mail Transfer Protocol)", + definition: + "The standard protocol for sending email. The arbiter_signer backend can be configured to use various SMTP providers.", + tags: ["protocol", "notifications", "technical"], + }, + { + term: "Solidity", + definition: + "The programming language used to write smart contracts for EVM-compatible blockchains (like ESC).", + tags: ["programming", "smart contracts", "development"], + }, + { + term: "Stake", + definition: + "The assets (ELA or NFTs) that an arbiter locks up as collateral.", + tags: ["collateral", "security", "economics"], + }, + { + term: "Subgraph", + definition: + "A decentralized indexing protocol (The Graph) used to efficiently query data from the blockchain. The subgraph/ directory contains the configuration and mapping logic for the BeL2 subgraph.", + tags: ["data", "indexing", "technical"], + }, + { + term: "System Fee", + definition: + "A percentage of the arbitration fee that is collected by the protocol to support its operation and development.", + tags: ["fees", "economics", "protocol"], + }, + { + term: "Testnet", + definition: + "A test network for a blockchain, used for development and testing without using real cryptocurrency.", + tags: ["network", "development", "testing"], + }, + { + term: "Timeout", + definition: "See Arbitration Timeout.", + tags: ["time", "process", "dispute"], + }, + { + term: "Transaction ID (txId)", + definition: + "A unique identifier for a transaction. On Bitcoin, this is a hash of the transaction data. On EVM chains, this is also a hash. The txId used by the TransactionManager contract is a unique identifier (a bytes32) that may not be the same as the Bitcoin txid, particularly after arbitration.", + tags: ["transaction", "identifiers", "technical"], + }, + { + term: "TransactionManager.sol", + definition: + "The smart contract that manages the transaction flow and interactions between arbiters and dapps.", + tags: ["contract", "transactions", "technical"], + }, + { + term: "UTXO (Unspent Transaction Output)", + definition: + "The fundamental unit of value in Bitcoin. Each UTXO represents a specific amount of Bitcoin that is locked by a specific script (typically a Bitcoin address). Transactions consume existing UTXOs and create new ones.", + tags: ["bitcoin", "technical", "transaction"], + }, + { + term: "Verification (ZKP)", + definition: + "The process of checking the validity of a Zero-Knowledge Proof (or, in the current mock implementation, a signature).", + tags: ["cryptography", "verification", "zkp"], + }, + { + term: "WIF (Wallet Import Format)", + definition: + "A standardized format for encoding a Bitcoin private key, making it easier to import and export keys between wallets.", + tags: ["bitcoin", "private key", "format"], + }, + { + term: "Withdraw Compensation", + definition: + "The action of a user (or DApp) claiming the compensation that they are entitled to after a successful compensation claim.", + tags: ["compensation", "claim", "process"], + }, + { + term: "Working (Arbiter Status)", + definition: + 'An arbiter is considered "Working" when it is currently handling an arbitration request and has not yet submitted a signature or reached the timeout period.', + tags: ["arbiter", "status", "process"], + }, + { + term: "Zoho", + definition: + "An SMTP (email) provider, one of the options for sending notifications.", + tags: ["notifications", "service"], + }, + { + term: "ZK-Rollup", + definition: + "A layer-2 scaling solution that uses Zero-Knowledge Proofs to bundle and validate many transactions off-chain, improving throughput and reducing fees. While not directly implemented in the current codebase, this is a likely future direction for BeL2.", + tags: ["scaling", "zkp", "layer-2"], + }, + { + term: "ZKP (Zero-Knowledge Proof)", + definition: + "A cryptographic technique that allows one party (the prover) to prove to another party (the verifier) that a statement is true, without revealing any information beyond the fact that the statement is true. In the context of BeL2, ZKPs could be used to prove the validity of a Bitcoin transaction (or the invalidity of an arbiter's actions) without revealing the transaction details on the EVM chain. Important: The current code uses a mock ZKP service, not a real one.", + tags: ["cryptography", "privacy", "verification"], + }, + { + term: "ZKP request", + definition: + "The user request sent to verify a ZK proof (actual or mocked).", + tags: ["zkp", "verification", "technical"], + }, + { + term: "zkService (contract)", + definition: + "An interface (IZkService.sol) and a mock implementation (MockZkService.sol) for a service that handles ZKP verification. In a production deployment, this would be replaced with a real ZKP verification contract.", + tags: ["contract", "zkp", "verification"], + }, + ]; + + // Organize terms by first letter for alphabetical display + const termsByLetter: Record = {}; + + glossaryTerms.forEach((term) => { + const firstLetter = term.term.charAt(0).toUpperCase(); + if (!termsByLetter[firstLetter]) { + termsByLetter[firstLetter] = []; + } + termsByLetter[firstLetter].push(term); + }); + + // Filter terms based on search + const filteredTerms = searchTerm + ? glossaryTerms.filter( + (term) => + term.term.toLowerCase().includes(searchTerm.toLowerCase()) || + (typeof term.definition === "string" && + term.definition.toLowerCase().includes(searchTerm.toLowerCase())) || + (term.tags && + term.tags.some((tag) => + tag.toLowerCase().includes(searchTerm.toLowerCase()) + )) + ) + : []; + + return ( + + + Glossary of Terms + + +
+ {/* Introduction */} +
+

+ + BeL2 Arbitration Protocol Glossary +

+ +

+ This glossary provides definitions for key terms used in the BeL2 + Arbitration Protocol. Use the alphabetical navigation below to + quickly jump to specific sections, or use the search function to + find specific terms. +

+ + {/* Back to Help link */} + + + + + {/* Search Bar */} +
+ + setSearchTerm(e.target.value)} + /> +
+ + {/* Alphabetical Navigation */} +
+

+ + Jump to Letter +

+
+ {alphabet.map((letter) => { + // Only make letters with terms clickable + const hasTerms = + termsByLetter[letter] && termsByLetter[letter].length > 0; + + return ( + + ); + })} +
+
+ + {/* Search Results */} + {searchTerm && ( +
+

+ Search Results ({filteredTerms.length}) +

+ + {filteredTerms.length === 0 ? ( +

+ No terms found matching "{searchTerm}" +

+ ) : ( +
+ {filteredTerms.map((term, index) => ( +
+

+ {term.term} +

+

+ {term.definition} +

+ {term.tags && ( +
+ {term.tags.map((tag, tagIndex) => ( + + {tag} + + ))} +
+ )} +
+ ))} +
+ )} +
+ )} + + {/* Alphabetical Listing */} + {!searchTerm && ( +
+ {alphabet + .filter( + (letter) => + termsByLetter[letter] && termsByLetter[letter].length > 0 + ) + .map((letter) => ( +
+

+ {letter} +

+
+ {termsByLetter[letter].map((term, index) => ( +
+

+ {term.term} +

+

+ {term.definition} +

+ {term.tags && ( +
+ {term.tags.map((tag, tagIndex) => ( + + {tag} + + ))} +
+ )} +
+ ))} +
+
+ ))} +
+ )} +
+
+
+ ); +}; + +export default GlossaryPage; diff --git a/frontend/src/pages/HelpPage/HelpPage.tsx b/frontend/src/pages/HelpPage/HelpPage.tsx new file mode 100644 index 0000000..071b220 --- /dev/null +++ b/frontend/src/pages/HelpPage/HelpPage.tsx @@ -0,0 +1,1825 @@ +import { PageContainer } from "@/components/base/PageContainer"; +import { PageTitle } from "@/components/base/PageTitle"; +import { PageTitleRow } from "@/components/base/PageTitleRow"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { FC, useEffect, useState } from "react"; +import { + ChevronRight, + HelpCircle, + Users, + Activity, + Database, + FileText, + BookA, +} from "lucide-react"; +import { Link } from "react-router-dom"; + +const HelpPage: FC = () => { + // State to keep track of which accordion item is open + const [openItem, setOpenItem] = useState(undefined); + + // Function to handle navigation clicks + const handleNavClick = (itemValue: string) => (e: React.MouseEvent) => { + // Set the open accordion item + setOpenItem(itemValue); + }; + + // Check URL hash on component mount and when it changes + useEffect(() => { + const handleHashChange = () => { + const hash = window.location.hash.replace("#", ""); + if ( + hash && + [ + "overview", + "roles", + "arbiter-workflow", + "dapp-registration", + "faq", + ].includes(hash) + ) { + setOpenItem(hash); + } + }; + + // Check hash on mount + handleHashChange(); + + // Add event listener for hash changes + window.addEventListener("hashchange", handleHashChange); + + // Cleanup + return () => { + window.removeEventListener("hashchange", handleHashChange); + }; + }, []); + + return ( + + + Help and Information + + +
+

+ Welcome to the{" "} + BeL2 Arbiter Portal! +

+ +

+ This portal is your interface to the{" "} + BeL2 (Bitcoin + Elastos Layer 2) Decentralized Arbitration Protocol. It allows{" "} + Arbiters to register, manage + their stakes, and monitor their activity.{" "} + DApp developers can also register + their applications to utilize the network of Arbiters. +

+ + {/* Quick Navigation */} + + + + + +
+ + What is the BeL2 Arbitration Protocol? +
+
+ +
+

+ The{" "} + + BeL2 Arbitration Protocol + {" "} + provides a trustless mechanism for securing Bitcoin + transactions, especially those involving interactions with the{" "} + Elastos Smart Chain (ESC){" "} + and other EVM-compatible chains. It relies on a network of + independent + Arbiters who stake + collateral to guarantee the correct execution of transactions. + If an Arbiter misbehaves, their stake can be used to{" "} + compensate users who + are affected. +

+ +
+

+ How BeL2 Differs from Wrapped Bitcoin (WBTC) and Other + Centralized Solutions: +

+

+ Solutions like Wrapped Bitcoin (WBTC) rely on a centralized + custodian to hold the actual Bitcoin. You give your Bitcoin + to this custodian, and they issue you an equivalent token + (WBTC) on another blockchain. This introduces a single point + of failure and requires trust in that custodian. +

+

+ BeL2 takes a fundamentally different approach: +

+
    +
  • + + Decentralized and Trust-Minimized: + {" "} + Instead of a single custodian, BeL2 uses a network of + independent arbiters, distributing trust and making the + system more resistant to censorship or hacks. +
  • +
  • + + No Custody of Bitcoin: + {" "} + The Bitcoin remains on the Bitcoin blockchain. Arbiters + only provide signatures that authorize transactions when + necessary, dramatically reducing risk of loss or theft. +
  • +
  • + + Automated Dispute Resolution: + {" "} + If a dispute arises, the protocol provides an automated + mechanism for resolution and compensation. +
  • +
+
+ +
+

+ The Role of Signature Verification and Zero-Knowledge Proofs + (ZKPs): +

+

+ A crucial part of the BeL2 protocol is how it verifies that + an arbiter has acted correctly (or incorrectly) without + needing to reveal sensitive Bitcoin transaction details on + the Elastos Smart Chain. +

+

+ The BeL2 protocol incorporates{" "} + + Zero-Knowledge Proofs (ZKPs) + + , advanced cryptographic techniques that allow proving the + validity of a Bitcoin transaction (or the incorrectness of + an arbiter's actions) without revealing the transaction + details themselves on the ESC. This provides enhanced + privacy and security while allowing for dispute resolution. +

+
+ +

+ In summary, BeL2 provides a more secure and decentralized way + to use Bitcoin in DApps by eliminating single points of + failure, keeping Bitcoin on Bitcoin, automating dispute + resolution, and leveraging advanced cryptographic verification + methods. This makes it a powerful tool for building robust and + trustworthy Bitcoin-integrated applications on EVM-compatible + chains. +

+
+
+
+ + + +
+ + BeL2 Comprehensive Overview +
+
+ +
+ {/* Introduction to BeL2 */} +
+

+ Introduction to BeL2 +

+

+ BeL2 (Bitcoin-Elastos Layer 2) is an innovative layer 2 + solution that bridges Bitcoin's security with the + versatility of smart contracts and decentralized + applications (dApps). By leveraging advanced zero-knowledge + proofs, BeL2 maintains Bitcoin's robust security while + significantly expanding its utility in the blockchain + ecosystem. +

+

+ BeL2 enables Bitcoin to interact seamlessly with other + blockchain networks, particularly Ethereum-compatible + chains, opening up new possibilities for DeFi applications, + cross-chain functionality, and more. The core philosophy + behind BeL2 is encapsulated in its "Be Your Own Bank" + principle, allowing users to put their Bitcoin holdings to + work while maintaining security. +

+
+ + {/* Core Features of BeL2 */} +
+

+ Core Features of BeL2 +

+
+
+

+ 1. Cross-chain Interoperability +

+

+ BeL2 facilitates seamless interaction between Bitcoin + and EVM-compatible chains, particularly the Elastos + Smart Chain (ESC). This allows Bitcoin users to leverage + their assets across various DeFi applications without + compromising security. +

+
+
+

+ 2. Bitcoin-backed Lending +

+

+ One of BeL2's flagship applications enables users to use + their Bitcoin as collateral for loans in stablecoins or + other cryptocurrencies. This functionality is + implemented through a secure, non-custodial lending + platform. +

+
+
+

+ 3. Smart Contract Integration +

+

+ BeL2 brings programmability to Bitcoin by enabling + complex financial operations and dApps that leverage + Bitcoin's security and value, significantly expanding + Bitcoin's utility beyond simple transfers. +

+
+
+

+ 4. Improved Scalability +

+

+ By processing transactions off-chain and using + zero-knowledge proofs for verification, BeL2 drastically + reduces fees and increases throughput for + Bitcoin-related operations. +

+
+
+

+ 5. Decentralized Architecture +

+

+ BeL2 is built for peer-to-peer contracts and is managed + by zkBTC Full Nodes and Arbitrator Nodes to maintain + decentralization while ensuring security and efficiency. +

+
+
+
+ + {/* The Three S's: Core Principles */} +
+

+ The Three S's: Core Principles of BeL2 +

+
+
+

+ Secure +

+
    +
  • + Leverages Bitcoin's robust Proof-of-Work consensus and + decentralized network +
  • +
  • + Employs zero-knowledge proofs to verify transactions + while maintaining privacy +
  • +
  • + Implements rigorous smart contract auditing to + mitigate vulnerabilities +
  • +
  • + Utilizes an Arbitrator Network for additional security + and dispute resolution +
  • +
+
+
+

+ Smart +

+
    +
  • + Acts as an interface between Bitcoin's limited + scripting and more flexible smart contract platforms +
  • +
  • + Enables developers to create sophisticated smart + contracts that interact with Bitcoin-related + information +
  • +
  • + Facilitates complex financial instruments using + Bitcoin as collateral without moving the Bitcoin + itself +
  • +
  • + Enables cross-chain operations, allowing for seamless + interaction between Bitcoin and other blockchain + ecosystems +
  • +
+
+
+

+ Stable +

+
    +
  • + Offers faster and more cost-effective transactions + without compromising security +
  • +
  • + Distributes risk through a peer-to-peer network to + enhance system resilience +
  • +
  • + Structures economic incentives to maintain network + stability +
  • +
  • + Implements advanced risk management strategies for + DeFi applications to handle market volatility +
  • +
+
+
+
+ + {/* BeL2 Architecture */} +
+

+ BeL2 Architecture +

+

+ The BeL2 architecture consists of several interconnected + components that work together to bridge Bitcoin with + EVM-compatible chains: +

+
+
+

+ zkBTC Full Nodes +

+

+ These specialized nodes can run on ordinary hardware, + even mobile phones. They monitor the Bitcoin network and + generate proofs of transactions using zero-knowledge + technology. +

+
+
+

+ Cairo Circuit +

+

+ This component is used to generate and verify Bitcoin + transaction proofs. It's essential for creating + zero-knowledge proofs that can be verified on other + chains. +

+
+
+

+ Arbitrator Network +

+

+ The Arbitrator Network, including Arbitrator Nodes, is + central to the architecture. It facilitates the + transmission of data and proofs between Bitcoin and + other blockchains. +

+
+
+

+ EVM ZKP Contract +

+

+ This smart contract bridges Bitcoin transactions with + EVM-compatible chains. It receives, processes, and + verifies zero-knowledge proofs of Bitcoin transactions. +

+
+
+

+ Transaction Verifier Contract +

+

+ Deployed on EVM-compatible chains, this contract + receives and processes requests to verify Bitcoin + transactions. It maintains a list of verified + transactions. +

+
+
+

+ BeL2 SDK +

+

+ The BeL2 SDK serves as a toolkit for developers, + enabling them to build applications that leverage BeL2's + architecture. It simplifies creating dApps that interact + with both Bitcoin and EVM-compatible chains. +

+
+
+
+ + {/* BeL2 Use Cases */} +
+

+ BeL2 Use Cases +

+
+
+

+ Lending and Borrowing +

+
    +
  • Use Bitcoin as collateral to borrow stablecoins
  • +
  • + Lend stablecoins and earn interest secured by Bitcoin + collateral +
  • +
  • + Maintain self-custody throughout the lending/borrowing + process +
  • +
+
+
+

+ Trading and Exchanges +

+
    +
  • + Cross-chain asset swaps between Bitcoin and tokens on + EVM-compatible chains +
  • +
  • + Decentralized exchange functionality without wrapping + Bitcoin +
  • +
  • Direct peer-to-peer trading with Bitcoin
  • +
+
+
+
+
+

+ DeFi Integration +

+
    +
  • Yield farming on EVM-compatible chains
  • +
  • Liquidity provision using Bitcoin as collateral
  • +
  • + Complex DeFi strategies without moving Bitcoin off the + main chain +
  • +
+
+
+

+ Future Applications +

+
    +
  • Native Bitcoin staking
  • +
  • NFTs and Ordinals support
  • +
  • Cross-chain governance using Bitcoin holdings
  • +
  • Integration with traditional financial systems
  • +
+
+
+
+ + {/* Resources section */} +
+

+ Resources and Links +

+ +
+ + {/* Note about Arbitration Protocol's place in BeL2 */} +
+

+ Where the Arbitration Protocol Fits In +

+

+ The BeL2 Arbitration Protocol is a crucial component of the + BeL2 ecosystem that helps ensure the security and + reliability of cross-chain operations. As described in the + previous section, the Arbitrator Network plays a vital role + in maintaining the integrity of the system by acting as + guarantors for Bitcoin transactions initiated by DApps on + EVM-compatible chains. +

+
+
+
+
+ + + +
+ + Key Roles in the Protocol +
+
+ +
+
+

+ Arbiters: +

+
    +
  • + Act as guarantors for + Bitcoin transactions initiated by DApps. +
  • +
  • + + Stake ELA or specific NFTs + {" "} + as collateral to ensure honest behavior. +
  • +
  • + May be required to{" "} + + sign Bitcoin transactions + {" "} + in dispute scenarios. +
  • +
  • + Earn fees for + providing their services, proportional to their stake. +
  • +
  • + Use this portal to register, manage their stake, and + configure settings. +
  • +
+
+ +
+

+ DApps (Decentralized Applications): +

+
    +
  • + Applications built on the{" "} + Elastos Smart Chain{" "} + (or other compatible chains) that integrate with Bitcoin. +
  • +
  • + + Register with the Arbitration Protocol + {" "} + to use the services of Arbiters. +
  • +
  • + Pay fees to Arbiters + for their guarantees. +
  • +
+
+ +
+

+ Users (DApp Users): +

+
    +
  • + End-users of DApps that utilize the Arbitration Protocol. +
  • +
  • + Benefit from{" "} + + increased security and trust + {" "} + when interacting with Bitcoin through DApps. +
  • +
  • + Can initiate{" "} + compensation claims{" "} + if an Arbiter misbehaves. +
  • +
+
+
+
+
+ + + +
+ + Becoming an Arbiter: A Step-by-Step Guide +
+
+ +
    + {[ + { + title: "Prepare Your Wallets", + content: ( + <> + You'll need both an{" "} + + EVM-compatible wallet + {" "} + (like MetaMask) connected to the Elastos Smart Chain + (ESC) and a{" "} + Bitcoin wallet that + supports signing messages (like Unisat or OKX Wallet). + Make sure you have some ELA in your EVM wallet to cover + staking and transaction fees. + + ), + }, + { + title: "Navigate to Register Arbiter", + content: + "Go to the Register Arbiter section of this portal.", + }, + { + title: "Connect Wallet", + content: ( + <> + Your EVM address{" "} + (from where you will interact with the contracts) and + your{" "} + + BTC address and public key + {" "} + (used by the protocol to know which address you sign for + on bitcoin) are required to continue. + + ), + }, + { + title: "Choose Stake Type", + content: ( + <> + Decide whether to stake{" "} + ELA coins or{" "} + BPoS NFTs. + + ), + }, + { + title: "Enter Stake Amount", + content: ( + <> + Specify the amount of ELA or the NFTs you want to stake. + There's a{" "} + + minimum and maximum stake amount + + . + + ), + }, + { + title: "Set Operator (Optional)", + content: ( + <> + By default, your connected EVM wallet will be your + operator. You can assign a{" "} + + different EVM account + + , and provide the BTC address and public key for the + operator to sign bitcoin transactions. + + ), + }, + { + title: "Set Revenue Addresses", + content: ( + <> + Specify the EVM address where you'd like to receive{" "} + ELA fees, and the + Bitcoin address where you will receive{" "} + BTC fees. + + ), + }, + { + title: "Set Fee Rate", + content: ( + <> + Define the{" "} + + annual percentage fee + {" "} + you'll charge for your services. + + ), + }, + { + title: "Set Deadline", + content: ( + <> + Choose a deadline{" "} + for your arbiter service commitment. This is the date + until which you commit to acting as an arbiter. You can + extend this later. + + ), + }, + { + title: "Confirm and Submit", + content: ( + <> + Review all the information, and submit the transaction. + This will{" "} + + register you as an arbiter + {" "} + and lock up your stake. + + ), + }, + { + title: "Run the Arbiter Signer (Separate Application)", + content: ( + <> + This portal is only for managing your registration and + stake. To{" "} + + actually act as an arbiter and sign transactions + + , you need to download and run the separate{" "} + + arbiter_signer + {" "} + application. This application listens for events on the + blockchain and signs Bitcoin transactions when needed. + See the{" "} + + setup instructions + {" "} + in the official repository for detailed guidance on + installing and configuring the{" "} + + arbiter_signer + + . + + ), + }, + ].map((step, index) => ( +
  1. +
    +
    +

    + {index + 1}. {step.title} +

    +

    + {step.content} +

    +
    +
  2. + ))} +
+
+
+ + + +
+ + Arbiter Signer Setup Guide +
+
+ +
+ {/* Introduction */} +
+

+ Introduction to the Arbiter Signer +

+

+ The Arbiter Signer is a crucial component that enables you + to fulfill your role as an Arbiter in the BeL2 ecosystem. It + provides the signing services required for cross-chain + operations and ensures network security and stability. This + guide will walk you through the setup process with a + simplified one-click solution. +

+
+ + {/* About Arbiter/Arbitrator Nodes */} +
+

+ About Arbiter/Arbitrator Nodes +

+

+ The Arbitrator Network is a key component that enables + cross-chain operations and maintains system integrity: +

+
    +
  • + Decentralized nodes relay data and proofs between + different blockchain networks +
  • +
  • Manage redemptions and dispute resolution
  • +
  • + Stake BTC, ELA (Elastos tokens), or BPoS NFTs as + collateral to ensure honest behavior +
  • +
+
+ + {/* Benefits of Being an Arbiter */} +
+

+ Benefits of Being an Arbiter +

+

+ As an Arbiter in the BeL2 ecosystem, you'll enjoy: +

+
    +
  1. + Supporting a growing BeL2 ecosystem of BTCFI dApps in + return for set fees +
  2. +
  3. + Earning rewards from various services, such as: +
      +
    • Lending protocols
    • +
    • Stablecoin issuance services (including NBW)
    • +
    • Cross-chain transaction facilitation
    • +
    +
  4. +
  5. + Participation in BeL2 governance and decision-making + processes +
  6. +
  7. + Potential future airdrops or additional incentives from + the BeL2 community +
  8. +
  9. + Contributing to the advancement of Bitcoin-based + decentralized finance +
  10. +
+
+ + {/* Prerequisites */} +
+

+ Prerequisites +

+

+ Ensure you have the following before beginning: +

+
    +
  1. + + An Elastos Smart Chain (ESC) Wallet with ELA Tokens + {" "} + - Set up by following the{" "} + + Elastos Smart Chain and Cross-Chain Operation Manual + {" "} + to meet staking requirements +
  2. +
  3. + + Metamask Browser Extension + {" "} + (for Arbiter Registration) +
  4. +
  5. + Bitcoin Wallet{" "} + (Unisat or OKX Browser Extension) +
  6. +
  7. + + Completed Arbiter Registration + {" "} + (as described in the "Becoming an Arbiter" section) +
  8. +
+
+ + {/* Video Tutorials */} +
+

+ Video Tutorials +

+

+ You can follow along with these setup guide videos: +

+ +
+
+

+ Step 1: Arbiter Registration +

+

+ + Applies to both setup methods + +

+
+ +
+
+ +
+

+ Step 2: One-Click Arbiter Signer Setup +

+

+ + For GUI setup method only + +

+
+ +
+
+
+
+ + {/* Setup Methods */} +
+

+ Setup Methods +

+

+ There are two ways to set up your Arbiter Signer. You can + choose the method that best fits your technical comfort + level and requirements: +

+ +
+
+

+ + Option 1 + + One-Click GUI Setup +

+

+ A user-friendly graphical interface for easy setup, + recommended for most users. +

+
    +
  • Simple interactive wizard
  • +
  • Automatic configuration
  • +
  • Community-maintained tool
  • +
+
+ +
+

+ + Option 2 + + Standard Setup (Official) +

+

+ Command-line based setup from the official repository, + recommended for advanced users. +

+
    +
  • More configuration options
  • +
  • Official BeL2 Labs implementation
  • +
  • Suitable for production environments
  • +
+
+
+
+ + {/* One-Click Setup Process */} +
+

+ Option 1: One-Click Setup Process +

+ +
    +
  1. +
    +
    +

    + 1. Download the Arbiter Signer +

    +

    + Download the latest release for your operating system + from the{" "} + + Releases section + {" "} + of the community-maintained Arbiter Signer repository. +

    +
    +
  2. + +
  3. +
    +
    +

    + 2. Run the Executable +

    +

    + Run the executable to start the interactive setup + process. +

    +
    +
    + Platform-Specific Instructions: +
    +
      +
    • + macOS users:{" "} + Due to Apple's security measures, you'll need to: +
        +
      1. Right-click (or Control-click) the app
      2. +
      3. Select "Open" from the context menu
      4. +
      5. + Click "Open" in the security dialog that + appears +
      6. +
      +
    • +
    • + Linux users:{" "} + We assume some technical proficiency. Available + formats: +
        +
      • + + For .AppImage files: + +
        +                                    chmod +x filename.AppImage
        +                                    ./filename.AppImage
        +                                  
        +
      • +
      • + + For .deb files (Debian, Ubuntu): + +
        +                                    sudo dpkg -i filename.deb sudo apt install
        +                                    -f # if dependencies issues
        +                                  
        +
      • +
      • + + For .rpm files (Fedora, RHEL): + +
        +                                    sudo dnf install filename.rpm
        +                                  
        +
      • +
      +
    • +
    +
    +
    +
  4. + +
  5. +
    +
    +

    + 3. Configure Your Arbiter Node +

    +

    + Follow the prompts to configure your arbiter node. + You'll need to provide: +

    +
      +
    • Your BTC private key
    • +
    • Your ESC private key
    • +
    • Your arbiter wallet address
    • +
    • A custom password to encrypt the private keys
    • +
    +
    +
  6. + +
  7. +
    +
    +

    + 4. Start and Monitor Your Arbiter Signer +

    +

    + Once configured, the Arbiter Signer will start running + automatically. Ensure it stays running and monitor its + operation. +

    +
    +
  8. +
+
+ + {/* Standard Setup Process */} +
+

+ Option 2: Standard Setup Process (Official Repository) +

+ +

+ The standard setup method uses the official BeL2 Labs + Arbiter Signer repository. This method provides more + configuration options and is recommended for advanced users + or production environments. +

+ +
    +
  1. +
    +
    +

    + 1. Clone the Official Repository +

    +

    + Clone the official BeL2 Labs Arbiter Signer repository + from GitHub: +

    +
    +                          git clone
    +                          https://github.com/BeL2Labs/Arbiter_Signer.git
    +                        
    +
    +                          cd Arbiter_Signer
    +                        
    +
    +
  2. + +
  3. +
    +
    +

    + 2. Follow the Installation Instructions +

    +

    + Follow the detailed instructions in the repository's{" "} + + README.md + {" "} + file and the{" "} + + deployment guide + + . +

    +
    +
  4. + +
  5. +
    +
    +

    + 3. Configure the Arbiter Signer +

    +

    + The official repository requires manual configuration + of several parameters. You'll need to: +

    +
      +
    • Set up your config variables
    • +
    • Configure your Bitcoin and ESC private keys
    • +
    • Set your arbiter address and other parameters
    • +
    • Configure network settings
    • +
    +

    + Refer to the repository documentation for detailed + configuration steps. +

    +
    +
  6. + +
  7. +
    +
    +

    + 4. Run the Arbiter Signer +

    +

    + Once configured, you can start the Arbiter Signer + using the commands specified in the documentation. + Consider setting up monitoring and auto-restart + capabilities to ensure 24/7 operation. +

    +
    +
  8. +
+ +
+

+ Key Advantages of Standard Setup +

+
    +
  • + Provides more granular control over configuration + options +
  • +
  • + Offers better integration with server environments and + monitoring tools +
  • +
  • + Suitable for experienced developers who prefer + command-line interfaces +
  • +
  • + Direct access to updates from the official BeL2 Labs + repository +
  • +
+
+
+ + {/* Important Notes */} +
+

+ Important Notes for Both Setup Methods +

+
    +
  • + Ensure you have a stable internet connection and 24/7 + system availability. +
  • +
  • + It's recommended to set up a monitoring system to alert + you of any downtime. +
  • +
  • + Make sure you have sufficient stake as required by the + BeL2 protocol. +
  • +
  • + The one-click GUI setup is designed for ease of use, while + the standard setup offers more flexibility. +
  • +
  • + Choose the setup method that best aligns with your + technical expertise and requirements. +
  • +
+
+ + {/* Key Management */} +
+

+ Important Note on Key Management +

+

+ The BTC private key and ESC private keys are managed + privately and securely by you, the Arbiter. With the latest + updates, the keys are encrypted using a custom password + which needs to be provided when you run the program. +

+

+ For enhanced security: +

+
    +
  • + Create a new BTC key pair/wallet specifically for this + purpose. +
  • +
  • + The key is managed solely by you and is never shared with + or accessible by the BeL2 system. +
  • +
  • + While the Arbiter node setup automates the signing process + for convenience, you have the option to sign transactions + manually using your preferred wallet. +
  • +
  • + Always prioritize the security of your private keys and + follow best practices for key management. +
  • +
+
+ + {/* Conclusion */} +
+

+ Conclusion +

+

+ Congratulations on setting up your BeL2 Arbiter node! As an + Arbiter, you play a vital role in the BeL2 ecosystem, + facilitating cross-chain operations and ensuring network + security and stability. +

+

+ Stay updated with the latest developments and participate + actively in the community. Your contribution is essential to + the growth and success of the BeL2 system. +

+
+
+
+
+ + + +
+ + Registering a DApp +
+
+ +
+

+ Before beginning the DApp registration process, ensure your + DApp is{" "} + ready for integration{" "} + with the BeL2 protocol. +

+
+
    + {[ + { + title: "Connect Your Wallet", + content: ( + <> + Connect the EVM wallet that{" "} + + owns your DApp's contract + + . + + ), + }, + { + title: "Navigate to Register DApp", + content: "Go to the Register DApp section of the portal.", + }, + { + title: "Enter DApp Address", + content: ( + <> + Provide the{" "} + contract address of + your DApp on the Elastos Smart Chain. + + ), + }, + { + title: "Pay Registration Fee", + content: ( + <> + A one-time fee of{" "} + 10 ELA is required + to register. + + ), + }, + { + title: "Wait for Authorization", + content: ( + <> + After registration, your DApp will be in a{" "} + Pending state. The + protocol administrators must{" "} + authorize your DApp{" "} + before it can start using the arbitration services. + + ), + }, + ].map((step, index) => ( +
  1. +
    +
    +

    + {index + 1}. {step.title} +

    +

    + {step.content} +

    +
    +
  2. + ))} +
+

+ After registration and authorization, you'll need to{" "} + + integrate the Arbitration Protocol's smart contracts + {" "} + into your DApp's code. This will allow your DApp to request + arbiter guarantees for Bitcoin transactions. +

+
+
+ + + +
+ + Frequently Asked Questions (FAQ) +
+
+ +
+ {[ + { + question: "How are arbiters chosen?", + answer: ( + <> + Arbiters are chosen by the{" "} + + DApp that initiates the transaction + + , at the smart contract level. This portal does not + currently provide a mechanism for selecting arbiters; + it's up to the DApp to implement its own selection + logic. Some possible selection algorithms include:{" "} + random selection,{" "} + + round-robin selection + + , or selection based on factors such as stake amount, + fee rate, or past performance. + + ), + }, + { + question: + "What happens if the arbiter doesn't sign when requested?", + answer: ( + <> + If an arbiter doesn't respond to an arbitration request + within the configured timeout period, the user/DApp can + submit a{" "} + + Timeout Compensation claim + + . The proof of timeout is automatically verified by the + smart contract. + + ), + }, + { + question: "What if the arbiter provides a wrong signature?", + answer: ( + <> + If the arbiter signs an incorrect Bitcoin transaction, + the user/DApp can submit a{" "} + + Failed Arbitration Compensation claim + + . This currently requires a signature validation,{" "} + not a full ZKP. + + ), + }, + { + question: + "What if the arbiter signs a transaction without a request?", + answer: ( + <> + If the arbiter signs a Bitcoin transaction{" "} + without a + corresponding arbitration request from a DApp, this is + considered{" "} + + Illegal Signature + {" "} + behavior. The user/DApp can submit an Illegal Signature + Compensation claim, again with signature validation. + + ), + }, + { + question: + "What is signature validation and how does it relate to ZKP?", + answer: ( + <> + + Signature validation + {" "} + is a process that checks that a given signature is valid + for a given message (transaction hash) and public key.{" "} + + ZKP (Zero-Knowledge Proof) + {" "} + allows proving the validity of a statement{" "} + without revealing + the underlying data (like the signature itself). The + BeL2 protocol implements ZKP verification to enable + secure dispute resolution while maintaining privacy of + Bitcoin transaction details. This advanced cryptographic + technique ensures that arbiters' actions can be verified + without exposing sensitive information on the Elastos + Smart Chain. + + ), + }, + { + question: + "What is the arbiter_signer application, and why is it separate?", + answer: ( + <> + The{" "} + + arbiter_signer + {" "} + is a separate Go application that arbiters must run. It + performs the actual Bitcoin transaction signing. It's + separate from this web portal for{" "} + + security and operational reasons + + . Arbiters need to keep their Bitcoin private keys + secure, and the{" "} + + arbiter_signer + {" "} + is designed to run in a secure environment, separate + from the web interface. + + ), + }, + { + question: "What happens if I lose my private keys?", + answer: ( + <> + If you lose your private keys (both your EVM key for + managing the arbiter and your BTC key for signing), your + stake will be inaccessible, and you will not be able to + fulfill your arbitration duties.{" "} + + It is critical to back up your private keys securely. + {" "} + The protocol does not{" "} + provide a way to recover lost keys. This is a + fundamental aspect of how blockchains work. + + ), + }, + { + question: "Is this system fully decentralized?", + answer: ( + <> + The underlying smart contracts and arbiter selection are + decentralized. However, this portal (the website) is + currently centrally hosted. The long-term goal is for + the entire system, including the frontend, to be fully + decentralized. Also, note that DApp registration + currently requires{" "} + + authorization by the protocol owner + {" "} + (administrator). This is a centralizing factor that may + be removed in the future. + + ), + }, + { + question: "Is this system ready for production use?", + answer: ( + <> + The system is currently in{" "} + BETA. + It's undergoing active development and testing. While + the core functionality is in place, including ZKP + verification for secure dispute resolution, we recommend + careful consideration before using it with large sums of + money or in critical production environments until + further testing and auditing have been completed. + + ), + }, + ].map((item, index) => ( +
+

+ {item.question} +

+

+ {item.answer} +

+
+ ))} +
+
+
+
+
+
+ ); +}; +export default HelpPage; diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index d48f63d..bb36dd0 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,66 +1,74 @@ /** @type {import('tailwindcss').Config} */ export default { - darkMode: ["class"], - content: [ - "./index.html", - "./src/**/*.{js,ts,jsx,tsx}", - ], - theme: { - extend: { - fontFamily: { - sans: ['Rubik', 'sans-serif'], - }, - borderRadius: { - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)' - }, - colors: { - background: 'hsla(var(--background))', - foreground: 'hsla(var(--foreground))', - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))' - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))' - }, - primary: { - DEFAULT: 'hsla(var(--primary))', - foreground: 'hsla(var(--primary-foreground))' - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))' - }, - muted: { - DEFAULT: 'hsla(var(--muted))', - foreground: 'hsla(var(--muted-foreground))' - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))' - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))' - }, - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - chart: { - '1': 'hsl(var(--chart-1))', - '2': 'hsl(var(--chart-2))', - '3': 'hsl(var(--chart-3))', - '4': 'hsl(var(--chart-4))', - '5': 'hsl(var(--chart-5))' - } - } - } - }, - plugins: [ - require("tailwindcss-animate"), - require("@tailwindcss/forms") - ], -} + darkMode: ["class"], + content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], + theme: { + extend: { + fontFamily: { + sans: ["Rubik", "sans-serif"], + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + colors: { + background: "hsla(var(--background))", + foreground: "hsla(var(--foreground))", + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + primary: { + DEFAULT: "hsla(var(--primary))", + foreground: "hsla(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + muted: { + DEFAULT: "hsla(var(--muted))", + foreground: "hsla(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + chart: { + 1: "hsl(var(--chart-1))", + 2: "hsl(var(--chart-2))", + 3: "hsl(var(--chart-3))", + 4: "hsl(var(--chart-4))", + 5: "hsl(var(--chart-5))", + }, + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, + }, + plugins: [require("tailwindcss-animate"), require("@tailwindcss/forms")], +}; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index efe4e4d..dc650c5 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -951,6 +951,21 @@ resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.1.tgz#fc169732d755c7fbad33ba8d0cd7fd10c90dc8e3" integrity sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA== +"@radix-ui/react-accordion@^1.2.3": + version "1.2.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-accordion/-/react-accordion-1.2.3.tgz#7768a2d2daea18e5c09809f2c4b8097448ee2ff7" + integrity sha512-RIQ15mrcvqIkDARJeERSuXSry2N8uYnxkdDetpfmalT/+0ntOXLkFOsh9iwlAsCv+qcmhZjbdJogIm6WBa6c4A== + dependencies: + "@radix-ui/primitive" "1.1.1" + "@radix-ui/react-collapsible" "1.1.3" + "@radix-ui/react-collection" "1.1.2" + "@radix-ui/react-compose-refs" "1.1.1" + "@radix-ui/react-context" "1.1.1" + "@radix-ui/react-direction" "1.1.0" + "@radix-ui/react-id" "1.1.0" + "@radix-ui/react-primitive" "2.0.2" + "@radix-ui/react-use-controllable-state" "1.1.0" + "@radix-ui/react-arrow@1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.1.tgz#2103721933a8bfc6e53bbfbdc1aaad5fc8ba0dd7" @@ -972,6 +987,20 @@ "@radix-ui/react-use-previous" "1.1.0" "@radix-ui/react-use-size" "1.1.0" +"@radix-ui/react-collapsible@1.1.3": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.1.3.tgz#522a5749646b7a393c9e9049165a9a6dfa924e91" + integrity sha512-jFSerheto1X03MUC0g6R7LedNW9EEGWdg9W1+MlpkMLwGkgkbUXLPBH/KIuWKXUoeYRVY11llqbTBDzuLg7qrw== + dependencies: + "@radix-ui/primitive" "1.1.1" + "@radix-ui/react-compose-refs" "1.1.1" + "@radix-ui/react-context" "1.1.1" + "@radix-ui/react-id" "1.1.0" + "@radix-ui/react-presence" "1.1.2" + "@radix-ui/react-primitive" "2.0.2" + "@radix-ui/react-use-controllable-state" "1.1.0" + "@radix-ui/react-use-layout-effect" "1.1.0" + "@radix-ui/react-collapsible@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.1.2.tgz#42477c428bb0d2eec35b9b47601c5ff0a6210165" @@ -996,6 +1025,16 @@ "@radix-ui/react-primitive" "2.0.1" "@radix-ui/react-slot" "1.1.1" +"@radix-ui/react-collection@1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.2.tgz#b45eccca1cb902fd078b237316bd9fa81e621e15" + integrity sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw== + dependencies: + "@radix-ui/react-compose-refs" "1.1.1" + "@radix-ui/react-context" "1.1.1" + "@radix-ui/react-primitive" "2.0.2" + "@radix-ui/react-slot" "1.1.2" + "@radix-ui/react-compose-refs@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989" @@ -1242,6 +1281,13 @@ dependencies: "@radix-ui/react-slot" "1.1.1" +"@radix-ui/react-primitive@2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz#ac8b7854d87b0d7af388d058268d9a7eb64ca8ef" + integrity sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w== + dependencies: + "@radix-ui/react-slot" "1.1.2" + "@radix-ui/react-roving-focus@1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz#3b3abb1e03646937f28d9ab25e96343667ca6520" @@ -1272,6 +1318,13 @@ dependencies: "@radix-ui/react-compose-refs" "1.1.1" +"@radix-ui/react-slot@1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.2.tgz#daffff7b2bfe99ade63b5168407680b93c00e1c6" + integrity sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ== + dependencies: + "@radix-ui/react-compose-refs" "1.1.1" + "@radix-ui/react-tabs@^1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.2.tgz#a72da059593cba30fccb30a226d63af686b32854" @@ -5816,16 +5869,7 @@ strict-uri-encode@^2.0.0: resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ== -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0, string-width@^4.2.0: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -5857,14 +5901,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==