From 384c516d296785bc11227da6a4b7c7ee4e07ed43 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 24 Oct 2024 22:57:58 +0900 Subject: [PATCH] feat: support multipass --- public/assets/qr-multipass.png | Bin 0 -> 2017 bytes src/components/Toast/Toast.tsx | 4 +- .../WalletConnect/MultipassItem.tsx | 47 ++++++++++++++++ .../WalletConnect/WalletConnect.tsx | 53 ++++++++++++------ 4 files changed, 86 insertions(+), 18 deletions(-) create mode 100644 public/assets/qr-multipass.png create mode 100644 src/components/WalletConnect/MultipassItem.tsx diff --git a/public/assets/qr-multipass.png b/public/assets/qr-multipass.png new file mode 100644 index 0000000000000000000000000000000000000000..d5724bd3f3324e82edd00a73d5ac6c1468511857 GIT binary patch literal 2017 zcmYk73p5k#AIG<_i6+hEm5o#){T*7aBO+6#Tr(jo^hP9Gb6e8ib%u;wy0Cbqd5f%rETX004lX z-B7-Ae@^hq#<~FkPnd=SvcgMX556eFEIoB@EQ zLe(`Nh(eLC-MokZwRBTc@z4NkahM1g_XaG4U@u!@qBnhL3T z88r@j*xEX@ytce-w~4#9cIlasv~A5}(d943b05B^zHxv5{ky~D z_ zK6a}Horql)2!z6zslqFijxV)U4ocAKp&J-Dg z!NB2g>Xy{X%4SKKJnXGfwJ<$B9Uqg{{y5Qvm)|j?fX!i!jg47$M80A^r>!DJNNZc!?4U7QO7zl41-)D7sd47u`x9nKgaN^<_ZiJ3s*fLX8vA=pOg$#^USlJP z$kww7OG!z264>cN^BKV(y7AOIci0@nD7vG67kGh&H`lPzu6pfdkwg*g(9D+JzNT}! zXKHHdT1H!9SG(rsvO{?GR#&Y(43P&15@cJ|9YNquBySUZjEIcF-M3sgk`jlZRJc+P zpF>++z4BkW)$@oopiY1u^k-(bUS#Ph%89_hjR&|(OG}S7j^L7#Z1i-#tL=YG=a91Z zb87H6NyAN#j^EIn-{jPfe>fcwpKi=rykl-^N{HqqA3})M_nN=S2<0?G!`tr=8^QXZHK)uHU2& zo->lxqi*6o!<6c`f=l-4ddJZu)o_@pe>aomHv?6m`eMC>SuCqE3NSp}om%n&>k3)c z3&{wmJUR44=J9+IS`XTOoL=-zEH>PFjc|5Az24modG1U8AJB*6!Qg2RoO6SSV&Ps- zsmQ7p^L!iA{wBqk4WM*k9CQ4No6!BBegXS4;7g-X-}^S&S23JpEzn0bOA+`GSB)T+ z5^il{=j}qcyK!p#hnL$Wwml@p37{0Ohds~+Zt=UJtF3u^IJzD*l~H`$O|ujHk727JsEHQAC0J8WWzbN;LLJmUV% z0NG$;JQ(N;U!!+oP0x>&zFVF&KgAV66g@|Z=c$t zGgq`#Pw`7Iz6fi>a;g)QIewHg>LH|Zd$funb%CJ~qLh-IPdwgN_peiD(;l)?P*~kn zvoI4O%FOda(cIjew-BUyipU>=zl<%$1Fb;5E@6~sby`Qj$QW{VwCLYN*XOVGzb-8y zmmC%#(m?3daM_}a7R*f*HU^d5&nN80f)@e^sAhEeb!3)7BKaPRc_>#`1D5%K@=AsH zZ>2CS0;So%0nvndaK!}@7N;W1x5%^qfy9g2qaoq^z`t*KwVkswJIc5vga@cUTb~6A z&XelHy)#h>p6<2A{Ipu1^kJJUr6#Mlg?nRuwU&4!eK@Y36X>vcsX>hCQ%y@W7kt7kq{Ymh|dYy_e<0cc&DxO9{lm5{l1C}Ecs#;GA3UU;e3g2ao)fPe|wa` zT9fuR+d4|RK?7ItA+Hbb6-M$8loc4A9v5%pY4u-y1u&x(e!SYU-Jh%%{uREkc~p+r zk@m9d*|a}}V{qf#V^96bzXvq*Y8+lBV|F<=pm@ZV>n-rwkm|NRCy9DE1{=uf>68

q2UKaX|-Q{FOI)OVH8+T0i!dQfM2gqJ4f@W(L>oS0MY0Iu5LC$E!pUDpR)rxYC z`XJRhE78f^x65r5Xa?iN^=!n3mv0?`Me+nC_&JJ%Fa?H?c zIGy#+0LfAJi1r(&v!&3XK{_zZD_SeavQI>Kp)EqQwc6h`Kp!XbHHB)6cDOG0LX)AQ zOX#IH7lMAtJ=lAYp+rwT>D=&0;>G)Xduyy(eV78#PM^+2=9GS%C!E2uwdK6b@J6nn d@tz2o0 { 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 )}