From 0412a6687cdae814f3746b86c4928bbd2ea2abd3 Mon Sep 17 00:00:00 2001 From: hachiojidev Date: Thu, 15 Jul 2021 15:08:31 +0900 Subject: [PATCH 1/2] feat(uikit): Fallback to Wallet Connect for iOS users --- .../src/widgets/WalletModal/ConnectModal.tsx | 21 +++++++++++++++++-- .../src/widgets/WalletModal/config.tsx | 2 +- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx b/packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx index dafc3cd6a..bdc7f63f2 100644 --- a/packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx +++ b/packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx @@ -9,7 +9,7 @@ import { Button } from "../../components/Button"; import { ModalBody, ModalCloseButton, ModalContainer, ModalHeader, ModalTitle } from "../Modal"; import WalletCard, { MoreWalletCard } from "./WalletCard"; import config from "./config"; -import { Login } from "./types"; +import { Login, Config } from "./types"; interface Props { login: Login; @@ -23,6 +23,23 @@ const WalletWrapper = styled(Box)` const sortedConfig = config.sort((a, b) => a.priority - b.priority); +/** + * Trust Wallet is not supported on iOS. Default to Wallet Connect + */ +const getSupportedWallet = (wallet: Config) => { + const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; + + if (wallet.title === "Trust Wallet" && isIOS) { + const walletConnect = config.find((configItem) => configItem.title === "WalletConnect"); + + if (walletConnect) { + return walletConnect; + } + } + + return wallet; +}; + const ConnectModal: React.FC = ({ login, onDismiss = () => null, displayCount = 3 }) => { const [showMore, setShowMore] = useState(false); const theme = useTheme(); @@ -41,7 +58,7 @@ const ConnectModal: React.FC = ({ login, onDismiss = () => null, displayC {displayListConfig.map((wallet) => ( - + ))} {!showMore && setShowMore(true)} />} diff --git a/packages/pancake-uikit/src/widgets/WalletModal/config.tsx b/packages/pancake-uikit/src/widgets/WalletModal/config.tsx index e0ec57607..f6cd93295 100644 --- a/packages/pancake-uikit/src/widgets/WalletModal/config.tsx +++ b/packages/pancake-uikit/src/widgets/WalletModal/config.tsx @@ -23,7 +23,7 @@ const connectors: Config[] = [ priority: 2, }, { - title: "TrustWallet", + title: "Trust Wallet", icon: TrustWallet, connectorId: ConnectorNames.Injected, priority: 3, From 18f35686f31e2ef400e3804b3f59c44667d61bf2 Mon Sep 17 00:00:00 2001 From: hachiojidev Date: Thu, 15 Jul 2021 16:31:00 +0900 Subject: [PATCH 2/2] fix: WalletConnect on iOS --- .../src/widgets/WalletModal/ConnectModal.tsx | 21 ++----------------- .../src/widgets/WalletModal/WalletCard.tsx | 12 +++++++++-- 2 files changed, 12 insertions(+), 21 deletions(-) diff --git a/packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx b/packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx index bdc7f63f2..dafc3cd6a 100644 --- a/packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx +++ b/packages/pancake-uikit/src/widgets/WalletModal/ConnectModal.tsx @@ -9,7 +9,7 @@ import { Button } from "../../components/Button"; import { ModalBody, ModalCloseButton, ModalContainer, ModalHeader, ModalTitle } from "../Modal"; import WalletCard, { MoreWalletCard } from "./WalletCard"; import config from "./config"; -import { Login, Config } from "./types"; +import { Login } from "./types"; interface Props { login: Login; @@ -23,23 +23,6 @@ const WalletWrapper = styled(Box)` const sortedConfig = config.sort((a, b) => a.priority - b.priority); -/** - * Trust Wallet is not supported on iOS. Default to Wallet Connect - */ -const getSupportedWallet = (wallet: Config) => { - const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; - - if (wallet.title === "Trust Wallet" && isIOS) { - const walletConnect = config.find((configItem) => configItem.title === "WalletConnect"); - - if (walletConnect) { - return walletConnect; - } - } - - return wallet; -}; - const ConnectModal: React.FC = ({ login, onDismiss = () => null, displayCount = 3 }) => { const [showMore, setShowMore] = useState(false); const theme = useTheme(); @@ -58,7 +41,7 @@ const ConnectModal: React.FC = ({ login, onDismiss = () => null, displayC {displayListConfig.map((wallet) => ( - + ))} {!showMore && setShowMore(true)} />} diff --git a/packages/pancake-uikit/src/widgets/WalletModal/WalletCard.tsx b/packages/pancake-uikit/src/widgets/WalletModal/WalletCard.tsx index 24c2a2ede..3f3329f0a 100644 --- a/packages/pancake-uikit/src/widgets/WalletModal/WalletCard.tsx +++ b/packages/pancake-uikit/src/widgets/WalletModal/WalletCard.tsx @@ -5,7 +5,7 @@ import Text from "../../components/Text/Text"; import MoreHoriz from "../../components/Svg/Icons/MoreHoriz"; import { ButtonProps } from "../../components/Button"; import { connectorLocalStorageKey } from "./config"; -import { Login, Config } from "./types"; +import { Login, Config, ConnectorNames } from "./types"; interface Props { walletConfig: Config; @@ -40,7 +40,15 @@ const WalletCard: React.FC = ({ login, walletConfig, onDismiss }) => { { - login(walletConfig.connectorId); + const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; + + // Since iOS does not support Trust Wallet we fall back to WalletConnect + if (walletConfig.title === "Trust Wallet" && isIOS) { + login(ConnectorNames.WalletConnect); + } else { + login(walletConfig.connectorId); + } + window.localStorage.setItem(connectorLocalStorageKey, walletConfig.connectorId); onDismiss(); }}