Staging Release

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!
+
+

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',

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",

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}
             />
-            {/*            <img
-              style={{ borderRadius: '50%' }}
-              src={`https://effigy.im/a/${walletAddress}.png`}
-            />*/}
           </div>
           <div
             style={{

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}
         />
       </div>
     ),

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}
         />

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'}`,
           }),

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 }}
           />
           <CardContent
             cardContent={
@@ -102,18 +101,13 @@ const WidgetExecutionImage = ({
                 : null
             }
             showSkeletons={true}
-            sx={{ padding: '0px 16px', marginTop: 18 }}
+            sx={{ padding: '0px 16px', marginTop: 4 }}
           />
           <FieldSkeleton
             width={164}
             height={12}
             sx={{ marginTop: -12, marginLeft: 14 }}
           />
-          <ButtonLabel
-            buttonLabel={isSwap ? 'Start swapping' : 'Start bridging'}
-            theme={theme}
-            sx={{ marginTop: 53 }}
-          />
         </div>
       </div>
     </div>

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)) /

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),

src/components/Navbar/WalletButton.tsx

@@ -13,12 +13,14 @@ 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';
-import { PromoLabel } from '../PromoLabel.style';
 import {
   ConnectButton,
   ConnectButtonLabel,
@@ -30,6 +32,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,17 +47,23 @@ 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();
 
   const { openWalletMenu: _openWalletMenu, setWalletMenuState } = useMenuStore(
     (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 +104,7 @@ export const WalletButtons = () => {
               >
                 <ImageWalletMenuButton
                   src={imgLink}
-                  alt="Effigy Wallet Icon"
+                  alt={`${account?.address} wallet Icon`}
                   width={32}
                   height={32}
                   priority={false}
@@ -114,15 +128,7 @@ export const WalletButtons = () => {
           <WalletMenuButton
             id="wallet-digest-button"
             onClick={handleWalletMenuClick}
-            sx={{
-              // delete with PromoLabel
-              overflow: 'visible',
-              position: 'relative',
-            }}
           >
-            {/* when deleting PromoLabel, also clear related sx-styles in parent above */}
-            <PromoLabel component="span" variant="bodyXSmallStrong" />
-
             {isSuccess && activeChain ? (
               <WalletMgmtBadge
                 overlap="circular"
@@ -143,7 +149,7 @@ export const WalletButtons = () => {
               </WalletMgmtBadge>
             ) : null}
             <WalletLabel variant={'bodyMediumStrong'}>
-              {_walletDigest}
+              {addressLabel ?? walletDigest(account?.address)}
             </WalletLabel>
           </WalletMenuButton>
         </Stack>