Skip to content

Commit

Permalink
Sync from main to dev (#104)
Browse files Browse the repository at this point in the history
  • Loading branch information
jrwbabylonlab authored Aug 22, 2024
2 parents 3cc535c + 3aa7d27 commit 8d7c751
Show file tree
Hide file tree
Showing 20 changed files with 1,750 additions and 657 deletions.
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "simple-staking",
"version": "0.2.36",
"version": "0.2.41",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down
2 changes: 1 addition & 1 deletion src/app/common/constants.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export const OVERFLOW_TVL_WARNING_THRESHOLD = 0.8;
export const OVERFLOW_TVL_WARNING_THRESHOLD = 0.2;
export const OVERFLOW_HEIGHT_WARNING_THRESHOLD = 3;
export const UTXO_KEY = "UTXOs";
3 changes: 2 additions & 1 deletion src/app/components/FAQ/FAQ.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const FAQ: React.FC<FAQProps> = () => {
const [paramWithCtx, setParamWithCtx] = useState<
ParamsWithContext | undefined
>();
const { coinName } = getNetworkConfig();
const { coinName, networkName } = getNetworkConfig();
const btcHeight = useBtcHeight();
const globalParams = useGlobalParams();

Expand All @@ -41,6 +41,7 @@ export const FAQ: React.FC<FAQProps> = () => {
<div className="flex flex-col gap-4">
{questions(
coinName,
networkName,
paramWithCtx?.currentVersion?.confirmationDepth,
).map((question) => (
<Section
Expand Down
29 changes: 18 additions & 11 deletions src/app/components/FAQ/data/questions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export interface Question {

export const questions = (
coinName: string,
networkName: string,
confirmationDepth?: number,
): Question[] => {
const questionList = [
Expand All @@ -15,19 +16,19 @@ export const questions = (
content: `<p>Babylon is a suite of security-sharing protocols that bring Bitcoin\’s unparalleled security to the decentralized world. The latest protocol, Bitcoin Staking, enables Bitcoin holders to stake their Bitcoin to provide crypto-economic security to PoS (proof-of-stake) systems in a trustless and self-custodial way.</p>`,
},
{
title: "How does Bitcoin Staking Work?",
title: "How does Bitcoin Staking work?",
content: `<p>${coinName} holders lock their ${coinName} using the trustless and self-custodial Bitcoin Staking script for a predetermined time (timelock) in exchange for voting power in an underlying PoS protocol. In return, Bitcoin holders will earn PoS staking rewards.</p><br />
<p>Finality providers perform the voting. A ${coinName} staker can create a finality provider by itself and self-delegate or delegate its voting power to a third-party finality provider.</p><br />
<p>If a finality provider attacks the PoS system, the ${coinName}s behind the voting powers delegated to it will be subject to protocol slashing. This deters ${coinName} stakers and finality providers from attacking the PoS system.</p>
`,
},
{
title: "What does this staking dApp allow me to do?",
content: `<p>The staking dApp allows ${coinName} holders to stake their ${coinName} and delegate their voting power to a finality provider they select. Stakers can view their past staking history and on-demand unlock their stake for early withdrawal.</p>`,
content: `<p>The staking dApp is an interface to the Babylon Bitcoin Staking protocol. The Babylon Bitcoin Staking protocol allows ${coinName} holders to stake their ${coinName} and delegate their voting power to a finality provider they select. Stakers can view their past staking history and send a request to unlock their stake for early withdrawal.</p>`,
},
{
title: `Does my ${coinName} leave my wallet once staked?`,
content: `<p>Yes, it leaves your wallet. Your wallet will not show it as your available balance because it is locked. However, it is not sent to any third party. It is locked in a self-custodial contract you control. This means that any subsequent movement of the ${coinName} will need your approval, and you are the only one who can unbond the stake and withdraw.</p>`,
content: `<p>Technically, your ${coinName} has not left your custody. However, your wallet will not show the ${coinName} you staked in your available balance once that ${coinName} is locked. Current wallet implementations do not yet know how to display staked ${coinName} that is still in your custody. When staking, you do not send the ${coinName} to a third party. It is locked in a self-custodial Bitcoin Staking script that you control. This means that any subsequent movement of the ${coinName} will need your approval. You are the only one who can unbond the stake and withdraw.</p>`,
},
{
title: `Is my ${coinName} safe? Could I get slashed?`,
Expand All @@ -38,24 +39,25 @@ export const questions = (
<ol>
<li>
1. Code security<br />
There is an inherent risk that the code developed for Bitcoin staking has vulnerabilities or bugs. The Babylon team has open-sourced the code, and it is under security audits.
There is an inherent risk that the code developed for Bitcoin Staking has vulnerabilities or bugs. The Babylon team has open-sourced the code, and it is under security audits.
</li>
<br />
<li>
2. System reliability<br />
The Bitcoin staking system may be slow, unavailable, or compromised, which may cause the staking service to be unavailable or compromised, potentially leading to ${coinName} not being unbondable or not withdrawable.
The Bitcoin Staking system may be slow, unavailable, or compromised, which may cause the staking service to be unavailable or compromised, potentially leading to ${coinName} not being unbondable or not withdrawable.
</li>
</ol>
<p>The Babylon Labs team has open-sourced the code which has been audited by <a href="https://docs.babylonlabs.io/assets/files/coinspect-phase1-audit.pdf" target="_blank" rel="noopener noreferrer" class="text-primary"><u>Coinspect</u></a>, <a href="https://docs.babylonlabs.io/assets/files/zellic-phase1-audit.pdf" target="_blank" rel="noopener noreferrer" class="text-primary"><u>Zellic</u></a>, and through a <a href="https://docs.babylonlabs.io/assets/files/cantina-phase1-competition.pdf" target="_blank" rel="noopener noreferrer" class="text-primary"><u>public security campaign facilitated by Cantina</u></a>.</p>
`,
},
{
title: "How long will it take for my stake to become active?",
content: `<p>A stake’s status demonstrates the current stage of the staking process. All stake starts in a Pending state which denotes that the ${coinName} Staking transaction does not yet have sufficient ${coinName} block confirmations. As soon as it receives ${confirmationDepth || 10} ${coinName} block confirmations, the status transitions to <i>Overflow</i> or <i>Active</i>. </p><br />
content: `<p>A stake’s status demonstrates the current stage of the staking process. All stake starts in a <i>Pending</i> state, which denotes that the ${coinName} Staking transaction does not yet have sufficient ${coinName} block confirmations. As soon as it receives ${confirmationDepth || 10} ${coinName} block confirmations, the status transitions to <i>Overflow</i> or <i>Active</i>. </p><br />
<p>In an amount-based cap, A stake is <i>Overflow</i> if the system has already accumulated the maximum amount of ${coinName} it can accept.</p><br />
<p>In a time-based cap, where there is a starting block height and ending block height, a stake is <i>overflow</i> if it is included in a ${coinName} block that is newer than the ending block.</p><br />
<p>In an amount-based cap, a stake is <i>Overflow</i> if the system has already accumulated the maximum amount of ${coinName} it can accept.</p><br />
<p>In a time-based cap, where there is a starting block height and an ending block height, a stake is <i>Overflow</i> if it is included in a ${coinName} block that is newer than the ending block.</p><br />
<p>Otherwise, the stake is <i>Active</i>.</p><br />
<p><i>Overflow</i> stake should be on-demand unbonded and withdrawn.</p>`,
<p>You should unbond and withdraw a stake that is <i>Overflow</i>.</p>`,
},
{
title: "Do I get rewards for staking?",
Expand All @@ -68,7 +70,8 @@ export const questions = (
},
{
title: "Will I pay any fees for staking?",
content: `<p>Yes, there are three transaction fees associated with staking, all charged by the Bitcoin network:</p><br />
content: `<p>You will need to pay ${networkName} network fees to have transaction messages delivered and results recorded on the Bitcoin blockchain. Examples include staking, unbonding, and withdrawal transactions. This interface may provide estimates of network fees. However, the actual network fee may be higher. </br>
<b>If you lock your ${coinName} in a staking transaction without the necessary amount of ${coinName} in the staked amount to pay for the unbonding and withdrawal transactions, you won’t be able to unbond or withdraw (although that also means the staked amount is less than those transaction fees). The stake will remain locked unless the ${networkName} network fees come down sufficiently.</b> Here are more details about the network fees:</p><br />
<ol>
<li>
1. <b>Staking Transaction Fee (Fs)</b>: This fee is for the staking transaction. To stake amount S, you need at least S + Fs in your wallet. It is calculated in real-time based on current network conditions.
Expand All @@ -85,7 +88,11 @@ export const questions = (
{
title:
"Is it ok to use a wallet holding fungible tokens built on Bitcoin (e.g. BRC-20/ARC-20/Runes)?",
content: `<p>No, this should be avoided. The fungible tokens built on Bitcoin ecosystem is still in its infancy and in an experimental phase. Software built for the detection of such tokens to avoid their misspending comes without a warranty and guarantees, making it risky to connect wallets owning such tokens to dApps.</p>`,
content: `<p>No, this should be avoided. Please do not connect or use a Bitcoin wallet holding BRC-20, ARC-20, Runes, or other NFTs or Bitcoin-native assets (other than ${coinName}). They are still in their infancy and in an experimental phase. Software built for the detection of such tokens to avoid their misspending may not work, and you may lose all such tokens.</p>`,
},
{
title: "Are hardware wallets supported?",
content: `<p>Keystone via QR code is the only hardware wallet supporting Bitcoin Staking. Using any other hardware wallet through any means (such as connection to a software/extension/mobile wallet) can lead to permanent inability to withdraw the stake.</p>`,
},
];
if (shouldDisplayTestingMsg()) {
Expand Down
3 changes: 1 addition & 2 deletions src/app/components/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import { shouldDisplayTestingMsg } from "@/config";

import { ConnectSmall } from "../Connect/ConnectSmall";
import { ConnectedSmall } from "../Connect/ConnectedSmall";
import { Logo } from "../Logo/Logo";
import { TestingInfo } from "../TestingInfo/TestingInfo";
import { ThemeToggle } from "../ThemeToggle/ThemeToggle";

import { Logo } from "./Logo";

interface HeaderProps {
onConnect: () => void;
address: string;
Expand Down
36 changes: 36 additions & 0 deletions src/app/components/Logo/Icon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { useTheme } from "next-themes";
import Image from "next/image";
import { useEffect, useState } from "react";

import darkIcon from "@/app/assets/icon-black.svg";
import lightIcon from "@/app/assets/icon-white.svg";

interface IconProps {}

export const Icon: React.FC<IconProps> = () => {
const [mounted, setMounted] = useState(false);
const { resolvedTheme } = useTheme();
const lightSelected = resolvedTheme === "light";

// useEffect only runs on the client, so now we can safely show the UI
useEffect(() => {
setMounted(true);
}, []);

// uses placeholder of babylon logo with primary color
// since before theme is resolved, we don't know which logo to show
if (!mounted) {
return <span className="h-[24px] w-[24px]" />;
}

return (
<span className="inline-block mx-2">
<Image
src={lightSelected ? darkIcon : lightIcon}
alt="Babylon"
width={24}
height={24}
/>
</span>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const Logo: React.FC<LogoProps> = () => {
setMounted(true);
}, []);

// uses skeleton of babylon logo with primary color
// uses placeholder of babylon logo with primary color
// since before theme is resolved, we don't know which logo to show
if (!mounted) {
return <div className="h-[40px] w-[159px]" />;
Expand Down
36 changes: 32 additions & 4 deletions src/app/components/Modals/ConnectModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { IoMdClose } from "react-icons/io";
import { PiWalletBold } from "react-icons/pi";
import { Tooltip } from "react-tooltip";

import { usePrivacy } from "@/app/context/Privacy/PrivacyContext";
import { useTerms } from "@/app/context/Terms/TermsContext";
import { getNetworkConfig } from "@/config/network.config";
import { BROWSER_INJECTED_WALLET_NAME, walletList } from "@/utils/wallet/list";
Expand All @@ -28,6 +29,7 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
}) => {
const [termsAccepted, setTermsAccepted] = useState(false);
const [noInscription, setNoInscription] = useState(false);
const [noHWWallet, setNoHWWallet] = useState(false);
const [selectedWallet, setSelectedWallet] = useState<string>("");
const [mounted, setMounted] = useState(false);

Expand All @@ -41,6 +43,7 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
const BROWSER = "btcwallet";

const { openTerms } = useTerms();
const { openPrivacy } = usePrivacy();

useEffect(() => {
const fetchWalletProviderDetails = async () => {
Expand Down Expand Up @@ -142,7 +145,7 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
<IoMdClose size={24} />
</button>
</div>
<div className="flex flex-col justify-center gap-4">
<div className="flex flex-col justify-center gap-2">
<div className="form-control">
<label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-4">
<input
Expand All @@ -155,10 +158,17 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
I certify that I have read and accept the updated{" "}
<button
onClick={openTerms}
className="transition-colors hover:text-primary cursor-pointer btn btn-link no-underline text-base-content px-0 h-auto min-h-0"
className="cursor-pointer btn btn-link px-0 h-auto min-h-0"
>
Terms of Use
</button>
{" and "}
<button
onClick={openPrivacy}
className="cursor-pointer btn btn-link px-0 h-auto min-h-0"
>
Privacy Policy
</button>
.
</span>
</label>
Expand All @@ -177,9 +187,26 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
</span>
</label>
</div>
<div className="form-control">
<label className="label cursor-pointer justify-start gap-2 rounded-xl bg-base-100 p-4">
<input
type="checkbox"
className="checkbox-primary checkbox"
onChange={(e) => setNoHWWallet(e.target.checked)}
checked={noHWWallet}
/>
<span className="label-text md:max-w-[34rem]">
I acknowledge that Keystone via QR code is the only hardware
wallet supporting Bitcoin Staking. Using any other hardware
wallets through any means (such as connection to software /
extension / mobile wallet) can lead to permanent inability to
withdraw the stake.
</span>
</label>
</div>
<div className="my-4 flex flex-col gap-4">
<h3 className="text-center font-semibold">Choose wallet</h3>
<div className="grid max-h-[20rem] grid-cols-1 gap-4 overflow-y-auto">
<div className="grid max-h-[15rem] md:max-h-[20rem] grid-cols-1 gap-4 overflow-y-auto">
{walletList.map(
({
provider,
Expand Down Expand Up @@ -243,7 +270,8 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
connectDisabled ||
!termsAccepted ||
!selectedWallet ||
!noInscription
!noInscription ||
!noHWWallet
}
>
<PiWalletBold size={20} />
Expand Down
30 changes: 30 additions & 0 deletions src/app/components/Modals/Privacy/PrivacyModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { IoMdClose } from "react-icons/io";

import { GeneralModal } from "../GeneralModal";

import { Privacy } from "./data/privacy";

interface PrivacyModalProps {
open: boolean;
onClose: (value: boolean) => void;
}

export const PrivacyModal: React.FC<PrivacyModalProps> = ({
open,
onClose,
}) => {
return (
<GeneralModal open={open} onClose={onClose}>
<div className="mb-4 flex items-center justify-between">
<h4 className="font-bold">Privacy Policy</h4>
<button
className="btn btn-circle btn-ghost btn-sm"
onClick={() => onClose(false)}
>
<IoMdClose size={24} />
</button>
</div>
<Privacy />
</GeneralModal>
);
};
Loading

0 comments on commit 8d7c751

Please sign in to comment.