Update web3modal page for Mobile device

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",

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<number>(1)
   const [networkId, setNetworkId] = useState<number>(1)
   const [connected, setConnected] = useState<boolean>(false)
@@ -124,6 +127,8 @@ const Web3modalExample = (): ReactElement => {
   const [kip7ContractAddress, setKip7ContractAddress] = useState('')
   const [web3modal, setWeb3modal] = useState<any>()
   const [web3, setWeb3] = useState<any>()
+  const href = window.location.href
+
   const getAccountAssets = async ({
     changedAddress,
     changedChainId,
@@ -421,7 +426,11 @@ const Web3modalExample = (): ReactElement => {
                         {WEB3MODAL.PERSONAL_SIGN}
                       </STestButton>
                     </STestButtonContainer>
-                    <Text style={{ padding: '0 120px' }}>
+                    <Text
+                      style={{
+                        padding: `${isUnderTabletWidth ? 0 : '0 120px'}`,
+                      }}
+                    >
                       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 => {
           ) : (
             <SLanding>
               <h2>{`Test Web3Modal`}</h2>
+              {isMobile && (
+                <View style={{ paddingBottom: 10 }}>
+                  <LinkA link={`https://app.kaikas.io/u/${href}`}>
+                    If using mobile device, please click here to open in-app
+                    browser of Kaikas Mobile
+                  </LinkA>
+                </View>
+              )}
               <Button onClick={onConnect}> Connect </Button>
             </SLanding>
           )}

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<IHeaderStyle>`
   transition: ${transitions.base};
   font-weight: bold;
   margin: ${({ connected }): string => (connected ? '-2px auto 0.7em' : '0')};
+  padding-bottom: 5;
 `
 
 const SDisconnect = styled.div<IHeaderStyle>`
   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 (
-    <SHeader {...props}>
+    <SHeader
+      style={{
+        justifyContent: isUnderMobileWidth ? 'center' : 'space-between',
+        flexDirection: isUnderMobileWidth ? 'column' : 'row',
+      }}
+      {...props}
+    >
       {connected && chainData ? (
-        <SActiveChain>
+        <SActiveChain style={{ paddingBottom: isUnderMobileWidth ? 20 : 0 }}>
           <p>{`Connected to`}</p>
           <p>{chainData.name}</p>
         </SActiveChain>
@@ -94,7 +103,16 @@ const Header = (props: IHeaderProps): ReactElement => {
       )}
       {address && (
         <SActiveAccount>
-          <SAddress connected={connected}>{address}</SAddress>
+          <SAddress
+            style={{
+              overflowWrap: 'anywhere',
+              fontSize: isUnderMobileWidth ? 12 : 14,
+              marginBottom: 0,
+            }}
+            connected={connected}
+          >
+            {address}
+          </SAddress>
           <SDisconnect connected={connected} onClick={killSession}>
             {'Disconnect'}
           </SDisconnect>

src/views/Web3modal/web3modalComponents/Modal.tsx

@@ -18,11 +18,10 @@ const SLightbox = styled.div<ILightboxStyleProps>`
   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<ILightboxStyleProps>`
 `
 
 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<ICloseButtonStyleProps>`
 `
 
 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<IModalProps, IModalState> {
         ref={(c: any): void => (this.lightbox = c)}
       >
         <SModalContainer>
-          <SHitbox onClick={this.toggleModal} />
-
           <SCard>
             <SCloseButton size={25} color="black" onClick={this.toggleModal} />
             <SModalContent>{children}</SModalContent>