From 65c55634bb6f40b8b52a4932a63673c803ec06e8 Mon Sep 17 00:00:00 2001 From: Pedro Yves Fracari Date: Tue, 30 Jul 2024 12:39:13 -0300 Subject: [PATCH] refactor components for new branding --- apps/cow-amm-deployer/src/app/layout.tsx | 32 +++---------------- .../(components)/BalancerPriceInformation.tsx | 2 +- .../ChainlinkPriceInformation.tsx | 6 ++-- .../(components)/CustomPriceInformation.tsx | 2 +- .../(components)/PoolCompositionTable.tsx | 2 +- .../(components)/SushiV2PriceInformation.tsx | 2 +- .../UniswapV2PriceInformation.tsx | 2 +- .../cow-amm-deployer/src/app/manager/page.tsx | 21 +++++------- .../src/app/new/(components)/AmmForm.tsx | 32 +++++++++++++++---- .../src/app/new/(components)/FormWrapper.tsx | 4 +-- apps/cow-amm-deployer/src/app/new/page.tsx | 6 ++-- .../src/components/AlertCard.tsx | 9 ++++-- .../src/components/Button.tsx | 2 +- .../src/components/Footer.tsx | 2 +- .../src/components/Header.tsx | 4 +-- .../src/components/HomeWrapper.tsx | 10 +++--- .../cow-amm-deployer/src/components/Input.tsx | 9 +++--- .../src/components/RootLayout.tsx | 4 +-- .../src/components/Select.tsx | 4 +-- .../src/components/SelectInput.tsx | 8 ++--- .../src/components/TokenSelect.tsx | 6 ++-- .../src/components/Tooltip.tsx | 4 +-- .../src/components/ui/command.tsx | 9 ++++-- apps/cow-amm-deployer/tailwind.config.js | 1 - 24 files changed, 89 insertions(+), 94 deletions(-) diff --git a/apps/cow-amm-deployer/src/app/layout.tsx b/apps/cow-amm-deployer/src/app/layout.tsx index cdfcbf4d8..324942149 100644 --- a/apps/cow-amm-deployer/src/app/layout.tsx +++ b/apps/cow-amm-deployer/src/app/layout.tsx @@ -20,33 +20,10 @@ export const metadata: Metadata = { }, }; -const flechaS = localFont({ +const studioFeixenSans = localFont({ src: [ { - path: "../fonts/FlechaS-Medium.woff2", - weight: "500", - style: "normal", - }, - { - path: "../fonts/FlechaS-MediumItalic.woff2", - weight: "500", - style: "italic", - }, - ], - variable: "--font-family-serif", -}); - -const circularStd = localFont({ - src: [ - { - path: "../fonts/CircularStd-Book.woff2", - weight: "400", - style: "normal", - }, - { - path: "../fonts/CircularStd-Medium.woff2", - weight: "500", - style: "normal", + path: "../fonts/Studio-Feixen-Sans.ttf", }, ], variable: "--font-family-sans", @@ -57,9 +34,8 @@ export default function Layout({ children }: { children: React.ReactNode }) { {children} diff --git a/apps/cow-amm-deployer/src/app/manager/(components)/BalancerPriceInformation.tsx b/apps/cow-amm-deployer/src/app/manager/(components)/BalancerPriceInformation.tsx index cc5f8709e..99d62b653 100644 --- a/apps/cow-amm-deployer/src/app/manager/(components)/BalancerPriceInformation.tsx +++ b/apps/cow-amm-deployer/src/app/manager/(components)/BalancerPriceInformation.tsx @@ -15,7 +15,7 @@ export function BalancerPriceInformation({ cowAmm }: { cowAmm: ICowAmm }) { ); return ( -
+
Using price information from Balancer V2 {priceOracleLink && ( diff --git a/apps/cow-amm-deployer/src/app/manager/(components)/ChainlinkPriceInformation.tsx b/apps/cow-amm-deployer/src/app/manager/(components)/ChainlinkPriceInformation.tsx index 399edce14..744dd394c 100644 --- a/apps/cow-amm-deployer/src/app/manager/(components)/ChainlinkPriceInformation.tsx +++ b/apps/cow-amm-deployer/src/app/manager/(components)/ChainlinkPriceInformation.tsx @@ -32,13 +32,13 @@ export function ChainlinkPriceInformation({ cowAmm }: { cowAmm: ICowAmm }) { fetchPriceFeedLinks(); }, []); return ( -
+
Using price information from Chainlink {priceFeed0Link && ( 1 @@ -47,7 +47,7 @@ export function ChainlinkPriceInformation({ cowAmm }: { cowAmm: ICowAmm }) { 2 diff --git a/apps/cow-amm-deployer/src/app/manager/(components)/CustomPriceInformation.tsx b/apps/cow-amm-deployer/src/app/manager/(components)/CustomPriceInformation.tsx index de958c513..d1a2304ae 100644 --- a/apps/cow-amm-deployer/src/app/manager/(components)/CustomPriceInformation.tsx +++ b/apps/cow-amm-deployer/src/app/manager/(components)/CustomPriceInformation.tsx @@ -15,7 +15,7 @@ export function CustomPriceInformation({ cowAmm }: { cowAmm: ICowAmm }) { }); return ( -
+
Using price information from custom contract {priceOracleLink && ( diff --git a/apps/cow-amm-deployer/src/app/manager/(components)/PoolCompositionTable.tsx b/apps/cow-amm-deployer/src/app/manager/(components)/PoolCompositionTable.tsx index 8946f7e21..8a8b681ab 100644 --- a/apps/cow-amm-deployer/src/app/manager/(components)/PoolCompositionTable.tsx +++ b/apps/cow-amm-deployer/src/app/manager/(components)/PoolCompositionTable.tsx @@ -16,7 +16,7 @@ export function PoolCompositionTable({ cowAmm }: { cowAmm: ICowAmm }) { Tokens diff --git a/apps/cow-amm-deployer/src/app/manager/(components)/SushiV2PriceInformation.tsx b/apps/cow-amm-deployer/src/app/manager/(components)/SushiV2PriceInformation.tsx index e42744851..794eab267 100644 --- a/apps/cow-amm-deployer/src/app/manager/(components)/SushiV2PriceInformation.tsx +++ b/apps/cow-amm-deployer/src/app/manager/(components)/SushiV2PriceInformation.tsx @@ -14,7 +14,7 @@ export function SushiV2PriceInformation({ cowAmm }: { cowAmm: ICowAmm }) { ); return ( -
+
Using price information from Sushi V2 {priceOracleLink && ( diff --git a/apps/cow-amm-deployer/src/app/manager/(components)/UniswapV2PriceInformation.tsx b/apps/cow-amm-deployer/src/app/manager/(components)/UniswapV2PriceInformation.tsx index 00f93b0c1..7ada7e414 100644 --- a/apps/cow-amm-deployer/src/app/manager/(components)/UniswapV2PriceInformation.tsx +++ b/apps/cow-amm-deployer/src/app/manager/(components)/UniswapV2PriceInformation.tsx @@ -16,7 +16,7 @@ export function UniswapV2PriceInformation({ cowAmm }: { cowAmm: ICowAmm }) { ); return ( -
+
Using price information from Uniswap V2 {priceOracleLink && ( diff --git a/apps/cow-amm-deployer/src/app/manager/page.tsx b/apps/cow-amm-deployer/src/app/manager/page.tsx index 1da70265b..8422722c0 100644 --- a/apps/cow-amm-deployer/src/app/manager/page.tsx +++ b/apps/cow-amm-deployer/src/app/manager/page.tsx @@ -2,7 +2,6 @@ import { formatNumber } from "@bleu/utils/formatNumber"; import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk"; -import { tomatoDark } from "@radix-ui/colors"; import { ArrowTopRightIcon, ExclamationTriangleIcon, @@ -88,13 +87,12 @@ export default function Page() {
-

- The first MEV-Capturing AMM, - brought to you by CoW DAO{" "} -

+ + The first MEV-Capturing AMM, brought to you by CoW DAO +
-
+
Total Value ${" "} @@ -109,11 +107,11 @@ export default function Page() {
- + AMM Composition See in CoW Explorer - +
@@ -154,10 +152,7 @@ export default function Page() { {!isAmmFromModule && ( - + )}
diff --git a/apps/cow-amm-deployer/src/app/new/(components)/AmmForm.tsx b/apps/cow-amm-deployer/src/app/new/(components)/AmmForm.tsx index 3c9bedeef..0bf5cdc56 100644 --- a/apps/cow-amm-deployer/src/app/new/(components)/AmmForm.tsx +++ b/apps/cow-amm-deployer/src/app/new/(components)/AmmForm.tsx @@ -1,7 +1,6 @@ import { Address } from "@bleu/utils"; import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk"; import { zodResolver } from "@hookform/resolvers/zod"; -import { brownDark } from "@radix-ui/colors"; import { InfoCircledIcon } from "@radix-ui/react-icons"; import { useRouter } from "next/navigation"; import { useEffect, useState } from "react"; @@ -75,7 +74,7 @@ export function AmmForm({ resolver: zodResolver(ammFormSchema), defaultValues: { ...defaultValues, - safeAddress, + safeAddress: safeAddress as Address, chainId, }, }); @@ -113,7 +112,7 @@ export function AmmForm({ }, [fallbackState, setValue]); useEffect(() => { - setValue("safeAddress", safeAddress); + setValue("safeAddress", safeAddress as Address); }, [safeAddress, setValue]); if (!fallbackState || !domainSeparator) { @@ -134,7 +133,7 @@ export function AmmForm({ onSelectToken={async (token: IToken) => { setValue("token0", { decimals: token.decimals, - address: token.address, + address: token.address as Address, symbol: token.symbol, }); setValue( @@ -160,7 +159,7 @@ export function AmmForm({ onSelectToken={(token: IToken) => { setValue("token1", { decimals: token.decimals, - address: token.address, + address: token.address as Address, symbol: token.symbol, }); }} @@ -236,10 +235,31 @@ function PriceOracleFields({ setValue, formState: { errors }, watch, + unregister, } = form; const priceOracle = watch("priceOracle"); + const unregisterFields = (selectedPriceOracle: PRICE_ORACLES) => { + if (selectedPriceOracle !== PRICE_ORACLES.BALANCER) + unregister("balancerPoolId"); + if (selectedPriceOracle !== PRICE_ORACLES.UNI) unregister("uniswapV2Pair"); + if (selectedPriceOracle !== PRICE_ORACLES.SUSHI) unregister("sushiV2Pair"); + if (selectedPriceOracle !== PRICE_ORACLES.CHAINLINK) { + unregister("chainlinkPriceFeed0"); + unregister("chainlinkPriceFeed1"); + unregister("chainlinkTimeThresholdInHours"); + } + if (selectedPriceOracle !== PRICE_ORACLES.CUSTOM) { + unregister("customPriceOracleAddress"); + unregister("customPriceOracleData"); + } + }; + + useEffect(() => { + unregisterFields(priceOracle); + }, [priceOracle]); + return (
@@ -251,7 +271,7 @@ function PriceOracleFields({ "The AMM relies on price oracle exclusively for generating orders that will plausibly be settled in the current market conditions" } > - +
-
+
-
+
{transactionType === TRANSACTION_TYPES.CREATE_COW_AMM ? "Create" : "Edit"}{" "} diff --git a/apps/cow-amm-deployer/src/app/new/page.tsx b/apps/cow-amm-deployer/src/app/new/page.tsx index 8b3d7bc26..1cbe0efea 100644 --- a/apps/cow-amm-deployer/src/app/new/page.tsx +++ b/apps/cow-amm-deployer/src/app/new/page.tsx @@ -66,16 +66,16 @@ export default function Page() {

- Attention, deploying a CoW AMM + Attention, deploying a CoW AMM Liquidity pool requires a safe wallet. Keep in mind, that the{" "} - + Safe used for deploying liquidity should only be used for this purpose , as the tokens held in the safe will be used for the pool creation. CoW AMM utilizes all available token balances on the Safe for the token pairs that you have created a liquidity pool, thus,{" "} - + disabling other functionalities a Safe might be used for.

diff --git a/apps/cow-amm-deployer/src/components/AlertCard.tsx b/apps/cow-amm-deployer/src/components/AlertCard.tsx index a3c0e3c26..ac46bb970 100644 --- a/apps/cow-amm-deployer/src/components/AlertCard.tsx +++ b/apps/cow-amm-deployer/src/components/AlertCard.tsx @@ -11,17 +11,20 @@ export function AlertCard({ children?: React.ReactNode; }) { return ( -
+
{capitalize(style)}: {title}
{children}
diff --git a/apps/cow-amm-deployer/src/components/Button.tsx b/apps/cow-amm-deployer/src/components/Button.tsx index a6133f838..4d18880ff 100644 --- a/apps/cow-amm-deployer/src/components/Button.tsx +++ b/apps/cow-amm-deployer/src/components/Button.tsx @@ -7,7 +7,7 @@ import { cn } from "#/lib/utils"; import { Icons } from "./Icons"; const buttonVariants = cva( - "inline-flex items-center justify-center whitespace-nowrap text-sm font-normal transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", + "inline-flex items-center justify-center whitespace-nowrap text-sm font-normal transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 rounded-full", { variants: { variant: { diff --git a/apps/cow-amm-deployer/src/components/Footer.tsx b/apps/cow-amm-deployer/src/components/Footer.tsx index 3c765e75a..e57764f18 100644 --- a/apps/cow-amm-deployer/src/components/Footer.tsx +++ b/apps/cow-amm-deployer/src/components/Footer.tsx @@ -21,7 +21,7 @@ export function Footer({ target="_blank" rel="noopener noreferrer" href="https://github.com/bleu" - className="font-bold text-primary" + className="font-bold text-secondary" > bleu diff --git a/apps/cow-amm-deployer/src/components/Header.tsx b/apps/cow-amm-deployer/src/components/Header.tsx index 194cebe7a..9ecae4f94 100644 --- a/apps/cow-amm-deployer/src/components/Header.tsx +++ b/apps/cow-amm-deployer/src/components/Header.tsx @@ -29,13 +29,13 @@ export function Header({ linkUrl, imageSrc, children, onLinkClick }: IHeader) { className="flex items-center gap-3 justify-self-start" > {imageSrc && ( - + )}
{children &&
{children}
}
-
+
-

- The first MEV-Capturing AMM, -
brought to you by CoW DAO +

+ The first MEV-Capturing AMM, +
brought to you by CoW DAO

- + CoW AMM is a production-ready implementation of an FM-AMM that supplies liquidity for trades made on CoW Protocol. Solvers compete with each other for the right to trade against the AMM diff --git a/apps/cow-amm-deployer/src/components/Input.tsx b/apps/cow-amm-deployer/src/components/Input.tsx index 9f94bc1fe..5fee1fff0 100644 --- a/apps/cow-amm-deployer/src/components/Input.tsx +++ b/apps/cow-amm-deployer/src/components/Input.tsx @@ -1,6 +1,5 @@ "use client"; -import { brownDark } from "@radix-ui/colors"; import { InfoCircledIcon } from "@radix-ui/react-icons"; import cn from "clsx"; import React, { HTMLProps } from "react"; @@ -24,7 +23,7 @@ export const BaseInput = React.forwardRef< {...props} ref={ref} className={cn( - "w-full selection:color-white border border-border box-border inline-flex h-[35px] appearance-none items-center justify-center bg-input px-[10px] text-[15px] leading-none text-background outline-none selection:bg-primary-content disabled:bg-brown9 ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50", + "w-full selection:color-white border border-border box-border inline-flex h-[35px] appearance-none items-center justify-center bg-input px-[10px] text-[15px] leading-none text-border outline-none selection:bg-primary-content disabled:bg-brown9 ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 rounded-lg", props.className, )} /> @@ -54,10 +53,10 @@ export const Input = React.forwardRef( {tooltipLink ? ( - + ) : ( - + )} )} @@ -66,7 +65,7 @@ export const Input = React.forwardRef( {errorMessage && ( diff --git a/apps/cow-amm-deployer/src/components/RootLayout.tsx b/apps/cow-amm-deployer/src/components/RootLayout.tsx index 49d640ad6..bfc1b3838 100644 --- a/apps/cow-amm-deployer/src/components/RootLayout.tsx +++ b/apps/cow-amm-deployer/src/components/RootLayout.tsx @@ -15,8 +15,8 @@ export function RootLayout({ children }: React.PropsWithChildren) {
-
-
+
+
{children}
diff --git a/apps/cow-amm-deployer/src/components/Select.tsx b/apps/cow-amm-deployer/src/components/Select.tsx index a90eeebdb..a92720365 100644 --- a/apps/cow-amm-deployer/src/components/Select.tsx +++ b/apps/cow-amm-deployer/src/components/Select.tsx @@ -21,7 +21,7 @@ const SelectTrigger = React.forwardRef< span]:line-clamp-1", + "flex h-10 w-full items-center justify-between text-white bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 rounded-lg", className, )} {...props} @@ -120,7 +120,7 @@ const SelectItem = React.forwardRef< (
-