diff --git a/packages/app-extension/src/components/Unlocked/Approvals/ApproveMessage.tsx b/packages/app-extension/src/components/Unlocked/Approvals/ApproveMessage.tsx index c2ffd7079..86b10b34d 100644 --- a/packages/app-extension/src/components/Unlocked/Approvals/ApproveMessage.tsx +++ b/packages/app-extension/src/components/Unlocked/Approvals/ApproveMessage.tsx @@ -1,5 +1,5 @@ import { isKeyCold } from "@coral-xyz/recoil"; -import { styles, useCustomTheme } from "@coral-xyz/themes"; +import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes"; import { Typography } from "@mui/material"; import * as anchor from "@project-serum/anchor"; import { useRecoilValue } from "recoil"; @@ -9,7 +9,7 @@ import { TextField } from "../../../plugin/Component"; import { Cold } from "./ApproveTransaction"; import { WithApproval } from "."; -const useStyles = styles((theme) => ({ +const useStyles = makeStyles((theme) => ({ title: { fontWeight: 500, fontSize: "18px", diff --git a/packages/app-extension/src/components/Unlocked/Approvals/ApproveTransaction.tsx b/packages/app-extension/src/components/Unlocked/Approvals/ApproveTransaction.tsx index a2948431f..0b4018701 100644 --- a/packages/app-extension/src/components/Unlocked/Approvals/ApproveTransaction.tsx +++ b/packages/app-extension/src/components/Unlocked/Approvals/ApproveTransaction.tsx @@ -5,7 +5,7 @@ import { useTransactionData, useWalletBlockchain, } from "@coral-xyz/recoil"; -import { styles } from "@coral-xyz/themes"; +import { styles as makeStyles } from "@coral-xyz/themes"; import { Block as BlockIcon } from "@mui/icons-material"; import { Typography } from "@mui/material"; import { BigNumber, ethers } from "ethers"; @@ -16,7 +16,7 @@ import { WithApproval } from "../../Unlocked/Approvals"; const { Zero } = ethers.constants; -const useStyles = styles((theme) => ({ +const useStyles = makeStyles((theme) => ({ title: { fontWeight: 500, fontSize: "18px", @@ -37,11 +37,6 @@ const useStyles = styles((theme) => ({ textAlign: "center", marginTop: "8px", }, - link: { - cursor: "pointer", - color: theme.custom.colors.secondary, - textDecoration: "underline", - }, negative: { color: theme.custom.colors.negative, }, diff --git a/packages/app-extension/src/components/Unlocked/ApproveTransactionRequest.tsx b/packages/app-extension/src/components/Unlocked/ApproveTransactionRequest.tsx index 0c154c9a2..622814203 100644 --- a/packages/app-extension/src/components/Unlocked/ApproveTransactionRequest.tsx +++ b/packages/app-extension/src/components/Unlocked/ApproveTransactionRequest.tsx @@ -30,7 +30,7 @@ import { useTransactionData, useTransactionRequest, } from "@coral-xyz/recoil"; -import { styles, useCustomTheme } from "@coral-xyz/themes"; +import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes"; import { Typography } from "@mui/material"; import * as anchor from "@project-serum/anchor"; import type { ConfirmOptions, SendOptions } from "@solana/web3.js"; @@ -47,24 +47,7 @@ import { ErrorTransaction } from "./XnftPopovers/ErrorTransaction"; import { Sending } from "./XnftPopovers/Sending"; import { Success } from "./XnftPopovers/Success"; -const useStyles = styles((theme) => ({ - confirmRow: { - display: "flex", - justifyContent: "space-between", - marginBottom: "8px", - }, - confirmRowLabelLeft: { - fontSize: "12px", - lineHeight: "16px", - fontWeight: 500, - color: theme.custom.colors.secondary, - }, - confirmRowLabelRight: { - fontSize: "12px", - lineHeight: "16px", - fontWeight: 500, - color: theme.custom.colors.fontColor, - }, +const useStyles = makeStyles((theme) => ({ approveTableRoot: { backgroundColor: `${theme.custom.colors.approveTransactionTableBackground} !important`, "&:hover": { diff --git a/packages/app-extension/src/components/Unlocked/Balances/BalanceSummaryWidget.tsx b/packages/app-extension/src/components/Unlocked/Balances/BalanceSummaryWidget.tsx index 799d150e8..ad3f0c2b1 100644 --- a/packages/app-extension/src/components/Unlocked/Balances/BalanceSummaryWidget.tsx +++ b/packages/app-extension/src/components/Unlocked/Balances/BalanceSummaryWidget.tsx @@ -3,19 +3,10 @@ import { totalBalance as totalBalanceSelector, useLoader, } from "@coral-xyz/recoil"; -import { HOVER_OPACITY, styles, useCustomTheme } from "@coral-xyz/themes"; +import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes"; import { Skeleton, Typography } from "@mui/material"; -const useStyles = styles((theme) => ({ - button: { - color: "#fff", - "&:hover": { - opacity: 1, - }, - "&:hover p": { - opacity: HOVER_OPACITY, - }, - }, +const useStyles = makeStyles(() => ({ balancesHeaderContainer: { paddingLeft: "24px", paddingRight: "24px", @@ -23,27 +14,12 @@ const useStyles = styles((theme) => ({ width: "100%", borderRadius: "12px", }, - headerLabel: { - fontSize: "16px", - fontWeight: 500, - lineHeight: "24px", - }, totalBalance: { fontWeight: 600, fontSize: "40px", lineHeight: "36px", color: "inherit", }, - positive: { - color: `${theme.custom.colors.positive} !important`, - fontSize: "12px", - lineHeight: "24px", - }, - negative: { - color: theme.custom.colors.negative, - fontSize: "12px", - lineHeight: "24px", - }, })); export function BalanceSummaryWidget() { diff --git a/packages/app-extension/src/components/Unlocked/Balances/Balances.tsx b/packages/app-extension/src/components/Unlocked/Balances/Balances.tsx index 3a79eb013..f0a8c372e 100644 --- a/packages/app-extension/src/components/Unlocked/Balances/Balances.tsx +++ b/packages/app-extension/src/components/Unlocked/Balances/Balances.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import type { Blockchain } from "@coral-xyz/common"; import { formatUSD, proxyImageUrl, toTitleCase } from "@coral-xyz/common"; -import { isAggregateWallets, useBlockchainLogo } from "@coral-xyz/recoil"; +import { getBlockchainLogo, isAggregateWallets } from "@coral-xyz/recoil"; import { styles, useCustomTheme } from "@coral-xyz/themes"; import { ExpandLess, ExpandMore } from "@mui/icons-material"; import { @@ -281,7 +281,7 @@ export function _BalancesTableHead({ const classes = useStyles(); const theme = useCustomTheme(); const title = toTitleCase(blockchain); - const iconUrl = useBlockchainLogo(blockchain); + const iconUrl = getBlockchainLogo(blockchain); const _isAggregateWallets = useRecoilValue(isAggregateWallets); return (
({ - recentActivityLabel: { - color: theme.custom.colors.fontColor, - fontWeight: 500, - fontSize: "14px", - lineHeight: "24px", - }, - allWalletsLabel: { - fontWeight: 500, - fontSize: "12px", - color: theme.custom.colors.secondary, - }, - noRecentActivityLabel: { - fontWeight: 500, - fontSize: "16px", - padding: "16px", - textAlign: "center", - color: theme.custom.colors.secondary, - }, +const useStyles = makeStyles((theme) => ({ recentActivityListItemIconContainer: { width: "44px", height: "44px", @@ -265,6 +247,7 @@ export function _RecentActivityList({ > {transactions.map((tx: any, idx: number) => ( { window.open(explorerUrl(explorer!, transaction.signature, connectionUrl!)); }; diff --git a/packages/app-extension/src/components/Unlocked/Balances/TokensWidget/Deposit.tsx b/packages/app-extension/src/components/Unlocked/Balances/TokensWidget/Deposit.tsx index 1d67cce98..a155a62b6 100644 --- a/packages/app-extension/src/components/Unlocked/Balances/TokensWidget/Deposit.tsx +++ b/packages/app-extension/src/components/Unlocked/Balances/TokensWidget/Deposit.tsx @@ -2,11 +2,11 @@ import { useState } from "react"; import { Blockchain } from "@coral-xyz/common"; import { SecondaryButton } from "@coral-xyz/react-common"; import { + getBlockchainLogo, useAllWalletsDisplayed, - useBlockchainLogo, useWalletName, } from "@coral-xyz/recoil"; -import { styles, useCustomTheme } from "@coral-xyz/themes"; +import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; import QrCodeIcon from "@mui/icons-material/QrCode"; import { IconButton, Modal, Typography } from "@mui/material"; @@ -73,19 +73,19 @@ function BlockchainDepositCard({ const [tooltipOpen, setTooltipOpen] = useState(false); const [tooltipOpenModal, setTooltipOpenModal] = useState(false); const [showQrCode, setShowQrCode] = useState(false); - const blockchainLogo = useBlockchainLogo(blockchain); + const blockchainLogo = getBlockchainLogo(blockchain); const blockchainDisplay = blockchain.slice(0, 1).toUpperCase() + blockchain.slice(1); - const onCopy = () => { + const onCopy = async () => { setTooltipOpen(true); setTimeout(() => setTooltipOpen(false), 1000); - navigator.clipboard.writeText(publicKey.toString()); + await navigator.clipboard.writeText(publicKey.toString()); }; - const onCopyModal = () => { + const onCopyModal = async () => { setTooltipOpenModal(true); setTimeout(() => setTooltipOpenModal(false), 1000); - navigator.clipboard.writeText(publicKey.toString()); + await navigator.clipboard.writeText(publicKey.toString()); }; const onQrCode = () => { setShowQrCode(true); @@ -305,7 +305,7 @@ function BlockchainDepositCard({ ); } -const useStyles = styles((theme) => ({ +const useStyles = makeStyles((theme) => ({ subtext: { width: "264px", marginLeft: "auto", @@ -350,17 +350,6 @@ const useStyles = styles((theme) => ({ cursor: "pointer", }, }, - copyButton: { - background: "transparent", - padding: 0, - }, - copyButtonLabel: { - color: theme.custom.colors.brandColor, - fontWeight: 500, - fontSize: "14px", - lineHeight: "24px", - textTransform: "none", - }, })); export function _Deposit({ @@ -380,10 +369,10 @@ export function _Deposit({ "..." + publicKey.toString().slice(publicKey.toString().length - 12); - const onCopy = () => { + const onCopy = async () => { setTooltipOpen(true); setTimeout(() => setTooltipOpen(false), 1000); - navigator.clipboard.writeText(publicKey.toString()); + await navigator.clipboard.writeText(publicKey.toString()); }; return ( @@ -456,8 +445,12 @@ export function _Deposit({
- {blockchain === Blockchain.SOLANA ? <>This address can only receive SOL and SPL tokens on Solana. : null} - {blockchain === Blockchain.ETHEREUM ? <>This address can only receive ETH and ERC20 tokens on Ethereum. : null} + {blockchain === Blockchain.SOLANA ? ( + <>This address can only receive SOL and SPL tokens on Solana. + ) : null} + {blockchain === Blockchain.ETHEREUM ? ( + <>This address can only receive ETH and ERC20 tokens on Ethereum. + ) : null}
diff --git a/packages/app-extension/src/components/Unlocked/Balances/TokensWidget/Send.tsx b/packages/app-extension/src/components/Unlocked/Balances/TokensWidget/Send.tsx index 6c5e847ed..79f5499be 100644 --- a/packages/app-extension/src/components/Unlocked/Balances/TokensWidget/Send.tsx +++ b/packages/app-extension/src/components/Unlocked/Balances/TokensWidget/Send.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import React, { type ChangeEvent, useEffect, useState } from "react"; import { StyleSheet, View } from "react-native"; import { @@ -41,7 +42,7 @@ import { useNavigation, useUser, } from "@coral-xyz/recoil"; -import { styles, useCustomTheme } from "@coral-xyz/themes"; +import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes"; import { Typography } from "@mui/material"; import { TldParser } from "@onsol/tldparser"; import type { Connection } from "@solana/web3.js"; @@ -59,7 +60,7 @@ import { SendEthereumConfirmationCard } from "./Ethereum"; import { SendSolanaConfirmationCard } from "./Solana"; import { WithHeaderButton } from "./Token"; -const useStyles = styles((theme) => ({ +const useStyles = makeStyles((theme) => ({ topImage: { width: 80, }, @@ -85,11 +86,6 @@ const useStyles = styles((theme) => ({ paddingTop: "24px", flex: 1, }, - inputContainer: { - paddingLeft: "12px", - paddingRight: "12px", - marginBottom: -10, - }, textRoot: { marginTop: "0 !important", marginBottom: "0 !important", @@ -97,34 +93,6 @@ const useStyles = styles((theme) => ({ backgroundColor: `${theme.custom.colors.nav} !important`, }, }, - bottomHalfLabel: { - fontWeight: 500, - color: theme.custom.colors.secondary, - fontSize: "12px", - lineHeight: "16px", - }, - confirmRow: { - display: "flex", - justifyContent: "space-between", - marginBottom: "8px", - }, - confirmRowLabelLeft: { - fontSize: "12px", - lineHeight: "16px", - fontWeight: 500, - color: theme.custom.colors.secondary, - }, - confirmRowLabelRight: { - fontSize: "12px", - lineHeight: "16px", - fontWeight: 500, - color: theme.custom.colors.fontColor, - }, - confirmTableListItem: { - "&:hover": { - opacity: 1, - }, - }, })); export function SendButton({ @@ -208,7 +176,7 @@ export function Send({ uuid?: string; }; }) { - const classes = useStyles() as any; + const classes = useStyles(); const { uuid } = useUser(); const nav = useNavigationEphemeral(); const { provider: solanaProvider } = useAnchorContext(); @@ -500,6 +468,7 @@ function SendV2({ token, maxAmount, setAmount, sendButton, to }: any) { const classes = useStyles(); const theme = useCustomTheme(); const isDarkMode = useDarkMode(); + // eslint-disable-next-line react/hook-use-state const [_amount, _setAmount] = useState(""); return ( diff --git a/packages/app-extension/src/components/Unlocked/Nfts/EntryONE.tsx b/packages/app-extension/src/components/Unlocked/Nfts/EntryONE.tsx index ccd32f145..7eb00d3ba 100644 --- a/packages/app-extension/src/components/Unlocked/Nfts/EntryONE.tsx +++ b/packages/app-extension/src/components/Unlocked/Nfts/EntryONE.tsx @@ -1,14 +1,13 @@ import { useLayoutEffect, useRef, useState } from "react"; import { isOneLive, useOpenPlugin } from "@coral-xyz/recoil"; -import { styles } from "@coral-xyz/themes"; -import { CollectionsTwoTone } from "@mui/icons-material"; +import { styles as makeStyles } from "@coral-xyz/themes"; import { Skeleton } from "@mui/material"; import Card from "@mui/material/Card"; import { useRecoilValue } from "recoil"; import type { AllWalletCollections } from "./NftTable"; -const useStyles = styles((theme) => ({ +const useStyles = makeStyles((theme) => ({ blockchainCard: { position: "relative", marginBottom: "12px", @@ -85,16 +84,17 @@ export default function EntryONE({ if (!ref.current) { return; } - if (ref.current.complete) { + const current = ref.current; + if (current.complete) { setImageLoaded(true); return; } - ref.current.onload = () => { + current.onload = () => { setImageLoaded(true); }; return () => { - if (ref.current) { - ref.current.onload = () => null; + if (current) { + current.onload = () => null; } }; }, []); diff --git a/packages/app-extension/src/components/Unlocked/Settings/Preferences/index.tsx b/packages/app-extension/src/components/Unlocked/Settings/Preferences/index.tsx index daffcb41e..cb51ed011 100644 --- a/packages/app-extension/src/components/Unlocked/Settings/Preferences/index.tsx +++ b/packages/app-extension/src/components/Unlocked/Settings/Preferences/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { useEffect, useState } from "react"; import { BACKPACK_FEATURE_AGGREGATE_WALLETS, @@ -8,8 +9,8 @@ import { UI_RPC_METHOD_SETTINGS_DEVELOPER_MODE_UPDATE, } from "@coral-xyz/common"; import { + getBlockchainLogo, useBackgroundClient, - useBlockchainLogo, useDarkMode, useDeveloperMode, useIsAggregateWallets, @@ -139,7 +140,7 @@ export function Preferences() { Solana: { onClick: () => nav.push("preferences-solana"), icon: () => { - const blockchainLogo = useBlockchainLogo(Blockchain.SOLANA); + const blockchainLogo = getBlockchainLogo(Blockchain.SOLANA); return ( nav.push("preferences-ethereum"), icon: () => { - const blockchainLogo = useBlockchainLogo(Blockchain.ETHEREUM); + const blockchainLogo = getBlockchainLogo(Blockchain.ETHEREUM); return ( ({ +const useStyles = makeStyles((theme) => ({ paperAnchorBottom: { boxShadow: "none", }, diff --git a/packages/app-extension/src/components/common/Layout/Drawer.tsx b/packages/app-extension/src/components/common/Layout/Drawer.tsx index 75820b4de..95e0bc9de 100644 --- a/packages/app-extension/src/components/common/Layout/Drawer.tsx +++ b/packages/app-extension/src/components/common/Layout/Drawer.tsx @@ -7,18 +7,13 @@ import React, { useContext, } from "react"; import { EXTENSION_HEIGHT } from "@coral-xyz/common"; -import { styles } from "@coral-xyz/themes"; +import { styles as makeStyles } from "@coral-xyz/themes"; import { Close } from "@mui/icons-material"; import { Button, Drawer, IconButton } from "@mui/material"; import { NAV_BAR_HEIGHT, NAV_BUTTON_WIDTH } from "./Nav"; -const useStyles = styles((theme) => ({ - withDrawer: { - height: "100%", - display: "flex", - flexDirection: "column", - }, +const useStyles = makeStyles((theme) => ({ withDrawerNoHeader: { height: EXTENSION_HEIGHT - NAV_BAR_HEIGHT, padding: "20px", @@ -197,13 +192,15 @@ export function WithDrawerNoHeader(props: any) { >
{children}
- {!props.skipFooter ? : null} + {!props.skipFooter ? ( + + ) : null}
); diff --git a/packages/app-extension/src/components/common/Layout/Tab.tsx b/packages/app-extension/src/components/common/Layout/Tab.tsx index 5d6bd7c09..e08ac64e3 100644 --- a/packages/app-extension/src/components/common/Layout/Tab.tsx +++ b/packages/app-extension/src/components/common/Layout/Tab.tsx @@ -16,17 +16,14 @@ import { GridIcon, ImageIcon, MessageBubbleIcon, - MessageBubbleUnreadIcon, useBreakpoints, } from "@coral-xyz/react-common"; import { useAuthenticatedUser, useBackgroundClient, - useMessageUnreadCount, useTab, - useUser, } from "@coral-xyz/recoil"; -import { styles, useCustomTheme } from "@coral-xyz/themes"; +import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes"; import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; import { Tab, Tabs } from "@mui/material"; import Badge from "@mui/material/Badge"; @@ -36,7 +33,7 @@ import { NotificationIconWithBadge } from "../NotificationIconWithBadge"; const TAB_HEIGHT = 64; -const useStyles = styles((theme) => ({ +const useStyles = makeStyles((theme) => ({ tabXs: { opacity: "1 !important", height: `${TAB_HEIGHT}px`, @@ -88,13 +85,6 @@ const useStyles = styles((theme) => ({ tabIndicator: { color: "none", }, - tabSelected: { - color: theme.custom.colors.brandColor, - }, - tabUnselected: {}, - tabButton: { - padding: 0, - }, activeTab: {}, })); diff --git a/packages/app-extension/src/components/common/TransactionData.tsx b/packages/app-extension/src/components/common/TransactionData.tsx index 05ed34d7d..bdf73f966 100644 --- a/packages/app-extension/src/components/common/TransactionData.tsx +++ b/packages/app-extension/src/components/common/TransactionData.tsx @@ -7,7 +7,11 @@ import { SmallInput, } from "@coral-xyz/react-common"; import { useDeveloperMode, useEthereumFeeData } from "@coral-xyz/recoil"; -import { HOVER_OPACITY, styles, useCustomTheme } from "@coral-xyz/themes"; +import { + HOVER_OPACITY, + styles as makeStyles, + useCustomTheme, +} from "@coral-xyz/themes"; import ArrowDropDown from "@mui/icons-material/ArrowDropDown"; import { Button, Skeleton, TextField, Typography } from "@mui/material"; import { LAMPORTS_PER_SOL } from "@solana/web3.js"; @@ -17,7 +21,7 @@ import { WithMiniDrawer } from "./Layout/Drawer"; import { SettingsList } from "./Settings/List"; import { CloseButton } from "./ApproveTransactionDrawer"; -const useStyles = styles((theme: any) => ({ +const useStyles = makeStyles((theme: any) => ({ chip: { padding: "4px 16px", textTransform: "capitalize", diff --git a/packages/app-extension/src/components/common/WalletList.tsx b/packages/app-extension/src/components/common/WalletList.tsx index 44a4208c4..f6929f547 100644 --- a/packages/app-extension/src/components/common/WalletList.tsx +++ b/packages/app-extension/src/components/common/WalletList.tsx @@ -1,3 +1,5 @@ +/* eslint-disable react/jsx-no-useless-fragment */ +/* eslint-disable react-hooks/exhaustive-deps */ import React, { useContext, useEffect, useState } from "react"; import { Blockchain, @@ -12,10 +14,10 @@ import { SecretKeyIcon, } from "@coral-xyz/react-common"; import { + getBlockchainLogo, useActiveWallet, useAllWallets, useBackgroundClient, - useBlockchainLogo, useDehydratedWallets, usePrimaryWallets, } from "@coral-xyz/recoil"; @@ -42,9 +44,9 @@ import { AddConnectWalletMenu, } from "../Unlocked/Settings/AddConnectWallet"; import { CreateMenu } from "../Unlocked/Settings/AddConnectWallet/CreateMenu"; +import { CreateMnemonic } from "../Unlocked/Settings/AddConnectWallet/CreateMnemonic"; import { ImportMenu } from "../Unlocked/Settings/AddConnectWallet/ImportMenu"; import { ImportMnemonic } from "../Unlocked/Settings/AddConnectWallet/ImportMnemonic"; -import { CreateMnemonic } from "../Unlocked/Settings/AddConnectWallet/CreateMnemonic"; import { ImportSecretKey } from "../Unlocked/Settings/AddConnectWallet/ImportSecretKey"; import { RemoveWallet } from "../Unlocked/Settings/YourAccount/EditWallets/RemoveWallet"; import { RenameWallet } from "../Unlocked/Settings/YourAccount/EditWallets/RenameWallet"; @@ -451,26 +453,27 @@ function _WalletList({ /> )} - {coldWallets.length > 0 ?
0 ? ( +
-
-
- - Disabled app signing - - + - - + +
-
- { + { if (wallet.type !== "dehydrated") { await onChange(wallet); close(); } }} - style={{ + style={{ borderRadius: "10px", overflow: "hidden", marginLeft: 0, marginRight: 0, }} - selectedWalletPublicKey={activeWallet.publicKey} + selectedWalletPublicKey={activeWallet.publicKey} /> -
: null} + + ) : null} ); } @@ -897,8 +901,9 @@ export function StackedWalletAddress({ > {type === "dehydrated" ? "Not recovered" : name} - {type !== "dehydrated" && isPrimary ? - (primary) - : null} + (primary) + + ) : null}
; } diff --git a/packages/app-extension/src/components/common/index.tsx b/packages/app-extension/src/components/common/index.tsx index f430b8a5d..8f6c16090 100644 --- a/packages/app-extension/src/components/common/index.tsx +++ b/packages/app-extension/src/components/common/index.tsx @@ -1,56 +1,17 @@ import { walletAddressDisplay } from "@coral-xyz/common"; +import { useDarkMode } from "@coral-xyz/recoil"; import type { CustomTheme } from "@coral-xyz/themes"; -import { HOVER_OPACITY, styles, useCustomTheme } from "@coral-xyz/themes"; +import { styles as makeStyles, useCustomTheme } from "@coral-xyz/themes"; import { Box, Button, Checkbox as _Checkbox, Typography } from "@mui/material"; import type { BigNumber } from "ethers"; import { ethers } from "ethers"; -import { useDarkMode } from "@coral-xyz/recoil"; import { TextField } from "../../plugin/Component"; -export { TextField }; export { walletAddressDisplay } from "@coral-xyz/common"; +export { TextField }; -const useStyles = styles((theme: CustomTheme) => ({ - leftLabel: { - color: theme.custom.colors.fontColor, - fontSize: "16px", - lineHeight: "16px", - fontWeight: 500, - }, - rightLabel: { - fontWeight: 500, - fontSize: "12px", - lineHeight: "16px", - color: theme.custom.colors.fontColor, - }, - button: { - width: "100%", - height: "48px", - borderRadius: "12px", - backgroundColor: theme.custom.colors.primaryButton, - "&.Mui-disabled": { - opacity: 0.5, - backgroundColor: theme.custom.colors.primaryButton, - }, - "&:hover": { - backgroundColor: theme.custom.colors.primaryButton, - }, - }, - primaryButton: { - "&:hover": { - opacity: HOVER_OPACITY, - background: `${theme.custom.colors.primaryButton} !important`, - backgroundColor: `${theme.custom.colors.primaryButton} !important,`, - }, - }, - negativeButton: { - "&:hover": { - opacity: HOVER_OPACITY, - background: `${theme.custom.colors.negative} !important`, - backgroundColor: `${theme.custom.colors.negative} !important,`, - }, - }, +const useStyles = makeStyles((theme: CustomTheme) => ({ header: { color: theme.custom.colors.fontColor, fontSize: "24px", @@ -102,9 +63,11 @@ export function WalletAddress({ publicKey, name, style, nameStyle }: any) { {name} - {publicKey ? - ({walletAddressDisplay(publicKey)}) - : null} + {publicKey ? ( + + ({walletAddressDisplay(publicKey)}) + + ) : null}
); } diff --git a/packages/app-mobile/src/hooks/index.ts b/packages/app-mobile/src/hooks/index.ts index 7825801f4..57be4a76e 100644 --- a/packages/app-mobile/src/hooks/index.ts +++ b/packages/app-mobile/src/hooks/index.ts @@ -7,7 +7,7 @@ export { useIsValidAddress } from "./useIsValidAddress"; export { useTheme } from "./useTheme"; // TODO(peter) consolidate between extension/mobile-app or just live on S3 -export function useBlockchainLogo(blockchain: Blockchain): string { +export function getBlockchainLogo(blockchain: Blockchain): string { switch (blockchain) { case Blockchain.ETHEREUM: return Images.ethereumLogo; diff --git a/packages/app-mobile/src/screens/Unlocked/DepositScreen.tsx b/packages/app-mobile/src/screens/Unlocked/DepositScreen.tsx index 6a8b19490..66e11af9e 100644 --- a/packages/app-mobile/src/screens/Unlocked/DepositScreen.tsx +++ b/packages/app-mobile/src/screens/Unlocked/DepositScreen.tsx @@ -12,17 +12,19 @@ import { import * as Clipboard from "expo-clipboard"; +import { Blockchain, walletAddressDisplay } from "@coral-xyz/common"; +import { useActiveWallets } from "@coral-xyz/recoil"; +import { MaterialIcons } from "@expo/vector-icons"; +import QRCode from "react-qr-code"; + import { CopyWalletFieldInput, ListRowSeparator, Margin, Screen, } from "~components/index"; -import { Blockchain, walletAddressDisplay } from "@coral-xyz/common"; -import { useActiveWallets } from "@coral-xyz/recoil"; -import { MaterialIcons } from "@expo/vector-icons"; -import { useBlockchainLogo, useTheme } from "~hooks"; -import QRCode from "react-qr-code"; + +import { getBlockchainLogo, useTheme } from "~hooks"; function BlockchainDisclaimerText({ blockchain, @@ -37,12 +39,8 @@ function BlockchainDisclaimerText({ { color: theme.custom.colors.secondary }, ]} > - {blockchain === Blockchain.SOLANA && ( - <>This address can only receive SOL and SPL tokens on Solana. - )} - {blockchain === Blockchain.ETHEREUM && ( - <>This address can only receive ETH and ERC20 tokens on Ethereum. - )} + {blockchain === Blockchain.SOLANA ? <>This address can only receive SOL and SPL tokens on Solana. : null} + {blockchain === Blockchain.ETHEREUM ? <>This address can only receive ETH and ERC20 tokens on Ethereum. : null} ); } @@ -235,7 +233,7 @@ function BlockchainDepositCard({ const theme = useTheme(); const [showQrCode, setShowQrCode] = useState(false); - const blockchainLogo = useBlockchainLogo(blockchain); + const blockchainLogo = getBlockchainLogo(blockchain); const blockchainDisplay = blockchain.slice(0, 1).toUpperCase() + blockchain.slice(1); diff --git a/packages/app-mobile/src/screens/Unlocked/RecentActivityScreen.tsx b/packages/app-mobile/src/screens/Unlocked/RecentActivityScreen.tsx index 90dc2465f..cddfa8d34 100644 --- a/packages/app-mobile/src/screens/Unlocked/RecentActivityScreen.tsx +++ b/packages/app-mobile/src/screens/Unlocked/RecentActivityScreen.tsx @@ -1,13 +1,13 @@ import { Suspense } from "react"; import { + ActivityIndicator, FlatList, Image, Pressable, + StyleProp, StyleSheet, Text, View, - ActivityIndicator, - StyleProp, ViewStyle, } from "react-native"; @@ -31,7 +31,7 @@ import { MaterialIcons } from "@expo/vector-icons"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { EmptyState, Screen } from "~components/index"; -import { useBlockchainLogo, useTheme } from "~hooks/index"; +import { getBlockchainLogo, useTheme } from "~hooks/index"; export function RecentActivityScreen() { const insets = useSafeAreaInsets(); @@ -185,7 +185,7 @@ function RecentActivityListItem({ transaction: RecentTransaction; }): JSX.Element { const theme = useTheme(); - const blockchainLogo = useBlockchainLogo(transaction.blockchain); + const blockchainLogo = getBlockchainLogo(transaction.blockchain); const connectionUrl = useBlockchainConnectionUrl(transaction.blockchain); const explorer = useBlockchainExplorer(transaction.blockchain); diff --git a/packages/app-mobile/src/screens/Unlocked/Settings/PreferencesScreen.tsx b/packages/app-mobile/src/screens/Unlocked/Settings/PreferencesScreen.tsx index 32d0cf435..c6ab10df9 100644 --- a/packages/app-mobile/src/screens/Unlocked/Settings/PreferencesScreen.tsx +++ b/packages/app-mobile/src/screens/Unlocked/Settings/PreferencesScreen.tsx @@ -1,20 +1,19 @@ -import { Margin, RoundedContainerGroup, Screen } from "~components/index"; import { BACKPACK_CONFIG_VERSION, - BACKPACK_FEATURE_LIGHT_MODE, Blockchain, UI_RPC_METHOD_SETTINGS_DARK_MODE_UPDATE, UI_RPC_METHOD_SETTINGS_DEVELOPER_MODE_UPDATE, } from "@coral-xyz/common"; import { useBackgroundClient, - // useBlockchainLogo, + // getBlockchainLogo, useDarkMode, useDeveloperMode, } from "@coral-xyz/recoil"; +import { Margin, RoundedContainerGroup, Screen } from "~components/index"; + import { - IconLeft, IconPushDetail, SettingsRow, SettingsRowSwitch, diff --git a/packages/app-mobile/src/screens/Unlocked/WalletListScreen.tsx b/packages/app-mobile/src/screens/Unlocked/WalletListScreen.tsx index 6f983898c..8634c6dfc 100644 --- a/packages/app-mobile/src/screens/Unlocked/WalletListScreen.tsx +++ b/packages/app-mobile/src/screens/Unlocked/WalletListScreen.tsx @@ -28,7 +28,7 @@ import { Row, Screen, } from "~components/index"; -import { useBlockchainLogo, useTheme } from "~hooks/index"; +import { getBlockchainLogo, useTheme } from "~hooks/index"; type Wallet = { publicKey: string; @@ -133,7 +133,7 @@ function WalletListItem({ } function NetworkIcon({ blockchain }: { blockchain: Blockchain }) { - const logo = useBlockchainLogo(blockchain); + const logo = getBlockchainLogo(blockchain); return ; } @@ -149,10 +149,6 @@ function WalletTypeIcon({ type, fill }: { type: string; fill?: string }) { } const styles = StyleSheet.create({ - sectionHeaderTitle: { - fontWeight: "500", - marginBottom: 8, - }, listItem: { flexDirection: "row", justifyContent: "space-between", diff --git a/packages/app-mobile/src/screens/Unlocked/components/index.tsx b/packages/app-mobile/src/screens/Unlocked/components/index.tsx index 1b32bd97b..c808dfa38 100644 --- a/packages/app-mobile/src/screens/Unlocked/components/index.tsx +++ b/packages/app-mobile/src/screens/Unlocked/components/index.tsx @@ -6,7 +6,7 @@ import { toTitleCase } from "@coral-xyz/common"; import { MaterialIcons } from "@expo/vector-icons"; import { Row } from "~components/index"; -import { useBlockchainLogo, useTheme } from "~hooks/index"; +import { getBlockchainLogo, useTheme } from "~hooks/index"; export function TableHeader({ onPress, @@ -25,7 +25,7 @@ export function TableHeader({ }) { const theme = useTheme(); const title = toTitleCase(blockchain); - const logo = useBlockchainLogo(blockchain); + const logo = getBlockchainLogo(blockchain); return (