diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx index 6c2a7917..fbdeaf17 100644 --- a/src/components/layout/header.tsx +++ b/src/components/layout/header.tsx @@ -42,14 +42,14 @@ export const Header = () => { } return ( -
-
+
+
Web Monetization Logo -

Web Monetization

+

Web Monetization

-
+
- +
) diff --git a/src/components/layout/main-layout.tsx b/src/components/layout/main-layout.tsx index 92fabac9..2dc28622 100644 --- a/src/components/layout/main-layout.tsx +++ b/src/components/layout/main-layout.tsx @@ -4,12 +4,12 @@ import { Outlet } from 'react-router-dom' import { Header } from './header' const Divider = () => { - return
+ return
} export const MainLayout = () => { return ( -
+
diff --git a/src/components/slider.tsx b/src/components/slider.tsx index 6981e7a7..360eaeb7 100644 --- a/src/components/slider.tsx +++ b/src/components/slider.tsx @@ -23,6 +23,7 @@ const sliderClasses = ` [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:bg-switch-base [&::-moz-range-thumb]:rounded-full + [&::-webkit-slider-thumb]:disabled:bg-disabled-strong w-full h-1 bg-disabled-strong rounded-lg appearance-none cursor-pointer dark:bg-disabled-strong ` @@ -42,7 +43,7 @@ export const Slider = forwardRef(function Slider( aria-disabled={disabled ?? false} aria-invalid={!!errorMessage} aria-describedby={errorMessage} - value={value} + value={disabled ? 0 : value} onChange={onChange} {...props} /> diff --git a/src/popup/Popup.scss b/src/popup/Popup.scss index 62e29e09..cc02dc3b 100644 --- a/src/popup/Popup.scss +++ b/src/popup/Popup.scss @@ -2,7 +2,7 @@ body { width: fit-content; height: fit-content; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', + font-family: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -28,19 +28,6 @@ body { box-sizing: border-box; } -.content { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - flex-basis: auto; - padding: 0 20px 10px; - - img { - height: 96px; - } -} - .pointerForm { width: 100%; border-radius: 8px; diff --git a/src/popup/index.html b/src/popup/index.html index 5f106fb3..93499cec 100755 --- a/src/popup/index.html +++ b/src/popup/index.html @@ -1,10 +1,13 @@ - + <%= htmlWebpackPlugin.options.title %> + + + diff --git a/src/popup/pages/Home.tsx b/src/popup/pages/Home.tsx index b4907faa..25cd67f4 100644 --- a/src/popup/pages/Home.tsx +++ b/src/popup/pages/Home.tsx @@ -1,212 +1,84 @@ -import React, { useEffect, useState } from 'react' -import { runtime } from 'webextension-polyfill' +import React, { useState } from 'react' +import { Button } from '@/components/button' +import { DollarSign, WarningSign } from '@/components/icons' +import { Input } from '@/components/input' +import { Label } from '@/components/label' import { Slider } from '@/components/slider' +import { Switch } from '@/components/switch' +import { usePopup } from '@/providers/popup.state' import { formatCurrency } from '@/utils/formatCurrency' -import { sendMessage, sendMessageToActiveTab } from '@/utils/sendMessages' -import { getStorageKey } from '@/utils/storage' - -const Success = runtime.getURL('assets/images/web-monetization-success.svg') -const Fail = runtime.getURL('assets/images/web-monetization-fail.svg') -const CheckIcon = runtime.getURL('assets/images/check.svg') -const DollarIcon = runtime.getURL('assets/images/dollar.svg') -const CloseIcon = runtime.getURL('assets/images/close.svg') - -// --- Temporary code until real UI implemented --- - -interface IProps { - isMonetizationReady: boolean -} - -const PopupFooter: React.FC = ({ isMonetizationReady }) => ( -
- {isMonetizationReady ? ( - This site is Web Monetization ready - ) : ( - This site isn't Web Monetization ready - )} -
-) - -// --- End of Temporary code until real UI implemented --- export const Home = () => { - const [remainingBalance, setRemainingBalance] = useState(0) - const [rateOfPay, setRateOfPay] = useState(0.36) - const [loading, setLoading] = useState(false) - const [paymentStarted, setPaymentStarted] = useState(false) - const [spent, setSpent] = useState(0) - const [sendingPaymentPointer, setSendingPaymentPointer] = useState('') - const [isMonetizationReady, setIsMonetizationReady] = useState(false) - const [receivingPaymentPointer, setReceivingPaymentPointer] = useState('') - const [formData, setFormData] = useState({ - paymentPointer: sendingPaymentPointer || '', - amount: 0, - }) - - useEffect(() => { - checkMonetizationReady() - getSendingPaymentPointer() - listenForIncomingPayment() - getRateOfPay() - getRemainingBalance() - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []) - - const getRateOfPay = async () => { - const response = await getStorageKey('rateOfPay') - response && setRateOfPay(response) - } - - const getRemainingBalance = async () => { - const response = await getStorageKey('amount') - response && setRemainingBalance(response) - } - - const checkMonetizationReady = async () => { - const response = await sendMessageToActiveTab({ type: 'IS_MONETIZATION_READY' }) - setIsMonetizationReady(response.data.monetization) - setReceivingPaymentPointer(response.data.paymentPointer) - } - - const handleChange = (event: React.ChangeEvent) => { - setFormData(prevState => ({ ...prevState, [event.target.name]: event.target.value })) - } - - const handleSubmit = async (event: React.FormEvent) => { - event.preventDefault() - - setLoading(true) - const data = { - amount: formData.amount, - paymentPointer: formData.paymentPointer, - incomingPayment: receivingPaymentPointer, - } + const { + data: { wmEnabled, rateOfPay, amount, amountType }, + setData, + } = usePopup() + const [tipAmount, setTipAmount] = useState('') - await sendMessage({ type: 'SET_INCOMING_POINTER', data }) - } - - const getSendingPaymentPointer = async () => { - const response = await sendMessage({ type: 'GET_SENDING_PAYMENT_POINTER' }) - setSendingPaymentPointer(response.data.sendingPaymentPointerUrl) - - const { sendingPaymentPointerUrl: paymentPointer, amount } = response.data - if (paymentPointer && amount) { - setFormData({ - paymentPointer: response.data.sendingPaymentPointerUrl, - amount: response.data.amount, - }) - } - } - - const listenForIncomingPayment = async () => { - const listener = (message: any) => { - if (message.type === 'SPENT_AMOUNT') { - setSpent(message.data.spentAmount) - setPaymentStarted(true) - } - - if (loading) { - setLoading(false) - } - } - - runtime.onMessage.addListener(listener) - return () => { - runtime.onMessage.removeListener(listener) - } + const updateRateOfPay = async (event: any) => { + setData(prevState => ({ ...prevState, rateOfPay: event.target.value })) } - const stopPayments = async (e: React.MouseEvent) => { - e.preventDefault() - setPaymentStarted(false) - setTimeout(() => { - if (loading) { - setLoading(false) - } - }, 1000) - await sendMessageToActiveTab({ type: 'STOP_PAYMENTS' }) + const updateStreamType = async (event: any) => { + setData(prevState => ({ + ...prevState, + amountType: { ...prevState.amountType, recurring: event.target.checked }, + })) } - const updateRateOfPay = async (event: any) => { - setRateOfPay(event.target.value) - await sendMessage({ - type: 'SET_STORAGE_KEY', - data: { key: 'rateOfPay', value: event.target.value }, - }) + if (!wmEnabled) { + return ( +
+ +

Web Monetization has been turned off.

+
+ ) } return ( - <> - {!!spent && ( -
- ${spent}/$20 +
+
+
Current rate of pay
+ +
+ {!amountType.recurring ? '0c' : formatCurrency(rateOfPay)} per hour + Remaining balance: ${amount}
- )} -
-
-
Current rate of pay
- -
- {formatCurrency(rateOfPay)} per hour - Remaining balance: ${remainingBalance} -
-
- - {isMonetizationReady ? ( - <> - Success - -
-
- -
- -
-
+
-
- -
- dollar - -
-
+
+ + Continuous payments stream +
-
- {paymentStarted ? ( - - ) : ( - - )} -
- - - ) : ( - Fail - )} +
+ +
+ + setTipAmount(event.target.value)} + icon={} + />
- - + + +
) } diff --git a/src/popup/pages/Settings.tsx b/src/popup/pages/Settings.tsx index caf0804a..766bc969 100644 --- a/src/popup/pages/Settings.tsx +++ b/src/popup/pages/Settings.tsx @@ -92,9 +92,9 @@ export const Settings = () => { if (!wmEnabled) return ( -
+
-

Web Monetization has been turned off.

+

Web Monetization has been turned off.

)