Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(pay): ui improvements #4048

Merged
merged 14 commits into from
Feb 28, 2024
Prev Previous commit
Next Next commit
chore: remove sats
  • Loading branch information
siddhart1o1 committed Feb 23, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 27a15e05e00cdeab31dcc9054bdadfc730129d43
10 changes: 0 additions & 10 deletions apps/pay/app/sats-currency.ts

This file was deleted.

13 changes: 3 additions & 10 deletions apps/pay/components/currency/currency-dropdown.tsx
Original file line number Diff line number Diff line change
@@ -3,9 +3,7 @@ import React, { useEffect } from "react"

import { useSearchParams } from "next/navigation"

import { Currency, useCurrencyListQuery } from "../../lib/graphql/generated"

import { satsCurrencyMetadata } from "@/app/sats-currency"
import { useCurrencyListQuery } from "../../lib/graphql/generated"

export default function CurrencyDropdown({
onSelectedDisplayCurrencyChange,
@@ -24,11 +22,6 @@ export default function CurrencyDropdown({

const [selectedDisplayCurrency, setSelectedDisplayCurrency] = React.useState("USD")
const [isDropDownOpen, setIsDropDownOpen] = React.useState(false)
let updatedCurrencyList: Currency[] = []

if (currencyData?.currencyList) {
updatedCurrencyList = [...(currencyData?.currencyList || []), satsCurrencyMetadata]
}

useEffect(() => {
const newDisplay =
@@ -49,7 +42,7 @@ export default function CurrencyDropdown({
value={selectedDisplayCurrency}
onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
const currencyId = event.target.value
const newDisplayCurrency = updatedCurrencyList?.find(
const newDisplayCurrency = currencyData?.currencyList?.find(
(item) => item.id === currencyId,
)
if (newDisplayCurrency) {
@@ -67,7 +60,7 @@ export default function CurrencyDropdown({
setIsDropDownOpen(false)
}}
>
{updatedCurrencyList?.map((option) => {
{currencyData?.currencyList?.map((option) => {
const fullLabel = `${option.id} - ${option.name} ${
option.flag ? option.flag : ""
}`
16 changes: 3 additions & 13 deletions apps/pay/components/parse-pos-payment/index.tsx
Original file line number Diff line number Diff line change
@@ -23,8 +23,6 @@ import styles from "./parse-payment.module.css"
import ReceiveInvoice from "./receive-invoice"
import NFCComponent from "./nfc"

import { satsCurrencyMetadata } from "@/app/sats-currency"

interface Props {
defaultWalletCurrency: string
walletId: string
@@ -113,19 +111,12 @@ function ParsePayment({

// Update CurrencyMetadata
React.useEffect(() => {
if (displayCurrency === "SATS") {
const latestCurrencyMetadata = currencyList?.find((c) => c.id === displayCurrency)
if (latestCurrencyMetadata) {
dispatch({
type: ACTIONS.UPDATE_DISPLAY_CURRENCY_METADATA,
payload: satsCurrencyMetadata,
payload: latestCurrencyMetadata,
})
} else {
const latestCurrencyMetadata = currencyList?.find((c) => c.id === displayCurrency)
if (latestCurrencyMetadata) {
dispatch({
type: ACTIONS.UPDATE_DISPLAY_CURRENCY_METADATA,
payload: latestCurrencyMetadata,
})
}
}
}, [displayCurrency, currencyList])

@@ -173,7 +164,6 @@ function ParsePayment({
<DigitButton
digit={"."}
dispatch={dispatch}
disabled={displayCurrency === "SATS"}
displayValue={
getLocaleConfig({ locale: language, currency: displayCurrency })
.decimalSeparator
26 changes: 11 additions & 15 deletions apps/pay/components/parse-pos-payment/receive-invoice.tsx
Original file line number Diff line number Diff line change
@@ -41,7 +41,7 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:
const searchParams = useSearchParams()
const { username } = useParams()
const query = extractSearchParams(searchParams)
const { amount, memo, displayCurrency } = query
const { amount, memo } = query

const { currencyToSats, hasLoaded } = useRealtimePrice(state.displayCurrencyMetaData.id)

@@ -112,13 +112,11 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:

const paymentAmount = React.useMemo(() => {
let amountInSats = state.currentAmount
if (displayCurrency !== "SATS") {
;({ convertedCurrencyAmount: amountInSats } = currencyToSats(
Number(state.currentAmount),
state.displayCurrencyMetaData.id,
state.displayCurrencyMetaData.fractionDigits,
))
}
;({ convertedCurrencyAmount: amountInSats } = currencyToSats(
Number(state.currentAmount),
state.displayCurrencyMetaData.id,
state.displayCurrencyMetaData.fractionDigits,
))

let amt = safeAmount(amountInSats)
if (recipientWalletCurrency === "USD") {
@@ -140,13 +138,11 @@ function ReceiveInvoice({ recipientWalletCurrency, walletId, state, dispatch }:

React.useEffect(() => {
let amountInSats = state.currentAmount
if (displayCurrency !== "SATS") {
;({ convertedCurrencyAmount: amountInSats } = currencyToSats(
Number(state.currentAmount),
state.displayCurrencyMetaData.id,
state.displayCurrencyMetaData.fractionDigits,
))
}
;({ convertedCurrencyAmount: amountInSats } = currencyToSats(
Number(state.currentAmount),
state.displayCurrencyMetaData.id,
state.displayCurrencyMetaData.fractionDigits,
))

if (!walletId || !Number(paymentAmount)) return

6 changes: 2 additions & 4 deletions apps/pay/components/payment-outcome/index.tsx
Original file line number Diff line number Diff line change
@@ -39,8 +39,7 @@ gql`
function PaymentOutcome({ paymentRequest, paymentAmount, dispatch, satoshis }: Props) {
const searchParams = useSearchParams()
const { username } = useParams()
const { amount, memo, displayCurrency } = extractSearchParams(searchParams)
const isSatsCurrency = displayCurrency === "SATS"
const { amount, memo } = extractSearchParams(searchParams)

const componentRef = useRef<HTMLDivElement | null>(null)

@@ -94,7 +93,7 @@ function PaymentOutcome({ paymentRequest, paymentAmount, dispatch, satoshis }: P
/>
<p className={styles.text}>
{`The invoice of ${localStorage.getItem("formattedFiatValue")}
${isSatsCurrency ? "" : ` (~${satoshis} sats)`}
(~${satoshis} sats)
has been paid`}
</p>

@@ -108,7 +107,6 @@ function PaymentOutcome({ paymentRequest, paymentAmount, dispatch, satoshis }: P
paymentRequest={paymentRequest}
paymentAmount={paymentAmount}
memo={memo}
isSatsCurrency={isSatsCurrency}
/>
</div>
</div>
32 changes: 9 additions & 23 deletions apps/pay/components/payment-outcome/receipt.tsx
Original file line number Diff line number Diff line change
@@ -14,7 +14,6 @@ interface Props {
paymentRequest: string
memo: string | string[] | undefined
paymentAmount: string | string[] | undefined
isSatsCurrency: boolean
}

function receipt(props: Props) {
@@ -26,28 +25,15 @@ function receipt(props: Props) {

<div className="text-center">
<span>Transaction Amount</span>
{props.isSatsCurrency ? (
<>
<h1
style={{
fontSize: "2.5rem",
}}
>
{localStorage.getItem("formattedFiatValue")}
</h1>
</>
) : (
<>
<h1
style={{
fontSize: "2.5rem",
}}
>
{props.sats} sats
</h1>
<span> ~ {localStorage.getItem("formattedFiatValue")}</span>
</>
)}

<h1
style={{
fontSize: "2.5rem",
}}
>
{props.sats} sats
</h1>
<span> ~ {localStorage.getItem("formattedFiatValue")}</span>

<div className="d-flex justify-content-center">
<table className="my-3 w-100">