chalabi/mobile on desktop

components/react/qrCode.tsx

@@ -0,0 +1,120 @@
+import Image from 'next/image';
+import QRCodeUtil from 'qrcode';
+import React, { FunctionComponent, ReactElement, useMemo } from 'react';
+
+const generateMatrix = (
+  value: string,
+  errorCorrectionLevel: QRCodeUtil.QRCodeErrorCorrectionLevel
+) => {
+  const arr = Array.prototype.slice.call(
+    QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data,
+    0
+  );
+  const sqrt = Math.sqrt(arr.length);
+  return arr.reduce(
+    (rows, key, index) =>
+      (index % sqrt === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows,
+    []
+  );
+};
+
+export const QRCode: FunctionComponent<{
+  errorCorrectionLevel?: QRCodeUtil.QRCodeErrorCorrectionLevel;
+  logoUrl?: string;
+  logoSize?: number;
+  size?: number;
+  value: string;
+}> = ({ errorCorrectionLevel = 'M', logoSize = 50, logoUrl, size = 280, value }) => {
+  const dots = useMemo(() => {
+    const dots: ReactElement[] = [];
+    const matrix = generateMatrix(value, errorCorrectionLevel);
+    const cellSize = size / matrix.length;
+    let qrList = [
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+      { x: 0, y: 1 },
+    ];
+
+    qrList.forEach(({ x, y }) => {
+      const x1 = (matrix.length - 7) * cellSize * x;
+      const y1 = (matrix.length - 7) * cellSize * y;
+      for (let i = 0; i < 3; i++) {
+        dots.push(
+          <rect
+            fill={i % 2 !== 0 ? 'white' : 'black'}
+            height={cellSize * (7 - i * 2)}
+            key={`${i}-${x}-${y}`}
+            rx={(i - 2) * -5 + (i === 0 ? 2 : 0)} // calculated border radius for corner squares
+            ry={(i - 2) * -5 + (i === 0 ? 2 : 0)} // calculated border radius for corner squares
+            width={cellSize * (7 - i * 2)}
+            x={x1 + cellSize * i}
+            y={y1 + cellSize * i}
+          />
+        );
+      }
+    });
+
+    const clearArenaSize = Math.floor(logoSize / cellSize);
+    const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
+    const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
+
+    matrix.forEach((row: QRCodeUtil.QRCode[], i: number) => {
+      row.forEach((_: any, j: number) => {
+        if (matrix[i][j]) {
+          if (
+            !(
+              (i < 7 && j < 7) ||
+              (i > matrix.length - 8 && j < 7) ||
+              (i < 7 && j > matrix.length - 8)
+            )
+          ) {
+            if (
+              !(
+                i > matrixMiddleStart &&
+                i < matrixMiddleEnd &&
+                j > matrixMiddleStart &&
+                j < matrixMiddleEnd
+              )
+            ) {
+              dots.push(
+                <circle
+                  cx={i * cellSize + cellSize / 2}
+                  cy={j * cellSize + cellSize / 2}
+                  fill="black"
+                  key={`circle-${i}-${j}`}
+                  r={cellSize / 3} // calculate size of single dots
+                />
+              );
+            }
+          }
+        }
+      });
+    });
+
+    return dots;
+  }, [errorCorrectionLevel, logoSize, size, value]);
+
+  const logoPosition = size / 2 - logoSize / 2;
+
+  return (
+    <div className="relative flex items-center justify-center rounded-xl bg-white p-4">
+      <div className="relative" style={{ height: size, width: size }}>
+        {logoUrl && (
+          <div
+            className="absolute flex rounded-lg justify-center"
+            style={{
+              top: logoPosition,
+              width: size,
+            }}
+          >
+            <Image height={logoSize} src={logoUrl} width={logoSize} alt="Wallet logo" />
+          </div>
+        )}
+        <svg height={size} width={size}>
+          <rect fill="transparent" height={size} width={size} />
+          {dots}
+        </svg>
+      </div>
+    </div>
+  );
+};

components/react/views/Connecting.tsx

@@ -4,7 +4,6 @@
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { ChevronLeftIcon } from '@heroicons/react/20/solid';
 import { getRealLogo } from '@/utils';
-import { useTheme } from '@/contexts';
 
 export const Connecting = ({
   onClose,
@@ -21,7 +20,8 @@
   title: string;
   subtitle: string;
 }) => {
-  const { theme } = useTheme();
+  const isDarkMode = document.documentElement.classList.contains('dark');
+
   return (
     <div className="mt-3 text-center sm:mt-1.5">
       <div className="flex justify-between items-center mb-2">
@@ -46,9 +46,7 @@
       <div className="flex flex-col w-full h-full mt-4 sm:px-8 sm:py-6">
         <img
           src={
-            name === 'Cosmos MetaMask Extension'
-              ? '/metamask.svg'
-              : getRealLogo(logo, theme === 'dark')
+            name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo, isDarkMode)
           }
           alt={name}
           className="flex-shrink-0 w-20 h-20 mx-auto aspect-1"

components/react/views/Error.tsx

@@ -5,7 +5,7 @@
 import { ChevronLeftIcon } from '@heroicons/react/20/solid';
 import Image from 'next/image';
 import { getRealLogo } from '@/utils';
-import { useTheme } from '@/contexts';
+
 export const Error = ({
   currentWalletName,
   onClose,
@@ -19,7 +19,8 @@
   onReconnect: () => void;
   logo: string;
 }) => {
-  const { theme } = useTheme();
+  const isDarkMode = document.documentElement.classList.contains('dark');
+
   return (
     <div className="mt-3 text-center sm:mt-1.5">
       <div className="flex flex-row items-center justify-between">
@@ -48,9 +49,9 @@
         <div className="p-3 border rounded-full border-red-600 mx-auto aspect-1 flex-shrink-0">
           <Image
             src={
-              currentWalletName === 'cosmos-extension-metamask'
+              currentWalletName === 'Cosmos MetaMask Extension'
                 ? '/metamask.svg'
-                : getRealLogo(logo, theme === 'dark')
+                : getRealLogo(logo, isDarkMode)
             }
             alt="Wallet type logo"
             className="flex-shrink-0 w-16 h-16 aspect-1"
@@ -66,7 +67,7 @@
           className="rounded-lg w-[180px] btn btn-error  inline-flex justify-center items-center py-2.5 font-medium mt-4 bg-mint mx-auto text-black dark:text-white"
           onClick={onReconnect}
         >
-          <ArrowPathIcon className="flex-shrink-0 w-5 h-5 mr-2 text-black dark:text-white" />
+          <ArrowPathIcon className="flex-shrink-0 w-5 h-5 mr-2 " />
           Reconnect
         </button>
       </div>

components/react/views/NotExist.tsx

@@ -3,7 +3,6 @@
 import { XMarkIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';
 import { ChevronLeftIcon } from '@heroicons/react/20/solid';
 import { getRealLogo } from '@/utils';
-import { useTheme } from '@/contexts';
 
 export const NotExist = ({
   onClose,
@@ -18,7 +17,8 @@
   logo: string;
   name: string;
 }) => {
-  const { theme } = useTheme();
+  const isDarkMode = document.documentElement.classList.contains('dark');
+
   return (
     <div className="mt-3 text-center sm:mt-1.5">
       <div className="flex justify-between items-center mb-2">
@@ -43,9 +43,7 @@
       <div className="flex flex-col w-full h-full py-6 mt-4 sm:px-8">
         <img
           src={
-            name === 'Cosmos MetaMask Extension'
-              ? '/metamask.svg'
-              : getRealLogo(logo, theme === 'dark')
+            name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo, isDarkMode)
           }
           alt={name}
           className="flex-shrink-0 w-16 h-16 mx-auto aspect-1"