From 008af4e86bfea1c792420aaf68251630842bb0f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?BRAMILLE=20S=C3=A9bastien?= <2752200+oktapodia@users.noreply.github.com> Date: Mon, 2 Dec 2024 10:25:06 +0000 Subject: [PATCH 1/5] fix: middleware regex (#1545) --- src/middleware.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/middleware.ts b/src/middleware.ts index c13311719..69ac2d265 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -20,5 +20,6 @@ export function middleware(request: NextRequest) { // Applies this middleware only to specific paths export const config = { - matcher: '/((?!api|static|.*\\..*|_next).*)', + matcher: + '/((?!api|static|_next|favicon\\.ico|.*\\.(?:png|jp?eg|gif|webp|svg|ico|riv)).*)', }; From 3bc551fa58b53fc196eb19945297aecb37c5fd13 Mon Sep 17 00:00:00 2001 From: dennyscode <43956540+dennyscode@users.noreply.github.com> Date: Mon, 2 Dec 2024 14:14:16 +0100 Subject: [PATCH 2/5] fix: widget image-generation feat placements (#1558) --- src/app/api/widget-review/route.tsx | 17 +++-------------- src/app/api/widget-selection/route.tsx | 3 --- .../ImageGeneration/Fields/QuoteField.tsx | 1 + .../ImageGeneration/WidgetExecutionImage.tsx | 10 ++-------- .../ImageGeneration/WidgetReviewImage.tsx | 6 +----- 5 files changed, 7 insertions(+), 30 deletions(-) diff --git a/src/app/api/widget-review/route.tsx b/src/app/api/widget-review/route.tsx index f4b599f7a..cee40c2c5 100644 --- a/src/app/api/widget-review/route.tsx +++ b/src/app/api/widget-review/route.tsx @@ -6,7 +6,7 @@ * * Example: * ``` - * http://localhost:3000/api/widget-review?fromToken=0x0000000000000000000000000000000000000000&fromChainId=137&toToken=0x0000000000000000000000000000000000000000&toChainId=42161&amount=10&highlighted=amount&theme=dark + * http://localhost:3000/api/widget-review?fromToken=0x0000000000000000000000000000000000000000&fromChainId=137&toToken=0x0000000000000000000000000000000000000000&toChainId=42161&amount=10&theme=dark * ``` * * @typedef {Object} SearchParams @@ -17,14 +17,12 @@ * @property {number} amount - The amount of tokens. * @property {boolean} [isSwap] - True if transaction is a swap, default and false if transaction is a bridge (optional). * @property {'light'|'dark'} [theme] - The theme for the widget (optional). - * @property {'from'|'to'|'amount'} [highlighted] - The highlighted element (optional). * */ import type { ChainId } from '@lifi/sdk'; import { ImageResponse } from 'next/og'; import type { CSSProperties } from 'react'; -import type { HighlightedAreas } from 'src/components/ImageGeneration/ImageGeneration.types'; import { imageResponseOptions } from 'src/components/ImageGeneration/imageResponseOptions'; import { imageFrameStyles } from 'src/components/ImageGeneration/style'; import WidgetReviewImage from 'src/components/ImageGeneration/WidgetReviewImage'; @@ -37,16 +35,8 @@ const WIDGET_IMAGE_HEIGHT = 440; const WIDGET_IMAGE_SCALING_FACTOR = 2; export async function GET(request: Request) { - const { - fromChainId, - toChainId, - fromToken, - toToken, - isSwap, - theme, - amount, - highlighted, - } = parseSearchParams(request.url); + const { fromChainId, toChainId, fromToken, toToken, isSwap, theme, amount } = + parseSearchParams(request.url); // Fetch data asynchronously before rendering const fromTokenData = await fetchTokenData(fromChainId, fromToken); @@ -92,7 +82,6 @@ export async function GET(request: Request) { theme={theme as 'light' | 'dark'} toChain={toChain} amount={amount} - highlighted={highlighted as HighlightedAreas} /> ), diff --git a/src/app/api/widget-selection/route.tsx b/src/app/api/widget-selection/route.tsx index c9c5f7b89..7a2893fb7 100644 --- a/src/app/api/widget-selection/route.tsx +++ b/src/app/api/widget-selection/route.tsx @@ -15,7 +15,6 @@ * @property {string} toToken - The token address to send to. * @property {number} toChainId - The chain ID to send to. * @property {number} amount - The amount of tokens. - * @property {number} [amountUSD] - The USD equivalent amount (optional). * @property {'light'|'dark'} [theme] - The theme for the widget (optional). * @property {'from'|'to'|'amount'} [highlighted] - The highlighted element (optional). * @@ -45,7 +44,6 @@ export async function GET(request: Request) { theme, amount, highlighted, - amountUSD, } = parseSearchParams(request.url); // Fetch data asynchronously before rendering @@ -90,7 +88,6 @@ export async function GET(request: Request) { fromChain={fromChain} toChain={toChain} amount={amount} - amountUSD={amountUSD} theme={theme as 'light' | 'dark'} highlighted={highlighted as HighlightedAreas} /> diff --git a/src/components/ImageGeneration/Fields/QuoteField.tsx b/src/components/ImageGeneration/Fields/QuoteField.tsx index 80f00b866..714d5258f 100644 --- a/src/components/ImageGeneration/Fields/QuoteField.tsx +++ b/src/components/ImageGeneration/Fields/QuoteField.tsx @@ -57,6 +57,7 @@ const QuoteField = ({ style={{ ...fieldContainerStyle, padding: `${extendedHeight ? 56 : 16}px 16px 16px`, + width: '100%', ...(highlighted && { boxShadow: `inset 0 0 0 2px ${theme === 'dark' ? '#653BA3' : '#31007A'}`, }), diff --git a/src/components/ImageGeneration/WidgetExecutionImage.tsx b/src/components/ImageGeneration/WidgetExecutionImage.tsx index 653fd19d2..e4b765324 100644 --- a/src/components/ImageGeneration/WidgetExecutionImage.tsx +++ b/src/components/ImageGeneration/WidgetExecutionImage.tsx @@ -3,7 +3,6 @@ import type { CSSProperties } from 'react'; import ReviewField from './Fields/ReviewField'; import { FieldSkeleton } from './FieldSkeleton'; import type { HighlightedAreas, ImageTheme } from './ImageGeneration.types'; -import ButtonLabel from './Labels/ButtonLabel'; import CardContent from './Labels/CardContent'; import CardTitle from './Labels/CardTitle'; import Title from './Labels/Title'; @@ -78,7 +77,7 @@ const WidgetExecutionImage = ({ fullWidth={false} highlighted={highlighted === 'from'} showSkeletons={true} - sx={{ padding: '0px 16px', marginTop: 14 }} + sx={{ padding: '0px 16px', marginTop: 0 }} /> - diff --git a/src/components/ImageGeneration/WidgetReviewImage.tsx b/src/components/ImageGeneration/WidgetReviewImage.tsx index 811538c5a..68bb731a5 100644 --- a/src/components/ImageGeneration/WidgetReviewImage.tsx +++ b/src/components/ImageGeneration/WidgetReviewImage.tsx @@ -2,7 +2,7 @@ import type { ExtendedChain, Token } from '@lifi/sdk'; import type { CSSProperties } from 'react'; import ReviewField from './Fields/ReviewField'; import { FieldSkeleton } from './FieldSkeleton'; -import type { HighlightedAreas, ImageTheme } from './ImageGeneration.types'; +import type { ImageTheme } from './ImageGeneration.types'; import ButtonLabel from './Labels/ButtonLabel'; import CardTitle from './Labels/CardTitle'; import Title from './Labels/Title'; @@ -24,7 +24,6 @@ interface WidgetReviewImageProps { amount?: string | null; width: number; height: number; - highlighted?: HighlightedAreas; sx?: CSSProperties; } @@ -38,7 +37,6 @@ const WidgetReviewImage = ({ amount, width, height, - highlighted, sx, }: WidgetReviewImageProps) => { const contentContainerStyle = contentContainerStyles({ @@ -77,7 +75,6 @@ const WidgetReviewImage = ({ token={fromToken} amount={amount ? parseFloat(amount) : null} fullWidth={false} - highlighted={highlighted === 'from'} showSkeletons={true} sx={{ marginTop: 0 }} /> @@ -86,7 +83,6 @@ const WidgetReviewImage = ({ token={toToken} theme={theme} fullWidth={false} - highlighted={highlighted === 'to'} amount={ amount && fromToken && toToken ? (parseFloat(amount) * parseFloat(fromToken?.priceUSD)) / From 794282b164d9be911403b545462adc4d65077344 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?BRAMILLE=20S=C3=A9bastien?= <2752200+oktapodia@users.noreply.github.com> Date: Mon, 2 Dec 2024 13:14:25 +0000 Subject: [PATCH 3/5] feat: Use blockies lib instead of effigy (#1528) --- next.config.mjs | 6 - package.json | 1 + public/default_effigy.svg | 1 - src/app/api/profile/[walletAddress]/route.tsx | 9 +- .../Navbar/NavbarButtons/ProfileButton.tsx | 39 --- src/components/Navbar/WalletButton.tsx | 31 ++- .../ProfilePage/AddressBox/AddressBox.tsx | 23 +- src/const/urls.ts | 3 +- src/hooks/useAddressImg.ts | 19 ++ src/hooks/useBlockieImg.ts | 13 + src/hooks/useEffigyLink.ts | 26 -- src/hooks/useImageStatus.ts | 29 -- src/utils/effigy/blockiesCommon.ts | 35 --- src/utils/effigy/blockiesPNG.ts | 123 --------- src/utils/effigy/hsl2rgb.ts | 53 ---- src/utils/effigy/pnglib.ts | 251 ------------------ src/utils/getAddressLabel.ts | 3 +- yarn.lock | 8 + 18 files changed, 82 insertions(+), 591 deletions(-) delete mode 100644 public/default_effigy.svg delete mode 100644 src/components/Navbar/NavbarButtons/ProfileButton.tsx create mode 100644 src/hooks/useAddressImg.ts create mode 100644 src/hooks/useBlockieImg.ts delete mode 100644 src/hooks/useEffigyLink.ts delete mode 100644 src/hooks/useImageStatus.ts delete mode 100644 src/utils/effigy/blockiesCommon.ts delete mode 100644 src/utils/effigy/blockiesPNG.ts delete mode 100644 src/utils/effigy/hsl2rgb.ts delete mode 100644 src/utils/effigy/pnglib.ts diff --git a/next.config.mjs b/next.config.mjs index 1b1acef74..d64e341f1 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -17,12 +17,6 @@ const nextConfig = { }, images: { remotePatterns: [ - { - protocol: 'https', - hostname: 'effigy.im', - port: '', - pathname: '/a/**', - }, { protocol: 'https', hostname: 'raw.githubusercontent.com', diff --git a/package.json b/package.json index a58d5199a..68db79430 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@widgetbot/react-embed": "^1.9.0", "accept-language": "^3.0.20", "axios": "^1.7.7", + "blo": "^1.2.0", "dotenv-cli": "^7.4.2", "ethers": "^6.13.4", "fontaine": "^0.5.0", diff --git a/public/default_effigy.svg b/public/default_effigy.svg deleted file mode 100644 index 12c85dbe6..000000000 --- a/public/default_effigy.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/api/profile/[walletAddress]/route.tsx b/src/app/api/profile/[walletAddress]/route.tsx index 02aa6b937..d306f736f 100644 --- a/src/app/api/profile/[walletAddress]/route.tsx +++ b/src/app/api/profile/[walletAddress]/route.tsx @@ -5,9 +5,9 @@ import { getChainsQuery } from '@/hooks/useChains'; import { walletDigest } from '@/utils/walletDigest'; import { getLeaderboardUserQuery } from '@/hooks/useLeaderboard'; import type { PDA } from '@/types/loyaltyPass'; -import render from '@/utils/effigy/blockiesPNG'; import { getSiteUrl } from '@/const/urls'; import { getImageResponseOptions } from '@/utils/ImageGeneration/getImageResponseOptions'; +import useBlockieImg from '@/hooks/useBlockieImg'; const BASE_WIDTH = 800; const BASE_HEIGHT = BASE_WIDTH / 1.91; @@ -55,6 +55,7 @@ export async function GET( ) { const walletAddress = (await params).walletAddress; const loyaltyPass = await getLoyaltyPassData(walletAddress); + const imgLink = useBlockieImg(walletAddress); return new ImageResponse( ( @@ -90,12 +91,8 @@ export async function GET( borderRadius: '50%', border: '8px solid #fff', }} - src={`data:image/png;base64, ${render({ seed: walletAddress.toLowerCase() }).toString('base64')}`} + src={imgLink} /> - {/* */}
{ - const router = useRouter(); - const theme = useTheme(); - const { account } = useAccount(); - const imgLink = useEffigyLink( - `https://effigy.im/a/${account?.address}.png`, - DEFAULT_EFFIGY, - ); - - return ( - router.push(JUMPER_LOYALTY_PATH)}> - Effigy Wallet Icon - - ); -}; diff --git a/src/components/Navbar/WalletButton.tsx b/src/components/Navbar/WalletButton.tsx index 2fa526141..4bfb6f305 100644 --- a/src/components/Navbar/WalletButton.tsx +++ b/src/components/Navbar/WalletButton.tsx @@ -13,8 +13,11 @@ import { Stack, Typography, useMediaQuery } from '@mui/material'; import { usePathname, useRouter } from 'next/navigation'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { JUMPER_LOYALTY_PATH, JUMPER_SCAN_PATH } from 'src/const/urls'; -import useImageStatus from 'src/hooks/useImageStatus'; +import { + DEFAULT_WALLET_ADDRESS, + JUMPER_LOYALTY_PATH, + JUMPER_SCAN_PATH, +} from 'src/const/urls'; import { useLoyaltyPass } from 'src/hooks/useLoyaltyPass'; import { JUMPER_WASH_PATH } from '../../const/urls'; import { XPIcon } from '../illustrations/XPIcon'; @@ -30,6 +33,12 @@ import { WalletMgmtChainAvatar, WalletMgmtWalletAvatar, } from './WalletButton.style'; +import useBlockieImg from '@/hooks/useBlockieImg'; +import { useWalletAddressImg } from '@/hooks/useAddressImg'; +import { useEnsName } from 'wagmi'; +import type { Address } from 'viem'; +import { mainnet } from 'wagmi/chains'; +import { getAddressLabel } from '@/utils/getAddressLabel'; export const WalletButtons = () => { const { chains } = useChains(); @@ -39,7 +48,7 @@ export const WalletButtons = () => { const { openWalletMenu } = useWalletMenu(); const { points, isLoading } = useLoyaltyPass(account?.address); const router = useRouter(); - const imgLink = useImageStatus(account?.address); + const imgLink = useWalletAddressImg(account?.address); const isDesktop = useMediaQuery((theme: Theme) => theme.breakpoints.up('md')); const pathname = usePathname(); @@ -47,9 +56,15 @@ export const WalletButtons = () => { (state) => state, ); - const _walletDigest = useMemo(() => { - return walletDigest(account?.address); - }, [account?.address]); + const { data: ensName, isSuccess: isSuccessEnsName } = useEnsName({ + address: account?.address as Address | undefined, + chainId: mainnet.id, + }); + const addressLabel = getAddressLabel({ + isSuccess: isSuccessEnsName, + ensName, + address: account?.address, + }); const activeChain = useMemo( () => chains?.find((chainEl: Chain) => chainEl.id === account?.chainId), @@ -90,7 +105,7 @@ export const WalletButtons = () => { > { ) : null} - {_walletDigest} + {addressLabel ?? walletDigest(account?.address)} diff --git a/src/components/ProfilePage/AddressBox/AddressBox.tsx b/src/components/ProfilePage/AddressBox/AddressBox.tsx index 8f90846bd..ae6c33e9a 100644 --- a/src/components/ProfilePage/AddressBox/AddressBox.tsx +++ b/src/components/ProfilePage/AddressBox/AddressBox.tsx @@ -5,7 +5,6 @@ import LinkIcon from '@mui/icons-material/Link'; import { useTheme } from '@mui/material'; import Image from 'next/image'; import { useTranslation } from 'react-i18next'; -import useImageStatus from 'src/hooks/useImageStatus'; import { useMercleNft } from 'src/hooks/useMercleNft'; import { getAddressLabel } from 'src/utils/getAddressLabel'; import type { Address } from 'viem'; @@ -19,45 +18,45 @@ import { ProfileIconButton, } from './AddressBox.style'; import { getSiteUrl } from '@/const/urls'; +import useBlockieImg from '@/hooks/useBlockieImg'; +import { useWalletAddressImg } from '@/hooks/useAddressImg'; interface AddressBoxProps { - address?: string; + address: string; } export const AddressBox = ({ address }: AddressBoxProps) => { const { t } = useTranslation(); const theme = useTheme(); - const { imageLink } = useMercleNft({ userAddress: address }); + const imgLink = useWalletAddressImg(address); const { setSnackbarState } = useMenuStore((state) => state); const { data: ensName, isSuccess } = useEnsName({ address: address as Address | undefined, chainId: mainnet.id, }); - const imgLink = useImageStatus(address); - - const handleCopyButton = (textToCopy: string) => { - address && navigator.clipboard.writeText(textToCopy); - setSnackbarState(true, t('navbar.walletMenu.copiedMsg'), 'success'); - }; - const addressLabel = getAddressLabel({ isSuccess, ensName, address, }); + const handleCopyButton = (textToCopy: string) => { + address && navigator.clipboard.writeText(textToCopy); + setSnackbarState(true, t('navbar.walletMenu.copiedMsg'), 'success'); + }; + return ( Effigy Wallet Icon { + const { imageLink: merkleNFTImg } = useMercleNft({ userAddress }); + const { data: ensImage } = useEnsAvatar({ + chainId: mainnet.id, + name: normalize(userAddress ?? DEFAULT_WALLET_ADDRESS), + }); + const blockieImg = useBlockieImg(userAddress); + + return merkleNFTImg ?? ensImage ?? blockieImg; +}; diff --git a/src/hooks/useBlockieImg.ts b/src/hooks/useBlockieImg.ts new file mode 100644 index 000000000..5c44d1f83 --- /dev/null +++ b/src/hooks/useBlockieImg.ts @@ -0,0 +1,13 @@ +import { DEFAULT_WALLET_ADDRESS } from '@/const/urls'; +import { blo } from 'blo'; +import type { Address } from 'viem'; + +function useBlockieImg(address?: string) { + if (!address) { + return blo(DEFAULT_WALLET_ADDRESS); + } + + return blo(address as Address); +} + +export default useBlockieImg; diff --git a/src/hooks/useEffigyLink.ts b/src/hooks/useEffigyLink.ts deleted file mode 100644 index 36c0f83df..000000000 --- a/src/hooks/useEffigyLink.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { useState, useEffect } from 'react'; - -const useEffigyLink = (imageUrl: string, defaultImg: string) => { - const [imgLink, setImgLink] = useState(defaultImg); - - useEffect(() => { - const getImageLink = async () => { - try { - const response = await fetch(imageUrl); - if (response.status > 299) { - setImgLink(imageUrl); - } else { - setImgLink(defaultImg); - } - } catch (error) { - setImgLink(defaultImg); - } - }; - - getImageLink(); - }, [imageUrl]); - - return imgLink; -}; - -export default useEffigyLink; diff --git a/src/hooks/useImageStatus.ts b/src/hooks/useImageStatus.ts deleted file mode 100644 index daa69a1df..000000000 --- a/src/hooks/useImageStatus.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { useEffect, useState } from 'react'; -import { DEFAULT_EFFIGY } from 'src/const/urls'; - -const useImageStatus = (address: string | undefined) => { - const [validImage, setValidImage] = useState(DEFAULT_EFFIGY); - const imageUrl = `https://effigy.im/a/${address}.png`; - - useEffect(() => { - if (!address) { - return; - } - const checkImage = async () => { - try { - const response = await fetch(imageUrl, { method: 'HEAD' }); - if (response.ok) { - setValidImage(imageUrl); - } - } catch (error) { - setValidImage(DEFAULT_EFFIGY); - } - }; - - checkImage(); - }, [imageUrl, address]); - - return validImage; -}; - -export default useImageStatus; diff --git a/src/utils/effigy/blockiesCommon.ts b/src/utils/effigy/blockiesCommon.ts deleted file mode 100644 index 3d0d30b42..000000000 --- a/src/utils/effigy/blockiesCommon.ts +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Some common functions to generate ethereum "blockie" identicon - * - * @version 0.01 - * @autor Harper - * @link https://effigy.im - * @license https://opensource.org/licenses/MIT MIT License - * - */ - -const randseed: number[] = new Array(4); // Xorshift: [x, y, z, w] 32 bit values - -function randomizeSeed(seed: string): void { - for (let i = 0; i < randseed.length; i++) { - randseed[i] = 0; - } - for (let i = 0; i < seed.length; i++) { - randseed[i % 4] = - (randseed[i % 4] << 5) - randseed[i % 4] + seed.charCodeAt(i); - } -} - -function rand(): number { - // based on Java's String.hashCode(), expanded to 4 32bit values - const t = randseed[0] ^ (randseed[0] << 11); - - randseed[0] = randseed[1]; - randseed[1] = randseed[2]; - randseed[2] = randseed[3]; - randseed[3] = randseed[3] ^ (randseed[3] >> 19) ^ t ^ (t >> 8); - - return (randseed[3] >>> 0) / ((1 << 31) >>> 0); -} - -export { rand, randomizeSeed, randseed }; diff --git a/src/utils/effigy/blockiesPNG.ts b/src/utils/effigy/blockiesPNG.ts deleted file mode 100644 index 556bc4997..000000000 --- a/src/utils/effigy/blockiesPNG.ts +++ /dev/null @@ -1,123 +0,0 @@ -/** - * A class to generate PNG ethereum "blockie" identicon - * - * @version 0.01 - * @author Harper - * @link https://effigy.im - * @license https://opensource.org/licenses/MIT MIT License - * - * Mostly based on https://github.com/MyCryptoHQ/ethereum-blockies-base64 - * - */ - -import PNGlib from './pnglib'; -import hsl2rgb from './hsl2rgb'; -import { rand, randomizeSeed } from './blockiesCommon'; - -interface BlockiesOptions { - seed: string; - size?: number; - scale?: number; - color?: [number, number, number]; - bgcolor?: [number, number, number]; - spotcolor?: [number, number, number]; -} - -function createColor(): [number, number, number] { - const h = Math.floor(rand() * 360); - const s = rand() * 60 + 40; - const l = (rand() + rand() + rand() + rand()) * 25; - - return [h / 360, s / 100, l / 100]; -} - -function createImageData(size: number): number[] { - const width = size; - const height = size; - - const dataWidth = Math.ceil(width / 2); - const mirrorWidth = width - dataWidth; - - const data: number[] = []; - for (let y = 0; y < height; y++) { - let row: number[] = []; - for (let x = 0; x < dataWidth; x++) { - row[x] = Math.floor(rand() * 2.3); - } - const r = row.slice(0, mirrorWidth).reverse(); - row = row.concat(r); - - for (let i = 0; i < row.length; i++) { - data.push(row[i]); - } - } - - return data; -} - -function buildOptions(opts: BlockiesOptions): BlockiesOptions { - if (!opts.seed) { - throw new Error('No seed provided'); - } - - randomizeSeed(opts.seed); - - return Object.assign( - { - size: 8, - scale: 16, - color: createColor(), - bgcolor: createColor(), - spotcolor: createColor(), - }, - opts, - ); -} - -function fillRect( - png: PNGlib, - x: number, - y: number, - w: number, - h: number, - color: string, -): void { - for (let i = 0; i < w; i++) { - for (let j = 0; j < h; j++) { - png.buffer[png.index(x + i, y + j)] = color; - } - } -} - -function render(opts: BlockiesOptions): Buffer { - opts = buildOptions(opts); - - const imageData = createImageData(opts.size!); - const width = Math.sqrt(imageData.length); - - const p = new PNGlib(opts.size! * opts.scale!, opts.size! * opts.scale!, 3); - const bgcolor = p.color(...hsl2rgb(...opts.bgcolor!)); - const color = p.color(...hsl2rgb(...opts.color!)); - const spotcolor = p.color(...hsl2rgb(...opts.spotcolor!)); - - for (let i = 0; i < imageData.length; i++) { - const row = Math.floor(i / width); - const col = i % width; - if (imageData[i]) { - const pngColor = imageData[i] == 1 ? color : spotcolor; - fillRect( - p, - col * opts.scale!, - row * opts.scale!, - opts.scale!, - opts.scale!, - pngColor, - ); - } - } - - const buf = Buffer.from(p.getBase64(), 'base64'); - return buf; -} - -export default render; diff --git a/src/utils/effigy/hsl2rgb.ts b/src/utils/effigy/hsl2rgb.ts deleted file mode 100644 index 0ec5719b1..000000000 --- a/src/utils/effigy/hsl2rgb.ts +++ /dev/null @@ -1,53 +0,0 @@ -// https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion -/** - * Converts an HSL color value to RGB. Conversion formula - * adapted from http://en.wikipedia.org/wiki/HSL_color_space. - * Assumes h, s, and l are contained in the set [0, 1] and - * returns r, g, and b in the set [0, 255]. - * - * @param {number} h The hue - * @param {number} s The saturation - * @param {number} l The lightness - * @return {number[]} The RGB representation - */ - -function hue2rgb(p: number, q: number, t: number): number { - if (t < 0) { - t += 1; - } - if (t > 1) { - t -= 1; - } - if (t < 1 / 6) { - return p + (q - p) * 6 * t; - } - if (t < 1 / 2) { - return q; - } - if (t < 2 / 3) { - return p + (q - p) * (2 / 3 - t) * 6; - } - return p; -} - -function hsl2rgb( - h: number, - s: number, - l: number, -): [number, number, number, number] { - let r: number, g: number, b: number; - - if (s === 0) { - r = g = b = l; // achromatic - } else { - const q = l < 0.5 ? l * (1 + s) : l + s - l * s; - const p = 2 * l - q; - r = hue2rgb(p, q, h + 1 / 3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1 / 3); - } - - return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), 255]; -} - -export default hsl2rgb; diff --git a/src/utils/effigy/pnglib.ts b/src/utils/effigy/pnglib.ts deleted file mode 100644 index c0f08d783..000000000 --- a/src/utils/effigy/pnglib.ts +++ /dev/null @@ -1,251 +0,0 @@ -/** - * A handy class to calculate color values. - * - * @version 1.0 - * @author Robert Eisele - * @copyright Copyright (c) 2010, Robert Eisele - * @link http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/ - * @license http://www.opensource.org/licenses/bsd-license.php BSD License - * - */ - -// Modified by George Chan - -// Further modified by Will O'B <@wbobeirne> to make it -// UglifyJS and "use strict"; friendly - -class PNGlib { - width: number; - height: number; - depth: number; - pix_size: number; - data_size: number; - ihdr_offs: number; - ihdr_size: number; - plte_offs: number; - plte_size: number; - trns_offs: number; - trns_size: number; - idat_offs: number; - idat_size: number; - iend_offs: number; - iend_size: number; - buffer_size: number; - buffer: string[]; - palette: { [key: number]: string }; - pindex: number; - _crc32: number[]; - - constructor(width: number, height: number, depth: number) { - this.width = width; - this.height = height; - this.depth = depth; - - this.pix_size = height * (width + 1); - this.data_size = - 2 + this.pix_size + 5 * Math.floor((0xfffe + this.pix_size) / 0xffff) + 4; - - this.ihdr_offs = 0; - this.ihdr_size = 4 + 4 + 13 + 4; - this.plte_offs = this.ihdr_offs + this.ihdr_size; - this.plte_size = 4 + 4 + 3 * depth + 4; - this.trns_offs = this.plte_offs + this.plte_size; - this.trns_size = 4 + 4 + depth + 4; - this.idat_offs = this.trns_offs + this.trns_size; - this.idat_size = 4 + 4 + this.data_size + 4; - this.iend_offs = this.idat_offs + this.idat_size; - this.iend_size = 4 + 4 + 4; - this.buffer_size = this.iend_offs + this.iend_size; - - this.buffer = new Array(this.buffer_size).fill('\x00'); - this.palette = {}; - this.pindex = 0; - this._crc32 = new Array(256); - - this.initBuffer(); - this.initCRC32(); - } - - private write(buffer: string[], offs: number, ...args: string[]): void { - for (const arg of args) { - for (const char of arg) { - buffer[offs++] = char; - } - } - } - - private byte2(w: number): string { - return String.fromCharCode((w >> 8) & 255, w & 255); - } - - private byte4(w: number): string { - return String.fromCharCode( - (w >> 24) & 255, - (w >> 16) & 255, - (w >> 8) & 255, - w & 255, - ); - } - - private byte2lsb(w: number): string { - return String.fromCharCode(w & 255, (w >> 8) & 255); - } - - private initBuffer(): void { - this.write( - this.buffer, - this.ihdr_offs, - this.byte4(this.ihdr_size - 12), - 'IHDR', - this.byte4(this.width), - this.byte4(this.height), - '\x08\x03', - ); - this.write( - this.buffer, - this.plte_offs, - this.byte4(this.plte_size - 12), - 'PLTE', - ); - this.write( - this.buffer, - this.trns_offs, - this.byte4(this.trns_size - 12), - 'tRNS', - ); - this.write( - this.buffer, - this.idat_offs, - this.byte4(this.idat_size - 12), - 'IDAT', - ); - this.write( - this.buffer, - this.iend_offs, - this.byte4(this.iend_size - 12), - 'IEND', - ); - - const header = ((8 + (7 << 4)) << 8) | (3 << 6); - const adjustedHeader = header + 31 - (header % 31); - this.write(this.buffer, this.idat_offs + 8, this.byte2(adjustedHeader)); - - for (let i = 0; (i << 16) - 1 < this.pix_size; i++) { - const size = - i + 0xffff < this.pix_size ? 0xffff : this.pix_size - (i << 16) - i; - const bits = i + 0xffff < this.pix_size ? '\x00' : '\x01'; - this.write( - this.buffer, - this.idat_offs + 8 + 2 + (i << 16) + (i << 2), - bits, - this.byte2lsb(size), - this.byte2lsb(~size), - ); - } - } - - private initCRC32(): void { - for (let i = 0; i < 256; i++) { - let c = i; - for (let j = 0; j < 8; j++) { - c = - c & 1 ? -306674912 ^ ((c >> 1) & 0x7fffffff) : (c >> 1) & 0x7fffffff; - } - this._crc32[i] = c; - } - } - - index(x: number, y: number): number { - const i = y * (this.width + 1) + x + 1; - const j = this.idat_offs + 8 + 2 + 5 * Math.floor(i / 0xffff + 1) + i; - return j; - } - - color(red: number, green: number, blue: number, alpha: number = 255): string { - const color = (((((alpha << 8) | red) << 8) | green) << 8) | blue; - - if (this.palette[color] === undefined) { - if (this.pindex === this.depth) { - return '\x00'; - } - - const ndx = this.plte_offs + 8 + 3 * this.pindex; - this.buffer[ndx + 0] = String.fromCharCode(red); - this.buffer[ndx + 1] = String.fromCharCode(green); - this.buffer[ndx + 2] = String.fromCharCode(blue); - this.buffer[this.trns_offs + 8 + this.pindex] = - String.fromCharCode(alpha); - - this.palette[color] = String.fromCharCode(this.pindex++); - } - return this.palette[color]; - } - - getBase64(): string { - const s = this.getDump(); - const ch = - 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='; - let r = ''; - let i = 0; - - while (i < s.length) { - const c1 = s.charCodeAt(i); - const e1 = c1 >> 2; - const c2 = s.charCodeAt(i + 1); - const e2 = ((c1 & 3) << 4) | (c2 >> 4); - const c3 = s.charCodeAt(i + 2); - const e3 = s.length < i + 2 ? 64 : ((c2 & 0xf) << 2) | (c3 >> 6); - const e4 = s.length < i + 3 ? 64 : c3 & 0x3f; - r += ch.charAt(e1) + ch.charAt(e2) + ch.charAt(e3) + ch.charAt(e4); - i += 3; - } - return r; - } - - getDump(): string { - const BASE = 65521; - const NMAX = 5552; - let s1 = 1; - let s2 = 0; - let n = NMAX; - - for (let y = 0; y < this.height; y++) { - for (let x = -1; x < this.width; x++) { - s1 += this.buffer[this.index(x, y)].charCodeAt(0); - s2 += s1; - if (--n === 0) { - s1 %= BASE; - s2 %= BASE; - n = NMAX; - } - } - } - s1 %= BASE; - s2 %= BASE; - this.write( - this.buffer, - this.idat_offs + this.idat_size - 8, - this.byte4((s2 << 16) | s1), - ); - - const crc32 = (png: string[], offs: number, size: number) => { - let crc = -1; - for (let i = 4; i < size - 4; i++) { - crc = - this._crc32[(crc ^ png[offs + i].charCodeAt(0)) & 0xff] ^ - ((crc >> 8) & 0x00ffffff); - } - this.write(png, offs + size - 4, this.byte4(crc ^ -1)); - }; - - crc32(this.buffer, this.ihdr_offs, this.ihdr_size); - crc32(this.buffer, this.plte_offs, this.plte_size); - crc32(this.buffer, this.trns_offs, this.trns_size); - crc32(this.buffer, this.idat_offs, this.idat_size); - crc32(this.buffer, this.iend_offs, this.iend_size); - - return '\x89PNG\r\n\x1a\n' + this.buffer.join(''); - } -} - -export default PNGlib; diff --git a/src/utils/getAddressLabel.ts b/src/utils/getAddressLabel.ts index dbd290aef..af92be7e3 100644 --- a/src/utils/getAddressLabel.ts +++ b/src/utils/getAddressLabel.ts @@ -1,5 +1,6 @@ import type { GetEnsNameReturnType } from 'wagmi/actions'; import { walletDigest } from './walletDigest'; +import { DEFAULT_WALLET_ADDRESS } from '@/const/urls'; interface getAddressLabelProps { isSuccess: boolean; ensName?: GetEnsNameReturnType; @@ -18,6 +19,6 @@ export const getAddressLabel = ({ } else if (address) { return walletDigest(address); } else { - return walletDigest('0x0000000000000000000000000000000000000000'); + return walletDigest(DEFAULT_WALLET_ADDRESS); } }; diff --git a/yarn.lock b/yarn.lock index bb9fbbf80..a05d23d2a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6879,6 +6879,13 @@ __metadata: languageName: node linkType: hard +"blo@npm:^1.2.0": + version: 1.2.0 + resolution: "blo@npm:1.2.0" + checksum: 10/17ec61e41b201bbba8ab3c874cad94696604b6ac4029de5050c92ea5817dff6814d8642b9b2948e0d6804194437b751fa2755652201f26fa5d606913c489b757 + languageName: node + linkType: hard + "blob-to-buffer@npm:^1.2.8": version: 1.2.9 resolution: "blob-to-buffer@npm:1.2.9" @@ -10310,6 +10317,7 @@ __metadata: "@widgetbot/react-embed": "npm:^1.9.0" accept-language: "npm:^3.0.20" axios: "npm:^1.7.7" + blo: "npm:^1.2.0" dotenv-cli: "npm:^7.4.2" eslint: "npm:8.57.1" eslint-config-prettier: "npm:^9.1.0" From 0fb3bec93e385bdfc7e681d774eacba4f2c2bbea Mon Sep 17 00:00:00 2001 From: dennyscode <43956540+dennyscode@users.noreply.github.com> Date: Mon, 2 Dec 2024 14:14:33 +0100 Subject: [PATCH 4/5] chore: remove new label on multiportfolio and fix z indexes (#1559) --- src/components/Navbar/Navbar.style.tsx | 2 +- src/components/Navbar/WalletButton.tsx | 9 --------- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/src/components/Navbar/Navbar.style.tsx b/src/components/Navbar/Navbar.style.tsx index b5925a26a..b8fbbf61e 100644 --- a/src/components/Navbar/Navbar.style.tsx +++ b/src/components/Navbar/Navbar.style.tsx @@ -20,7 +20,7 @@ export const NavbarContainer = styled(AppBar)<{ sticky?: boolean }>( alignItems: 'center', height: HeaderHeight.XS, padding: theme.spacing(1, 2), - zIndex: 1500, + zIndex: 1300, [theme.breakpoints.up('sm' as Breakpoint)]: { height: HeaderHeight.SM, padding: theme.spacing(2, 3), diff --git a/src/components/Navbar/WalletButton.tsx b/src/components/Navbar/WalletButton.tsx index 4bfb6f305..98bfc85c9 100644 --- a/src/components/Navbar/WalletButton.tsx +++ b/src/components/Navbar/WalletButton.tsx @@ -21,7 +21,6 @@ import { import { useLoyaltyPass } from 'src/hooks/useLoyaltyPass'; import { JUMPER_WASH_PATH } from '../../const/urls'; import { XPIcon } from '../illustrations/XPIcon'; -import { PromoLabel } from '../PromoLabel.style'; import { ConnectButton, ConnectButtonLabel, @@ -129,15 +128,7 @@ export const WalletButtons = () => { - {/* when deleting PromoLabel, also clear related sx-styles in parent above */} - - {isSuccess && activeChain ? ( Date: Mon, 2 Dec 2024 16:34:19 +0000 Subject: [PATCH 5/5] Fix: force redeploy (#1561) --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 24e8aec02..30c77d238 100644 --- a/README.md +++ b/README.md @@ -64,3 +64,5 @@ Register on Crowdin and you can start translating the project into your preferre Your contributions will help make our project accessible to a wider audience around the world. Thank you for your support! + +