From c0a852a0410004d7e68240b03c9781a9eb169eec Mon Sep 17 00:00:00 2001 From: Yeonju-Kim Date: Mon, 19 Dec 2022 18:28:46 +0900 Subject: [PATCH] Change UI for Mobile device: add link to in-app browser of Kaikas Mobile App and update the modal position to be located in the center of the viewport --- package.json | 1 + src/views/Web3modal/index.tsx | 21 +++++++++-- .../Web3modal/web3modalComponents/Header.tsx | 36 ++++++++++++++----- .../Web3modal/web3modalComponents/Modal.tsx | 34 ++++++------------ 4 files changed, 58 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index 5209ee3..464c2a7 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "prism-react-renderer": "^1.3.5", "react": "^17.0.2", "react-copy-to-clipboard": "^5.1.0", + "react-device-detect": "^2.2.2", "react-dom": "^17.0.2", "react-query": "^3.39.2", "react-router-dom": "^6.4.2", diff --git a/src/views/Web3modal/index.tsx b/src/views/Web3modal/index.tsx index 85542e3..6e386e0 100644 --- a/src/views/Web3modal/index.tsx +++ b/src/views/Web3modal/index.tsx @@ -16,11 +16,12 @@ import { Label, FormInput, Text, - LinkA, View, CardSection, Loading, + LinkA, } from 'components' +import useLayout from 'hooks/useLayout' import { IAssetData } from 'types' import { WEB3MODAL } from 'consts' import { @@ -37,6 +38,7 @@ import { Modal, } from './web3modalComponents' import { callBalanceOf, callTransfer } from './helpers/web3' +import { isMobile } from 'react-device-detect' const SLayout = styled.div` position: relative; @@ -112,6 +114,7 @@ const STestButton = styled(Button)` ` const Web3modalExample = (): ReactElement => { + const { isUnderTabletWidth } = useLayout() const [chainId, setChainId] = useState(1) const [networkId, setNetworkId] = useState(1) const [connected, setConnected] = useState(false) @@ -124,6 +127,8 @@ const Web3modalExample = (): ReactElement => { const [kip7ContractAddress, setKip7ContractAddress] = useState('') const [web3modal, setWeb3modal] = useState() const [web3, setWeb3] = useState() + const href = window.location.href + const getAccountAssets = async ({ changedAddress, changedChainId, @@ -421,7 +426,11 @@ const Web3modalExample = (): ReactElement => { {WEB3MODAL.PERSONAL_SIGN} - + Sendtransaction(): send 0.000001 KLAY to the sender account on Klaytn Network(Mainnet, Testnet). On other networks, the amount is zero.{'\n'} @@ -475,6 +484,14 @@ const Web3modalExample = (): ReactElement => { ) : (

{`Test Web3Modal`}

+ {isMobile && ( + + + If using mobile device, please click here to open in-app + browser of Kaikas Mobile + + + )} )} diff --git a/src/views/Web3modal/web3modalComponents/Header.tsx b/src/views/Web3modal/web3modalComponents/Header.tsx index 0e6676b..9047087 100644 --- a/src/views/Web3modal/web3modalComponents/Header.tsx +++ b/src/views/Web3modal/web3modalComponents/Header.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components' import * as PropTypes from 'prop-types' import { getChainData } from '../helpers/utilities' import Banner from './Banner' +import useLayout from 'hooks/useLayout' export const transitions = { short: 'all 0.1s ease-in-out', @@ -15,18 +16,18 @@ const SHeader = styled.div` margin-top: -1px; margin-bottom: 1px; width: 100%; - height: 100px; display: flex; align-items: center; - justify-content: space-between; - padding: 0 16px; + padding: 20px 16px; ` const SActiveAccount = styled.div` display: flex; - align-items: center; + align-items: flex-end; position: relative; font-weight: 500; + flex-direction: column; + text-align: right; ` const SActiveChain = styled(SActiveAccount)` @@ -50,17 +51,17 @@ const SAddress = styled.p` transition: ${transitions.base}; font-weight: bold; margin: ${({ connected }): string => (connected ? '-2px auto 0.7em' : '0')}; + padding-bottom: 5; ` const SDisconnect = styled.div` transition: ${transitions.button}; font-size: 12px; font-family: monospace; - position: absolute; - right: 0; top: 20px; opacity: 0.7; cursor: pointer; + text-align: right; opacity: ${({ connected }): number => (connected ? 1 : 0)}; visibility: ${({ connected }): string => (connected ? 'visible' : 'hidden')}; @@ -80,12 +81,20 @@ interface IHeaderProps { } const Header = (props: IHeaderProps): ReactElement => { + const { isUnderMobileWidth } = useLayout() + const { connected, address, chainId, killSession } = props const chainData = chainId ? getChainData(chainId) : null return ( - + {connected && chainData ? ( - +

{`Connected to`}

{chainData.name}

 @@ -94,7 +103,16 @@ const Header = (props: IHeaderProps): ReactElement => { )} {address && ( - {address} + + {address} + {'Disconnect'} diff --git a/src/views/Web3modal/web3modalComponents/Modal.tsx b/src/views/Web3modal/web3modalComponents/Modal.tsx index de7396e..f3cc885 100644 --- a/src/views/Web3modal/web3modalComponents/Modal.tsx +++ b/src/views/Web3modal/web3modalComponents/Modal.tsx @@ -18,11 +18,10 @@ const SLightbox = styled.div` transition: opacity 0.1s ease-in-out; text-align: center; position: absolute; - width: 100vw; - height: 100vh; - margin-left: -50vw; - top: ${({ offset }): string | number => (offset ? `-${offset}px` : 0)}; - left: 50%; + width: 100%; + height: 100%; + top: 0; + left: 0; z-index: 2; will-change: opacity; background-color: ${({ opacity }): string => { @@ -41,21 +40,14 @@ const SLightbox = styled.div` ` const SModalContainer = styled.div` - position: relative; - width: 100%; - height: 100%; - padding: 15px; - display: flex; + padding: 10px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); align-items: center; justify-content: center; -` - -const SHitbox = styled.div` - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + width: min(500px, 100%); ` interface ICloseButtonStyleProps { @@ -93,9 +85,7 @@ const SCloseButton = styled.div` ` const SCard = styled.div` - position: relative; - width: 100%; - max-width: 500px; + width: min(500px, 100%); padding: 25px; background-color: white; border-radius: 6px; @@ -175,8 +165,6 @@ class Modal extends React.Component { ref={(c: any): void => (this.lightbox = c)} > - - {children}