From 167f76b4b3c4440c01ab6382a848a750f54dccd3 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Tue, 5 May 2026 13:25:47 +0530 Subject: [PATCH 1/2] Added icons and logos for some major tokens --- src/blocks/illustrations/components/PUSD.tsx | 54 ++++ src/blocks/illustrations/components/StETH.tsx | 263 ++++++++++++++++++ src/blocks/illustrations/components/USDC.tsx | 45 +++ src/blocks/illustrations/index.ts | 6 + src/common/Common.constants.tsx | 31 ++- src/common/components/TokenLogoComponent.tsx | 7 +- .../components/ChainSelector.tsx | 4 +- .../components/dashboard/WalletProfile.tsx | 2 - 8 files changed, 403 insertions(+), 9 deletions(-) create mode 100644 src/blocks/illustrations/components/PUSD.tsx create mode 100644 src/blocks/illustrations/components/StETH.tsx create mode 100644 src/blocks/illustrations/components/USDC.tsx diff --git a/src/blocks/illustrations/components/PUSD.tsx b/src/blocks/illustrations/components/PUSD.tsx new file mode 100644 index 0000000..10fa5c6 --- /dev/null +++ b/src/blocks/illustrations/components/PUSD.tsx @@ -0,0 +1,54 @@ +import { FC } from "react"; +import { IllustrationWrapper } from "../IllustrationWrapper"; +import { IllustrationProps } from "../Illustrations.types"; + +const PUSD: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + + + + + + + + + + + + + } + {...restProps} + /> + ); +}; + +export default PUSD; diff --git a/src/blocks/illustrations/components/StETH.tsx b/src/blocks/illustrations/components/StETH.tsx new file mode 100644 index 0000000..26666f9 --- /dev/null +++ b/src/blocks/illustrations/components/StETH.tsx @@ -0,0 +1,263 @@ +import { FC } from "react"; +import { IllustrationWrapper } from "../IllustrationWrapper"; +import { IllustrationProps } from "../Illustrations.types"; + +const StETH: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } + {...restProps} + /> + ); +}; + +export default StETH; diff --git a/src/blocks/illustrations/components/USDC.tsx b/src/blocks/illustrations/components/USDC.tsx new file mode 100644 index 0000000..4fd61ec --- /dev/null +++ b/src/blocks/illustrations/components/USDC.tsx @@ -0,0 +1,45 @@ +import { FC } from "react"; +import { IllustrationWrapper } from "../IllustrationWrapper"; +import { IllustrationProps } from "../Illustrations.types"; + +const USDC: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + + + + + + + + + + } + {...restProps} + /> + ); +}; + +export default USDC; diff --git a/src/blocks/illustrations/index.ts b/src/blocks/illustrations/index.ts index b39ddcf..5335630 100644 --- a/src/blocks/illustrations/index.ts +++ b/src/blocks/illustrations/index.ts @@ -129,6 +129,12 @@ export { default as PolygonZK } from './components/PolygonZK'; export { default as USDT } from './components/USDT'; +export { default as USDC } from './components/USDC'; + +export { default as PUSD } from './components/PUSD'; + +export { default as StETH } from './components/StETH'; + export { default as WEthereum } from './components/WEthereum'; export { default as YellowBonusActivitySubscribers } from './components/YellowBonusActivitySubscribers'; diff --git a/src/common/Common.constants.tsx b/src/common/Common.constants.tsx index 9266d13..28a38e4 100644 --- a/src/common/Common.constants.tsx +++ b/src/common/Common.constants.tsx @@ -47,6 +47,9 @@ import { Zerion, Rabby, USDT, + USDC, + PUSD, + StETH, WEthereum, PushMonotone, BaseMonotone, @@ -80,14 +83,14 @@ export const walletCategories: WalletCategoriesType[] = [ wallet: "base", label: "Connect Base Wallet", icon: , - isMobile: false, + isMobile: true, }, { chain: ChainType.ARBITRUM, wallet: "arbitrum", label: "Connect Arbitrum Wallet", icon: , - isMobile: false, + isMobile: true, }, { chain: ChainType.BINANCE, @@ -164,10 +167,34 @@ export const TOKEN_LOGO = { pETH: Ethereum, pPOL: Polygon, PC: PushChainLogo, + WPC: PushChainLogo, USDT: USDT, WETH: WEthereum, + pBNB: BNB, + pSOL: Solana, + USDC, + PUSD, + stETH: StETH, }; +/** Resolves symbols like `pETH.base` or `USDT.eth` to a `TOKEN_LOGO` key. */ +export function resolveTokenLogoKey( + tokenSymbol: string +): keyof typeof TOKEN_LOGO | undefined { + let candidate = tokenSymbol; + while (candidate) { + if (candidate in TOKEN_LOGO) { + return candidate as keyof typeof TOKEN_LOGO; + } + const lastDot = candidate.lastIndexOf("."); + if (lastDot <= 0) { + break; + } + candidate = candidate.slice(0, lastDot); + } + return undefined; +} + export const WALLETS_LOGO = { coinbasesolana: , backpacksol: , diff --git a/src/common/components/TokenLogoComponent.tsx b/src/common/components/TokenLogoComponent.tsx index 3a7b2b2..25c558f 100644 --- a/src/common/components/TokenLogoComponent.tsx +++ b/src/common/components/TokenLogoComponent.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import { TOKEN_LOGO } from '../Common.constants'; +import { resolveTokenLogoKey, TOKEN_LOGO } from '../Common.constants'; import { Box, PushChainLogo, Text } from 'blocks'; import { css } from 'styled-components'; const TokenLogoComponent = ({ tokenSymbol }: { tokenSymbol: string }) => { - const IconComponent = TOKEN_LOGO[tokenSymbol]; + const logoKey = resolveTokenLogoKey(tokenSymbol); + const IconComponent = logoKey ? TOKEN_LOGO[logoKey] : undefined; if (IconComponent) { return ( { overflow="hidden" alignSelf="center" > - ; + = ({ selectedWalletCategory }) => { const isMobile = useDeviceWidthCheck(parseInt(deviceSizes.laptop)); const wallets = walletRegistry.getProvidersByChain(selectedWalletCategory.chain); - const filteredWallets = isMobile && selectedWalletCategory.chain === ChainType.ETHEREUM + const filteredWallets = isMobile && wallets.some((wallet) => wallet.name === "MetaMask") ? wallets.filter((wallet) => wallet.name === "MetaMask") : wallets; diff --git a/src/modules/wallet/components/dashboard/WalletProfile.tsx b/src/modules/wallet/components/dashboard/WalletProfile.tsx index 697e8c0..487abd1 100644 --- a/src/modules/wallet/components/dashboard/WalletProfile.tsx +++ b/src/modules/wallet/components/dashboard/WalletProfile.tsx @@ -49,8 +49,6 @@ const WalletProfile: FC = ({ walletAddress }) => { isLoading: isBalanceLoading, } = useWalletOperations(walletAddress); - console.log("Balance", balance); - useEffect(() => { const el = ref.current; From cc1883f39f7e58c62d6fbcbb38a5cf990a36c82a Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Fri, 8 May 2026 16:44:33 +0530 Subject: [PATCH 2/2] Phantom wallet fix for mobile viewport --- src/common/Common.constants.tsx | 2 +- src/common/components/NotFoundContent.tsx | 14 +++++++++++--- src/hooks/useConnectExternalWallet.tsx | 19 ++++++++++++++++++- .../components/ChainSelector.tsx | 9 +++++++-- 4 files changed, 37 insertions(+), 7 deletions(-) diff --git a/src/common/Common.constants.tsx b/src/common/Common.constants.tsx index 28a38e4..22fddf5 100644 --- a/src/common/Common.constants.tsx +++ b/src/common/Common.constants.tsx @@ -76,7 +76,7 @@ export const walletCategories: WalletCategoriesType[] = [ wallet: "solana", label: "Connect Solana Wallet", icon: , - isMobile: false, + isMobile: true, }, { chain: ChainType.BASE, diff --git a/src/common/components/NotFoundContent.tsx b/src/common/components/NotFoundContent.tsx index e2148e6..0ac2fa0 100644 --- a/src/common/components/NotFoundContent.tsx +++ b/src/common/components/NotFoundContent.tsx @@ -18,6 +18,13 @@ const WALLETS_LINKS = { rabby: 'https://rabby.io/', }; +const WALLETS_LABELS = { + phantom: 'Phantom', + metamask: 'MetaMask', + zerion: 'Zerion', + rabby: 'Rabby', +}; + export type NotFoundContentProps = { providerName: 'metamask' | 'zerion' | 'rabby' | 'phantom'; onClose?: () => void; @@ -28,6 +35,7 @@ const NotFoundContent: FC = ({ onClose }) => { const Logo = WALLETS_LOGO[providerName]; + const walletLabel = WALLETS_LABELS[providerName]; return ( = ({ textAlign='center' textTransform="capitalize" > - {providerName} Wallet not Found + {walletLabel} Wallet not Found - To connect to Zerion, install and open the app. Confirm the connection to proceed. + To connect to {walletLabel}, install and open the app. Confirm the connection to proceed. = ({ - Install {providerName} Wallet + Install {walletLabel} Wallet diff --git a/src/hooks/useConnectExternalWallet.tsx b/src/hooks/useConnectExternalWallet.tsx index 98726eb..e0fa078 100644 --- a/src/hooks/useConnectExternalWallet.tsx +++ b/src/hooks/useConnectExternalWallet.tsx @@ -5,6 +5,16 @@ import { APP_ROUTES } from "../constants"; import { getAppParamValue, WALLET_TO_APP_ACTION } from "common"; import { ChainType, IWalletProvider, ExternalWalletType } from "../types/wallet.types"; +const isMobileBrowser = () => /Android|iPhone|iPad|iPod/i.test(navigator.userAgent); + +const openInPhantomBrowser = () => { + const currentUrl = window.location.href; + const refUrl = window.location.origin; + const phantomBrowseUrl = `https://phantom.app/ul/browse/${encodeURIComponent(currentUrl)}?ref=${encodeURIComponent(refUrl)}`; + + window.location.assign(phantomBrowseUrl); +}; + export const useConnectExternalWallet = () => { const { connect, isWalletInstalled } = useExternalWallet(); const { dispatch } = useGlobalState(); @@ -13,7 +23,14 @@ export const useConnectExternalWallet = () => { const connectWithProvider = async (provider: IWalletProvider, chainType?: ChainType) => { const installed = await isWalletInstalled(provider); - if (!installed) return { ok: false, reason: "not_installed" as const }; + if (!installed) { + if (!isOpenedInIframe && provider.name === "Phantom" && isMobileBrowser()) { + openInPhantomBrowser(); + return { ok: true as const }; + } + + return { ok: false, reason: "not_installed" as const }; + } if (isOpenedInIframe) { window.parent?.postMessage( diff --git a/src/modules/Authentication/components/ChainSelector.tsx b/src/modules/Authentication/components/ChainSelector.tsx index cd152d3..d952135 100644 --- a/src/modules/Authentication/components/ChainSelector.tsx +++ b/src/modules/Authentication/components/ChainSelector.tsx @@ -5,6 +5,8 @@ import WalletSelector from "./WalletSelector"; import { Box, deviceSizes, Text } from "blocks"; import { useDeviceWidthCheck } from "common"; +const MOBILE_WALLET_OPTIONS = ["MetaMask", "Phantom"]; + interface ChainWalletSelectorProps { selectedWalletCategory: WalletCategoriesType; } @@ -12,8 +14,11 @@ interface ChainWalletSelectorProps { const ChainSelector: FC = ({ selectedWalletCategory }) => { const isMobile = useDeviceWidthCheck(parseInt(deviceSizes.laptop)); const wallets = walletRegistry.getProvidersByChain(selectedWalletCategory.chain); - const filteredWallets = isMobile && wallets.some((wallet) => wallet.name === "MetaMask") - ? wallets.filter((wallet) => wallet.name === "MetaMask") + const hasMobileWalletOptions = wallets.some((wallet) => + MOBILE_WALLET_OPTIONS.includes(wallet.name) + ); + const filteredWallets = isMobile && hasMobileWalletOptions + ? wallets.filter((wallet) => MOBILE_WALLET_OPTIONS.includes(wallet.name)) : wallets; if (filteredWallets.length === 0) {