Add EIP-6963 Wallet connect modal

Author: lubej

src/components/WalletModal/index.module.css

@@ -0,0 +1,64 @@
+.walletModalContent {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 2rem;
+
+  h4 {
+    color: var(--gray-extra-dark);
+    margin-bottom: 2rem;
+    text-align: center;
+  }
+}
+
+.walletModalLogo {
+  align-self: center;
+  margin-bottom: 3.125rem;
+}
+
+.walletModalProviderList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .providerOption {
+    background-color: var(--gray-medium-light);
+    border-radius: 46px;
+  }
+}
+
+.providerOptionBtn {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 2rem;
+  gap: 0.75rem;
+  background: none;
+  border: none;
+  font: inherit;
+  outline: inherit;
+  color: var(--gray-extra-dark);
+  cursor: pointer;
+  width: 100%;
+  border-radius: 46px;
+
+  &:hover,
+  &:focus {
+    background-color: var(--gray-extra-dark);
+    color: var(--white);
+  }
+}
+
+.providerOptionLogo {
+  object-fit: cover;
+  width: 45px;
+  height: 45px;
+}
+
+@media screen and (max-width: 1000px) {
+  .walletModal {
+    max-width: unset;
+  }
+
+  .walletModalLogo {
+    margin-bottom: 2rem;
+  }
+}

src/components/WalletModal/index.tsx

@@ -0,0 +1,74 @@
+import { FC, useState } from 'react'
+import { Modal, ModalProps } from '../Modal'
+import { LogoIconRound } from '../icons/LogoIconRound.tsx'
+import classes from './index.module.css'
+import { useEIP6963ProviderInfoList } from '../../hooks/useEIP6963ProviderInfoList.ts'
+import { EIP6963ProviderInfo } from '../../utils/types.ts'
+import { useEIP6963 } from '../../hooks/useEIP6963.ts'
+
+interface WalletModalProps extends Pick<ModalProps, 'isOpen' | 'closeModal'> {
+  next: () => void
+}
+
+interface ProviderOptionProps extends Pick<EIP6963ProviderInfo, 'rdns' | 'name' | 'icon'> {
+  isLoading: boolean
+  onSelectProvider: (rdns: string) => void
+}
+
+const ProviderOption: FC<ProviderOptionProps> = ({ rdns, name, icon, onSelectProvider, isLoading }) => {
+  if (!rdns) {
+    return null
+  }
+
+  return (
+    <div className={classes.providerOption}>
+      <button
+        className={classes.providerOptionBtn}
+        onClick={() => onSelectProvider(rdns)}
+        disabled={isLoading}
+      >
+        <img className={classes.providerOptionLogo} src={icon} alt={name} />
+        {name}
+      </button>
+    </div>
+  )
+}
+
+export const WalletModal: FC<WalletModalProps> = ({ isOpen, closeModal, next }) => {
+  const { setCurrentProviderByRdns } = useEIP6963()
+  const providerInfoList = useEIP6963ProviderInfoList()
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const onSelectProvider = (rdns: string) => {
+    setIsLoading(true)
+    setCurrentProviderByRdns(rdns)
+    next()
+    setIsLoading(false)
+  }
+
+  const providerInfoOptionsList = providerInfoList.map(({ uuid, rdns, name, icon }) => (
+    <ProviderOption
+      key={uuid}
+      rdns={rdns}
+      name={name}
+      icon={icon}
+      isLoading={isLoading}
+      onSelectProvider={onSelectProvider}
+    />
+  ))
+
+  return (
+    <Modal isOpen={isOpen} closeModal={closeModal} disableBackdropClick>
+      <div className={classes.walletModalContent}>
+        <div className={classes.walletModalLogo}>
+          <LogoIconRound />
+        </div>
+
+        <h4>Connect a wallet</h4>
+
+        <div className={classes.walletModalProviderList}>{providerInfoOptionsList}</div>
+      </div>
+    </Modal>
+  )
+}

src/hooks/useEIP6963ProviderInfoList.ts

@@ -0,0 +1,10 @@
+import { useEIP6963Manager } from './useEIP6963Manager.ts'
+import { EIP6963ProviderInfo } from '../utils/types.ts'
+
+export const useEIP6963ProviderInfoList = (): EIP6963ProviderInfo[] => {
+  const {
+    state: { providerList },
+  } = useEIP6963Manager()
+
+  return providerList.map(({ info }) => info)
+}