Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add email, sms, and metamask extension #148

Merged
merged 12 commits into from
Dec 20, 2024
Binary file modified bun.lockb
Binary file not shown.
2 changes: 1 addition & 1 deletion components/react/views/Connected.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
<Image
height={0}
width={0}
src={getRealLogo(logo)}
src={name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo)}

Check warning on line 60 in components/react/views/Connected.tsx

View check run for this annotation

Codecov / codecov/patch

components/react/views/Connected.tsx#L60

Added line #L60 was not covered by tests
alt={name}
className="w-8 h-8 rounded-full mr-2"
/>
Expand Down
2 changes: 1 addition & 1 deletion components/react/views/Connecting.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
</div>
<div className="flex flex-col w-full h-full mt-4 sm:px-8 sm:py-6">
<img
src={getRealLogo(logo)}
src={name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo)}

Check warning on line 46 in components/react/views/Connecting.tsx

View check run for this annotation

Codecov / codecov/patch

components/react/views/Connecting.tsx#L46

Added line #L46 was not covered by tests
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

🛠️ Refactor suggestion

Refactor wallet name comparison for maintainability

The string 'Cosmos MetaMask Extension' is used consistently across multiple view components for wallet identification and logo rendering. To improve maintainability, create a new constant in utils/constants.ts:

// utils/constants.ts
+ export const WALLET_IDENTIFIERS = {
+   METAMASK: 'Cosmos MetaMask Extension'
+ } as const;

Issues found:

  • The string 'Cosmos MetaMask Extension' is duplicated across 5 different view components (WalletList.tsx, Connecting.tsx, NotExist.tsx, Error.tsx, Connected.tsx)
  • The MetaMask logo path '/metamask.svg' is also duplicated across these components
  • No existing wallet type constants are defined in the codebase to handle these identifiers

Please consolidate these hardcoded values into constants and update all occurrences for better maintainability.

🔗 Analysis chain

Refactor wallet name comparison for maintainability

The hardcoded string comparison makes the code fragile and harder to maintain. Consider extracting wallet identifiers into constants.

+ const WALLET_TYPES = {
+   METAMASK: 'Cosmos MetaMask Extension'
+ } as const;
+
  export const Connecting = ({
    // ...
  }) => {
    return (
      // ...
          src={name === WALLET_TYPES.METAMASK ? '/metamask.svg' : getRealLogo(logo)}
      // ...
    );
  };

Additionally, please add test coverage for this new conditional logic.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if MetaMask logo exists
if [ ! -f "public/metamask.svg" ]; then
  echo "Warning: MetaMask logo file not found at public/metamask.svg"
  exit 1
fi

# Search for similar hardcoded strings across codebase
rg -l "Cosmos MetaMask Extension"

Length of output: 254


Script:

#!/bin/bash
# Let's check how this string is used across files to understand the pattern
rg "Cosmos MetaMask Extension" -A 2 -B 2

# Also check if there are any existing constants for wallet types
rg "const.*WALLET|METAMASK" --type typescript

Length of output: 2892


Script:

#!/bin/bash
# Let's check for any existing type definitions or constants in the codebase
rg "type.*Wallet|enum.*Wallet|const.*Wallet|METAMASK" --type ts

# Also check if there's a constants file or types file
fd "constants|types" -e ts -e tsx

Length of output: 2154


Script:

#!/bin/bash
# Let's check the content of these files for any existing wallet-related constants
cat utils/constants.ts
cat components/types.tsx

Length of output: 1770

🧰 Tools
🪛 GitHub Check: codecov/patch

[warning] 46-46: components/react/views/Connecting.tsx#L46
Added line #L46 was not covered by tests

alt={name}
className="flex-shrink-0 w-20 h-20 mx-auto aspect-1"
/>
Expand Down
6 changes: 5 additions & 1 deletion components/react/views/Error.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,11 @@
<div className="flex flex-col w-full h-full py-6 mt-4 sm:px-8">
<div className="p-3 border rounded-full border-red-600 mx-auto aspect-1 flex-shrink-0">
<Image
src={getRealLogo(logo)}
src={
currentWalletName === 'Cosmos MetaMask Extension'
? '/metamask.svg'
: getRealLogo(logo)
}

Check warning on line 52 in components/react/views/Error.tsx

View check run for this annotation

Codecov / codecov/patch

components/react/views/Error.tsx#L48-L52

Added lines #L48 - L52 were not covered by tests
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

🛠️ Refactor suggestion

Review needs adjustment - Image component usage is indeed inconsistent

The codebase shows mixed usage of <Image> from Next.js and regular <img> tags for wallet logos:

  • Error.tsx and Connected.tsx use Next.js <Image>
  • WalletList.tsx, NotExist.tsx, and Connecting.tsx use regular <img> tags

However, suggesting getWalletLogo utility is premature as the codebase already uses getRealLogo consistently. The conditional logic for MetaMask is repeated across components and could be refactored into the existing getRealLogo utility instead.

  • WalletList.tsx: Uses <img> with multiple instances
  • Connected.tsx: Uses <Image> with fixed dimensions
  • Error.tsx: Uses <Image> with aspect ratio classes
  • NotExist.tsx: Uses <img> with aspect ratio classes
  • Connecting.tsx: Uses <img> with aspect ratio classes
🔗 Analysis chain

Standardize image component usage and improve accessibility

  1. The codebase inconsistently uses next/image vs. img tags. Consider standardizing this across all wallet-related components.
  2. The multi-line conditional reduces readability. Consider using the proposed getWalletLogo utility.
  3. The alt text could be more descriptive.
  <Image
-   src={
-     currentWalletName === 'Cosmos MetaMask Extension'
-       ? '/metamask.svg'
-       : getRealLogo(logo)
-   }
-   alt="Wallet type logo"
+   src={getWalletLogo(currentWalletName, logo)}
+   alt={`${currentWalletName} wallet logo`}
    className="flex-shrink-0 w-16 h-16 aspect-1"
    width={16}
    height={16}
  />

Please add test coverage for the wallet logo rendering logic.


Let me check the actual image component usage in these files to verify the inconsistency claim.


Let me modify the pattern to better capture the Image component usage.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check image component usage consistency
rg -l "next/image|<img" components/react/views/

Length of output: 231


Script:

#!/bin/bash
# Check actual Image/img usage patterns
echo "=== Checking Image imports ==="
rg "import.*Image.*from.*next/image" components/react/views/

echo -e "\n=== Checking Image component usage ==="
rg "<Image\s+.*?>" -U components/react/views/

echo -e "\n=== Checking img tag usage ==="
rg "<img\s+.*?>" -U components/react/views/

Length of output: 531


Script:

#!/bin/bash
# Check Image component usage with more flexible pattern
echo "=== Checking Image component usage ==="
rg "<Image" -A 5 components/react/views/

echo -e "\n=== Checking img tag usage ==="
rg "<img" -A 5 components/react/views/

# Also check if there's a getWalletLogo utility
echo -e "\n=== Checking for getWalletLogo utility ==="
rg "getWalletLogo" --type ts

Length of output: 4187

🧰 Tools
🪛 GitHub Check: codecov/patch

[warning] 48-52: components/react/views/Error.tsx#L48-L52
Added lines #L48 - L52 were not covered by tests

alt="Wallet type logo"
className="flex-shrink-0 w-16 h-16 aspect-1"
width={16}
Expand Down
2 changes: 1 addition & 1 deletion components/react/views/NotExist.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
</div>
<div className="flex flex-col w-full h-full py-6 mt-4 sm:px-8">
<img
src={getRealLogo(logo)}
src={name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo)}

Check warning on line 43 in components/react/views/NotExist.tsx

View check run for this annotation

Codecov / codecov/patch

components/react/views/NotExist.tsx#L43

Added line #L43 was not covered by tests
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

🛠️ Refactor suggestion

Confirmed: Wallet logo logic duplication needs refactoring

The verification shows clear evidence of duplicated wallet logo logic across multiple components:

  • NotExist.tsx, Connecting.tsx, Connected.tsx all use identical condition: name === 'Cosmos MetaMask Extension' ? '/metamask.svg' : getRealLogo(logo)
  • WalletList.tsx and Error.tsx have similar but slightly different implementations
  • getRealLogo utility already exists in utils/logos.ts, showing a precedent for shared wallet utilities

The original review suggestion to extract this logic is valid and would improve code maintainability.

🔗 Analysis chain

Extract shared wallet logo logic to avoid duplication

The wallet logo rendering logic is duplicated across multiple components. Consider extracting this into a shared utility function.

+ // utils/wallet.ts
+ export const getWalletLogo = (name: string, defaultLogo: string) => {
+   return name === WALLET_TYPES.METAMASK ? '/metamask.svg' : getRealLogo(defaultLogo);
+ };

  // In component
  src={getWalletLogo(name, logo)}

Please add test coverage for the new logic.


Let me check the actual implementation of these files to verify the duplication pattern.


Let me try a different approach to verify the pattern.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Find all components using similar wallet logo logic
rg -l "metamask\.svg"

# Check for existing wallet-related utilities
fd -e ts -e tsx -p "wallet.*\.(ts|tsx)$" src utils components

Length of output: 379


Script:

#!/bin/bash
# Check the actual implementation of wallet logo logic in all relevant files
rg -A 2 "metamask\.svg" --type tsx

# Check if there's any existing wallet utility functions
ast-grep --pattern 'function $_(name: string, $_) {
  $$$
  metamask$$$
}'

Length of output: 141


Script:

#!/bin/bash
# Check the actual implementation of wallet logo logic in all relevant files
rg -A 2 "metamask\.svg"

# Look for any existing utility functions related to wallet logos
rg "getRealLogo" -A 2

# Check for any constants or types related to wallet names
rg "WALLET_TYPES|WalletType" -A 2

Length of output: 5100

🧰 Tools
🪛 GitHub Check: codecov/patch

[warning] 43-43: components/react/views/NotExist.tsx#L43
Added line #L43 was not covered by tests

alt={name}
className="flex-shrink-0 w-16 h-16 mx-auto aspect-1"
/>
Expand Down
20 changes: 14 additions & 6 deletions components/react/views/WalletList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,17 @@
const isDarkMode = document.documentElement.classList.contains('dark');

const social = wallets.filter(wallet =>
['Google', 'Twitter', 'Apple', 'Discord', 'GitHub', 'Reddit'].includes(
['Google', 'Twitter', 'Apple', 'Discord', 'GitHub', 'Reddit', 'Email', 'SMS'].includes(

Check warning on line 18 in components/react/views/WalletList.tsx

View check run for this annotation

Codecov / codecov/patch

components/react/views/WalletList.tsx#L18

Added line #L18 was not covered by tests
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Missing test coverage for WalletList component and wallet types

The verification confirms that there are no test files for the WalletList component, while other React components in the codebase do have test coverage. The new wallet types (Email, SMS) as well as the existing wallet filtering logic remain untested.

  • components/react/views/WalletList.tsx: Component needs test coverage
    • Test filtering logic for wallet types
    • Test wallet selection behavior
    • Test new wallet types (Email, SMS) integration
🔗 Analysis chain

Add test coverage for new wallet types

The new wallet types (Email, SMS, MetaMask) lack test coverage.

Would you like me to help generate test cases for the new wallet types and filtering logic?

Also applies to: 24-26

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check current test coverage for wallet list filtering
fd -e test.tsx -e spec.tsx . | xargs rg "describe.*WalletList|test.*(Email|SMS|MetaMask)"

Length of output: 91


Script:

#!/bin/bash
# Let's first check if there are any test files related to WalletList
fd "WalletList.*\.(test|spec)\.(tsx|ts|js|jsx)$"

# Also search for any test files in components/react directory
fd "\.(test|spec)\.(tsx|ts|js|jsx)$" components/react

# Let's also check the actual WalletList component implementation
rg -A 5 "WalletList" components/react/views/WalletList.tsx

Length of output: 473

🧰 Tools
🪛 GitHub Check: codecov/patch

[warning] 18-18: components/react/views/WalletList.tsx#L18
Added line #L18 was not covered by tests

wallet.walletInfo.prettyName
)
);

const browser = wallets.filter(wallet =>
['Keplr', 'Cosmostation', 'Leap', 'Station'].includes(wallet.walletInfo.prettyName)
['Keplr', 'Cosmostation', 'Leap', 'Station', 'Cosmos MetaMask Extension'].includes(
wallet.walletInfo.prettyName
)

Check warning on line 26 in components/react/views/WalletList.tsx

View check run for this annotation

Codecov / codecov/patch

components/react/views/WalletList.tsx#L24-L26

Added lines #L24 - L26 were not covered by tests
);

console.log(wallets);

Check warning on line 28 in components/react/views/WalletList.tsx

View check run for this annotation

Codecov / codecov/patch

components/react/views/WalletList.tsx#L28

Added line #L28 was not covered by tests
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove debugging console.log statement

Remove the console.log statement as it appears to be debugging code.

- console.log(wallets);
🧰 Tools
🪛 GitHub Check: codecov/patch

[warning] 28-28: components/react/views/WalletList.tsx#L28
Added line #L28 was not covered by tests

const mobile = wallets.filter(wallet =>
['Wallet Connect', 'Keplr Mobile', 'Cosmostation Mobile', 'Leap Mobile'].includes(
wallet.walletInfo.prettyName
Expand All @@ -40,7 +42,7 @@
<XMarkIcon className="w-5 h-5" aria-hidden="true" />
</button>

{/* Browser and Social sections - browaer hidden on mobile/tablet */}
{/* Browser and Social sections - browser hidden on mobile/tablet */}

Check warning on line 45 in components/react/views/WalletList.tsx

View check run for this annotation

Codecov / codecov/patch

components/react/views/WalletList.tsx#L45

Added line #L45 was not covered by tests
<div className="hidden md:block">
<div className="space-y-2 mb-4">
{browser.map(({ walletInfo: { name, prettyName, logo } }) => (
Expand All @@ -50,11 +52,17 @@
className="flex items-center w-full p-3 rounded-lg dark:bg-[#ffffff0c] bg-[#f0f0ff5c] dark:hover:bg-[#0000004c] hover:bg-[#a8a8a84c] transition"
>
<img
src={getRealLogo(logo?.toString() ?? '')}
src={
prettyName === 'Cosmos MetaMask Extension'
? '/metamask.svg'
: getRealLogo(logo?.toString() ?? '')
}

Check warning on line 59 in components/react/views/WalletList.tsx

View check run for this annotation

Codecov / codecov/patch

components/react/views/WalletList.tsx#L55-L59

Added lines #L55 - L59 were not covered by tests
alt={prettyName}
className="w-10 h-10 rounded-xl mr-3"
/>
<span className="text-md">{prettyName}</span>
<span className="text-md">
{prettyName === 'Cosmos MetaMask Extension' ? 'MetaMask' : prettyName}
</span>

Check warning on line 65 in components/react/views/WalletList.tsx

View check run for this annotation

Codecov / codecov/patch

components/react/views/WalletList.tsx#L63-L65

Added lines #L63 - L65 were not covered by tests
</button>
))}
</div>
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"@chain-registry/assets": "^1.64.83",
"@cosmjs/cosmwasm-stargate": "0.32.4",
"@cosmjs/stargate": "npm:@liftedinit/[email protected]",
"@cosmos-kit/cosmos-extension-metamask": "^0.12.1",
"@cosmos-kit/react": "2.18.0",
"@cosmos-kit/web3auth": "2.11.0",
"@fontsource/manrope": "^5.0.21",
Expand Down
13 changes: 12 additions & 1 deletion pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
manifestTestnetAssets,
} from '@/config';
import { SignerOptions, wallets } from 'cosmos-kit';
import { wallets as cosmosExtensionWallets } from '@cosmos-kit/cosmos-extension-metamask';
import { ChainProvider } from '@cosmos-kit/react';
import { Registry } from '@cosmjs/proto-signing';
import { TailwindModal } from '../components';
Expand Down Expand Up @@ -145,6 +146,16 @@ function ManifestApp({ Component, pageProps }: ManifestAppProps) {
name: 'Reddit',
logo: '/reddit',
},
{
provider: 'email_passwordless',
name: 'Email',
logo: '/email',
},
{
provider: 'sms_passwordless',
name: 'SMS',
logo: '/sms',
},
Comment on lines +126 to +135
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Missing logo assets for email and SMS authentication methods

The logo assets referenced in the authentication configuration (/email and /sms) are not found in the public directory. This needs to be addressed to ensure proper display of authentication method icons.

  • Add the missing logo assets for email authentication at /public/email.[svg|png|jpg]
  • Add the missing logo assets for SMS authentication at /public/sms.[svg|png|jpg]
🔗 Analysis chain

Verify the existence of email and SMS logo assets

The implementation of email and SMS login methods looks correct, but we need to verify that the referenced logo assets exist at /email and /sms paths.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check if the required logo assets exist in the public directory

# Look for email and SMS logo files in common image formats
echo "Searching for email logo:"
fd -t f "email\.(svg|png|jpg|jpeg)" public/

echo -e "\nSearching for SMS logo:"
fd -t f "sms\.(svg|png|jpg|jpeg)" public/

Length of output: 213

],

client: {
Expand All @@ -167,7 +178,7 @@ function ManifestApp({ Component, pageProps }: ManifestAppProps) {
);

// combine the web3auth wallets with the other wallets
const combinedWallets = [...web3AuthWallets, ...wallets];
const combinedWallets = [...web3AuthWallets, ...wallets, ...cosmosExtensionWallets];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Add MetaMask snap installation guidance in the wallet connection flow

The wallet combination implementation is correct and compatible with the current cosmos-kit versions. However, while there's a basic "Install Metamask" prompt, it lacks specific guidance about the required Cosmos snap.

  • components/react/views/NotExist.tsx should be updated to include information about the Cosmos snap requirement when prompting MetaMask installation
🔗 Analysis chain

Verify cosmos-kit compatibility and add user guidance for MetaMask snap.

The wallet combination looks correct, but there are important considerations:

  1. PR comments indicate this requires cosmos-kit updates
  2. Users need the MetaMask snap installed

Consider:

  1. Adding user guidance about MetaMask snap requirements in the UI
  2. Verifying cosmos-kit compatibility:
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check cosmos-kit compatibility

# Check cosmos-kit versions
echo "Checking cosmos-kit versions..."
if [ -f "package.json" ]; then
    jq '.dependencies | with_entries(select(.key | contains("cosmos-kit")))' package.json
fi

# Look for Web3Auth wallet handler implementations
echo -e "\nChecking for Web3Auth wallet handlers..."
rg -g '!node_modules' -g '*.ts' -g '*.tsx' "Web3Auth.*handler"

Length of output: 500


Script:

#!/bin/bash
# Let's verify the MetaMask snap integration and cosmos-kit compatibility

# Check for MetaMask snap-related code and UI guidance
echo "Checking for MetaMask snap-related code and UI guidance..."
rg -g '!node_modules' -g '*.{ts,tsx}' -B2 -A2 "metamask.*snap"

# Check for cosmos extension wallet integration
echo -e "\nChecking cosmos extension wallet integration..."
ast-grep --pattern 'const $_ = useChainWallet($$$)'

# Check for any UI components showing wallet connection guidance
echo -e "\nChecking for wallet connection UI components..."
rg -g '!node_modules' -g '*.{ts,tsx}' "Install.*MetaMask|MetaMask.*required"

Length of output: 772


// this is stop ssr errors when we render the web3auth signing modal
const [isBrowser, setIsBrowser] = useState(false);
Expand Down
7 changes: 7 additions & 0 deletions public/browser-wallet.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/email_dark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/email_light.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 62 additions & 0 deletions public/metamask.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/sms_dark copy.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/sms_light.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading