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..22fddf5 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, @@ -73,21 +76,21 @@ export const walletCategories: WalletCategoriesType[] = [ wallet: "solana", label: "Connect Solana Wallet", icon: , - isMobile: false, + isMobile: true, }, { chain: ChainType.BASE, 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/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/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" > - ; + /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 21fb6b4..d952135 100644 --- a/src/modules/Authentication/components/ChainSelector.tsx +++ b/src/modules/Authentication/components/ChainSelector.tsx @@ -1,10 +1,12 @@ import React, { FC } from "react"; -import { ChainType, WalletCategoriesType } from "../../../types/wallet.types"; +import { WalletCategoriesType } from "../../../types/wallet.types"; import { walletRegistry } from "../../../providers/WalletProviderRegistry"; 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 && selectedWalletCategory.chain === ChainType.ETHEREUM - ? 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) { 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;