apply revision 14; applied partially

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.6.17",
+  "version": "0.6.18",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/Sidebar/NavContent.jsx

@@ -47,6 +47,7 @@ import { ECOSYSTEM } from "../../constants/ecosystem";
 import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
 import { sortBondsByDiscount, formatCurrency } from "../../helpers";
 import BondDiscount from "../../containers/Bond/components/BondDiscount";
+import Chip from "../Chip/Chip";
 
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShowerIcon from '@mui/icons-material/Shower';
@@ -143,6 +144,9 @@ const NavContent = ({ chainId, addressChainId }) => {
                                         to={`/${chainName}/bonds`}
                                         children={
                                             <AccordionDetails style={{ margin: "0 0 -20px", display: "flex", flexDirection: "column", gap: "10px" }}>
+                                                <Box width="180px" mb="10px" ml="auto">
+                                                    <Typography component="span" variant="body2">Bond Discounts</Typography>
+                                                </Box>
                                                 {sortBondsByDiscount(ghostBonds).map((bond, index) => {
                                                     return (
                                                         <Link
@@ -156,6 +160,7 @@ const NavContent = ({ chainId, addressChainId }) => {
                                                                     style={{
                                                                         width: "180px",
                                                                         justifyContent: "space-between",
+                                                                        alignItems: "center",
                                                                         display: "flex",
                                                                         gap: "10px"
                                                                     }}
@@ -163,7 +168,10 @@ const NavContent = ({ chainId, addressChainId }) => {
                                                                     variant="body2"
                                                                 >
                                                                     {bond.displayName}
-                                                                    <BondDiscount textOnly discount={bond.discount} />
+                                                                    {bond.soldOut
+                                                                        ? <Chip label="Sold Out" template="darkGray" />
+                                                                        : <BondDiscount discount={bond.discount} />
+                                                                    }
                                                                 </Typography>
                                                             </Box>
                                                         </Link>
@@ -172,7 +180,7 @@ const NavContent = ({ chainId, addressChainId }) => {
                                             </AccordionDetails>
                                         }
                                     />
-                                <NavItem icon={ForkRightIcon} label={`${bridgeNumbers} GHOST Staking`} to={`/${chainName}/bridge`} />
+                                <NavItem icon={ForkRightIcon} label={`${bridgeNumbers} Stake\u00B2`} to={`/${chainName}/bridge`} />
                                     {isGovernanceAvailable(chainId, addressChainId) && <NavItem icon={GavelIcon} label={`Governance`} to={`/${chainName}/governance`} />}
                                     <Box className="menu-divider">
                                         <Divider />

src/components/TopBar/Wallet/InitialWalletView.tsx

@@ -151,18 +151,6 @@ function InitialWalletView({ isWalletOpen, address, chainId, onClose }) {
                     <Divider />
                 </Box>
 
-                <Box
-                    sx={{ display: "flex", flexDirection: "column" }}
-                    style={{ gap: theme.spacing(1.5) }}
-                >
-                    <SecondaryButton
-                        fullWidth
-                        onClick={() => onBtnClick("uniswap", RESERVE_ADDRESSES[chainId], FTSO_ADDRESSES[chainId])}
-                    >
-                        <Typography>{`${tokens?.ftso?.symbol}-${tokens?.reserve?.symbol} on Uniswap`}</Typography>
-                    </SecondaryButton>
-                </Box>
-
                 <Box sx={{ width: "100%", marginTop: "auto", marginX: "auto", padding: theme.spacing(2, 0) }}>
                     <DisconnectButton onClose={onClose} />
                 </Box>

src/containers/Bridge/BridgeModal.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 
 import { Box, Typography, Link, FormControlLabel, Checkbox, useTheme } from "@mui/material";
 import { CheckBoxOutlineBlank, CheckBoxOutlined } from "@mui/icons-material";
@@ -19,10 +19,11 @@ 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 { PrimaryButton, TertiaryButton, SecondaryButton } from "../../components/Button";
 
 import { formatCurrency } from "../../helpers";
 import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
+import { GATEKEEPER_ADDRESSES } from "../../constants/addresses";
 
 export const BridgeModal = ({
     providerDetail,
@@ -50,6 +51,12 @@ export const BridgeModal = ({
         });
     };
 
+    const bridgeNumbers = () => {
+        const connectedNetworks = Object.keys(GATEKEEPER_ADDRESSES).length;
+        const number = 1 + connectedNetworks * 3;
+        return `(${number}, ${number})`;
+    };
+
     return (
         <Modal
             data-testid="transaction-details-modal"
@@ -89,15 +96,43 @@ export const BridgeModal = ({
             minHeight={"100px"}
         >
             <Box display="flex" gap="1.5rem" flexDirection="column" marginTop=".8rem">
-                {!providerDetail && <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
+                {!providerDetail && <Box
-                    <TertiaryButton
+                    width="90%"
+                    display="flex"
+                    flexDirection="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    backgroundColor="#1f4771"
+                    sx={{
+                        position: 'absolute',
+                        top: '130px',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        zIndex: 1,
+                    }}
+                >
+                    <SecondaryButton
                         fullWidth
-                        onClick={() => window.open('https://git.ghostchain.io/ghostchain/ghost-extension-wallet/releases', '_blank', 'noopener,noreferrer')}
+                        sx={{
+                            marginTop: "0 !important",
+                            marginBottom: "0 !important"
+                        }}
+                        onClick={() => window.open(
+                            'https://git.ghostchain.io/ghostchain/ghost-extension-wallet/releases',
+                            '_blank',
+                            'noopener,noreferrer'
+                        )}
                     >
                         Get GHOST Connect
-                    </TertiaryButton>
+                    </SecondaryButton>
                 </Box>}
-                {providerDetail && <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
+                <Box
+                    display="flex"
+                    flexDirection="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    sx={{ filter: providerDetail ? '' : 'blur(5px)' }}
+                >
                     {currentRecord?.finalization > 0 && (
                         <>
                             <Box
@@ -285,7 +320,7 @@ export const BridgeModal = ({
                             </Box>
                         </>
                     )}
-                </Box>}
+                </Box>
 
                 <Box display="flex" flexDirection="column" gap="5px" padding="0.6rem 0">
                     <Box display="flex" flexDirection="row" justifyContent="space-between">
@@ -357,13 +392,21 @@ export const BridgeModal = ({
                 </Box>
 
                 <Box display="flex" flexDirection="column" gap="5px">
-                    <PrimaryButton
+                    {currentRecord && currentRecord.finalization < 1 && currentRecord.applaused && <PrimaryButton
+                        fullWidth
+                        loading={false}
+                        onClick={() => removeStoredRecord()}
+                    >
+                        {`Get ${bridgeNumbers()} Stake\u00B2`}
+                    </PrimaryButton>}
+
+                    <TertiaryButton
                         fullWidth
                         loading={false}
                         onClick={() => removeStoredRecord()}
                     >
                         Erase Record
-                    </PrimaryButton>
+                    </TertiaryButton>
 
                     <Typography variant="body2" sx={{ fontStyle: "italic" }}>
                         This will permanently remove the bridge transaction record from the session storage, but it will not cancel the bridge transaction.
@@ -399,6 +442,12 @@ export const BridgeConfirmModal = ({
         >
             <Box gap="20px" display="flex" flexDirection="column" justifyContent="space-between" alignItems="center">
                 <Box width="100%" display="flex" flexDirection="column" alignItems="start">
+                    <Box>
+                        <Typography variant="subtitle1">
+                            You are bridging to GHOST Chain. We will guide you towards (10, 10) Stake<sup>2</sup> rewards right after that.
+                        </Typography>
+                    </Box>
+                    <hr style={{ margin: "10px 0", width: "100%" }} />
                     <FormControlLabel
                         control={
                             <Checkbox

src/containers/Stake/components/StakeInputArea.jsx

@@ -242,36 +242,6 @@ export const StakeInputArea = ({
                             />
                         </Box>
 
-                        {upperTokenModalOpen && (
-                            <TokenModal
-                                open={upperTokenModalOpen}
-                                handleSelect={data => handleTokenModalInput(data.token, data.isUpper)}
-                                handleClose={() => setUpperTokenModalOpen(false)}
-                                ftsoBalance={formatNumber(ftsoBalance, formatDecimals)}
-                                stnkBalance={formatNumber(stnkBalance, formatDecimals)}
-                                ghstBalance={formatNumber(ghstBalance, formatDecimals)}
-                                isUpper={true}
-                                ftsoSymbol={ftsoSymbol}
-                                stnkSymbol={stnkSymbol}
-                                ghstSymbol={ghstSymbol}
-                            />
-                        )}
-                        {bottomTokenModalOpen && (
-                            <TokenModal
-                                open={bottomTokenModalOpen}
-                                handleSelect={data => handleTokenModalInput(data.token, data.isUpper)}
-                                handleClose={() => setBottomTokenModalOpen(false)}
-                                ftsoBalance={formatNumber(ftsoBalance, formatDecimals)}
-                                stnkBalance={formatNumber(stnkBalance, formatDecimals)}
-                                ghstBalance={formatNumber(ghstBalance, formatDecimals)}
-                                tokenToExclude={upperToken}
-                                isUpper={false}
-                                ftsoSymbol={ftsoSymbol}
-                                stnkSymbol={stnkSymbol}
-                                ghstSymbol={ghstSymbol}
-                            />
-                        )}
-
                         <Box>
                             <PrimaryButton
                                 fullWidth