feat: support multipass

src/components/Toast/Toast.tsx

@@ -38,7 +38,7 @@ const Toast: React.FC = () => {
   const [time, setTime] = useState('DD:HH:mm:ss')
 
   useEffect(() => {
-    const targetTime = new Date('2024-10-31T17:00:00Z').getTime()
+    const targetTime = new Date('2024-11-04T13:00:00Z').getTime()
 
     const formatTime = (timeInSeconds: number) => {
       const days = Math.floor(timeInSeconds / (3600 * 24))
@@ -75,7 +75,7 @@ const Toast: React.FC = () => {
 
   return (
     <ToastContainer>
-      Logos Ordinals Mint Begins October 31, 2024 at 5PM UTC
+      Logos Ordinals Mint Begins November 4, 2024 at 1PM UTC
       <span>Time remaining: {time}</span>
     </ToastContainer>
   )

src/components/WalletConnect/MultipassItem.tsx

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled'
+
+const Multipass = () => {
+  return (
+    <div>
+      <WalletName>
+        <img src="/assets/chevron-left.svg" alt="Multipass" />
+        Multipass
+      </WalletName>
+      <QRCodeContainer>
+        <p>Scan to connect</p>
+        <img src="/assets/qr-multipass.png" alt="Multipass QR code" />
+      </QRCodeContainer>
+    </div>
+  )
+}
+
+const WalletName = styled.div`
+  font-size: 12px;
+  line-height: 16px;
+  border-bottom: 1px solid rgb(var(--lsd-border-primary));
+  display: flex;
+  padding: 6px 10px 6px 12px;
+  align-items: center;
+  align-self: stretch;
+  cursor: pointer;
+  gap: 12px;
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+`
+
+const QRCodeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 12px;
+
+  p {
+    font-size: 12px;
+    line-height: 16px;
+    margin-bottom: 12px;
+  }
+`
+
+export default Multipass

src/components/WalletConnect/WalletConnect.tsx

@@ -5,13 +5,14 @@ import React, { useEffect, useRef, useState } from 'react'
 import { userInfoAtom } from '../../../atoms/userInfo'
 import { walletAddressAtom } from '../../../atoms/wallet'
 import { api } from '../../../common/api'
+import MultipassItem from './MultipassItem'
 import { getMEAddressAndSignature } from './magicEden'
 import { getOKXAddressAndSignature } from './okx'
 import { getPhantomAddressAndSignature } from './phantom'
 import { getUnisatAddressAndSignature } from './unisat'
 
 const options = [
-  { label: 'Multiplass', value: 'multiplass' },
+  { label: 'Multiplass', value: 'multipass' },
   { label: 'Unisat', value: 'unisat' },
   { label: 'Magic Eden', value: 'magic-eden' },
   { label: 'Phantom', value: 'phantom' },
@@ -23,6 +24,7 @@ const Dropdown: React.FC = () => {
   const [walletAddress, setWalletAddress] = useAtom(walletAddressAtom)
 
   const [userInfo, setUserInfo] = useAtom(userInfoAtom)
+  const [showMultiPass, setShowMultiPass] = useState(false)
 
   const walletHandlers = {
     okx: getOKXAddressAndSignature,
@@ -31,9 +33,16 @@ const Dropdown: React.FC = () => {
     phantom: getPhantomAddressAndSignature,
   }
 
-  const connectWallet = async (wallet: keyof typeof walletHandlers) => {
+  const connectWallet = async (
+    wallet: keyof typeof walletHandlers | 'multipass',
+  ) => {
     try {
       if (walletAddress == null) {
+        if (wallet === 'multipass') {
+          setShowMultiPass(true)
+          return
+        }
+
         const handler = walletHandlers[wallet]
 
         if (!handler) {
@@ -61,8 +70,8 @@ const Dropdown: React.FC = () => {
 
   const dropdownRef = useRef<HTMLDivElement>(null)
 
-  const toggleDropdown = () => {
+  const toggleDropdown = (e: React.MouseEvent) => {
-    setIsExpanded(!isExpanded)
+    setIsExpanded(true)
   }
 
   const handleClickOutside = (event: MouseEvent) => {
@@ -85,6 +94,18 @@ const Dropdown: React.FC = () => {
     window.location.reload()
   }
 
+  const handleWalletClick = (option: string) => {
+    if (option !== 'multipass') {
+      setIsExpanded(false)
+    } else {
+      setShowMultiPass(true)
+      setIsExpanded(true)
+      return
+    }
+
+    connectWallet(option as keyof typeof walletHandlers)
+  }
+
   useEffect(() => {
     if (isExpanded) {
       document.addEventListener('mousedown', handleClickOutside)
@@ -110,18 +131,18 @@ const Dropdown: React.FC = () => {
             <DropdownContent>
               <ScrollDiv>
                 {walletAddress == null ? (
-                  options.map((option, index) => (
+                  showMultiPass ? (
-                    <WalletName
+                    <MultipassItem />
-                      onClick={() =>
+                  ) : (
-                        connectWallet(
+                    options.map((option, index) => (
-                          option.value as keyof typeof walletHandlers,
+                      <WalletName
-                        )
+                        onClick={() => handleWalletClick(option.value)}
-                      }
+                        key={'wallet-' + index}
-                      key={'wallet-' + index}
+                      >
-                    >
+                        {option.label}
-                      {option.label}
+                      </WalletName>
-                    </WalletName>
+                    ))
-                  ))
+                  )
                 ) : (
                   <WalletName onClick={handleDisconnect}>Disconnect</WalletName>
                 )}