Skip to content

Commit

Permalink
fix linting issues
Browse files Browse the repository at this point in the history
  • Loading branch information
mozrt2 committed Dec 3, 2023
1 parent 0d25d07 commit ed35074
Show file tree
Hide file tree
Showing 9 changed files with 379 additions and 35 deletions.
Binary file removed public/WorkSans-SemiBold.ttf
Binary file not shown.
Binary file removed src/app/favicon.ico
Binary file not shown.
2 changes: 1 addition & 1 deletion src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import PlausibleProvider from 'next-plausible';
import type { Metadata } from 'next';

export const metadata: Metadata = {
title: `Your title here`,
title: `walletbeat`,
};

const workSans = Work_Sans({
Expand Down
141 changes: 139 additions & 2 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,148 @@
import React from 'react';
import { Box } from '@mui/material';
import { Box, Button, Typography } from '@mui/material';
import ComparisonTable from '@/components/ui/organisms/Table';

export default function Home(): JSX.Element {
return (
<Box maxWidth="100vw" px={1} display="flex" justifyContent="center">
<Box maxWidth="100vw" px={1} display="flex" flexDirection="column" alignItems="center">
<Typography variant="h1" fontWeight={600} mt={6}>
~ walletbeat
</Typography>
<Typography variant="h5" mb={6} textAlign="center" fontWeight={300}>
An open repository of EVM-compatible wallets.
</Typography>
<ComparisonTable />
<Box my={6}>
<Button
variant="outlined"
color="inherit"
sx={{
paddingY: '3px',
paddingX: '12px',
textTransform: 'none',
}}
>
Contribute
</Button>
</Box>
<Typography variant="h6" mt={10} px={2} width="100%" maxWidth="sm">
Definitions & Methodology
</Typography>
<Typography
variant="body2"
fontWeight={900}
color="text.secondary"
mt={1}
px={2}
width="100%"
maxWidth="sm"
>
Disclaimer: in its current state walletbeat is an MVP meant to kickstart transparent
benchmarking of wallet features. It only covers a small sample of features and may contain
inaccurate data. A high score does not necessarily mean better performance, it just means
more available features. Finally, some features should be available but were not working
while testing (e.g. testnets on Rainbow).
</Typography>
<Typography variant="body1" mt={3} px={2} width="100%" maxWidth="sm">
Wallets
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
The wallets listed are popular wallets compatible with EVM chains. Contribute to the Github
repo to add more wallets.
</Typography>
<Typography variant="body1" mt={3} px={2} width="100%" maxWidth="sm">
Chains
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
Seven of the most popular EVM chains were selected to benchmark chain compatibility. Only
chains that are present in the wallet by default or that can be added without custom
configuration are considered.
</Typography>
<Typography variant="body1" mt={3} px={2} width="100%" maxWidth="sm">
ENS
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Mainnet</b>: whether a user is able to send transactions to a standard ENS (e.g.
user.eth) on mainnet.
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Subdomains</b>: whether a user is able to send transactions to an ENS subdomain (e.g.
hot.user.eth) on mainnet.
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Offchain</b>: whether a user is able to send transactions to an ENS with an offchain
resolver on mainnet.
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>L2s</b>: whether a user is able to send transactions to an ENS on an L2 (tested on
Optimism).
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Custom</b>: whether a user is able to send transactions to an ENS with a custom domain on
mainnet (e.g. user.cb.id).
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Usernames</b>: whether a user can get a free (offchain) ENS inside the wallet.
</Typography>
<Typography variant="body1" mt={3} px={2} width="100%" maxWidth="sm">
Backup
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Cloud Backup</b>: whether a user is able to back up their keys on a personal cloud
account like Google Drive.
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Manual Backup</b>: whether a user can export their private keys manually.
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Social Recovery</b>: whether a user can recover their account through a trusted third
party like a friend.
</Typography>
<Typography variant="body1" mt={3} px={2} width="100%" maxWidth="sm">
Security
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Multisig</b>: whether a user can set a threshold of multiple signers required to approve
a transaction.
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>MPC</b>: whether the private key is split and stored as shards.
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Key Rotation</b>: whether the user can change the private keys controlling their account.
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Scanning</b>: whether the wallet simulates transactions and warns users on suspicious
transactions.
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Limits</b>: whether the user can enable spending limits and timelocks.
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
<b>Hardware</b>: whether the wallet can be used with hardware wallets (e.g. Ledger).
</Typography>
<Typography variant="body1" mt={3} px={2} width="100%" maxWidth="sm">
Devices
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
Which types of devices and platforms the wallet is compatible with - mobile, browser
(extension), desktop.
</Typography>
<Typography variant="body1" mt={3} px={2} width="100%" maxWidth="sm">
Type
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
Type of the underlying account - EOA, 4337, Safe.
</Typography>
<Typography variant="body1" mt={3} px={2} width="100%" maxWidth="sm">
Testnets
</Typography>
<Typography variant="body2" fontWeight={400} mt={1} px={2} width="100%" maxWidth="sm">
Whether the wallet is compatible with testnets.
</Typography>
<Typography variant="h6" mt={12} px={2} width="100%" maxWidth="sm">
Why walletbeat?
</Typography>
</Box>
);
}
3 changes: 3 additions & 0 deletions src/components/ThemeRegistry/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ const themeOptions: ThemeOptions = {
fontWeightLight: 300,
h1: {
fontWeight: 700,
'@media (max-width:600px)': {
fontSize: '3rem',
},
},
h2: {
fontWeight: 700,
Expand Down
61 changes: 41 additions & 20 deletions src/components/ui/organisms/Table.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
'use client';

import React, { useState } from 'react';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { wallets } from '@/data/mockData';
import { DataGrid, type GridColDef } from '@mui/x-data-grid';
import { wallets } from '@/data/data';
import { Box, Typography, Link } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
Expand All @@ -12,6 +12,7 @@ import LanguageIcon from '@mui/icons-material/Language';
import DesktopWindowsIcon from '@mui/icons-material/DesktopWindows';
import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';
import { OpenInNewRounded } from '@mui/icons-material';

export default function ComparisonTable(): JSX.Element {
const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({});
Expand Down Expand Up @@ -44,17 +45,12 @@ export default function ComparisonTable(): JSX.Element {
availableTestnets: features.availableTestnets,
availableTestnetsTotal: Object.values(features.availableTestnets).filter(Boolean).length,
availableTestnetsMax: Object.values(features.availableTestnets).length,
walletConnect: features.walletConnect,
walletConnectTotal: Object.values(features.walletConnect).filter(Boolean).length,
walletConnectMax: Object.values(features.walletConnect).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;
});

Expand All @@ -66,24 +62,22 @@ export default function ComparisonTable(): JSX.Element {
'deviceCompatibility',
'accountType',
'availableTestnets',
'walletConnect',
];

const fieldToHeaderName: { [key: string]: string } = {
const fieldToHeaderName: Record<string, string> = {
accountType: 'Type',
deviceCompatibility: 'Devices',
chainCompatibility: 'Chains',
ensCompatibility: 'ENS',
backupOptions: 'Backup',
securityFeatures: 'Security',
availableTestnets: 'Testnets',
walletConnect: 'WalletConnect',
};

const subcategoryMapping: { [key: string]: string } = {
const subcategoryMapping: Record<string, string> = {
socialRecovery: 'Social Recovery',
cloud: 'Cloud Backup',
local: 'Local Backup',
local: 'Manual Backup',
multisig: 'Multisig',
MPC: 'MPC',
keyRotation: 'Key Rotation',
Expand All @@ -94,17 +88,18 @@ export default function ComparisonTable(): JSX.Element {
subDomains: 'Subdomains',
offchain: 'Offchain',
L2s: 'L2s',
customDomains: 'Custom',
freeUsernames: 'Usernames',
ethereum: 'Ethereum',
optimism: 'Optimism',
arbitrum: 'Arbitrum',
base: 'Base',
polygon: 'Polygon',
zora: 'Zora',
gnosis: 'Gnosis',
bnbSmartChain: 'Binance Chain',
};

const handleShowMore = (id: string) => {
const handleShowMore = (id: string): void => {
setExpandedRows(prevState => ({
...prevState,
[id]: !prevState[id],
Expand Down Expand Up @@ -269,7 +264,7 @@ export default function ComparisonTable(): JSX.Element {
) : (
<CloseIcon fontSize="inherit" />
)}
<span>{subcategoryMapping[key] || key}</span>
<span>{subcategoryMapping[key].length > 0 || key}</span>
</div>
</li>
)
Expand All @@ -286,12 +281,31 @@ export default function ComparisonTable(): JSX.Element {
{
field: 'name',
headerName: 'Wallet',
width: 150,
width: 190,
type: 'string',
renderCell: params => (
<Box display="flex" flexDirection="column" alignItems="flex-start" justifyContent="flex-start" height="100%">
<Box
display="flex"
flexDirection="column"
alignItems="flex-start"
justifyContent="flex-start"
height="100%"
>
<Box display="flex" alignItems="center" gap={1} justifyContent="flex-start" pt={1}>
<Typography fontSize="inherit">{params.value}</Typography>
<Box display="flex" alignItems="center">
<Typography fontSize="inherit" style={{ display: 'flex', alignItems: 'center' }}>
{params.value}
</Typography>
<Link
href={params.row.url}
target="_blank"
rel="noopener noreferrer"
color="text.primary"
style={{ display: 'flex', alignItems: 'center', marginLeft: '4px' }}
>
<OpenInNewRounded color="inherit" fontSize="inherit" />
</Link>
</Box>
<IconButton
size="small"
onClick={event => {
Expand All @@ -303,8 +317,15 @@ export default function ComparisonTable(): JSX.Element {
</IconButton>
</Box>
{expandedRows[params.id.toString()] && (
<Link href={params.row.url} target="_blank" rel="noopener noreferrer">
{params.row.url}
<Link
href={`https://searchcaster.xyz/search?text=${params.value}`}
target="_blank"
rel="noopener noreferrer"
color="text.primary"
>
<Typography variant="body2" fontSize="10px" pt={1}>
what people are saying
</Typography>
</Link>
)}
</Box>
Expand Down
Loading

0 comments on commit ed35074

Please sign in to comment.