Skip to content

Commit

Permalink
add support for arb and base
Browse files Browse the repository at this point in the history
  • Loading branch information
@MattPereira
MattPereira committed Jan 21, 2025
1 parent d84be27 commit 1b591d1
Show file tree
Hide file tree
Showing 15 changed files with 218 additions and 227 deletions.
87 changes: 87 additions & 0 deletions packages/nextjs/app/v3/_components/UserExperienceAlerts.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import { useState } from "react";
import Link from "next/link";
import { useWalletClient } from "wagmi";
import { ArrowUpRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { Alert } from "~~/components/common";
import { usePoolCreationStore } from "~~/hooks/v3";

export function UserExperienceAlerts() {
const [isInfoAlertVisible, setIsInfoAlertVisible] = useState(true);
const { chain } = usePoolCreationStore();

const { data: walletClient } = useWalletClient();

const isWalletConnected = !!walletClient;

return !isWalletConnected ? (
<div className="flex justify-center w-full">
<div>
<Alert type="warning">
<div className="flex items-center gap-2">
Please connect a wallet and switch to the network you wish to create a pool
<ArrowUpRightIcon className="w-4 h-4" />
</div>
</Alert>
</div>
</div>
) : (
<>
{!chain && (
<div className="flex justify-center">
<div className="w-[1110px]">
<Alert type="warning">
<div className="flex items-center gap-2">
Make sure you switch to your desired network before beginning pool creation. You cannot switch after
selecting pool type unless you reset progress
<ArrowUpRightIcon className="w-4 h-4" />
</div>
</Alert>
</div>
</div>
)}
{isInfoAlertVisible && (
<div className="flex justify-center">
<div className="w-[1110px] relative">
<Alert type="info">
<div className="flex items-center gap-2">
For tips and guidance on pool configuration and creation, check out our
<Link
target="_blank"
rel="noreferrer"
href="https://docs-v3.balancer.fi/partner-onboarding/balancer-v3/pool-creation.html"
className="link underline"
>
partner onboarding documentation
</Link>
</div>
</Alert>
<button
onClick={() => setIsInfoAlertVisible(false)}
className="absolute top-3 right-3 p-1 rounded-full transition-colors text-neutral-700"
>
<XMarkIcon className="w-5 h-5" />
</button>
</div>
</div>
)}
</>
);
}

export function StartedOnDifferentNetworkAlert() {
const { chain } = usePoolCreationStore();

return (
<div className="flex justify-center w-full">
<div className="w-[1110px]">
<Alert type="warning">
<div className="flex items-center gap-2">
You have already begun the pool configuration process on {chain?.name}. If you wish to start creating a pool
on a different network, choose reset progress after switching back to {chain?.name}.
<ArrowUpRightIcon className="w-4 h-4" />
</div>
</Alert>
</div>
</div>
);
}
1 change: 1 addition & 0 deletions packages/nextjs/app/v3/_components/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ export * from "./ChooseParameters";
export * from "./ChooseInfo";
export * from "./PoolCreationManager";
export * from "./ApproveOnTokenManager";
export * from "./UserExperienceAlerts";
160 changes: 40 additions & 120 deletions packages/nextjs/app/v3/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
"use client";

import { useState } from "react";
import Link from "next/link";
import { PoolConfiguration, PoolDetails } from "./_components";
import { PoolConfiguration, PoolDetails, StartedOnDifferentNetworkAlert, UserExperienceAlerts } from "./_components";
import type { NextPage } from "next";
import { ArrowUpRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { BalancerLogo } from "~~/components/assets/BalancerLogo";
import { Alert, ContactSupportModal, PoolStateResetModal } from "~~/components/common";
import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
import { usePoolCreationStore, useUserDataStore, useValidateNetwork } from "~~/hooks/v3";
import { usePoolCreationStore, useUserDataStore } from "~~/hooks/v3";

const BalancerV3: NextPage = () => {
const { clearPoolStore, chain } = usePoolCreationStore();
const { targetNetwork: selectedNetwork } = useTargetNetwork();

const { clearUserData } = useUserDataStore();

return (
Expand All @@ -25,129 +24,50 @@ const BalancerV3: NextPage = () => {

<UserExperienceAlerts />

<>
<div className="hidden sm:flex flex-wrap gap-5 w-full justify-center">
<PoolConfiguration />
{chain && selectedNetwork.id !== chain.id ? (
<StartedOnDifferentNetworkAlert />
) : (
<>
<div className="hidden sm:flex flex-wrap gap-5 w-full justify-center">
<PoolConfiguration />

<div className="bg-base-200 w-full max-w-[400px] rounded-xl shadow-lg p-5 h-fit">
<div className="flex justify-between items-center gap-2 mb-3 mr-2">
<div className="font-bold text-2xl">Pool Preview</div>
{chain && (
<div
className="text-xl font-bold"
style={{ color: typeof chain.color === "string" ? chain.color : "rgb(135, 255, 101)" }}
>
{chain?.name}
</div>
)}
</div>
<PoolDetails isPreview={true} />
<div className="flex justify-center mt-4 gap-2 items-center">
<ContactSupportModal />
<div className="text-xl">·</div>
<PoolStateResetModal
clearState={() => {
clearPoolStore();
clearUserData();
}}
/>
<div className="bg-base-200 w-full max-w-[400px] rounded-xl shadow-lg p-5 h-fit">
<div className="flex justify-between items-center gap-2 mb-3 mr-2">
<div className="font-bold text-2xl">Pool Preview</div>
{chain && (
<div
className="text-xl font-bold"
style={{ color: typeof chain.color === "string" ? chain.color : "rgb(135, 255, 101)" }}
>
{chain?.name}
</div>
)}
</div>
<PoolDetails isPreview={true} />
<div className="flex justify-center mt-4 gap-2 items-center">
<ContactSupportModal />
<div className="text-xl">·</div>
<PoolStateResetModal
clearState={() => {
clearPoolStore();
clearUserData();
}}
/>
</div>
</div>
</div>
</div>

<div className="sm:hidden">
<Alert type="warning">
<div className="flex items-center gap-2">Pool creation not available on mobile</div>
</Alert>
</div>
</>
<div className="sm:hidden">
<Alert type="warning">
<div className="flex items-center gap-2">Pool creation not available on mobile</div>
</Alert>
</div>
</>
)}
</div>
</div>
</div>
);
};

export default BalancerV3;

function UserExperienceAlerts() {
const { targetNetwork: selectedNetwork } = useTargetNetwork();
const [isInfoAlertVisible, setIsInfoAlertVisible] = useState(true);
const { isWrongNetwork, isWalletConnected } = useValidateNetwork();
const { chain } = usePoolCreationStore();

return !isWalletConnected ? (
<div className="flex justify-center w-full">
<div>
<Alert type="warning">
<div className="flex items-center gap-2">
Please connect a wallet and switch to the network you wish to create a pool
<ArrowUpRightIcon className="w-4 h-4" />
</div>
</Alert>
</div>
</div>
) : isWrongNetwork ? (
<div className="flex justify-center w-full">
<div>
<Alert type="warning">
<div className="flex items-center gap-2">
You are connected to an unsupported network. To continue, please switch to Sepolia, Ethereum, or Gnosis
<ArrowUpRightIcon className="w-4 h-4" />
</div>
</Alert>
</div>
</div>
) : chain && selectedNetwork.id !== chain.id ? (
<div className="flex justify-center w-full">
<div>
<Alert type="warning">
<div className="flex items-center gap-2">
You have already begun the pool configuration process. Please switch back to {chain.name}
<ArrowUpRightIcon className="w-4 h-4" />
</div>
</Alert>
</div>
</div>
) : (
<>
{!chain && (
<div className="flex justify-center">
<div className="w-[1130px]">
<Alert type="warning">
<div className="flex items-center gap-2">
Make sure you switch to your desired network before beginning pool creation. You cannot switch after
selecting pool type unless you reset progress
<ArrowUpRightIcon className="w-4 h-4" />
</div>
</Alert>
</div>
</div>
)}
{isInfoAlertVisible && (
<div className="flex justify-center">
<div className="w-[1110px] relative">
<Alert type="info">
<div className="flex items-center gap-2">
For tips and guidance on pool configuration and creation, check out our
<Link
target="_blank"
rel="noreferrer"
href="https://docs-v3.balancer.fi/partner-onboarding/balancer-v3/pool-creation.html"
className="link underline"
>
partner onboarding documentation
</Link>
</div>
</Alert>
<button
onClick={() => setIsInfoAlertVisible(false)}
className="absolute top-3 right-3 p-1 rounded-full transition-colors text-neutral-700"
>
<XMarkIcon className="w-5 h-5" />
</button>
</div>
</div>
)}
</>
);
}
11 changes: 1 addition & 10 deletions packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { usePathname } from "next/navigation";
import { useTheme } from "next-themes";
import { useAccount, useSwitchChain } from "wagmi";
import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";
Expand All @@ -17,17 +16,9 @@ export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
const { resolvedTheme } = useTheme();
const isDarkMode = resolvedTheme === "dark";

// TODO: Update this as v3 adds more network support
const pathname = usePathname();
// Filter out base and arbitrum for v3 pool creation page
const filteredAllowedNetworks =
pathname === "/v3"
? allowedNetworks.filter(network => network.id !== 42161 && network.id !== 8453)
: allowedNetworks;

return (
<>
{filteredAllowedNetworks
{allowedNetworks
.filter(allowedNetwork => allowedNetwork.id !== chain?.id)
.map(allowedNetwork => (
<li key={allowedNetwork.id} className={hidden ? "hidden" : ""}>
Expand Down
1 change: 1 addition & 0 deletions packages/nextjs/hooks/balancer/useApiConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const useApiConfig = () => {
return { url, chainName };
};

// TODO: Will need to update this as v3 is deployed to more chains
export const CHAIN_NAMES: { [key: number]: string } = {
1: "MAINNET",
100: "GNOSIS",
Expand Down
1 change: 0 additions & 1 deletion packages/nextjs/hooks/v3/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ export * from "./usePoolCreationStore";
export * from "./useCreatePool";
export * from "./useInitializePool";
export * from "./useValidatePoolCreationInput";
export * from "./useValidateNetwork";
export * from "./useMultiSwap";
export * from "./useVerifyProportionalInit";
export * from "./useBoostableWhitelist";
Expand Down
6 changes: 3 additions & 3 deletions packages/nextjs/hooks/v3/useCreatePool.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ export const useCreatePool = () => {
name,
symbol,
swapFeePercentage: parseUnits(swapFeePercentage, SWAP_FEE_PERCENTAGE_DECIMALS),
swapFeeManager: swapFeeManager === "" ? zeroAddress : swapFeeManager,
pauseManager: pauseManager === "" ? zeroAddress : pauseManager,
poolHooksContract: poolHooksContract === "" ? zeroAddress : poolHooksContract,
swapFeeManager: swapFeeManager === "" ? zeroAddress : (swapFeeManager as `0x${string}`),
pauseManager: pauseManager === "" ? zeroAddress : (pauseManager as `0x${string}`),
poolHooksContract: poolHooksContract === "" ? zeroAddress : (poolHooksContract as `0x${string}`),
enableDonation,
disableUnbalancedLiquidity,
};
Expand Down
Loading

0 comments on commit 1b591d1

Please sign in to comment.