diff --git a/package.json b/package.json index 186aa191..9ef9ddcd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@yearn-finance/web-lib", - "version": "3.0.134", + "version": "3.0.135", "main": "./dist/index.js", "types": "./dist/index.d.js", "files": [ @@ -37,6 +37,7 @@ "dayjs": "^1.11.10", "ethers": "5.7.2", "eventemitter3": "^5.0.1", + "framer-motion": "^11.0.3", "graphql": "^16.8.1", "lint-staged": "^15.2.0", "next": "^14.0.4", diff --git a/src/components/LogoPopover.tsx b/src/components/LogoPopover.tsx new file mode 100644 index 00000000..ab90bb9e --- /dev/null +++ b/src/components/LogoPopover.tsx @@ -0,0 +1,168 @@ +import {cloneElement, useMemo, useState} from 'react'; +import Link from 'next/link'; +import {useRouter} from 'next/router'; +import {motion} from 'framer-motion'; +import {cl} from '@builtbymom/web3/utils'; +import {Popover, Transition} from '@headlessui/react'; + +import {V3Logo} from '../icons/V3Logo'; +import {APPS} from './YearnApps'; + +import type {AnimationProps} from 'framer-motion'; +import type {ReactElement} from 'react'; + +type TMotionDiv = { + animate: AnimationProps['animate']; + name: string; + children: ReactElement; +}; + +const transition = {duration: 0.4, ease: 'easeInOut'}; +const variants = { + initial: {y: -80, opacity: 0, transition}, + enter: {y: 0, opacity: 1, transition}, + exit: {y: -80, opacity: 0, transition} +}; +function MotionDiv({animate, name, children}: TMotionDiv): ReactElement { + return ( + + {children} + + ); +} + +function Logo(): ReactElement { + const {pathname} = useRouter(); + + return ( + <> + {Object.values(APPS).map(({name, pathCheck, icon}): ReactElement => { + return ( + + {icon} + + ); + })} + + ); +} + +export function LogoPopover(): ReactElement { + const [isShowing, set_isShowing] = useState(false); + const router = useRouter(); + + const currentApp = useMemo(() => { + const pageURI = router.pathname.toLowerCase(); + return Object.values(APPS).find(({pathCheck}): boolean => pageURI.includes(pathCheck)) || APPS.Vaults; + }, [router]); + + return ( + <> + set_isShowing(true)} + onMouseLeave={(): void => set_isShowing(false)}> +
set_isShowing(false)} + onMouseEnter={(): void => set_isShowing(false)} + className={cl( + 'fixed inset-0 bg-black backdrop-blur-sm transition-opacity', + !isShowing ? 'opacity-0 pointer-events-none' : 'opacity-0 pointer-events-auto' + )} + /> + + + {'Back to home'} + + + + + + + +
+
+
+ {[...Object.values(APPS)] + .filter(({name}): boolean => name !== 'V3 Vaults') + .map(({name, href, icon}): ReactElement => { + return ( + set_isShowing(false)}> +
set_isShowing(false)} + className={cl( + 'flex cursor-pointer border flex-col items-center justify-center transition-colors p-4', + currentApp?.name !== 'V3 Vaults' + ? 'bg-[#EBEBEB] border-transparent hover:bg-[#c3c3c380] dark:bg-[#0C0C0C] hover:dark:bg-[#3d3d3d80]' + : 'bg-[#000520] hover:bg-[#33374d80] border-[#151C40]' + )}> +
{cloneElement(icon, {className: 'w-8 h-8'})}
+
+ {name} +
+
+ + ); + })} +
+
+ set_isShowing(false)}> +
+
+ +
+

+ {'Discover\nBrand New Vaults'} +

+
+
+
+ +
+
+
+ + + + + + ); +} diff --git a/src/components/YearnApps.tsx b/src/components/YearnApps.tsx new file mode 100644 index 00000000..bcbcc419 --- /dev/null +++ b/src/components/YearnApps.tsx @@ -0,0 +1,135 @@ +import Image from 'next/image'; + +import {LogoYearn} from '../icons/LogoYearn'; +import {VEYFI_DYFI_ADDRESS, YCRV_TOKEN_ADDRESS} from '../utils/constants'; +import {ImageWithFallback} from './ImageWithFallback'; + +export const APPS = { + V3: { + name: 'V3 Vaults', + href: 'https://yearn.fi/v3', + pathCheck: 'yearn.fi/v3', + icon: ( + + ) + }, + Juiced: { + name: 'Juiced Vaults', + href: 'https://juiced.yearn.fi', + pathCheck: 'juiced.yearn.fi', + icon: ( + {'juiced'} + ) + }, + Vaults: { + name: 'Vaults', + href: 'https://yearn.fi/vaults', + pathCheck: 'yearn.fi/vaults', + icon: ( + + ) + }, + yCRV: { + name: 'yCRV', + href: 'https://ycrv.yearn.fi', + pathCheck: 'ycrv.yearn.fi', + icon: ( + + ) + }, + veYFI: { + name: 'veYFI', + href: 'https://veyfi.yearn.fi', + pathCheck: 'veyfi.yearn.fi', + icon: ( + + ) + }, + yETH: { + name: 'yETH', + href: 'https://yeth.yearn.fi', + pathCheck: 'yeth.yearn.fi', + icon: ( + + ) + }, + yPrisma: { + name: 'yPrisma', + href: 'https://yprisma.yearn.fi', + pathCheck: 'yprisma.yearn.fi', + icon: ( + + ) + }, + yBribe: { + name: 'yBribe', + href: 'https://ybribe.yearn.fi', + pathCheck: 'ybribe.yearn.fi', + icon: ( + + ) + }, + yFactory: { + name: 'yFactory', + href: 'https://factory.yearn.fi', + pathCheck: 'factory.yearn.fi', + icon: ( + + ) + } +}; diff --git a/src/icons/LogoYearn.tsx b/src/icons/LogoYearn.tsx new file mode 100755 index 00000000..de87bf28 --- /dev/null +++ b/src/icons/LogoYearn.tsx @@ -0,0 +1,30 @@ +import type {ReactElement} from 'react'; + +export function LogoYearn(props: React.SVGProps & {back?: string; front?: string}): ReactElement { + return ( + + + + + ); +} diff --git a/src/icons/V3Logo.tsx b/src/icons/V3Logo.tsx new file mode 100644 index 00000000..10fbfe62 --- /dev/null +++ b/src/icons/V3Logo.tsx @@ -0,0 +1,118 @@ +import type {ReactElement} from 'react'; + +export function V3Logo(props: React.SVGProps): ReactElement { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 5b816880..5e9abe28 100755 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -62,6 +62,10 @@ export const CURVE_BRIBE_V3_HELPER_ADDRESS = toAddress('0xe298eE7278DFDa6Cd67f56 // Theses constants are used by the veYFI app export const VEYFI_ADDRESS = toAddress('0x90c1f9220d90d3966FbeE24045EDd73E1d588aD5'); export const VEYFI_POSITION_HELPER_ADDRESS = toAddress('0x5A70cD937bA3Daec8188E937E243fFa43d6ECbe8'); +export const VEYFI_OPTIONS_ADDRESS = toAddress('0x7dC3A74F0684fc026f9163C6D5c3C99fda2cf60a'); +export const VEYFI_DYFI_ADDRESS = toAddress('0x41252E8691e964f7DE35156B68493bAb6797a275'); +export const VEYFI_YFI_REWARD_POOL = toAddress('0xb287a1964AEE422911c7b8409f5E5A273c1412fA'); +export const VEYFI_DYFI_REWARD_POOL = toAddress('0x2391Fc8f5E417526338F5aa3968b1851C16D894E'); // Theses constants are used in order to make the solvers work export const SOLVER_COW_VAULT_RELAYER_ADDRESS = toAddress('0xC92E8bdf79f0507f65a392b0ab4667716BFE0110'); diff --git a/yarn.lock b/yarn.lock index 0b6a613e..c40f1251 100644 --- a/yarn.lock +++ b/yarn.lock @@ -622,6 +622,18 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== +"@emotion/is-prop-valid@^0.8.2": + version "0.8.8" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" + integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== + dependencies: + "@emotion/memoize" "0.7.4" + +"@emotion/memoize@0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + "@esbuild/aix-ppc64@0.19.11": version "0.19.11" resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz#2acd20be6d4f0458bc8c784103495ff24f13b1d3" @@ -4917,6 +4929,15 @@ fraction.js@^4.3.7: resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7" integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew== +framer-motion@^11.0.3: + version "11.0.3" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.0.3.tgz#b2a87e7ae166a9e27da33da9cfb50a0db5f94fa7" + integrity sha512-6x2poQpIWBdbZwLd73w6cKZ1I9IEPIU94C6/Swp1Zt3LJ+sB5bPe1E2wC6EH5hSISXNkMJ4afH7AdwS7MrtkWw== + dependencies: + tslib "^2.4.0" + optionalDependencies: + "@emotion/is-prop-valid" "^0.8.2" + fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"