'
+ '{state.currentStep.name}…
+
+
+ 
+
+
+
+
+ );
+}
diff --git a/src/pages/progress-connect/components/AppNotification.tsx b/src/pages/progress-connect/components/AppNotification.tsx
new file mode 100644
index 00000000..6ea622cf
--- /dev/null
+++ b/src/pages/progress-connect/components/AppNotification.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { HeaderEmpty } from '@/popup/components/layout/HeaderEmpty';
+import { LoadingSpinner } from '@/popup/components/LoadingSpinner';
+import { Countdown } from '@/pages/progress-connect/components/Countdown';
+import { useState } from '@/pages/progress-connect/context';
+import { useBrowser } from '@/popup/lib/context';
+
+export function AppNotification() {
+ const browser = useBrowser();
+ const { currentStep } = useState();
+
+ const logo = browser.runtime.getURL('assets/images/logo.svg');
+
+ return (
+ Web Monetization
+Connecting wallet…
+
+
+
+
+ );
+}
diff --git a/src/pages/progress-connect/components/Countdown.tsx b/src/pages/progress-connect/components/Countdown.tsx
new file mode 100644
index 00000000..f3446084
--- /dev/null
+++ b/src/pages/progress-connect/components/Countdown.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { cn } from '@/shared/helpers';
+
+export function Countdown({
+ expiresAt,
+ className,
+}: {
+ expiresAt: number;
+ className?: string;
+}) {
+ const timer = useCountdown(expiresAt);
+
+ return (
+
+ {timer[0]}:{timer[1]}
+
+ );
+}
+
+export function useCountdown(expiresAt: number) {
+ const getMinuteAndSecond = (deadline: number) => {
+ const distance = deadline - Date.now();
+ if (distance < 0) {
+ return ['00', '00'] as const;
+ }
+ const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+ const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+ return [
+ minutes.toString().padStart(2, '0'),
+ seconds.toString().padStart(2, '0'),
+ ] as const;
+ };
+
+ const [value, setValue] = React.useState(getMinuteAndSecond(expiresAt));
+
+ React.useEffect(() => {
+ let requestId: ReturnType
+ {currentStep.name}…
+ {currentStep.status === 'active' && currentStep.expiresAt && (
+
+ {steps.map((step) => (
+
+ );
+}
+
+function Step({ step }: { step: StepWithStatus }) {
+ return (
+
+ );
+}
diff --git a/src/pages/progress-connect/context.tsx b/src/pages/progress-connect/context.tsx
new file mode 100644
index 00000000..d8484ad0
--- /dev/null
+++ b/src/pages/progress-connect/context.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import type { Runtime } from 'webextension-polyfill';
+import { useBrowser } from '@/popup/lib/context';
+import type {
+ KeyAutoAddToBackgroundMessage,
+ StepWithStatus,
+} from '@/content/keyAutoAdd/lib/types';
+import { CONNECTION_NAME } from '@/background/services/keyAutoAdd';
+
+type State = {
+ currentStep: StepWithStatus;
+ steps: StepWithStatus[];
+};
+
+type OnPortMessageListener = Parameters<
+ Runtime.Port['onMessage']['addListener']
+>[0];
+
+const StateContext = React.createContext
-
- )
-}
diff --git a/src/popup/components/ConnectWalletForm.tsx b/src/popup/components/ConnectWalletForm.tsx
index c825d0bd..26694dba 100644
--- a/src/popup/components/ConnectWalletForm.tsx
+++ b/src/popup/components/ConnectWalletForm.tsx
@@ -1,204 +1,580 @@
-import React, { useCallback, useEffect } from 'react'
-import { Button } from '@/popup/components/ui/Button'
-import { Input } from '@/popup/components/ui/Input'
-import { Label } from '@/popup/components/ui/Label'
-import { Switch } from '@/popup/components/ui/Switch'
-import { Code } from '@/popup/components/ui/Code'
-import { connectWallet } from '@/popup/lib/messages'
-import { debounceSync, getWalletInformation } from '@/shared/helpers'
+import React from 'react';
+import { Button } from '@/popup/components/ui/Button';
+import { Input } from '@/popup/components/ui/Input';
+import { Switch } from '@/popup/components/ui/Switch';
+import { Code } from '@/popup/components/ui/Code';
+import { ErrorMessage } from '@/popup/components/ErrorMessage';
+import { LoadingSpinner } from '@/popup/components/LoadingSpinner';
import {
charIsNumber,
formatNumber,
getCurrencySymbol,
- toWalletAddressUrl
-} from '@/popup/lib/utils'
-import { useForm } from 'react-hook-form'
-
-interface ConnectWalletFormInputs {
- walletAddressUrl: string
- amount: string
- recurring: boolean
+ toWalletAddressUrl,
+} from '@/popup/lib/utils';
+import { useTranslation } from '@/popup/lib/context';
+import {
+ cn,
+ errorWithKey,
+ isErrorWithKey,
+ sleep,
+ type ErrorWithKeyLike,
+} from '@/shared/helpers';
+import type { WalletAddress } from '@interledger/open-payments';
+import type { ConnectWalletPayload, Response } from '@/shared/messages';
+import type { PopupTransientState } from '@/shared/types';
+
+interface Inputs {
+ walletAddressUrl: string;
+ amount: string;
+ recurring: boolean;
+ autoKeyAddConsent: boolean;
}
+type ErrorInfo = { message: string; info?: ErrorWithKeyLike };
+type ErrorsParams = 'walletAddressUrl' | 'amount' | 'keyPair' | 'connect';
+type Errors = Record
-
- {t('allInvalidLinks_state_text')}
-
+
+ );
+ };
+
+ return (
+
+ );
+};
+
+function isAutoKeyAddFailed(state: PopupTransientState['connect']) {
+ if (state?.status === 'error') {
+ return (
+ isErrorWithKey(state.error) &&
+ state.error.key !== 'connectWallet_error_tabClosed'
+ );
+ } else if (state?.status === 'error:key') {
+ return (
+ isErrorWithKey(state.error) &&
+ state.error.key.startsWith('connectWalletKeyService_error_')
+ );
+ }
+ return false;
+}
+
+function canRetryAutoKeyAdd(err?: ErrorInfo['info']) {
+ if (!err) return false;
+ return (
+ err.key === 'connectWalletKeyService_error_noConsent' ||
+ err.cause?.key === 'connectWalletKeyService_error_timeoutLogin' ||
+ err.cause?.key === 'connectWalletKeyService_error_accountNotFound'
+ );
+}
+
+function validateWalletAddressUrl(value: string): null | ErrorWithKeyLike {
+ if (!value) {
+ return errorWithKey('connectWallet_error_urlRequired');
+ }
+ let url: URL;
+ try {
+ url = new URL(toWalletAddressUrl(value));
+ } catch {
+ return errorWithKey('connectWallet_error_urlInvalidUrl');
+ }
+
+ if (url.protocol !== 'https:') {
+ return errorWithKey('connectWallet_error_urlInvalidNotHttps');
+ }
+
+ return null;
+}
+
+function validateAmount(
+ value: string,
+ currencySymbol: string,
+): null | ErrorWithKeyLike {
+ if (!value) {
+ return errorWithKey('connectWallet_error_amountRequired');
+ }
+ const val = Number(value);
+ if (Number.isNaN(val)) {
+ return errorWithKey('connectWallet_error_amountInvalidNumber', [
+ `${currencySymbol}${value}`,
+ ]);
+ }
+ if (val <= 0) {
+ return errorWithKey('connectWallet_error_amountMinimum');
+ }
+ return null;
+}
+
+function allowOnlyNumericInput(ev: React.KeyboardEvent+ {error.whyText} +
+ {error.details.message} + {canRetryAutoKeyAdd(error.details.info) && ( + + )} +
@@ -24,8 +26,8 @@ export const ErrorMessage = React.forwardRef(
{children}
+
+ );
+};
diff --git a/src/popup/components/OutOfFunds.tsx b/src/popup/components/OutOfFunds.tsx
index ca7367bd..4ad9ea06 100644
--- a/src/popup/components/OutOfFunds.tsx
+++ b/src/popup/components/OutOfFunds.tsx
@@ -1,37 +1,37 @@
-import React from 'react'
-import { useForm } from 'react-hook-form'
-import type { RecurringGrant, OneTimeGrant, AmountValue } from '@/shared/types'
-import type { AddFundsPayload, Response } from '@/shared/messages'
-import type { WalletAddress } from '@interledger/open-payments'
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import type { RecurringGrant, OneTimeGrant, AmountValue } from '@/shared/types';
+import type { AddFundsPayload, Response } from '@/shared/messages';
+import type { WalletAddress } from '@interledger/open-payments';
import {
charIsNumber,
formatNumber,
getCurrencySymbol,
- transformBalance
-} from '@/popup/lib/utils'
-import { useTranslation } from '@/popup/lib/context'
-import { getNextOccurrence } from '@/shared/helpers'
-import { ErrorMessage } from '@/popup/components/ErrorMessage'
-import { Button } from '@/popup/components/ui/Button'
-import { Input } from '@/popup/components/ui/Input'
+ transformBalance,
+} from '@/popup/lib/utils';
+import { useTranslation } from '@/popup/lib/context';
+import { getNextOccurrence } from '@/shared/helpers';
+import { ErrorMessage } from '@/popup/components/ErrorMessage';
+import { Button } from '@/popup/components/ui/Button';
+import { Input } from '@/popup/components/ui/Input';
interface OutOfFundsProps {
- info: Pick
+
+ {text}
+
@@ -61,39 +61,39 @@ export const OutOfFunds = ({
{t('outOfFunds_action_optionOneTime')}
- )
-}
+ );
+};
interface AddFundsProps {
- info: Pick
-
- )
-}
diff --git a/src/popup/components/WalletInformation.tsx b/src/popup/components/WalletInformation.tsx
index cb1cde07..5f302f7d 100644
--- a/src/popup/components/WalletInformation.tsx
+++ b/src/popup/components/WalletInformation.tsx
@@ -1,21 +1,22 @@
-import { Input } from '@/popup/components/ui/Input'
-import { Label } from '@/popup/components/ui/Label'
-import React from 'react'
-import { Code } from '@/popup/components/ui/Code'
-import { PopupStore } from '@/shared/types'
-import { Button } from '@/popup/components/ui/Button'
-import { disconnectWallet } from '@/popup/lib/messages'
-import { useForm } from 'react-hook-form'
+import { Input } from '@/popup/components/ui/Input';
+import { Label } from '@/popup/components/ui/Label';
+import React from 'react';
+import { Code } from '@/popup/components/ui/Code';
+import { PopupStore } from '@/shared/types';
+import { Button } from '@/popup/components/ui/Button';
+import { useMessage } from '@/popup/lib/context';
+import { useForm } from 'react-hook-form';
interface WalletInformationProps {
- info: PopupStore
+ info: PopupStore;
}
export const WalletInformation = ({ info }: WalletInformationProps) => {
+ const message = useMessage();
const {
handleSubmit,
- formState: { isSubmitting }
- } = useForm()
+ formState: { isSubmitting },
+ } = useForm();
return (
-
- {t('siteNotMonetized_state_text')}
-
@@ -36,15 +37,15 @@ export const WalletInformation = ({ info }: WalletInformationProps) => {
{/* TODO: Improve error handling */}
- )
-}
+ );
+};
diff --git a/src/popup/components/WarningMessage.tsx b/src/popup/components/WarningMessage.tsx
index aac52ac1..7d2c01b4 100644
--- a/src/popup/components/WarningMessage.tsx
+++ b/src/popup/components/WarningMessage.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
-import { WarningSign } from './Icons'
-import { cn } from '@/shared/helpers'
+import React from 'react';
+import { WarningSign } from './Icons';
+import { cn } from '@/shared/helpers';
interface WarningMessageProps extends React.HTMLAttributes
-
-
- Web Monetization
-
-
-
+ 
+
+ Web Monetization
+{children}
+
+
- )
-}
+ );
+};
diff --git a/src/popup/components/ui/Button.tsx b/src/popup/components/ui/Button.tsx
index 2ed857cb..bc21e6fd 100644
--- a/src/popup/components/ui/Button.tsx
+++ b/src/popup/components/ui/Button.tsx
@@ -1,14 +1,14 @@
-import { type VariantProps, cva } from 'class-variance-authority'
-import React, { forwardRef } from 'react'
+import { type VariantProps, cva } from 'class-variance-authority';
+import React, { forwardRef } from 'react';
-import { LoadingSpinner } from '@/popup/components/LoadingSpinner'
-import { cn } from '@/shared/helpers'
+import { LoadingSpinner } from '@/popup/components/LoadingSpinner';
+import { cn } from '@/shared/helpers';
const buttonVariants = cva(
[
'relative inline-flex items-center justify-center whitespace-nowrap rounded-xl font-semibold',
'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500',
- 'disabled:pointer-events-none disabled:select-none disabled:opacity-50'
+ 'disabled:pointer-events-none disabled:select-none disabled:opacity-50',
],
{
@@ -16,32 +16,32 @@ const buttonVariants = cva(
variant: {
default: 'bg-button-base text-white hover:bg-button-base-hover',
destructive: 'bg-error text-error hover:bg-error-hover',
- ghost: ''
+ ghost: '',
},
size: {
default: 'px-6 py-4 font-medium',
- icon: 'h-6 w-6'
+ icon: 'h-6 w-6',
},
fullWidth: {
- true: 'w-full'
+ true: 'w-full',
},
loading: {
- true: 'text-transparent'
- }
+ true: 'text-transparent',
+ },
},
defaultVariants: {
variant: 'default',
- size: 'default'
- }
- }
-)
+ size: 'default',
+ },
+ },
+);
export interface ButtonProps
extends VariantProps,
React.ButtonHTMLAttributes {
- loading?: boolean
+ loading?: boolean;
/** Optional only when children are passed */
- ['aria-label']?: string
+ ['aria-label']?: string;
}
export const Button = forwardRef(
@@ -56,7 +56,7 @@ export const Button = forwardRef(
children,
...props
},
- ref
+ ref,
) {
return (
- )
- }
-)
+ );
+ },
+);
diff --git a/src/popup/components/ui/Code.tsx b/src/popup/components/ui/Code.tsx
index 931e0b39..71998828 100644
--- a/src/popup/components/ui/Code.tsx
+++ b/src/popup/components/ui/Code.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import { Button } from './Button'
-import { CheckIcon, ClipboardIcon } from '../Icons'
-import { cn } from '@/shared/helpers'
+import React from 'react';
+import { Button } from './Button';
+import { CheckIcon, ClipboardIcon } from '../Icons';
+import { cn } from '@/shared/helpers';
interface CodeProps extends React.HTMLAttributes {
- value: string
+ value: string;
}
export const Code = ({ value, className, ...props }: CodeProps) => {
@@ -12,7 +12,7 @@ export const Code = ({ value, className, ...props }: CodeProps) => {
{
- value: string
+ value: string;
}
const CopyButton = ({ value, ...props }: CopyButtonProps) => {
- const [hasCopied, setHasCopied] = React.useState(false)
+ const [hasCopied, setHasCopied] = React.useState(false);
React.useEffect(() => {
if (hasCopied === true) {
setTimeout(() => {
- setHasCopied(false)
- }, 2000)
+ setHasCopied(false);
+ }, 2000);
}
- }, [hasCopied])
+ }, [hasCopied]);
return (
- )
-}
+ );
+};
diff --git a/src/popup/components/ui/Input.tsx b/src/popup/components/ui/Input.tsx
index 6d9cf837..ebbe9786 100644
--- a/src/popup/components/ui/Input.tsx
+++ b/src/popup/components/ui/Input.tsx
@@ -1,61 +1,75 @@
-import { type VariantProps, cva } from 'class-variance-authority'
-import React, { forwardRef } from 'react'
-import { cn } from '@/shared/helpers'
-import { Label } from '@/popup/components/ui/Label'
+import { type VariantProps, cva } from 'class-variance-authority';
+import React, { forwardRef } from 'react';
+import { cn } from '@/shared/helpers';
+import { Label } from '@/popup/components/ui/Label';
const inputVariants = cva(
[
'h-14 w-full rounded-xl border border-2 px-4 text-base text-medium',
'focus:border-focus focus:outline-none',
- 'placeholder-disabled'
+ 'placeholder:text-disabled',
],
{
variants: {
variant: {
- default: 'border-base'
+ default: 'border-base',
},
disabled: {
- true: 'border-transparent bg-disabled'
- }
+ true: 'border-transparent bg-disabled',
+ },
+ readOnly: {
+ true: 'border-transparent bg-disabled',
+ },
},
defaultVariants: {
- variant: 'default'
- }
- }
-)
+ variant: 'default',
+ },
+ },
+);
export interface InputProps
extends VariantProps,
React.InputHTMLAttributes {
- errorMessage?: string
- disabled?: boolean
- addOn?: React.ReactNode
- label?: React.ReactNode
- description?: React.ReactNode
+ errorMessage?: string;
+ disabled?: boolean;
+ readOnly?: boolean;
+ addOn?: React.ReactNode;
+ addOnPosition?: 'left' | 'right';
+ label?: React.ReactNode;
+ description?: React.ReactNode;
}
export const Input = forwardRef(function Input(
{
type = 'text',
addOn,
+ addOnPosition = 'left',
label,
description,
errorMessage,
disabled,
className,
+ id,
...props
},
- ref
+ ref,
) {
- const id = React.useId()
+ const randomId = React.useId();
+ id ||= randomId; // cannot call useId conditionally, but use randomId only if default not provided
+
return (
@@ -21,23 +21,23 @@ export const Code = ({ value, className, ...props }: CodeProps) => {
- )
-}
+ );
+};
interface CopyButtonProps extends React.HTMLAttributes
{label ? : null}
{description ?
{description}
: null}
{addOn ? (
-
+