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)}>
-
-
- );
-};
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 (
{
+ 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!
+
+