first commit

grachyov · Dec 1, 2023 · 01442a2 · 01442a2
1 parent 781eb1a
commit 01442a2
Show file tree

Hide file tree

Showing 8 changed files with 379 additions and 15 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -15,9 +15,11 @@
     "@emotion/styled": "latest",
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "latest",
+    "@mui/x-data-grid": "^6.18.2",
     "next": "^14.0.1",
     "next-plausible": "^3.11.3",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^14.0.1",
@@ -30,6 +32,7 @@
     "eslint-config-next": "^14.0.1",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard-with-typescript": "^40.0.0",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-n": "^16.3.1",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-promise": "^6.1.1",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,9 +21,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }):
         <PlausibleProvider domain="your.domain" />
       </head>
       <body className={workSans.className}>
-        <ThemeRegistry>
-          {children}
-        </ThemeRegistry>
+        <ThemeRegistry>{children}</ThemeRegistry>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Typography } from '@mui/material';
+import ComparisonTable from '@/components/ui/organisms/Table';
 
 export default function Home(): JSX.Element {
-  return <Typography variant="h1">Add content here</Typography>;
+  return <ComparisonTable />;
 }
diff --git a/src/components/ui/organisms/Table.tsx b/src/components/ui/organisms/Table.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import React, { useState } from 'react';
+import { DataGrid, GridColDef, GridColumnGroupingModel } from '@mui/x-data-grid';
+import { wallets } from '@/data/mockData';
+import { Box } from '@mui/material';
+
+export default function ComparisonTable(): JSX.Element {
+  const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({});
+
+  const rows = Object.entries(wallets).map(([name, features], index) => {
+    const row = {
+      id: index,
+      name,
+      total: 0,
+      max: 0,
+      deviceCompatibility: features.deviceCompatibility,
+      deviceCompatibilityTotal: Object.values(features.deviceCompatibility).filter(Boolean).length,
+      deviceCompatibilityMax: Object.values(features.deviceCompatibility).length,
+      accountType: features.accountType,
+      accountTypeTotal: Object.values(features.accountType).filter(Boolean).length,
+      accountTypeMax: Object.values(features.accountType).length,
+      chainCompatibility: features.chainCompatibility,
+      chainCompatibilityTotal: Object.values(features.chainCompatibility).filter(Boolean).length,
+      chainCompatibilityMax: Object.values(features.chainCompatibility).length,
+      ensCompatibility: features.ensCompatibility,
+      ensCompatibilityTotal: Object.values(features.ensCompatibility).filter(Boolean).length,
+      ensCompatibilityMax: Object.values(features.ensCompatibility).length,
+      backupOptions: features.backupOptions,
+      backupOptionsTotal: Object.values(features.backupOptions).filter(Boolean).length,
+      backupOptionsMax: Object.values(features.backupOptions).length,
+      securityFeatures: features.securityFeatures,
+      securityFeaturesTotal: Object.values(features.securityFeatures).filter(Boolean).length,
+      securityFeaturesMax: Object.values(features.securityFeatures).length,
+      availableTestnets: features.availableTestnets,
+      availableTestnetsTotal: Object.values(features.availableTestnets).filter(Boolean).length,
+      availableTestnetsMax: Object.values(features.availableTestnets).length,
+    };
+
+    // Calculate the total number of true values
+    row.total = Object.values(row).filter(Boolean).length;
+    // Calculate the maximum number of true values
+    row.max = Object.values(row).length;
+
+    console.log(row);
+    return row;
+  });
+
+  const fields = [
+    'deviceCompatibility', 'accountType', 'chainCompatibility', 'ensCompatibility', 'backupOptions', 'securityFeatures', 'availableTestnets'
+  ];
+
+  const fieldToHeaderName: { [key: string]: string } = {
+    accountType: 'Account Type',
+    deviceCompatibility: 'Device Compatibility',
+    chainCompatibility: 'Chain Compatibility',
+    ensCompatibility: 'ENS Compatibility',
+    backupOptions: 'Backup Options',
+    securityFeatures: 'Security Features',
+    availableTestnets: 'Available Testnets',
+  };
+
+  const handleShowMore = (id: string) => {
+    setExpandedRows(prevState => ({
+      ...prevState,
+      [id]: !prevState[id],
+    }));
+  };
+
+  const createColumnDef = (field: string): GridColDef => ({
+    field,
+    headerName: fieldToHeaderName[field],
+    width: 150,
+    type: 'boolean',
+    headerAlign: 'center',
+    renderCell: (params) => {
+      const values = Object.values(params.value as Record<string, boolean>);
+      const trueCount = values.filter(Boolean).length;
+      const totalCount = values.length;
+
+      return (
+        <div style={{width: "100%"}}>
+          <div style={{ width: `${(trueCount / totalCount) * 100}%`, backgroundColor: 'blue', height: '20px' }} />
+          {expandedRows[params.id.toString()] && (
+            <ul>
+              {Object.entries(params.value as Record<string, boolean>).map(([key, value]) => (
+                <li key={key}>{`${key}: ${value ? 'Yes' : 'No'}`}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+      );
+    },
+  });
+
+  const columns: GridColDef[] = [
+    { field: 'name', headerName: 'Wallet', width: 150, type: 'string', renderCell: (params) => <Box onClick={() => handleShowMore(params.id.toString())}>{params.value}</Box> },
+    ...fields.map(field => createColumnDef(field)),
+  ];
+
+  const columnGroupingModel: GridColumnGroupingModel = [
+    {
+      groupId: 'deviceCompatibility',
+      description: '',
+      children: [{ field: 'mobile' }, { field: 'desktop' }],
+    },
+  ];
+
+  return (
+    <div style={{ width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        experimentalFeatures={{ columnGrouping: true }}
+        columnGroupingModel={columnGroupingModel}
+        getRowHeight={(row) => expandedRows[row.id.toString()] ? 200 : 50}
+      />
+    </div>
+  );
+}
diff --git a/src/data/mockData.ts b/src/data/mockData.ts
@@ -0,0 +1,94 @@
+import { Features } from "@/types/Features";
+
+export const wallets: { [name: string]: Features } = {
+  'Super Wallet': {
+    deviceCompatibility: {
+      mobile: true,
+      desktop: true,
+      browserExtension: true,
+    },
+    accountType: {
+      eoa: true,
+      erc4337: false,
+      safe: false,
+    },
+    chainCompatibility: {
+      ethereum: true,
+      optimism: false,
+      arbitrum: false,
+      base: false,
+      polygon: true,
+      zora: false,
+      gnosis: false,
+      bnbSmartChain: false,
+    },
+    ensCompatibility: {
+      mainnet: true,
+      subDomains: true,
+      offchain: false,
+      L2s: false,
+    },
+    backupOptions: {
+      googleDrive: false,
+      local: true,
+      socialRecovery: false,
+    },
+    securityFeatures: {
+      multisig: false,
+      MPC: false,
+      keyRotation: false,
+      transactionScanning: true,
+      limitsAndTimelocks: false,
+      hardwareWalletSupport: true,
+    },
+    availableTestnets: {
+      goerli: true,
+      sepolia: false,
+    },
+  },
+  'ABC Wallet': {
+    deviceCompatibility: {
+      mobile: true,
+      desktop: false,
+      browserExtension: false,
+    },
+    accountType: {
+      eoa: true,
+      erc4337: false,
+      safe: false,
+    },
+    chainCompatibility: {
+      ethereum: true,
+      optimism: false,
+      arbitrum: false,
+      base: false,
+      polygon: true,
+      zora: false,
+      gnosis: false,
+      bnbSmartChain: false,
+    },
+    ensCompatibility: {
+      mainnet: true,
+      subDomains: true,
+      offchain: false,
+      L2s: false,
+    },
+    backupOptions: {
+      googleDrive: true,
+      local: false,
+      socialRecovery: false,
+    },
+    securityFeatures: {
+      multisig: false,
+      MPC: false,
+      keyRotation: false,
+      transactionScanning: true,
+      limitsAndTimelocks: false,
+      hardwareWalletSupport: true,
+    },
+    availableTestnets: {
+      goerli: true,
+      sepolia: false,
+    },
+  },
+};
diff --git a/src/types/Features.tsx b/src/types/Features.tsx
@@ -0,0 +1,45 @@
+export interface Features {
+  deviceCompatibility: {
+    mobile: boolean;
+    desktop: boolean;
+    browserExtension: boolean;
+  };
+  accountType: {
+    eoa: boolean;
+    erc4337: boolean;
+    safe: boolean;
+  };
+  chainCompatibility: {
+    ethereum: boolean;
+    optimism: boolean;
+    arbitrum: boolean;
+    base: boolean;
+    polygon: boolean;
+    zora: boolean;
+    gnosis: boolean;
+    bnbSmartChain: boolean;
+  };
+  ensCompatibility: {
+    mainnet: boolean;
+    subDomains: boolean;
+    offchain: boolean;
+    L2s: boolean;
+  };
+  backupOptions: {
+    googleDrive: boolean;
+    local: boolean;
+    socialRecovery: boolean;
+  };
+  securityFeatures: {
+    multisig: boolean;
+    MPC: boolean;
+    keyRotation: boolean;
+    transactionScanning: boolean;
+    limitsAndTimelocks: boolean;
+    hardwareWalletSupport: boolean;
+  };
+  availableTestnets: {
+    goerli: boolean;
+    sepolia: boolean;
+  };
+}