diff --git a/src/alerts.ts b/src/alerts.ts index 192625c5..17259527 100644 --- a/src/alerts.ts +++ b/src/alerts.ts @@ -9,6 +9,7 @@ import explorer from './explorer/alerts'; import firmware from './firmware/alerts'; import hub from './hub/alerts'; import mpy from './mpy/alerts'; +import sponsor from './sponsor/alerts'; import type { CreateToast } from './toasterTypes'; /** This collects alerts from all of the subsystems of the app */ @@ -20,6 +21,7 @@ const alertDomains = { firmware, hub, mpy, + sponsor, }; /** Gets the type of available alert domains. */ diff --git a/src/sponsor/SponsorDialog.tsx b/src/sponsor/SponsorDialog.tsx index 6ceaa79a..f59207cd 100644 --- a/src/sponsor/SponsorDialog.tsx +++ b/src/sponsor/SponsorDialog.tsx @@ -5,6 +5,7 @@ import { AnchorButton, Classes, Dialog, Intent } from '@blueprintjs/core'; import classNames from 'classnames'; import React from 'react'; import { useDispatch } from 'react-redux'; +import { alertsShowAlert } from '../alerts/actions'; import { pybricksTeamUrl } from '../app/constants'; import { useSelector } from '../reducers'; import ClipboardIcon from '../utils/ClipboardIcon'; @@ -107,7 +108,10 @@ const SponsorDialog: React.VoidFunctionComponent = () => { intent={Intent.PRIMARY} icon={} fill={true} - onClick={() => navigator.clipboard.writeText('pybricks.eth')} + onClick={() => { + navigator.clipboard.writeText('pybricks.eth'); + dispatch(alertsShowAlert('sponsor', 'addressCopied')); + }} > pybricks.eth diff --git a/src/sponsor/alerts/AddressCopied.tsx b/src/sponsor/alerts/AddressCopied.tsx new file mode 100644 index 00000000..f3258d3b --- /dev/null +++ b/src/sponsor/alerts/AddressCopied.tsx @@ -0,0 +1,22 @@ +// SPDX-License-Identifier: MIT +// Copyright (c) 2022 The Pybricks Authors + +import { Intent } from '@blueprintjs/core'; +import React from 'react'; +import type { CreateToast } from '../../toasterTypes'; +import { useI18n } from './i18n'; + +const AddressCopied: React.VoidFunctionComponent = () => { + const i18n = useI18n(); + return

{i18n.translate('addressCopied.message')}

; +}; + +export const addressCopied: CreateToast = (onAction) => { + return { + message: , + icon: 'info-sign', + intent: Intent.PRIMARY, + timeout: 5000, + onDismiss: () => onAction('dismiss'), + }; +}; diff --git a/src/sponsor/alerts/i18n.ts b/src/sponsor/alerts/i18n.ts new file mode 100644 index 00000000..eb8dc486 --- /dev/null +++ b/src/sponsor/alerts/i18n.ts @@ -0,0 +1,12 @@ +// SPDX-License-Identifier: MIT +// Copyright (c) 2022 The Pybricks Authors + +import { useI18n as useShopifyI18n } from '@shopify/react-i18n'; +import type { TypedI18n } from '../../i18n'; +import type translations from './translations/en.json'; + +export function useI18n(): TypedI18n { + // istanbul ignore next: babel-loader rewrites this line + const [i18n] = useShopifyI18n(); + return i18n; +} diff --git a/src/sponsor/alerts/index.ts b/src/sponsor/alerts/index.ts new file mode 100644 index 00000000..149cd665 --- /dev/null +++ b/src/sponsor/alerts/index.ts @@ -0,0 +1,7 @@ +// SPDX-License-Identifier: MIT +// Copyright (c) 2022 The Pybricks Authors + +import { addressCopied } from './AddressCopied'; + +// gathers all of the alert creation functions for passing up to the top level +export default { addressCopied }; diff --git a/src/sponsor/alerts/translations/en.json b/src/sponsor/alerts/translations/en.json new file mode 100644 index 00000000..3fcf31e3 --- /dev/null +++ b/src/sponsor/alerts/translations/en.json @@ -0,0 +1,5 @@ +{ + "addressCopied": { + "message": "Address copied to clipboard. Use a wallet that supports ENS addresses to donate." + } +}