From 421f2cef27eff871827b513053ee8641c3974c42 Mon Sep 17 00:00:00 2001 From: Uncle Fatso Date: Tue, 7 Apr 2026 21:54:48 +0300 Subject: [PATCH] add flexibility during bond purchase Signed-off-by: Uncle Fatso --- package.json | 2 +- src/App.jsx | 2 +- src/containers/Bond/BondModal.jsx | 31 ++- .../Bond/components/BondConfirmModal.jsx | 22 +- .../Bond/components/BondInputArea.jsx | 16 +- src/containers/Bond/components/ClaimBonds.jsx | 257 +++++++++--------- src/hooks/bonds/index.js | 11 +- 7 files changed, 186 insertions(+), 155 deletions(-) diff --git a/package.json b/package.json index 71d548e..c609d68 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ghost-dao-interface", "private": true, - "version": "0.7.4", + "version": "0.7.5", "type": "module", "scripts": { "dev": "vite", diff --git a/src/App.jsx b/src/App.jsx index e1d3e9a..6663ab7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -215,7 +215,7 @@ function App() { chain.name.toLowerCase())} /> }> } /> } /> - } /> + } /> } /> } /> } /> diff --git a/src/containers/Bond/BondModal.jsx b/src/containers/Bond/BondModal.jsx index d5dd8f4..8a70c3f 100644 --- a/src/containers/Bond/BondModal.jsx +++ b/src/containers/Bond/BondModal.jsx @@ -18,24 +18,24 @@ import BondSettingsModal from "./components/BondSettingsModal"; import NotFound from "../NotFound/NotFound"; import { DecimalBigNumber } from "../../helpers/DecimalBigNumber"; -import { NetworkId } from "../../constants"; +import { isNetworkLegacy } from "../../constants"; import { formatCurrency } from "../../helpers"; import { useLocalStorage } from "../../hooks/localstorage"; import { useLiveBonds } from "../../hooks/bonds"; import { useFtsoPrice } from "../../hooks/prices"; -const BondModalContainer = ({ chainId, address, connect }) => { +const BondModalContainer = ({ chainId, address, config, connect }) => { const { id, network } = useParams(); const { liveBonds } = useLiveBonds(chainId, network); const bond = liveBonds.find(bond => bond.id === Number(id)); if (!bond) return ; - return ; + return ; }; -export const BondModal = ({ bond, chainId, address, connect }) => { +export const BondModal = ({ bond, chainId, address, config, connect }) => { const navigate = useNavigate(); const { network } = useParams(); const { pathname } = useLocation(); @@ -81,6 +81,23 @@ export const BondModal = ({ bond, chainId, address, connect }) => { return () => window.removeEventListener("keydown", handleKeyDown); }, [network, navigate, isSettingsOpen]); + const chainSymbol = useMemo(() => { + const chainSymbol = config?.getClient()?.chain?.nativeCurrency?.symbol; + if (chainSymbol) return chainSymbol; + return "WTF"; + }, [config]); + + const preparedQuoteToken = useMemo(() => { + if (isNetworkLegacy(chainId)) { + return { + address: bond.quoteToken.quoteTokenAddress, + icons: bond.quoteToken.icons, + name: bond.quoteToken.name, + } + } + return { address: undefined, icons: [chainSymbol], name: chainSymbol }; + }, [bond, chainSymbol, chainId]) + return ( { - + - {bond.quoteToken.name} + {preparedQuoteToken.name} @@ -144,10 +161,12 @@ export const BondModal = ({ bond, chainId, address, connect }) => { setSettingsOpen(true)} formatDecimals={formatDecimals} /> diff --git a/src/containers/Bond/components/BondConfirmModal.jsx b/src/containers/Bond/components/BondConfirmModal.jsx index 88e68aa..1643c06 100644 --- a/src/containers/Bond/components/BondConfirmModal.jsx +++ b/src/containers/Bond/components/BondConfirmModal.jsx @@ -37,6 +37,9 @@ const BondConfirmModal = ({ sender, handleSettingsOpen, isOpen, + isNative, + bondQuoteTokenName, + bondQuoteTokenIcons, handleConfirmClose }) => { const theme = useTheme(); @@ -53,15 +56,16 @@ const BondConfirmModal = ({ const maxPrice = bond.price.inBaseToken._value * bigIntSlippage / one; const referral = import.meta.env.VITE_APP_REFERRAL_ADDRESS; - await purchaseBond( + await purchaseBond({ chainId, - bond.id, - spendAmountValue._value.toBigInt(), + bondId: bond.id, + amount: spendAmountValue._value.toBigInt(), maxPrice, - recipientAddress, + user: recipientAddress, sender, - referral - ); + referral, + isNative + }); setIsPending(false); handleConfirmClose(); @@ -74,9 +78,9 @@ const BondConfirmModal = ({ open={isOpen} headerContent={ - + - {bond.quoteToken.name} + {bondQuoteTokenName} } @@ -91,7 +95,7 @@ const BondConfirmModal = ({ metric={spendAmount} /> - {bond.quoteToken.name} + {bondQuoteTokenName} diff --git a/src/containers/Bond/components/BondInputArea.jsx b/src/containers/Bond/components/BondInputArea.jsx index 75cf550..44cde8b 100644 --- a/src/containers/Bond/components/BondInputArea.jsx +++ b/src/containers/Bond/components/BondInputArea.jsx @@ -30,6 +30,7 @@ const BondInputArea = ({ formatDecimals, handleSettingsOpen, address, + preparedQuoteToken, connect }) => { const isSemiSmallScreen = useMediaQuery("(max-width: 480px)"); @@ -37,7 +38,7 @@ const BondInputArea = ({ const { pathname } = useLocation(); const { currentIndex } = useCurrentIndex(chainId); - const { balance, refetch } = useBalance(chainId, bond.quoteToken.quoteTokenAddress, address); + const { balance, refetch } = useBalance(chainId, preparedQuoteToken.address, address); const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO"); const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST"); @@ -100,15 +101,14 @@ const BondInputArea = ({ inputWidth={isVerySmallScreen ? "100px" : isSemiSmallScreen ? "180px" : "250px"} id="from" token={} - tokenName={bond.quoteToken.name} - info={formatCurrency(balance, formatDecimals, bond.quoteToken.name)} - endString="Max" + tokenName={preparedQuoteToken.name} + info={formatCurrency(balance, formatDecimals, preparedQuoteToken.name)} + endString={preparedQuoteToken.address && "Max"} endStringOnClick={setMax} value={amount} onChange={event => setAmount(event.currentTarget.value)} inputProps={{ "data-testid": "fromInput" }} - /> - } + />} LowerSwapCard={ @@ -221,6 +222,9 @@ const BondInputArea = ({ spendAmountValue={parsedAmount} spendAmount={formatNumber(parsedAmount, formatDecimals)} receiveAmount={formatNumber(amountInBaseToken, formatDecimals)} + bondQuoteTokenName={preparedQuoteToken.name} + bondQuoteTokenIcons={preparedQuoteToken.icons} + isNative={preparedQuoteToken.address === undefined} handleSettingsOpen={handleSettingsOpen} isOpen={confirmOpen} sender={address} diff --git a/src/containers/Bond/components/ClaimBonds.jsx b/src/containers/Bond/components/ClaimBonds.jsx index d290dd3..bf8b4cb 100644 --- a/src/containers/Bond/components/ClaimBonds.jsx +++ b/src/containers/Bond/components/ClaimBonds.jsx @@ -56,12 +56,12 @@ export const ClaimBonds = ({ chainId, address, secondsTo }) => { setIsWapmup(true); } else { setIsPending(true); - await redeem( + await redeem({ chainId, - address, - isPayoutGhst, + user: address, + isGhst: isPayoutGhst, indexes - ); + }); await notesRefetch(); setIsPending(false); } @@ -99,136 +99,137 @@ export const ClaimBonds = ({ chainId, address, secondsTo }) => { ? formatCurrency(totalClaimableBalance, 5, ghstSymbol) : formatCurrency(currentIndex.mul(totalClaimableBalance), 5, stnkSymbol) } -   - ({formatCurrency(totalClaimableBalance * ghstPrice, 2)}) - - - - onSubmit(notes.filter((note) => secondsTo > note.matured).map(note => note.id))} - > - Claim All - + + + {formatCurrency(totalClaimableBalance * ghstPrice, 2)} + + + onSubmit(notes.filter((note) => secondsTo > note.matured).map(note => note.id))} + > + Claim All + + - - {isSmallScreen ? ( - <> - {notes.map((note, index) => ( - - - - - {note.quoteToken.name} - - - - - Duration - - - - - - - Remaining - - - - - - - Payout - - - {isPayoutGhst - ? formatCurrency(note.payout, 5, ghstSymbol) - : formatCurrency(currentIndex.mul(note.payout), 5, stnkSymbol) - } - - {formatCurrency(note.payout * ghstPrice, 2)} - - - - - onSubmit([note.id])} - > - Claim - + + {isSmallScreen ? ( + <> + {notes.map((note, index) => ( + + + + + {note.quoteToken.name} - ))} - - ) : ( - - - - - Bond - Duration - Remaining - Payout + + + Duration + + + + + + + Remaining + + + + + + + Payout + + + {isPayoutGhst + ? formatCurrency(note.payout, 5, ghstSymbol) + : formatCurrency(currentIndex.mul(note.payout), 5, stnkSymbol) + } + + {formatCurrency(note.payout * ghstPrice, 2)} + + + + + onSubmit([note.id])} + > + Claim + + + + ))} + + ) : ( + +
+ + + Bond + Duration + Remaining + Payout + + + + {notes.map((note, index) => ( + + + + + + {note.quoteToken.name} + + + + + + + + + + + + + + + + + + + + {isPayoutGhst + ? formatCurrency(note.payout, 5, ghstSymbol) + : formatCurrency(currentIndex.mul(note.payout), 5, stnkSymbol) + } + + {formatCurrency(note.payout * ghstPrice, 2)} + + + + + onSubmit([note.id])} + > + Claim + + - - - {notes.map((note, index) => ( - - - - - - {note.quoteToken.name} - - - - - - - - - - - - - - - - - - - - {isPayoutGhst - ? formatCurrency(note.payout, 5, ghstSymbol) - : formatCurrency(currentIndex.mul(note.payout), 5, stnkSymbol) - } - - {formatCurrency(note.payout * ghstPrice, 2)} - - - - - onSubmit([note.id])} - > - Claim - - - - ))} - -
- - )} - + ))} + + + + )} + ); diff --git a/src/hooks/bonds/index.js b/src/hooks/bonds/index.js index 50c5c64..94aa089 100644 --- a/src/hooks/bonds/index.js +++ b/src/hooks/bonds/index.js @@ -266,7 +266,7 @@ export const useNotes = (chainId, address) => { return { notes, refetch }; } -export const purchaseBond = async (chainId, bondId, amount, maxPrice, user, sender, referral) => { +export const purchaseBond = async ({ chainId, bondId, amount, maxPrice, user, sender, referral, isNative }) => { const args = [ bondId, amount, @@ -284,11 +284,12 @@ export const purchaseBond = async (chainId, bondId, amount, maxPrice, user, send "deposit", args, sender, - messages + messages, + isNative ? amount : undefined ); } -export const redeem = async (chainId, user, isGhst, indexes) => { +export const redeem = async ({ chainId, user, isGhst, indexes }) => { const args = [ user, isGhst, @@ -313,7 +314,8 @@ const executeOnChainTransaction = async ( functionName, args, account, - messages + messages, + value ) => { try { const { request } = await simulateContract(config, { @@ -324,6 +326,7 @@ const executeOnChainTransaction = async ( account, chainId, type: isNetworkLegacyType(chainId) ? 'legacy' : 'eip1559', + value: value, }); const txHash = await writeContract(config, request);