diff --git a/public/assets/qr-multipass.png b/public/assets/qr-multipass.png
new file mode 100644
index 0000000000..d5724bd3f3
Binary files /dev/null and b/public/assets/qr-multipass.png differ
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index f506092e38..86150508de 100644
--- a/src/components/Toast/Toast.tsx
+++ b/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 (
- Logos Ordinals Mint Begins October 31, 2024 at 5PM UTC
+ Logos Ordinals Mint Begins November 4, 2024 at 1PM UTC
Time remaining: {time}
)
diff --git a/src/components/WalletConnect/MultipassItem.tsx b/src/components/WalletConnect/MultipassItem.tsx
new file mode 100644
index 0000000000..85ab91ae4d
--- /dev/null
+++ b/src/components/WalletConnect/MultipassItem.tsx
@@ -0,0 +1,47 @@
+import styled from '@emotion/styled'
+
+const Multipass = () => {
+ return (
+
+
+
+ Multipass
+
+
+ Scan to connect
+
+
+
+ )
+}
+
+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
diff --git a/src/components/WalletConnect/WalletConnect.tsx b/src/components/WalletConnect/WalletConnect.tsx
index fc2c8b1163..abb8a05749 100644
--- a/src/components/WalletConnect/WalletConnect.tsx
+++ b/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(null)
- const toggleDropdown = () => {
- setIsExpanded(!isExpanded)
+ const toggleDropdown = (e: React.MouseEvent) => {
+ 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 = () => {
{walletAddress == null ? (
- options.map((option, index) => (
-
- connectWallet(
- option.value as keyof typeof walletHandlers,
- )
- }
- key={'wallet-' + index}
- >
- {option.label}
-
- ))
+ showMultiPass ? (
+
+ ) : (
+ options.map((option, index) => (
+ handleWalletClick(option.value)}
+ key={'wallet-' + index}
+ >
+ {option.label}
+
+ ))
+ )
) : (
Disconnect
)}