From b5422ca15c61ddf2afd3bb0b2f024dc148205f97 Mon Sep 17 00:00:00 2001
From: "Lucian I. Last"
Date: Mon, 6 May 2024 11:51:11 +0200
Subject: [PATCH] Add download button
---
frontend/public/locales/en/translation.json | 1 +
.../react/components/LoopMembers/QrCode.tsx | 31 ++++++++++++++-
.../react/pages/ChainMemberList.tsx | 38 ++++++++++---------
3 files changed, 51 insertions(+), 19 deletions(-)
diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index 31195fd11..7274c4fbc 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -32,6 +32,7 @@
"loopParticipant_one": "Loop participant",
"loopParticipant_other": "Loop participants",
"copy": "Copy",
+ "download": "Download",
"account": "Account",
"actions": "Actions",
"address": "Address",
diff --git a/frontend/src/components/react/components/LoopMembers/QrCode.tsx b/frontend/src/components/react/components/LoopMembers/QrCode.tsx
index 2535f56d5..97a5099d3 100644
--- a/frontend/src/components/react/components/LoopMembers/QrCode.tsx
+++ b/frontend/src/components/react/components/LoopMembers/QrCode.tsx
@@ -1,10 +1,13 @@
import QRCodeStyling from "qr-code-styling";
import { useEffect, useRef, useState } from "react";
import isSSR from "../../util/is_ssr";
+import { useTranslation } from "react-i18next";
interface Props {
data: string;
+ chainName: string;
}
export default function QrCode(props: Props) {
+ const { t } = useTranslation();
const [qrCode] = useState(
new QRCodeStyling({
width: 300,
@@ -45,5 +48,31 @@ export default function QrCode(props: Props) {
qrCode.append(ref.current!);
}, [props.data]);
- return ;
+ function onDownload() {
+ let name = props.chainName
+ .replaceAll(/[\-\( ]/g, "_")
+ .replaceAll(/[,\.\/\-\!\@\#\<\>\:\"\\\|\?\$\%\^\&\*]/g, "")
+ .toLowerCase();
+ name = "clqr_" + name;
+ name = name.substring(0, 255);
+ qrCode.download({
+ name,
+ extension: "png",
+ });
+ }
+
+ return (
+ <>
+
+
+ >
+ );
}
diff --git a/frontend/src/components/react/pages/ChainMemberList.tsx b/frontend/src/components/react/pages/ChainMemberList.tsx
index fba30e6e0..79a4e467e 100644
--- a/frontend/src/components/react/pages/ChainMemberList.tsx
+++ b/frontend/src/components/react/pages/ChainMemberList.tsx
@@ -491,30 +491,32 @@ export default function ChainMemberList() {