diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/Part.tsx | 43 |
1 files changed, 42 insertions, 1 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx index d1683b20b..21c0f65dc 100644 --- a/packages/taler-wallet-webextension/src/components/Part.tsx +++ b/packages/taler-wallet-webextension/src/components/Part.tsx @@ -13,7 +13,8 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { h, VNode } from "preact"; +import { PaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; +import { Fragment, h, VNode } from "preact"; import { ExtraLargeText, LargeText, SmallLightText } from "./styled/index.js"; export type Kind = "positive" | "negative" | "neutral"; @@ -39,3 +40,43 @@ export function Part({ text, title, kind, big }: Props): VNode { </div> ); } + +interface PropsPayto { + payto: PaytoUri; + kind: Kind; + big?: boolean; +} +export function PartPayto({ payto, kind, big }: PropsPayto): VNode { + const Text = big ? ExtraLargeText : LargeText; + let text: string | undefined = undefined; + let title = ""; + if (payto.isKnown) { + if (payto.targetType === "x-taler-bank") { + text = payto.account; + title = "Bank account"; + } else if (payto.targetType === "bitcoin") { + text = payto.targetPath; + title = "Bitcoin addr"; + } else if (payto.targetType === "iban") { + text = payto.targetPath; + title = "IBAN"; + } + } + if (!text) { + text = stringifyPaytoUri(payto); + title = "Payto URI"; + } + return ( + <div style={{ margin: "1em" }}> + <SmallLightText style={{ margin: ".5em" }}>{title}</SmallLightText> + <Text + style={{ + color: + kind == "positive" ? "green" : kind == "negative" ? "red" : "black", + }} + > + {text} + </Text> + </div> + ); +} |