Merge pull request #42 from SimpleHold/mobile-backup-qrcode

Mobile backup qrcode

.gitignore

@@ -4,4 +4,4 @@ extension
 *-error.log
 .env
 .idea/
-extension.zip
+*.zip

@types/index.d.ts

@@ -138,5 +138,7 @@ declare const dash: BitcoinLikeProvider
 declare const litecoin: BitcoinLikeProvider
 declare const dogecoin: BitcoinLikeProvider
 declare const bitcoinsv: BitcoinLikeProvider
+declare const ravencoin: BitcoinLikeProvider
 declare const Zilliqa: any
 declare const bitcore: any
+declare const ravencore: any

package.json

@@ -1,6 +1,6 @@
 {
   "name": "extension",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "extension",
   "private": false,
   "repository": "https://github.com/SimpleHold/extension.git",
@@ -43,9 +43,9 @@
     "crypto-js": "^4.0.0",
     "dayjs": "^1.10.6",
     "detect-browser": "^5.2.0",
+    "digibyte-lib": "https://github.com/DigiByte-Core/digibyte-lib",
     "lodash": "^4.17.21",
     "neblio-lib": "https://github.com/NeblioTeam/bitcore-lib#neblcore-lib",
-    "digibyte-lib": "https://github.com/DigiByte-Core/digibyte-lib",
     "nerve-sdk-js": "^1.0.8",
     "nuls-sdk-js": "^2.5.0",
     "numeral": "^2.0.6",
@@ -61,9 +61,11 @@
     "react-qrcode-logo": "^2.2.1",
     "react-router-dom": "^5.2.0",
     "react-transition-group": "^4.4.1",
+    "react-virtualized": "^9.22.3",
     "ripple-binary-codec": "^1.1.3",
     "ripple-keypairs": "^1.0.3",
     "ripple-lib": "^1.9.5",
+    "socket.io-client": "^4.3.2",
     "styled-components": "^5.2.1",
     "thor-devkit": "^2.0.1",
     "thorify": "^1.5.7",
@@ -97,6 +99,7 @@
     "@types/react-otp-input": "^2.0.0",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-transition-group": "^4.4.1",
+    "@types/react-virtualized": "^9.21.15",
     "@types/styled-components": "^5.1.7",
     "@types/uuid": "^8.3.0",
     "@types/webpack": "^4.41.25",

src/app.tsx

@@ -26,8 +26,18 @@ const App: React.FC = () => {
     preloadPages()
     getPlatformInfo()
     browser.runtime.setUninstallURL(`https://simplehold.io/survey?id=${getItem('clientId')}`)
+
+    if (window.name) {
+      window.onresize = () => {
+        const height = window.outerHeight
+        const width = window.outerWidth
+        if (width === 375 && height === 630) return;
+        setTimeout(() => window.resizeTo(375, 630), 1000)
+      }
+    }
   }, [])
 
+
   const getPlatformInfo = async (): Promise<void> => {
     const info = await browser.runtime.getPlatformInfo()
 

src/components/CollapsibleHeader/CollapsibleHeader.tsx

@@ -45,7 +45,7 @@ const CollapsibleHeader: React.FC<Props> = (props) => {
     }
   }, [scrollPosition, isDrawersActive])
 
-  const сontainerHeight = Math.max(110, 290 - 1.25 * latesScrollPosition)
+  const containerHeight = Math.max(110, 290 - 1.25 * latesScrollPosition)
 
   const balanceRowMarginTop = Math.max(3, 50 - latesScrollPosition)
   const balanceFontSize = Math.max(16, 36 - 0.2 * latesScrollPosition)
@@ -79,9 +79,8 @@ const CollapsibleHeader: React.FC<Props> = (props) => {
       'activeSortType',
     ])
   }
-
   return (
-    <Styles.Container style={{ height: сontainerHeight }}>
+    <Styles.Container style={{ height: containerHeight }}>
       <Header />
 
       <Styles.Row>

src/components/DrawerWrapper/DrawerWrapper.tsx

@@ -39,6 +39,8 @@ const DrawerWrapper: React.FC<Props> = (props) => {
 
   const nodeRef = React.useRef(null)
 
+  const isWindowedMode = window.location.pathname === "/popup.html" && window.name !== ''
+
   const drawerStyle = {
     entering: {
       transform: `translate3d(0, ${openFrom === 'browser' ? '80px' : '100%'}, 0)`,
@@ -67,6 +69,7 @@ const DrawerWrapper: React.FC<Props> = (props) => {
             openFrom={openFrom}
           />
           <Styles.Drawer
+            isWindowedMode={isWindowedMode}
             openFrom={openFrom}
             padding={padding}
             height={height}

src/components/DrawerWrapper/styles.ts

@@ -4,6 +4,7 @@ type TDrawerProps = {
   openFrom?: string
   padding?: string
   height?: number
+  isWindowedMode?: boolean
 }
 
 type TBackgroundProps = {
@@ -36,6 +37,7 @@ const Drawer = styled.div`
   left: 0;
   bottom: 0;
   width: ${({ openFrom }: TDrawerProps) => (openFrom === 'browser' ? '315px' : '100%')};
+  min-width: ${({ isWindowedMode }: TDrawerProps) => (isWindowedMode ? `375px` : 'initial')};
   transition: transform 250ms;
 `
 

src/components/Header/Header.tsx

@@ -58,7 +58,7 @@ const Header: React.FC<Props> = (props) => {
     <Styles.Container withBorder={withBorder} borderColor={borderColor} isAbsolute={isAbsolute}>
       <Styles.LogoRow>
         <Styles.Logo color={logoColor}>
-          <SVG src="../../assets/logo.svg" width={30} height={30} title="SimleHold" />
+          <SVG src="../../assets/logo.svg" width={30} height={30} title="SimpleHold" />
         </Styles.Logo>
       </Styles.LogoRow>
       <Styles.Row>

src/config/currencies.ts

@@ -26,6 +26,7 @@ import oneLogo from '@assets/currencies/one.svg'
 import vetLogo from '@assets/currencies/vet.svg'
 import vthoLogo from '@assets/currencies/vtho.svg'
 import toncoinLogo from '@assets/currencies/toncoin.svg'
+import ravencoinLogo from '@assets/currencies/rvn.svg'
 import digibyteLogo from '@assets/currencies/dgb.svg'
 
 // Utils
@@ -294,6 +295,15 @@ const currencies: ICurrency[] = [
     minSendAmount: 100000,
     isCustomFee: false,
   },
+  {
+    name: 'Ravencoin',
+    symbol: 'rvn',
+    logo: ravencoinLogo,
+    background: '#B4B8CE',
+    chain: 'ravencoin',
+    minSendAmount: 1000,
+    isCustomFee: true,
+  }
 ]
 
 export const getCurrency = (symbol: string): ICurrency | undefined => {

src/config/index.ts

@@ -5,4 +5,5 @@ export default {
     amplitude: isDevMode ? '' : 'a9ef99a1f9f24a563cc32a696d8b50b6',
   },
   serverUrl: isDevMode ? 'http://localhost:8080' : 'https://simplehold.io/api',
+  socketUrl: isDevMode ? 'http://localhost:8080' : 'wss://simplehold.io',
 }

src/config/tokens.ts

@@ -22,13 +22,13 @@ import zilLogo from '@assets/tokens/zil.svg'
 import sxpLogo from '@assets/tokens/sxp.svg'
 import xvsLogo from '@assets/tokens/xvs.svg'
 import linkLogo from '@assets/tokens/link.svg'
-import bntLogo from '@assets/tokens/bnt.svg'
-import audioLogo from '@assets/tokens/audio.svg'
 import toncoinLogo from '@assets/tokens/toncoin.svg'
 import wethLogo from '@assets/tokens/weth.svg'
 import croLogo from '@assets/tokens/cro.svg'
 import wbtcLogo from '@assets/tokens/wbtc.svg'
 import flameLogo from '@assets/tokens/flame.svg'
+import bntLogo from '@assets/tokens/bnt.svg'
+import audioLogo from '@assets/tokens/audio.svg'
 
 // Utils
 import { IWallet } from '@utils/wallet'
@@ -457,7 +457,7 @@ const tokens: IToken[] = [
     symbol: 'bnt',
     decimals: 18,
     logo: bntLogo,
-    background: '#132BD8',
+    background: ETH_TOKEN_BG,
     chain: 'eth',
     minSendAmount: 0.001,
     isCustomFee: true,
@@ -468,11 +468,11 @@ const tokens: IToken[] = [
     symbol: 'audio',
     decimals: 18,
     logo: audioLogo,
-    background: '#132BD8',
+    background: ETH_TOKEN_BG,
     chain: 'eth',
     minSendAmount: 0.001,
     isCustomFee: true,
-  }
+  },
 ]
 
 export default tokens

src/drawers/FilterWallets/FilterWalletsDrawer.tsx

@@ -177,6 +177,7 @@ const FilterWalletsDrawer: React.FC<Props> = (props) => {
 
         return (
           <DropdownCurrency
+            key={`${symbol}/${chain}`}
             symbol={symbol}
             name={name}
             chain={chain}

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "SimpleHold",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "icons": {
     "16": "assets/logo/favicon-16.png",
     "32": "assets/logo/favicon-32.png",

src/pages/NewWallet/NewWallet.tsx

@@ -98,7 +98,6 @@ const NewWallet: React.FC = () => {
       updateState({ isButtonLoading: true })
 
       const generateAddress = await generate(symbol, chain)
-
       if (generateAddress) {
         const { privateKey, mnemonic, isNotActivated, address } = generateAddress
 

src/pages/ScanBackup/ScanBackup.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { useHistory } from 'react-router-dom'
+
+// Components
+import Cover from '@components/Cover'
+import Header from '@components/Header'
+import QRCode from '@components/QRCode'
+import Button from '@components/Button'
+
+// Utils
+import { sha512hash } from '@utils/crypto'
+import { getItem } from '@utils/storage'
+import socket from '@utils/socket'
+
+// Styles
+import Styles from './styles'
+
+const ScanBackup: React.FC = () => {
+  const history = useHistory()
+
+  const [backupHash, setBackupHash] = React.useState<string>('')
+
+  React.useEffect(() => {
+    const getBackup = getItem('backup')
+
+    if (getBackup) {
+      setBackupHash(sha512hash(getBackup))
+    }
+  }, [])
+
+  React.useEffect(() => {
+    socket.auth = { username: backupHash }
+
+    socket.connect()
+
+    socket.on('share-backup', ({ content, from }) => {
+      if (content === backupHash) {
+        socket.emit('share-backup', {
+          content: getItem('backup'),
+          to: from,
+        })
+      }
+    })
+
+    return () => {
+      socket.disconnect()
+    }
+  }, [backupHash])
+
+  return (
+    <Styles.Wrapper>
+      <Cover />
+      <Header withBack onBack={history.goBack} backTitle="Settings" />
+      <Styles.Container>
+        <Styles.Row>
+          {backupHash.length ? (
+            <Styles.QrCodeRow>
+              <QRCode value={backupHash} size={200} />
+            </Styles.QrCodeRow>
+          ) : null}
+          <Styles.Text>Scan the QR code to restore your mobile SimpleHold wallet</Styles.Text>
+        </Styles.Row>
+        <Button label="Close" onClick={history.goBack} />
+      </Styles.Container>
+    </Styles.Wrapper>
+  )
+}
+
+export default ScanBackup

src/pages/ScanBackup/index.ts

@@ -0,0 +1,3 @@
+import ScanBackup from './ScanBackup'
+
+export default ScanBackup

src/pages/ScanBackup/styles.ts

@@ -0,0 +1,46 @@
+import styled from 'styled-components'
+
+const Wrapper = styled.div`
+  height: 600px;
+  overflow: hidden;
+`
+
+const Container = styled.div`
+  background-color: #f2f4f8;
+  border-radius: 16px 16px 0px 0px;
+  height: 540px;
+  overflow: hidden;
+  padding: 68px 30px 30px 30px;
+  display: flex;
+  flex-direction: column;
+`
+
+const Row = styled.div`
+  flex: 1;
+`
+
+const QrCodeRow = styled.div`
+  padding: 12px;
+  background-color: #ffffff;
+  border-radius: 16px;
+  margin: 0 auto;
+  width: fit-content;
+`
+
+const Text = styled.p`
+  margin: 28px 18px 0 18px;
+  font-size: 16px;
+  line-height: 23px;
+  text-align: center;
+  color: #7d7e8d;
+`
+
+const Styles = {
+  Wrapper,
+  Container,
+  Row,
+  QrCodeRow,
+  Text,
+}
+
+export default Styles

src/pages/SelectCurrency/SelectCurrency.tsx

@@ -89,6 +89,7 @@ const SelectCurrency: React.FC = () => {
       return history.push('/new-wallet', {
         symbol,
         chain,
+        tokenName,
       })
     }
   }

src/pages/SelectCurrency/tabs/tokensTab.tsx

@@ -9,7 +9,7 @@ import CurrencyLogo from '@components/CurrencyLogo'
 import { toUpper, toLower } from '@utils/format'
 
 // Types
-import tokens, { IToken } from '@config/tokens'
+import { IToken } from '@config/tokens'
 
 // Styles
 import Styles from '../styles'
@@ -21,7 +21,7 @@ interface Props {
 }
 
 const TokensTab: React.FC<Props> = (props) => {
-  const { onAddCustomToken, onAddToken } = props
+  const { onAddCustomToken, onAddToken, tokens } = props
 
   const [searchValue, setSearchValue] = React.useState<string>('')