Skip to content

Commit

Permalink
split swap fee and pause management choices
Browse files Browse the repository at this point in the history
  • Loading branch information
@MattPereira
MattPereira committed Dec 11, 2024
1 parent 13cdcb8 commit e9daa1a
Show file tree
Hide file tree
Showing 11 changed files with 177 additions and 109 deletions.
69 changes: 34 additions & 35 deletions packages/nextjs/app/v3/_components/ChooseInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect } from "react";
import { PoolType } from "@balancer/sdk";
import { ArrowTopRightOnSquareIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
import { Alert, TextField } from "~~/components/common";
import { useBoostableWhitelist, useCheckIfV3PoolExists, usePoolCreationStore, useUserDataStore } from "~~/hooks/v3";
import { MAX_POOL_NAME_LENGTH } from "~~/utils/constants";
Expand All @@ -11,7 +11,7 @@ import { MAX_POOL_NAME_LENGTH } from "~~/utils/constants";
*/
export const ChooseInfo = () => {
const { name, symbol, tokenConfigs, poolType, updatePool } = usePoolCreationStore();
const { updateUserData, hasEditedPoolInformation } = useUserDataStore();
const { updateUserData, hasEditedPoolName, hasEditedPoolSymbol } = useUserDataStore();
const { data: boostableWhitelist } = useBoostableWhitelist();

const { existingPools } = useCheckIfV3PoolExists(
Expand All @@ -33,68 +33,67 @@ export const ChooseInfo = () => {
})
.join("-");

if (!hasEditedPoolInformation) {
updatePool({ name: symbol.split("-").join(" ") });
}

updatePool({
symbol,
});
if (!hasEditedPoolName) updatePool({ name: symbol.split("-").join(" ") });
if (!hasEditedPoolSymbol) updatePool({ symbol });
}
}, [tokenConfigs, poolType, updatePool, boostableWhitelist, hasEditedPoolInformation]);
}, [tokenConfigs, poolType, updatePool, boostableWhitelist, hasEditedPoolName, hasEditedPoolSymbol]);

return (
<div>
<div className="text-xl mb-5">Choose pool information:</div>
<div className="mb-5 flex flex-col gap-4">
<div className="bg-base-100 p-5 rounded-xl">
<div className="bg-base-100 p-3 rounded-xl">
<TextField
label="Pool name"
placeholder="Enter pool name"
value={name}
maxLength={MAX_POOL_NAME_LENGTH}
onChange={e => {
updatePool({ name: e.target.value });
updateUserData({ hasEditedPoolInformation: true });
updateUserData({ hasEditedPoolName: true });
}}
/>
</div>

<div className="bg-base-100 p-5 rounded-xl">
<div className="bg-base-100 p-3 rounded-xl">
<TextField
label="Pool symbol"
placeholder="Enter pool symbol"
value={symbol}
onChange={e => {
updatePool({ symbol: e.target.value.trim() });
updateUserData({ hasEditedPoolInformation: true });
updateUserData({ hasEditedPoolSymbol: true });
}}
/>
</div>
</div>
{existingPools && existingPools.length > 0 && (
<Alert showIcon={false} type="warning">
<div className="mb-3 flex items-center gap-2">
<ExclamationTriangleIcon className="w-5 h-5" /> Warning: The following pools have already been created with
a similar configuration
<div>
<Alert type="warning">Warning: Pools with a similar configuration have already been created</Alert>
<div className="overflow-x-auto mt-5">
<table className="table w-full text-lg border border-neutral-500">
<tbody>
{existingPools.map(pool => (
<tr key={pool.address}>
<td className="border border-neutral-500 px-2 py-1">{pool.name}</td>
<td className="border border-neutral-500 px-2 py-1">{pool.symbol}</td>
<td className="text-right border border-neutral-500 px-2 py-1">
<a
target="_blank"
rel="noopener noreferrer"
className="hover:underline text-info flex items-center gap-2 justify-end"
href={`https://test.balancer.fi/pools/${pool.chain.toLowerCase()}/v3/${pool.address}`}
>
See Details
<ArrowTopRightOnSquareIcon className="w-4 h-4" />
</a>
</td>
</tr>
))}
</tbody>
</table>
</div>
<ol className="">
{/* TODO: Replace with production link instead of test.balancer.fi */}
{existingPools.map(pool => (
<li key={pool.address}>
<a
target="_blank"
rel="noopener noreferrer"
className="hover:underline text-blue-500 flex justify-end items-center gap-2"
href={`https://test.balancer.fi/pools/${pool.chain.toLowerCase()}/v3/${pool.address}`}
>
{pool.symbol}
<ArrowTopRightOnSquareIcon className="w-4 h-4 mt-0.5" />
</a>
</li>
))}
</ol>
</Alert>
</div>
)}
</div>
);
Expand Down
111 changes: 71 additions & 40 deletions packages/nextjs/app/v3/_components/ChooseParameters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ export const ChooseParameters = () => {
poolHooksContract,
enableDonation,
disableUnbalancedLiquidity,
isDelegatingManagement,
isDelegatingPauseManagement,
isDelegatingSwapFeeManagement,
updatePool,
} = usePoolCreationStore();

Expand Down Expand Up @@ -142,62 +143,92 @@ export const ChooseParameters = () => {
target="_blank"
rel="noreferrer"
>
Pool management
Swap fee manager
<InformationCircleIcon className="w-5 h-5 mt-0.5" />
</a>
</label>
<RadioInput
name="pool-management"
label="Delegate swap fee and pause management to the Balancer DAO"
checked={isDelegatingManagement}
name="swap-fee-manager"
label="Delegate swap fee management to the Balancer DAO"
checked={isDelegatingSwapFeeManagement}
onChange={() => {
updatePool({ isDelegatingManagement: true, swapFeeManager: "", pauseManager: "" });
updatePool({ isDelegatingSwapFeeManagement: true, swapFeeManager: "" });
}}
/>
<RadioInput
name="pool-management"
label="I want my wallet to control swap fee and pause management"
checked={
!isDelegatingManagement &&
swapFeeManager === connectedWalletAddress &&
pauseManager === connectedWalletAddress
}
name="swap-fee-manager"
label="I want my wallet to be the swap fee manager"
checked={!isDelegatingSwapFeeManagement && swapFeeManager === connectedWalletAddress}
onChange={() =>
updatePool({
isDelegatingManagement: false,
isDelegatingSwapFeeManagement: false,
swapFeeManager: connectedWalletAddress,
pauseManager: connectedWalletAddress,
})
}
/>
<RadioInput
name="pool-management"
label="Choose a different swap fee and pause manager"
checked={
!isDelegatingManagement &&
(swapFeeManager !== connectedWalletAddress || pauseManager !== connectedWalletAddress)
name="swap-fee-manager"
label="Choose a different swap fee manager"
checked={!isDelegatingSwapFeeManagement && swapFeeManager !== connectedWalletAddress}
onChange={() => updatePool({ isDelegatingSwapFeeManagement: false, swapFeeManager: "" })}
/>
{!isDelegatingSwapFeeManagement && swapFeeManager !== connectedWalletAddress && (
<TextField
mustBeAddress={true}
placeholder="Enter swap fee manager address"
value={swapFeeManager}
onChange={e => updatePool({ swapFeeManager: e.target.value.trim() })}
/>
)}
</div>

<div className="bg-base-100 p-5 rounded-xl">
<label className="text-lg font-bold inline-flex">
<a
className="flex items-center gap-2 link no-underline hover:underline"
href="https://docs-v3.balancer.fi/concepts/core-concepts/pool-role-accounts.html"
target="_blank"
rel="noreferrer"
>
Pause manager
<InformationCircleIcon className="w-5 h-5 mt-0.5" />
</a>
</label>
<RadioInput
name="pause-manager"
label="Delegate pause management to the Balancer DAO"
checked={isDelegatingPauseManagement}
onChange={() => {
updatePool({ isDelegatingPauseManagement: true, pauseManager: "" });
}}
/>
<RadioInput
name="pause-manager"
label="I want my wallet to be the pause manager"
checked={!isDelegatingPauseManagement && pauseManager === connectedWalletAddress}
onChange={() =>
updatePool({
isDelegatingPauseManagement: false,
pauseManager: connectedWalletAddress,
})
}
onChange={() => updatePool({ isDelegatingManagement: false, swapFeeManager: "", pauseManager: "" })}
/>
{!isDelegatingManagement &&
(swapFeeManager !== connectedWalletAddress || pauseManager !== connectedWalletAddress) && (
<div className="flex flex-col gap-3 mt-3">
<TextField
mustBeAddress={true}
label="Swap fee manager"
placeholder="Enter address"
value={swapFeeManager}
onChange={e => updatePool({ swapFeeManager: e.target.value.trim() })}
/>
<TextField
mustBeAddress={true}
label="Pause manager"
placeholder="Enter address"
value={pauseManager}
onChange={e => updatePool({ pauseManager: e.target.value.trim() })}
/>
</div>
)}
<RadioInput
name="pause-manager"
label="Choose a different pause manager"
checked={!isDelegatingPauseManagement && pauseManager !== connectedWalletAddress}
onChange={() => updatePool({ isDelegatingPauseManagement: false, pauseManager: "" })}
/>
{!isDelegatingPauseManagement && pauseManager !== connectedWalletAddress && (
<div className="flex flex-col gap-3 mt-3">
<TextField
mustBeAddress={true}
placeholder="Enter pause manager address"
value={pauseManager}
onChange={e => updatePool({ pauseManager: e.target.value.trim() })}
/>
</div>
)}
</div>

<div className="bg-base-100 p-5 rounded-xl">
Expand Down
33 changes: 24 additions & 9 deletions packages/nextjs/app/v3/_components/ChooseToken.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,11 @@ export function ChooseToken({ index }: { index: number }) {
useBoostedVariant: false,
});

if (boostableWhitelist?.[tokenInfo.address]) {
// If user switches token, this will force trigger auto-generation of pool name and symbol, at which point user can decide to modify
updateUserData({ hasEditedPoolName: false, hasEditedPoolSymbol: false });

const hasBoostedVariant = boostableWhitelist?.[tokenInfo.address];
if (hasBoostedVariant) {
setShowBoostOpportunityModal(true);
}
};
Expand Down Expand Up @@ -333,12 +337,15 @@ const BoostOpportunityModal = ({

return (
<div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
<div className="w-[625px] min-h-[333px] bg-base-300 rounded-lg p-7 flex flex-col gap-5 items-center">
<div className="w-[625px] min-h-[333px] bg-base-200 rounded-lg p-7 flex flex-col gap-5 items-center">
<h3 className="font-bold text-3xl mb-5">{boostedVariant.name}</h3>
<div className="text-xl mb-7 px-5">
Boosted tokens provide your liquidity pool with a layer of sustainable yield. If you select{" "}
<b>{boostedVariant.symbol}</b>, all <b>{standardVariant.symbol}</b> in this pool will be supplied to
Aave&apos;s lending market to earn additional yield.
<div className="mt-5">
Note that if you choose the boosted variant, the necessary rate provider address will be auto-filled for you
</div>
</div>
<div className="grid grid-cols-2 gap-4 w-full">
<button className={`btn ${bgBeigeGradient} rounded-xl text-lg`} onClick={() => handleBoost(false)}>
Expand Down Expand Up @@ -373,22 +380,22 @@ const RateProviderModal = ({

return (
<div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
<div className="w-[650px] min-h-[333px] bg-base-300 rounded-lg p-7 flex flex-col gap-5 justify-around">
<div className="w-[650px] min-h-[333px] bg-base-200 rounded-lg p-7 flex flex-col gap-5 justify-around">
<h3 className="font-bold text-3xl text-center">Rate Provider</h3>

<div className="flex flex-col gap-5">
<div className="text-xl">
The Balancer API offers the following option for <span className="font-bold">{tokenInfo.symbol}</span>
Consider using the following rate provider for <b>{tokenInfo.symbol}</b>
</div>
{rateProviderData ? (
<div className="overflow-x-auto">
<table className="w-full text-xl table border border-base-100">
<table className="w-full text-xl table border border-neutral-500">
<tbody>
<tr className="border-b border-base-100">
<tr className="border-b border-neutral-500">
<td className="py-2 w-32 font-bold">Name</td>
<td className="py-2 text-left">{rateProviderData.name}</td>
</tr>
<tr className="border-b border-base-200">
<tr className="border-b border-neutral-500">
<td className="py-2 w-32 font-bold">Address</td>
<td className="py-2 text-left">
<a
Expand All @@ -402,14 +409,22 @@ const RateProviderModal = ({
</a>
</td>
</tr>
<tr className="border-b border-base-200">
<tr className="border-b border-neutral-500">
<td className="py-2 font-bold">Reviewed</td>
<td className="py-2 text-left">{rateProviderData.reviewed ? "Yes" : "No"}</td>
</tr>
<tr className="border-b border-base-200">
<tr className="border-b border-neutral-500">
<td className="py-2 font-bold ">Summary</td>
<td className="py-2 text-left">{rateProviderData.summary}</td>
</tr>
{/* <tr className="border-b border-neutral-500">
<td className="py-2 font-bold ">Warnings</td>
<td className="py-2 text-left">
{rateProviderData.warnings.length > 0
? rateProviderData.warnings.map(message => message).join(", ")
: "none"}
</td>
</tr> */}
</tbody>
</table>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/nextjs/app/v3/_components/PoolConfiguration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export function PoolConfiguration() {
{isPoolCreationInputValid && selectedTab === "Information" ? (
<TransactionButton
onClick={() => setIsPoolCreationModalOpen(true)}
title="Preview Pool"
title="Create Pool"
isDisabled={false}
isPending={false}
/>
Expand Down
Loading

0 comments on commit e9daa1a

Please sign in to comment.