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() {
-
-

- {shareLink} -

- - - - +
+
+

+ {shareLink} +

+ + + + +
+
-