add qrcode logic for user page

client/.env.example

@@ -21,4 +21,4 @@ TIER_COMMON=10
 DOMAIN_RESERVED_LENGTH=6
 SENTRY_DSN=https://5a8431aee4d546519873dbb1666eb4db@o4504877657620480.ingest.sentry.io/4504877671710720
 EXPIRATION_REMAINDER_DAYS=30
-RENEWAL_LIMIT=90 # one time
+RENEWAL_LIMIT=100 # one time 

client/config.ts

@@ -52,7 +52,7 @@ const config = {
       ? process.env.RESTRICTED_PHRASES.split(', ')
       : ['metamask', 'walletconnect'],
     expirationReminderDays: process.env.EXPIRATION_REMAINDER_DAYS || 30,
-    renewalLimit: Number(process.env.RENEWAL_LIMIT) || 90, // one time
+    renewalLimit: Number(process.env.RENEWAL_LIMIT) || 100, // one time
   },
   emojiType: {
     ONE_ABOVE: 0,

client/package.json

@@ -139,6 +139,7 @@
     "mobx-react-lite": "^3.4.0",
     "qs": "^6.11.0",
     "react": "^17.0.2",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.7.1",

client/src/api/qrcode.ts

@@ -0,0 +1,8 @@
+export interface QrCode {
+  url: string
+  size: string
+}
+
+export const getQrCode = ({ url, size = '200' }: QrCode) => {
+  return `https://chart.googleapis.com/chart?chs=${size}x${size}&cht=qr&chl=${url}&choe=UTF-8`
+}

client/src/api/utils.ts

@@ -173,5 +173,5 @@ export const daysBetween = (
   date2: string | number
 ): number => {
   const DAY_MILLISECONDS = 1000 * 60 * 60 * 24
-  return (Number(date2) - Number(date1)) / DAY_MILLISECONDS
+  return Math.ceil((Number(date2) - Number(date1)) / DAY_MILLISECONDS)
 }

client/src/components/widgets/StakingWidget.tsx

@@ -1,21 +1,24 @@
 import React from 'react'
-import { Widget } from 'harmony-staking-widget';
+import { Widget } from 'harmony-staking-widget'
 
 interface Props {
-    validator: string;
+  validator: string
 }
 
 const StakingWidget: React.FC<Props> = ({ validator }) => {
-    return <div style={{
+  return (
+    <div
+      style={{
         borderRadius: 12,
         border: '1px solid rgb(207,217,222)',
-        padding: "20px",
-        maxWidth: '100vw',
-        width: 500
-    }
-    }>
-        <Widget validator={validator.replace(/\s/g, "")} />
-    </div >
+        padding: '20px',
+        maxWidth: '80vw',
+        width: 500,
+      }}
+    >
+      <Widget validator={validator.replace(/\s/g, '')} />
+    </div>
+  )
 }
 
-export default StakingWidget;
+export default StakingWidget

client/src/routes/home/Home.styles.tsx

@@ -3,6 +3,7 @@ import { Main, FlexRow, FlexColumn } from '../../components/Layout'
 import { SmallTextGrey, Desc } from '../../components/Text'
 
 export const Container = styled(Main)`
+  position: relative;
   margin: 0 auto;
   padding: 0 24px 24px;
   width: 100%;
@@ -82,3 +83,40 @@ export const CurationContainer = styled.div`
     bottom: 0;
   }
 `
+
+export const QrCodeButton = styled.div`
+  width: 4.2em;
+  height: 2.5em;
+  color: #00aee9;
+  position: fixed;
+  bottom: 1em;
+  left: 1em;
+  cursor: pointer;
+  z-index: 999;
+  opacity: 0.5;
+`
+
+export const QrContainer = styled.div`
+  /* display: block; */
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 99;
+  background: rgba(0, 0, 0, 0.85);
+`
+export const QrCode = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  height: 300px;
+  z-index: 100;
+
+  img {
+    border-radius: 25px;
+  }
+`

client/src/routes/home/components/HomeDomainPage.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { observer } from 'mobx-react-lite'
+import { isMobile } from 'react-device-detect'
 
 import { WidgetModule } from '../../widgetModule/WidgetModule'
 import { widgetListStore } from '../../widgetModule/WidgetListStore'
@@ -9,28 +10,38 @@ import { useStores } from '../../../stores'
 import config from '../../../../config'
 import { DomainLevel, getDomainLevel } from '../../../api/utils'
 import { getDomainName } from '../../../utils/getDomainName'
+import { getQrCode } from '../../../api/qrcode'
 
 import { DomainName } from '../../../components/Text'
-import { Container, DomainNameContainer } from '../Home.styles'
+import {
+  Container,
+  DomainNameContainer,
+  QrCode,
+  QrCodeButton,
+  QrContainer,
+} from '../Home.styles'
 import {
   ProcessStatusItem,
   ProcessStatusTypes,
 } from '../../../components/process-status/ProcessStatus'
 import EmojiSection from '../../../components/emoji-section/EmojiSection'
 import { BgColorSelector } from './BgColorSelector'
 import { VanityURL } from '../VanityURL'
+import { MdOutlineQrCodeScanner } from 'react-icons/md'
 
 interface Props {}
 
 const HomeDomainPage: React.FC<Props> = observer(() => {
   const [domainName] = useState(getDomainName())
+  const [unhideQrCode, setUnhideQrCode] = useState(false)
+  const [qrCode, setQrCode] = useState('')
   const [level, setLevel] = useState<DomainLevel>('common')
   const { domainStore, walletStore, metaTagsStore } = useStores()
   const [processStatus, setProcessStatus] = useState<ProcessStatusItem>({
     type: ProcessStatusTypes.IDLE,
     render: '',
   })
-
+  console.log('isMobile', isMobile)
   useEffect(() => {
     if (domainName) {
       domainStore.loadDomainRecord(domainName)
@@ -48,6 +59,14 @@ const HomeDomainPage: React.FC<Props> = observer(() => {
   //   window.open(`mailto:[email protected]`, '_self')
   // }
 
+  const showQrCode = async (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+    setQrCode(
+      getQrCode({ url: `https://${domainName}${config.tld}`, size: '300' })
+    )
+    setUnhideQrCode(true)
+  }
+
   const showRenewalBlock =
     walletStore.isConnected &&
     domainStore.isOwner &&
@@ -79,12 +98,6 @@ const HomeDomainPage: React.FC<Props> = observer(() => {
         <WidgetModule domainName={domainStore.domainName} />
       )}
       {showRenewalBlock && <DomainRecordRenewal />}
-      {/* {domainStore.isOwner && (
-        <BgColorSelector
-          domainName={domainName}
-          bgColor={domainStore.bgColor}
-        />
-      )} */}
       <HomePageFooter />
       <div style={{ height: 200 }} />
     </Container>

client/src/routes/widgetModule/WidgetModule.tsx

@@ -28,13 +28,17 @@ import commandValidator, {
 import { renewCommand } from '../../utils/command-handler/DcCommandHandler'
 import { relayApi } from '../../api/relayApi'
 import { daysBetween } from '../../api/utils'
+import { getQrCode } from '../../api/qrcode'
 
 import { SearchInput } from '../../components/search-input/SearchInput'
 import { MediaWidget } from '../../components/widgets/MediaWidget'
 import { loadEmbedJson } from '../../modules/embedly/embedly'
 import { isRedditUrl, isStakingWidgetUrl } from '../../utils/validation'
 import { BaseText, SmallText } from '../../components/Text'
 import { Box } from 'grommet/components/Box'
+import { Row } from '../../components/Layout'
+import { HiOutlineQrcode } from 'react-icons/hi'
+import { QrCode, QrContainer } from '../home/Home.styles'
 
 const defaultFormFields = {
   widgetValue: '',
@@ -51,8 +55,18 @@ export const WidgetModule: React.FC<Props> = observer(({ domainName }) => {
     type: ProcessStatusTypes.IDLE,
     render: '',
   })
+  const [unhideQrCode, setUnhideQrCode] = useState(false)
+  const [qrCode, setQrCode] = useState('')
   const { open } = useWeb3Modal()
 
+  useEffect(() => {
+    if (qrCode! === '') {
+      setQrCode(
+        getQrCode({ url: `https://${domainName}${config.tld}`, size: '300' })
+      )
+    }
+  }, [])
+  console.log(qrCode)
   useEffect(() => {
     const handlingCommand = async () => {
       await commandHandler(utilsStore.command, true)
@@ -390,7 +404,11 @@ export const WidgetModule: React.FC<Props> = observer(({ domainName }) => {
   }
 
   const deleteWidget = (widget: Widget) => {
-    return widgetListStore.deleteWidget({ widgetId: widget.id, widgetUuid: widget.uuid, domainName })
+    return widgetListStore.deleteWidget({
+      widgetId: widget.id,
+      widgetUuid: widget.uuid,
+      domainName,
+    })
   }
 
   const pinWidget = (widget: Widget, isPinned: boolean) => {
@@ -399,19 +417,59 @@ export const WidgetModule: React.FC<Props> = observer(({ domainName }) => {
 
   const showInput = walletStore.isConnected && domainStore.isOwner
 
+  const showQrCode = async (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+    setQrCode(
+      getQrCode({ url: `https://${domainName}${config.tld}`, size: '300' })
+    )
+    setUnhideQrCode(true)
+  }
+
   return (
     <PageWidgetContainer>
       {showInput && (
         <WidgetInputContainer>
-          <SearchInput
-            autoFocus
-            disabled={isLoading}
-            isValid={processStatus.type !== ProcessStatusTypes.ERROR}
-            placeholder={'Enter tweet or any url'}
-            value={formFields.widgetValue}
-            onSearch={onChange}
-            onKeyDown={enterHandler}
-          />
+          <Row>
+            <SearchInput
+              autoFocus
+              disabled={isLoading}
+              isValid={processStatus.type !== ProcessStatusTypes.ERROR}
+              placeholder={'Enter tweet or any url'}
+              value={formFields.widgetValue}
+              onSearch={onChange}
+              onKeyDown={enterHandler}
+            />
+            <span onClick={() => setUnhideQrCode((prev) => !prev)}>
+            <div
+              style={{
+                background: '#FAFAFA',
+                width: '2.75rem',
+                height: '3rem',
+                borderRadius: '25%',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                cursor: 'pointer',
+              }}
+            >
+              <HiOutlineQrcode
+                style={{
+                  fontSize: '2.55rem',
+                  color: 'gray',
+                }}
+              />
+            </div>
+              {/* <HiOutlineQrcode
+                style={{
+                  fontSize: '2.5rem',
+                  color: 'grey',
+                  paddingTop: '0.1em',
+                  cursor: 'pointer',
+                }}
+              /> */}
+            </span>
+          </Row>
+
           {checkIsActivated && !widgetListStore.isActivated && (
             <Box pad={{ top: '0.5em' }}>
               <SmallText>
@@ -433,7 +491,7 @@ export const WidgetModule: React.FC<Props> = observer(({ domainName }) => {
 
       {widgetListStore.widgetList.map((widget, index) => (
         <WidgetStatusWrapper
-          key={widget.id + widget.value + (+widget.isPinned)}
+          key={widget.id + widget.value + +widget.isPinned}
           loaderId={widgetListStore.buildWidgetLoaderId(widget.id)}
         >
           <MediaWidget
@@ -454,6 +512,13 @@ export const WidgetModule: React.FC<Props> = observer(({ domainName }) => {
         <MetamaskWidget />
       )}
       {!walletStore.isMetamaskAvailable && <WalletConnectWidget />}
+      {unhideQrCode && (
+        <QrContainer onClick={() => setUnhideQrCode(false)}>
+          <QrCode>
+            <img src={qrCode} />
+          </QrCode>
+        </QrContainer>
+      )}
     </PageWidgetContainer>
   )
 })

client/yarn.lock

@@ -7701,6 +7701,7 @@ harmony-staking-sdk@^1.0.6:
     dotenv "^16.0.3"
     web3 "^1.8.1"
     web3-utils "^1.8.2"
+
 harmony-staking-widget@^1.0.14:
   version "1.0.14"
   resolved "https://registry.yarnpkg.com/harmony-staking-widget/-/harmony-staking-widget-1.0.14.tgz#2ba62e457fd2f81dd3e8ee12fa9a42db55102b8e"
@@ -10744,6 +10745,13 @@ [email protected]:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-device-detect@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.3.tgz#97a7ae767cdd004e7c3578260f48cf70c036e7ca"
+  integrity sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==
+  dependencies:
+    ua-parser-js "^1.0.33"
+
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -12355,6 +12363,11 @@ typescript@^4.9.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
   integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
 
+ua-parser-js@^1.0.33:
+  version "1.0.35"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.35.tgz#c4ef44343bc3db0a3cbefdf21822f1b1fc1ab011"
+  integrity sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==
+
 [email protected]:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/uint8arrays/-/uint8arrays-3.1.0.tgz#8186b8eafce68f28bd29bd29d683a311778901e2"