diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/ExchangeSelection')
4 files changed, 125 insertions, 48 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts index 06d519268..2ea73d310 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts @@ -21,6 +21,7 @@ import { FeeDescriptionPair, } from "@gnu-taler/taler-util"; import { Loading } from "../../components/Loading.js"; +import { TermsState } from "../../components/TermsOfService/utils.js"; import { HookError } from "../../hooks/useAsyncAsHook.js"; import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js"; import { ButtonHandler, SelectFieldHandler } from "../../mui/handlers.js"; @@ -31,7 +32,9 @@ import { ComparingView, ErrorLoadingView, NoExchangesView, + PrivacyContentView, ReadyView, + TosContentView, } from "./views.js"; export interface Props { @@ -46,6 +49,8 @@ export type State = | State.LoadingUriError | State.Ready | State.Comparing + | State.ShowingTos + | State.ShowingPrivacy | SelectExchangeState.NoExchange; export namespace State { @@ -63,6 +68,8 @@ export namespace State { exchanges: SelectFieldHandler; selected: ExchangeFullDetails; error: undefined; + onShowTerms: ButtonHandler; + onShowPrivacy: ButtonHandler; } export interface Ready extends BaseInfo { @@ -76,6 +83,16 @@ export namespace State { onReset: ButtonHandler; onSelect: ButtonHandler; } + export interface ShowingTos { + status: "showing-tos"; + exchangeUrl: string; + onClose: ButtonHandler; + } + export interface ShowingPrivacy { + status: "showing-privacy"; + exchangeUrl: string; + onClose: ButtonHandler; + } } const viewMapping: StateViewMap<State> = { @@ -83,6 +100,8 @@ const viewMapping: StateViewMap<State> = { "error-loading": ErrorLoadingView, comparing: ComparingView, "no-exchange": NoExchangesView, + "showing-tos": TosContentView, + "showing-privacy": PrivacyContentView, ready: ReadyView, }; diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts index e1b270a42..2450a90ca 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts @@ -50,9 +50,15 @@ export function useComponentState( const original = !initialExchange ? undefined : await api.getExchangeDetailedInfo(initialExchange.exchangeBaseUrl); + return { exchanges, selected, original }; }, [value]); + const [showingTos, setShowingTos] = useState<string | undefined>(undefined); + const [showingPrivacy, setShowingPrivacy] = useState<string | undefined>( + undefined, + ); + if (!hook) { return { status: "loading", @@ -82,6 +88,27 @@ export function useComponentState( {} as Record<string, string>, ); + if (showingPrivacy) { + return { + status: "showing-privacy", + error: undefined, + onClose: { + onClick: async () => setShowingPrivacy(undefined), + }, + exchangeUrl: showingPrivacy, + }; + } + if (showingTos) { + return { + status: "showing-tos", + error: undefined, + onClose: { + onClick: async () => setShowingTos(undefined), + }, + exchangeUrl: showingTos, + }; + } + if (!original) { // !original <=> selected == original return { @@ -98,6 +125,16 @@ export function useComponentState( onClick: onCancel, }, selected, + onShowPrivacy: { + onClick: async () => { + setShowingPrivacy(selected.exchangeBaseUrl); + }, + }, + onShowTerms: { + onClick: async () => { + setShowingTos(selected.exchangeBaseUrl); + }, + }, }; } @@ -140,6 +177,16 @@ export function useComponentState( onSelection(selected.exchangeBaseUrl); }, }, + onShowPrivacy: { + onClick: async () => { + setShowingPrivacy(selected.exchangeBaseUrl); + }, + }, + onShowTerms: { + onClick: async () => { + setShowingTos(selected.exchangeBaseUrl); + }, + }, selected, pairTimeline, }; diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx index 38b63e615..dfa8bbd39 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx @@ -39,6 +39,8 @@ export const Bitcoin1 = createExample(ReadyView, { transferFees: {}, globalFees: [], } as any, + onShowPrivacy: {}, + onShowTerms: {}, onClose: {}, }); export const Bitcoin2 = createExample(ReadyView, { @@ -57,6 +59,8 @@ export const Bitcoin2 = createExample(ReadyView, { transferFees: {}, globalFees: [], } as any, + onShowPrivacy: {}, + onShowTerms: {}, onClose: {}, }); @@ -75,6 +79,8 @@ export const Kudos1 = createExample(ReadyView, { transferFees: {}, globalFees: [], } as any, + onShowPrivacy: {}, + onShowTerms: {}, onClose: {}, }); export const Kudos2 = createExample(ReadyView, { @@ -93,6 +99,8 @@ export const Kudos2 = createExample(ReadyView, { transferFees: {}, globalFees: [], } as any, + onShowPrivacy: {}, + onShowTerms: {}, onClose: {}, }); export const ComparingBitcoin = createExample(ComparingView, { @@ -108,6 +116,8 @@ export const ComparingBitcoin = createExample(ComparingView, { globalFees: [], } as any, onReset: {}, + onShowPrivacy: {}, + onShowTerms: {}, onSelect: {}, error: undefined, pairTimeline: { @@ -130,6 +140,8 @@ export const ComparingKudos = createExample(ComparingView, { globalFees: [], } as any, onReset: {}, + onShowPrivacy: {}, + onShowTerms: {}, onSelect: {}, error: undefined, pairTimeline: { diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx index d39aa3878..e89fc8879 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx @@ -22,6 +22,7 @@ import { Amount } from "../../components/Amount.js"; import { LoadingError } from "../../components/LoadingError.js"; import { SelectList } from "../../components/SelectList.js"; import { Input, SvgIcon } from "../../components/styled/index.js"; +import { TermsOfService } from "../../components/TermsOfService/index.js"; import { Time } from "../../components/Time.js"; import { useTranslationContext } from "../../context/translation.js"; import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js"; @@ -119,6 +120,36 @@ export function ErrorLoadingView({ error }: State.LoadingUriError): VNode { ); } +export function PrivacyContentView({ + exchangeUrl, + onClose, +}: State.ShowingPrivacy): VNode { + const { i18n } = useTranslationContext(); + return ( + <div> + <Button variant="outlined" onClick={onClose.onClick}> + <i18n.Translate>Close</i18n.Translate> + </Button> + <div>show privacy terms for {exchangeUrl}</div> + </div> + ); +} + +export function TosContentView({ + exchangeUrl, + onClose, +}: State.ShowingTos): VNode { + const { i18n } = useTranslationContext(); + return ( + <div> + <Button variant="outlined" onClick={onClose.onClick}> + <i18n.Translate>Close</i18n.Translate> + </Button> + <TermsOfService exchangeUrl={exchangeUrl} /> + </div> + ); +} + export function NoExchangesView({ currency, }: SelectExchangeState.NoExchange): VNode { @@ -145,6 +176,8 @@ export function ComparingView({ onReset, onSelect, pairTimeline, + onShowPrivacy, + onShowTerms, }: State.Comparing): VNode { const { i18n } = useTranslationContext(); return ( @@ -305,53 +338,13 @@ export function ComparingView({ </FeeDescriptionTable>{" "} </section> <section> - <table> - <thead> - <tr> - <td> - <i18n.Translate>Wallet operations</i18n.Translate> - </td> - <td> - <i18n.Translate>Fee</i18n.Translate> - </td> - </tr> - </thead> - <tbody> - <tr> - <td>history(i) </td> - <td>0.1</td> - </tr> - <tr> - <td>kyc (i) </td> - <td>0.1</td> - </tr> - <tr> - <td>account (i) </td> - <td>0.1</td> - </tr> - <tr> - <td>purse (i) </td> - <td>0.1</td> - </tr> - <tr> - <td>wire SEPA (i) </td> - <td>0.1</td> - </tr> - <tr> - <td>closing SEPA(i) </td> - <td>0.1</td> - </tr> - <tr> - <td>wad SEPA (i) </td> - <td>0.1</td> - </tr> - </tbody> - </table> - </section> - <section> <ButtonGroupFooter> - <Button variant="outlined">Privacy policy</Button> - <Button variant="outlined">Terms of service</Button> + <Button onClick={onShowPrivacy.onClick} variant="outlined"> + Privacy policy + </Button> + <Button onClick={onShowTerms.onClick} variant="outlined"> + Terms of service + </Button> </ButtonGroupFooter> </section> </Container> @@ -362,6 +355,8 @@ export function ReadyView({ exchanges, selected, onClose, + onShowPrivacy, + onShowTerms, }: State.Ready): VNode { const { i18n } = useTranslationContext(); @@ -616,8 +611,12 @@ export function ReadyView({ </section> <section> <ButtonGroupFooter> - <Button variant="outlined">Privacy policy</Button> - <Button variant="outlined">Terms of service</Button> + <Button onClick={onShowPrivacy.onClick} variant="outlined"> + Privacy policy + </Button> + <Button onClick={onShowTerms.onClick} variant="outlined"> + Terms of service + </Button> </ButtonGroupFooter> </section> </Container> |