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 + Multipass + + +

Scan to connect

+ Multipass QR code +
+
+ ) +} + +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 )}