Skip to content

Commit

Permalink
move copy to messages.json
Browse files Browse the repository at this point in the history
  • Loading branch information
@sidvishnoi
sidvishnoi committed Sep 23, 2024
1 parent 89a4bd1 commit 09a2f4a
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 29 deletions.
60 changes: 60 additions & 0 deletions src/_locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,66 @@
"outOfFundsAddFunds_action_addRecurring": {
"message": "Add funds"
},
"connectWallet_text_title": {
"message": "Let's get you set up!"
},
"connectWallet_text_desc": {
"message": ""
},
"connectWallet_label_walletAddress": {
"message": "Enter your wallet address or payment pointer"
},
"connectWallet_labelGroup_amount": {
"message": "Amount"
},
"connectWallet_label_amount": {
"message": "Enter the amount to allocate from your wallet"
},
"connectWallet_label_recurring": {
"message": "Renew monthly"
},
"connectWallet_label_publicKey": {
"message": "Please copy this key and paste it into your wallet manually and then connect."
},
"connectWallet_text_publicKeyLearnMore": {
"message": "Learn more."
},
"connectWallet_action_connect": {
"message": "Connect"
},
"connectWallet_text_autoPublicKeyNotice": {
"message": "We'll automatically add a key-pair with your wallet provider."
},
"connectWallet_text_autoPublicKeyNoticeLearnMore": {
"message": "Learn more"
},
"connectWallet_error_urlRequired": {
"message": "Wallet address is required."
},
"connectWallet_error_urlInvalidUrl": {
"message": "Invalid wallet address URL."
},
"connectWallet_error_urlInvalidUrlHttps": {
"message": "Wallet address must be a https:// URL or a payment pointer.'"
},
"connectWallet_error_amountRequired": {
"message": "Amount is required."
},
"connectWallet_error_amountInvalidNumber": {
"message": "Please provide a valid number as amount."
},
"connectWallet_error_amountMinimum": {
"message": "An amount greater than $AMOUNT$ is required.",
"placeholders": {
"AMOUNT": { "content": "$1", "example": "$2.05" }
}
},
"connectWallet_error_failedAutoKeyAdd": {
"message": "We couldn't automatically share the key-pair with your provider."
},
"connectWallet_error_failedAutoKeyAddWhy": {
"message": "Why?"
},
"connectWallet_error_invalidClient": {
"message": "Failed to connect. Please make sure you have added the key to the correct wallet address."
},
Expand Down
92 changes: 63 additions & 29 deletions src/popup/components/ConnectWalletForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import {
getCurrencySymbol,
toWalletAddressUrl,
} from '@/popup/lib/utils';
import { cn } from '@/shared/helpers';
import { useTranslation } from '@/popup/lib/context';
import { cn, type TranslationKeys } from '@/shared/helpers';
import type { WalletAddress } from '@interledger/open-payments';
import type { ConnectWalletPayload, Response } from '@/shared/messages';

Expand All @@ -38,6 +39,8 @@ export const ConnectWalletForm = ({
saveValue = () => {},
onConnect = () => {},
}: ConnectWalletFormProps) => {
const t = useTranslation();

const [walletAddressUrl, setWalletAddressUrl] = React.useState<
Inputs['walletAddressUrl']
>(defaultValues.walletAddressUrl || '');
Expand Down Expand Up @@ -89,14 +92,21 @@ export const ConnectWalletForm = ({

const handleSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
ev.preventDefault();
const err = {
walletAddressUrl: validateWalletAddressUrl(walletAddressUrl),
amount: validateAmount(amount, currencySymbol.symbol),
};
if (!walletAddressInfo) {
setErrors((_) => ({ ..._, walletAddressUrl: 'Not fetched yet?!' }));
return;
}

const errCodeWalletAddressUrl = validateWalletAddressUrl(walletAddressUrl);
const errCodeAmount = validateAmount(amount);
const err = {
walletAddressUrl: errCodeWalletAddressUrl && t(errCodeWalletAddressUrl),
amount: errCodeAmount
? errCodeAmount === 'connectWallet_error_amountMinimum'
? t(errCodeAmount, [`${currencySymbol.symbol}${amount}`])
: t(errCodeAmount)
: '',
};
setErrors((_) => ({ ..._, ...err }));
if (err.amount || err.walletAddressUrl) {
return;
Expand Down Expand Up @@ -158,16 +168,18 @@ export const ConnectWalletForm = ({
hidden={!!errors.keyPair || autoKeyShareFailed || !!errors.connect}
>
<h2 className="text-center text-lg text-strong">
{"Let's get you set up!"}
{t('connectWallet_text_title')}
</h2>
<p className="text-center text-sm text-weak">{`Just a few quick steps to connect the extension to your wallet`}</p>
<p className="text-center text-sm text-weak">
{t('connectWallet_text_desc')}
</p>
</div>

{errors.connect && <ErrorMessage error={errors.connect} />}

<Input
type="text"
label="Enter your wallet address or payment pointer"
label={t('connectWallet_label_walletAddress')}
id="connectWalletAddressUrl"
placeholder="https://ilp.rafiki.money/johndoe"
errorMessage={errors.walletAddressUrl}
Expand All @@ -190,7 +202,11 @@ export const ConnectWalletForm = ({
setWalletAddressInfo(null);
setWalletAddressUrl(value);

const error = validateWalletAddressUrl(value);
const errorCode = validateWalletAddressUrl(value);
let error: string = errorCode;
if (errorCode) {
error = t(errorCode);
}
setErrors((_) => ({ ..._, walletAddressUrl: error }));
if (!error) {
await getWalletInformation(value);
Expand All @@ -205,12 +221,14 @@ export const ConnectWalletForm = ({
!walletAddressInfo?.assetCode && 'opacity-75',
)}
>
<legend className="sr-only">Amount</legend>
<legend className="sr-only">
{t('connectWallet_labelGroup_amount')}
</legend>
<Input
id="connectAmount"
type="text"
inputMode="numeric"
label="Enter the amount to allocate from your wallet"
label={t('connectWallet_label_amount')}
placeholder="5.00"
defaultValue={amount}
readOnly={!walletAddressInfo?.assetCode}
Expand All @@ -224,7 +242,15 @@ export const ConnectWalletForm = ({
return;
}

const error = validateAmount(value, currencySymbol.symbol);
const errorCode = validateAmount(value);
let error: string = errorCode;
if (errorCode) {
if (errorCode === 'connectWallet_error_amountMinimum') {
error = t(errorCode, [`${currencySymbol}${Number(value)}`]);
} else {
error = t(errorCode);
}
}
setErrors((_) => ({ ..._, amount: error }));

const amountValue = formatNumber(+value, currencySymbol.scale);
Expand All @@ -239,7 +265,7 @@ export const ConnectWalletForm = ({
<div className="px-2">
<Switch
size="small"
label="Renew monthly"
label={t('connectWallet_label_recurring')}
defaultChecked={recurring}
onChange={(ev) => {
const value = ev.currentTarget.checked;
Expand All @@ -253,13 +279,13 @@ export const ConnectWalletForm = ({
{(errors.keyPair || autoKeyShareFailed) && (
<ManualKeyPairNeeded
error={{
message: `We couldn't automatically share the key-pair with your provider.`,
message: t('connectWallet_error_failedAutoKeyAdd'),
details: errors.keyPair,
whyText: `Why?`,
whyText: t('connectWallet_error_failedAutoKeyAddWhy'),
}}
hideError={autoKeyShareFailed}
text={`Please copy this key and paste it into your wallet manually and then connect.`}
learnMoreText={`Learn more.`}
text={t('connectWallet_label_publicKey')}
learnMoreText={t('connectWallet_text_publicKeyLearnMore')}
publicKey={publicKey}
/>
)}
Expand All @@ -277,15 +303,14 @@ export const ConnectWalletForm = ({
!amount
}
loading={isSubmitting}
aria-label="Connect your wallet"
>
Connect
{t('connectWallet_action_connect')}
</Button>

{!errors.keyPair && !autoKeyShareFailed && (
<AutomaticKeyPairNote
text={`We'll automatically add a key-pair with your wallet provider.`}
learnMoreText={`Learn more`}
text={t('connectWallet_text_autoPublicKeyNotice')}
learnMoreText={t('connectWallet_text_autoPublicKeyNoticeLearnMore')}
/>
)}
</div>
Expand Down Expand Up @@ -355,34 +380,43 @@ const AutomaticKeyPairNote: React.FC<{
);
};

function validateWalletAddressUrl(value: string): string {
type ErrorCodeUrl = Extract<
TranslationKeys,
`connectWallet_error_url${string}`
>;
type ErrorCodeAmount = Extract<
TranslationKeys,
`connectWallet_error_amount${string}`
>;

function validateWalletAddressUrl(value: string): '' | ErrorCodeUrl {
if (!value) {
return 'Wallet address is required.';
return 'connectWallet_error_urlRequired';
}
let url: URL;
try {
url = new URL(toWalletAddressUrl(value));
} catch {
return 'Invalid wallet address URL.';
return 'connectWallet_error_urlInvalidUrl';
}

if (url.protocol !== 'https:') {
return 'Wallet address must be a https:// URL or a payment pointer.';
return 'connectWallet_error_urlInvalidUrlHttps';
}

return '';
}

function validateAmount(value: string, currencySymbol: string): string {
function validateAmount(value: string): '' | ErrorCodeAmount {
if (!value) {
return 'Amount is required.';
return 'connectWallet_error_amountRequired';
}
const val = Number(value);
if (Number.isNaN(val)) {
return 'Please provide a valid number as amount.';
return 'connectWallet_error_amountInvalidNumber';
}
if (val <= 0) {
return `An amount greater than ${currencySymbol}${val} is required.`;
return 'connectWallet_error_amountMinimum';
}
return '';
}
Expand Down

0 comments on commit 09a2f4a

Please sign in to comment.