Add wallet-connect page

src/Router.js

@@ -3,6 +3,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'
 
 import App from './components/App/App'
 import Faq from './components/Faq/Faq'
+import Wc from './components/Wc/Wc'
 import Privacy from './components/Privacy/Privacy'
 import NoDataPolicy from './components/Privacy/NoDataPolicy'
 
@@ -13,6 +14,7 @@ function Router() {
         <Route path="/privacy" element={<Privacy />} />
         <Route path="/no-data-policy" element={<NoDataPolicy />} />
         <Route path="/faq" element={<Faq />} />
+        <Route path="/wc" element={<Wc />} />
         <Route path="/" element={<App />} />
       </Routes>
     </BrowserRouter>

src/components/Button/Button.js

@@ -5,7 +5,7 @@ import Icon from '../Icon'
 
 import './Button.scss'
 
-function Button({ className, text, yellow, icon, link, newTab }) {
+function Button({ className, text, yellow, steal20, icon, link, newTab }) {
   const onClick = () => {
     if (newTab) {
       window.open(link, '_blank')
@@ -15,7 +15,7 @@ function Button({ className, text, yellow, icon, link, newTab }) {
   }
 
   return (
-    <div className={cn('Button', { 'Button-yellow': yellow }, className)} onClick={onClick}>
+    <div className={cn('Button', { 'Button-yellow': yellow, 'Button-steal20': steal20 }, className)} onClick={onClick}>
       <Icon name={icon} />
       <div className="Button-text">
         {text}

src/components/GetWallet/GetWalletActions.js

@@ -1,11 +1,12 @@
 import React from 'react'
+import cn from 'classnames'
 import { Tooltip } from 'react-tooltip'
 import Icon from '../Icon'
 import Button from '../Button'
 
 import './GetWalletActions.scss'
 
-function GetWallet() {
+function GetWallet({ btnSteal }) {
   return (
     <div className="Wallet-actions">
       <div className="Banner-actions">
@@ -17,15 +18,22 @@ function GetWallet() {
           content={<img src="/images/qrcode-get-wallet.svg" alt="" />}
         />
         <Button
-          className="Button-circle Button-nowrap"
+          className={cn('Button-circle Button-nowrap', { 'Button-steal20': btnSteal })}
           text="Google Play"
-          icon="google-play"
-          link="https://play.google.com/store/apps/details?id=io.horizontalsystems.bankwallet" yellow newTab />
+          icon={btnSteal ? 'google-play-yellow' : 'google-play'}
+          link="https://play.google.com/store/apps/details?id=io.horizontalsystems.bankwallet"
+          yellow={!btnSteal}
+          steal20={btnSteal}
+          newTab />
         <Button
-          className="Button-circle Button-nowrap"
+          className={cn('Button-circle Button-nowrap', { 'Button-steal20': btnSteal })}
           text="App Store"
-          icon="app-store"
-          link="https://itunes.apple.com/app/bank-bitcoin-wallet/id1447619907?ls=1&mt=8" yellow newTab />
+          icon={btnSteal ? 'app-store-yellow' : 'app-store'}
+          link="https://itunes.apple.com/app/bank-bitcoin-wallet/id1447619907?ls=1&mt=8"
+          yellow={!btnSteal}
+          steal20={btnSteal}
+          newTab />
+
         <div className="sm-hidden" role="button" data-tooltip-id="registerTip">
           <Icon name="qr-code" />
         </div>

src/components/Icon/Icon.js

@@ -20,8 +20,12 @@ const iconComponent = name => {
     //  Buttons
     case 'google-play':
       return image('/images/icon/google-play.svg')
+    case 'google-play-yellow':
+      return image('/images/icon/google-play-yellow.svg')
     case 'app-store':
       return image('/images/icon/app-store.svg')
+    case 'app-store-yellow':
+      return image('/images/icon/app-store-yellow.svg')
     case 'f-droid':
       return image('/images/icon/f-droid.svg')
     case 'download':

src/components/Wc/Wc.js

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import Container from '../Container'
+import GetWalletActions from '../GetWallet/GetWalletActions'
+import Icon from '../Icon'
+
+import './Wc.scss'
+
+function Wc() {
+  const urlParams = new URLSearchParams(window.location.search)
+  const uri = urlParams.get('uri')
+  const url = `unstoppable.money://wc?uri=${encodeURIComponent(uri)}`
+
+  return (
+    <Container>
+      <div className="Wc">
+
+        <div className="mt-5 d-flex flex-column justify-content-center">
+          <div className="w-100">
+            <div className="mb-5 text-center">
+              <Icon name="uw" />
+            </div>
+
+            <div className="fs-3 text-center">
+              Redirecting to Unstoppable Wallet
+            </div>
+
+            <a href={url} className="Button Button-yellow Button-circle my-5 border-0 w-100 justify-content-center text-decoration-none">
+              Open Wallet
+            </a>
+          </div>
+
+          <div className="mt-2">
+            <div className="fs-3 text-center mb-4">
+              Don’t have the app?
+            </div>
+
+            <GetWalletActions btnSteal   />
+          </div>
+        </div>
+      </div>
+    </Container>
+  )
+}
+
+export default Wc

src/components/Wc/Wc.scss

@@ -0,0 +1,21 @@
+@import "../../scss/utils";
+
+.Wc {
+  padding: 100px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Wc-title {
+  padding-top: 40px;
+  padding-bottom: 36px;
+  font-weight: normal;
+  font-size: 48px;
+  line-height: 65px;
+  color: $light-steal;
+}
+
+.Wc-actions {
+
+}