Reuse QRCode for VerificationQRCode and specify widths

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/elements/QRCode.tsx

@@ -16,19 +16,21 @@ limitations under the License.
 
 import * as React from "react";
 import {toDataURL, QRCodeSegment, QRCodeToDataURLOptions} from "qrcode";
+import classNames from "classnames";
 
 import {_t} from "../../../languageHandler";
 import Spinner from "./Spinner";
 
 interface IProps extends QRCodeToDataURLOptions {
     data: string | QRCodeSegment[];
+    className?: string;
 }
 
 const defaultOptions: QRCodeToDataURLOptions = {
     errorCorrectionLevel: 'L', // we want it as trivial-looking as possible
 };
 
-const QRCode: React.FC<IProps> = ({data, ...options}) => {
+const QRCode: React.FC<IProps> = ({data, className, ...options}) => {
     const [dataUri, setUri] = React.useState<string>(null);
     React.useEffect(() => {
         let cancelled = false;
@@ -39,10 +41,9 @@ const QRCode: React.FC<IProps> = ({data, ...options}) => {
         return () => {
             cancelled = true;
         };
-    }, [data, options]);
+    }, [JSON.stringify(data), options]);
 
-
-    return <div className="mx_QRCode">
+    return <div className={classNames("mx_QRCode", className)}>
         { dataUri ? <img src={dataUri} className="mx_VerificationQRCode" alt={_t("QR Code")} /> : <Spinner /> }
     </div>;
 };