import { useState, useEffect } from "react";
import { Box, Typography, Link, FormControlLabel, Checkbox, useTheme } from "@mui/material";
import { CheckBoxOutlineBlank, CheckBoxOutlined } from "@mui/icons-material";
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
import ThumbDownAltIcon from '@mui/icons-material/ThumbDownAlt';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CheckIcon from '@mui/icons-material/Check';
import AssuredWorkloadIcon from '@mui/icons-material/AssuredWorkload';
import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import HandshakeIcon from '@mui/icons-material/Handshake';
import PendingIcon from '@mui/icons-material/Pending';
import ContentPasteIcon from '@mui/icons-material/ContentPaste';
import InfoTooltip from "../../components/Tooltip/InfoTooltip";
import Modal from "../../components/Modal/Modal";
import GhostStyledIcon from "../../components/Icon/GhostIcon";
import { PrimaryButton, TertiaryButton } from "../../components/Button";
import { formatCurrency } from "../../helpers";
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
export const BridgeModal = ({
providerDetail,
currentRecord,
activeTxIndex,
setActiveTxIndex,
authorities,
ghstSymbol,
hashedArguments,
chainExplorerUrl,
removeStoredRecord,
}) => {
const theme = useTheme();
const [copiedIndex, setCopiedIndex] = useState(null);
const sliceString = (string, first, second) => {
if (!string) return "";
return string.slice(0, first) + "..." + string.slice(second);
}
const copyToClipboard = (text, index) => {
navigator.clipboard.writeText(text).then(() => {
setCopiedIndex(index);
setTimeout(() => setCopiedIndex(null) , 800);
});
};
return (
TX Hash
{currentRecord ? sliceString(currentRecord.transactionHash, 10, -8) : ""}
}
open={activeTxIndex >= 0}
onClose={() => setActiveTxIndex(-1)}
minHeight={"100px"}
>
{!providerDetail &&
window.open('https://git.ghostchain.io/ghostchain/ghost-extension-wallet/releases', '_blank', 'noopener,noreferrer')}
>
Get GHOST Connect
}
{providerDetail &&
{currentRecord?.finalization > 0 && (
<>
0 && "scale(1.2)",
color: currentRecord?.finalization === 0 && theme.colors.primary[300]
}}
width="120px"
display="flex"
flexDirection="column"
justifyContent="start"
alignItems="center"
>
0 && 'rotateHourGlass 2s ease-in-out infinite',
'@keyframes rotateHourGlass': {
'0%': { transform: 'rotate(0deg)' },
'15%': { transform: 'rotate(0deg)' },
'85%': { transform: 'rotate(180deg)' },
'100%': { transform: 'rotate(180deg)' },
},
}}
viewBox="0 0 25 25"
component={HourglassBottomIcon}
/>
Finalization
{(currentRecord?.finalization ?? 0).toString()} blocks left
0 && "0.2"
}}
component={ArrowRightIcon}
/>
)}
0 && "0.2",
transform: currentRecord?.finalization === 0 && currentRecord?.clappedPercentage < 50n && "scale(1.2)",
color: currentRecord?.clappedPercentage > 50n && theme.colors.primary[300]
}}
width="120px"
display="flex"
flexDirection="column"
justifyContent="start"
alignItems="center"
>
{currentRecord?.clappedPercentage < 50n
?
:
}
Capital Backed
{(currentRecord?.clappedAmount ?? 0n) / 10n**18n} {ghstSymbol} ({currentRecord?.clappedPercentage ?? 0}%)
0 && "0.2",
transform: currentRecord?.finalization === 0 && currentRecord?.clapsPercentage < 50 && "scale(1.2)",
color: currentRecord?.clapsPercentage > 50 && theme.colors.primary[300]
}}
width="120px"
display="flex"
flexDirection="column"
justifyContent="start"
alignItems="center"
>
{currentRecord?.clapsPercentage < 50
? (
<>
)
: (
)
}
Slow Claps
{currentRecord?.numberOfClaps ?? 0} / {authorities?.length ?? 0}
{currentRecord?.finalization === 0 && (
<>
Applaused
Check Receiver
)}
}
GHOST Epoch:
{currentRecord?.sessionIndex}
Accepted Bridge Risk:
{currentRecord?.bridgeStability}%
Arguments Hash:
copyToClipboard(hashedArguments ? hashedArguments : "", 2)}
>
{hashedArguments ? sliceString(hashedArguments, 10, -8) : "0x"}
Receiver Address:
copyToClipboard(currentRecord ? currentRecord.receiverAddress : "", 0)}
>
{currentRecord ? sliceString(currentRecord.receiverAddress, 14, -5) : ""}
Bridged Amount:
{formatCurrency(
new DecimalBigNumber(
BigInt(currentRecord ? currentRecord.amount : "0"),
18
).toString(), 9, ghstSymbol)
}
Executed at:
{
new Date(currentRecord ? currentRecord.timestamp : 0).toLocaleString('en-US')
}
removeStoredRecord()}
>
Erase Record
This will permanently remove the bridge transaction record from the session storage, but it will not cancel the bridge transaction.
)
}
export const BridgeConfirmModal = ({
bridgeStability,
isOpen,
setClose,
handleButtonProceed
}) => {
const [isBridgingRiskChecked, setIsBridgingRiskChecked] = useState(false);
const [isBridgingRecipientChecked, setIsBridgingRecipientChecked] = useState(false);
const handleProceed = () => {
setIsBridgingRiskChecked(false);
setIsBridgingRecipientChecked(false);
handleButtonProceed();
}
return (
setIsBridgingRiskChecked(event.target.checked)}
icon={}
checkedIcon={}
/>
}
label={
{`I acknowledge bridging risk at ${bridgeStability}%.`}
Learn more.
}
/>
setIsBridgingRecipientChecked(event.target.checked)}
icon={}
checkedIcon={}
/>
}
label="I confirm that recipient address is a self-custodial wallet, not an exchange, third party service, or smart-contract."
sx={{ '& .MuiFormControlLabel-label': { textAlign: "justify" } }}
/>
Proceed Bridge
)
}