Skip to content
This repository has been archived by the owner on Dec 7, 2023. It is now read-only.

Commit

Permalink
fix: some app ui and logic fixes (#496)
Browse files Browse the repository at this point in the history 
* fix: some app ui and logic fixes

* chore: fix paycode button gradient
  • Loading branch information
@Extheoisah
Extheoisah authored May 12, 2023
1 parent cd82793 commit efd8850
Show file tree
Hide file tree
Showing 11 changed files with 108 additions and 161 deletions.
10 changes: 6 additions & 4 deletions components/Layouts/app-layout.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,8 @@
}

.lightning_addr > div:nth-child(2) button {
background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
linear-gradient(268.08deg, #fb5607 8.75%, #ffbe0b 98.45%);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(45deg, #ffbe0b 0%, #fb5607 100%);
color: #fff;
padding: 0.45rem 0.75rem;
border-radius: 8px;
Expand Down Expand Up @@ -150,7 +150,8 @@
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
-ms-transform: rotate(40deg);
background: linear-gradient(6.59deg, #ffbe0b 5.78%, #fb5607 81.81%);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(45deg, #ffbe0b 0%, #fb5607 100%);
}

.main {
Expand All @@ -165,7 +166,8 @@

.divider {
height: 2px;
background: linear-gradient(6.59deg, #ffbe0b 5.78%, #fb5607 81.81%);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(45deg, #ffbe0b 0%, #fb5607 100%);
opacity: 0.5;
}

Expand Down
6 changes: 3 additions & 3 deletions components/Memo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,21 +67,21 @@ const Memo = ({ createdInvoice }: React.ComponentState) => {
<g clipPath="url(#clip0_1220_19217)">
<path
d="M17.08 2.29526C16.8245 2.04087 16.5212 1.83961 16.1875 1.70313C15.8538 1.56664 15.4963 1.49762 15.1358 1.50006C14.7752 1.5025 14.4188 1.57635 14.0869 1.71735C13.7551 1.85834 13.4545 2.06368 13.2025 2.32151L2.3275 13.1965L1 18.3753L6.17875 17.047L17.0538 6.17201C17.3116 5.92011 17.5171 5.61959 17.6581 5.28782C17.7991 4.95605 17.873 4.59961 17.8755 4.23911C17.8779 3.87861 17.8089 3.52121 17.6723 3.18756C17.5358 2.85391 17.3345 2.55063 17.08 2.29526V2.29526Z"
stroke={createdInvoice ? "#919BBA" : "#faf9f9"}
stroke={"#232222"}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13 2.5L17 6.5"
stroke={createdInvoice ? "#919BBA" : "#faf9f9"}
stroke={"#232222"}
strokeWidth="1.125"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3 13.5L6 16.5"
stroke={createdInvoice ? "#919BBA" : "#faf9f9"}
stroke={"#232222"}
strokeWidth="1.125"
strokeLinecap="round"
strokeLinejoin="round"
Expand Down
30 changes: 22 additions & 8 deletions components/Memo/memo.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,23 +31,36 @@
}

.add_btn {
position: relative;
background-color: #fff;
display: inline-flex;
align-items: center;
border: none;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(268.08deg, #fb5607 8.75%, #ffbe0b 98.45%);
border-radius: 8px;
font-weight: 600;
padding: 0.5rem;
color: #faf9f9;
color: #232222;
column-gap: 0.5rem;
}

.add_btn::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(45deg, #ffbe0b 0%, #fb5607 100%);
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: -1;
transition: background-size 0.25s ease;
border-radius: 10px;
}

.disable_btn {
border: none;
background-color: transparent;
padding: 0.5rem;
cursor: not-allowed;
display: none;
}

.modal_footer {
Expand All @@ -62,7 +75,8 @@
width: 100%;
padding: 0.5rem 1.5rem;
font-weight: 500;
background: linear-gradient(6.59deg, #ffbe0b 5.78%, #fb5607 81.81%);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(45deg, #ffbe0b 0%, #fb5607 100%);
color: #fff;
}

Expand Down
141 changes: 43 additions & 98 deletions components/ParsePOSPayment/Receive-Invoice.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
import copy from "copy-to-clipboard"
import Link from "next/link"
import { useRouter } from "next/router"
import React, { useCallback } from "react"
import { Button, Modal } from "react-bootstrap"
import Image from "react-bootstrap/Image"
import OverlayTrigger from "react-bootstrap/OverlayTrigger"
import Tooltip from "react-bootstrap/Tooltip"
import { QRCode } from "react-qrcode-logo"
import { useTimer } from "react-timer-hook"
import { useScreenshot } from "use-react-screenshot"

import { URL_HOST_DOMAIN, USD_INVOICE_EXPIRE_INTERVAL } from "../../config/config"
import useCreateInvoice from "../../hooks/use-Create-Invoice"
import { apkLink, appStoreLink, getOS, playStoreLink } from "../../lib/download"
import { LnInvoiceObject } from "../../lib/graphql/index.types.d"
import useSatPrice from "../../lib/use-sat-price"
import { ACTION_TYPE } from "../../pages/_reducer"
Expand All @@ -28,21 +24,24 @@ interface Props {
dispatch: React.Dispatch<ACTION_TYPE>
}

const USD_MAX_INVOICE_TIME = "5.00"
const USD_MAX_INVOICE_TIME = 5 // minutes
const PROGRESS_BAR_MAX_WIDTH = 100 // percent

function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }: Props) {
const OS = getOS()
const deviceDetails = window.navigator.userAgent
const router = useRouter()
const { username, amount, unit, sats, memo } = router.query

const { usdToSats, satsToUsd } = useSatPrice()

const [progress, setProgress] = React.useState(PROGRESS_BAR_MAX_WIDTH)
const [seconds, setSeconds] = React.useState(0)
const [minutes, setMinutes] = React.useState(USD_MAX_INVOICE_TIME)

const [expiredInvoiceError, setExpiredInvoiceError] = React.useState<string>("")
const [copied, setCopied] = React.useState<boolean>(false)
const [shareState, setShareState] = React.useState<"not-set">()
const [image, takeScreenShot] = useScreenshot()
const [openModal, setOpenModal] = React.useState<boolean>(false)

const qrImageRef = React.useRef(null)
const getImage = () => takeScreenShot(qrImageRef.current)
Expand All @@ -62,22 +61,42 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:
url: shareUrl,
}

const timerRef = React.useRef<Date>()
React.useEffect(() => {
const timerStartTime = new Date()

timerRef.current = new Date()
if (recipientWalletCurrency === "USD") {
timerRef.current.setSeconds(
timerRef.current.getSeconds() + USD_INVOICE_EXPIRE_INTERVAL,
) // default to five mins for USD invoice
if (recipientWalletCurrency === "USD") {
timerStartTime.setSeconds(timerStartTime.getSeconds() + USD_INVOICE_EXPIRE_INTERVAL) // default to five mins for USD invoice
}

const interval = setInterval(() => {
const currentTime = new Date()
const elapsedTime = timerStartTime.getTime() - currentTime.getTime()
const remainingSeconds = Math.ceil(elapsedTime / 1000)

if (remainingSeconds <= 0) {
clearInterval(interval)
if (recipientWalletCurrency !== "BTC") {
setExpiredInvoiceError("Invoice has expired. Generate a new invoice!")
}
} else {
setMinutes(Math.floor(remainingSeconds / 60))
setSeconds(remainingSeconds % 60)
setProgress(
PROGRESS_BAR_MAX_WIDTH -
(elapsedTime / (USD_INVOICE_EXPIRE_INTERVAL * 1000)) * 100,
)
}
}, 1000)

return () => clearInterval(interval)
// we don't want to re-run it when any particular prop or state value changes.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

const progressBarStyle = {
width: `${progress}%`,
backgroundColor: minutes < 1 ? "rgb(255, 0, 0)" : "rgba(83, 111, 242, 1)",
}
const expiryTimestamp = timerRef.current
const { seconds, minutes } = useTimer({
expiryTimestamp,
onExpire: () => {
if (recipientWalletCurrency === "BTC") return
setExpiredInvoiceError("Invoice has expired. Generate a new invoice!")
},
})

const { createInvoice, data, errorsMessage, loading, invoiceStatus } = useCreateInvoice(
{
Expand Down Expand Up @@ -164,16 +183,6 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:
return type?.[0]
}, [deviceDetails])

const fallbackUrl =
OS === "ios" ? appStoreLink : OS === "android" ? playStoreLink : apkLink

const handleLinkClick = () => {
if (isDesktopType() === "Macintosh") {
return window.open(appStoreLink, "_blank")
}
return window.open(playStoreLink, "_blank")
}

React.useEffect(() => {
isMobileDevice()
isDesktopType()
Expand Down Expand Up @@ -235,9 +244,9 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:
<div className={styles.timer_container}>
<p>{`${minutes}:${seconds}`}</p>
<div className={styles.timer}>
<span></span>
<span style={progressBarStyle}></span>
</div>
<p>{USD_MAX_INVOICE_TIME}</p>
<p>{`${USD_MAX_INVOICE_TIME}:00`}</p>
</div>
)}
<div>
Expand All @@ -255,18 +264,7 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:
logoWidth={100}
/>
</div>
<Button
className={styles.pay_with_wallet}
onClick={() => {
!isMobileDevice() && setOpenModal(true)
}}
>
{isMobileDevice() ? (
<Link href={isMobileDevice() ? fallbackUrl : ""}>Pay in Wallet</Link>
) : (
"Pay in wallet"
)}
</Button>

<div className={styles.qr_clipboard}>
<OverlayTrigger
show={copied}
Expand Down Expand Up @@ -313,59 +311,6 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:
paymentAmount={paymentAmount}
dispatch={dispatch}
/>
{openModal && (
<Modal
show={openModal}
onHide={() => setOpenModal(false)}
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header className={styles.modal_header} closeButton>
You can pay with
</Modal.Header>
<Modal.Body>
<div className={styles.modal_item_wrapper}>
<Image
src="/icons/blink-logo-icon.svg"
alt="bitcoin beach wallet image"
className={styles.modal_item}
style={{ cursor: "pointer" }}
onClick={handleLinkClick}
/>
<Image
src="/pheonix-logo.png"
alt="pheonix wallet logo"
className={styles.modal_item}
/>
<Image
src="/wallet-of-satoshi-logo.png"
alt="wallet of satoshi logo"
className={styles.modal_item}
/>
<Image
className={styles.modal_item}
src="/blue-wallet.png"
alt="blue wallet logo"
/>
<Image
className={styles.modal_item}
src="/breez-logo.png"
alt="breez beach wallet logo"
/>
<Image
className={styles.modal_item}
src="/muun-logo.png"
alt="muun wallet logo"
/>
</div>
</Modal.Body>
<Modal.Footer>
<button className={styles.use_bbw_button} onClick={handleLinkClick}>
Use Bitcoin Beach wallet
</button>
</Modal.Footer>
</Modal>
)}
</div>
)
}
Expand Down
5 changes: 3 additions & 2 deletions components/ParsePOSPayment/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,13 +300,14 @@ function ParsePayment({ defaultWalletCurrency, walletId, dispatch, state }: Prop
style={{
width: "100%",
border: 0,
backgroundColor: "white",
color: "black",
backgroundColor: "transparent",
textAlign: "center",
fontWeight: 600,
}}
value={!amount ? 0 : valueInFiat}
intlConfig={{ locale: navigator.language, currency: display }}
disabled={true}
readOnly={true}
/>
</div>
<div
Expand Down
Loading

0 comments on commit efd8850

Please sign in to comment.