diff --git a/packages/app/src/Element/SendSats.css b/packages/app/src/Element/SendSats.css index 7141573d..e09d4ad0 100644 --- a/packages/app/src/Element/SendSats.css +++ b/packages/app/src/Element/SendSats.css @@ -64,17 +64,11 @@ .amounts { display: flex; width: 100%; - overflow-x: scroll; - -ms-overflow-style: none; /* for Internet Explorer, Edge */ - scrollbar-width: none; /* for Firefox */ margin-bottom: 16px; } -.amounts::-webkit-scrollbar { - display: none; -} - .sat-amount { + flex: 1 1 auto; text-align: center; display: inline-block; background-color: #2a2a2a; diff --git a/packages/app/src/Element/SendSats.tsx b/packages/app/src/Element/SendSats.tsx index 0ac4c874..f5abe744 100644 --- a/packages/app/src/Element/SendSats.tsx +++ b/packages/app/src/Element/SendSats.tsx @@ -14,7 +14,6 @@ import Modal from "Element/Modal"; import QrCode from "Element/QrCode"; import Copy from "Element/Copy"; import useWebln from "Hooks/useWebln"; -import useHorizontalScroll from "Hooks/useHorizontalScroll"; import messages from "./messages"; @@ -49,6 +48,18 @@ export interface LNURLTipProps { author?: HexKey; } +function chunks(arr: any[], length: number) { + const result = []; + let idx = 0; + let n = arr.length / length; + while (n > 0) { + result.push(arr.slice(idx, idx + length)); + idx += length; + n -= 1; + } + return result; +} + export default function LNURLTip(props: LNURLTipProps) { const onClose = props.onClose || (() => undefined); const service = props.svc; @@ -74,7 +85,6 @@ export default function LNURLTip(props: LNURLTipProps) { const webln = useWebln(show); const { formatMessage } = useIntl(); const publisher = useEventPublisher(); - const horizontalScroll = useHorizontalScroll(); const canComment = (payService?.commentAllowed ?? 0) > 0 || payService?.nostrPubkey; useEffect(() => { @@ -100,6 +110,7 @@ export default function LNURLTip(props: LNURLTipProps) { } return []; }, [payService]); + const amountRows = useMemo(() => chunks(serviceAmounts, 3), [serviceAmounts]); const selectAmount = (a: number) => { setError(undefined); @@ -204,6 +215,19 @@ export default function LNURLTip(props: LNURLTipProps) { } } + function renderAmounts(amount: number, amounts: number[]) { + return ( +