Merge pull request #7 from zk524/master

support: NeoLine(mobile)
neoburger · Nov 28, 2023 · 071cb5b · 071cb5b
2 parents 97018d9 + 85d4f5d
commit 071cb5b
Show file tree

Hide file tree

Showing 8 changed files with 523 additions and 48 deletions.
diff --git a/components/BurgerStation/index.tsx b/components/BurgerStation/index.tsx
@@ -21,6 +21,7 @@ import { isMobile } from 'react-device-detect'
 
 interface Props {
 	className: string
+	setShowDrawer: (show: boolean) => void
 }
 
 interface ModalInfo {
@@ -29,7 +30,7 @@ interface ModalInfo {
 	jumpUrl?: string
 }
 
-const BurgerStation: FC<Props> = ({ className: _className }) => {
+const BurgerStation: FC<Props> = ({ className: _className, setShowDrawer }) => {
 	const { t: _t } = i18next
 	const t = useCallback((s: any) => _t(s, { ns: 'burgerStation' }), [_t])
 	const router = useRouter()
@@ -119,10 +120,10 @@ const BurgerStation: FC<Props> = ({ className: _className }) => {
 	}
 
 	// 移动端连接钱包
-	const connectWalletInMobile = useCallback(() => {
-		dispatch(batchUpdate({ walletName: 'OneGate' }))
-		walletApi['OneGate']?.getAccount()
-	}, [dispatch])
+	// const connectWalletInMobile = useCallback(() => {
+	// 	dispatch(batchUpdate({ walletName: 'OneGate' }))
+	// 	walletApi['OneGate']?.getAccount()
+	// }, [dispatch])
 
 	// swap按钮是否禁用
 	const swapBtnDisabled = useMemo(() => {
@@ -291,7 +292,7 @@ const BurgerStation: FC<Props> = ({ className: _className }) => {
 			<button
 				className={`${style.footerBtn} ${swapBtnDisabled && style.disabledBtn} ${style.hideInPC}`}
 				disabled={swapBtnDisabled}
-				onClick={() => (address ? swap(transferType, amount) : connectWalletInMobile())}
+				onClick={() => (address ? swap(transferType, amount) : setShowDrawer(true))}
 			>
 				{btnText}
 			</button>

diff --git a/components/Drawer/index.tsx b/components/Drawer/index.tsx
@@ -10,6 +10,7 @@ import { batchUpdate } from '@/store/features/burger'
 import { walletApi } from '@/resources/utils/api/walletApi'
 import closeDrawer from '@/resources/images/close-drawer.svg'
 import oneGate from '@/resources/images/onegate.svg'
+import neoLine from '@/resources/images/neo-line.svg'
 import copy from '@/resources/images/copy.svg'
 import style from './Drawer.module.css'
 
@@ -41,9 +42,9 @@ const Drawer: FC<Props> = ({ visible, hide, language }) => {
 	)
 
 	// 连接钱包
-	const connectWallet = () => {
-		dispatch(batchUpdate({ walletName: 'OneGate' }))
-		walletApi['OneGate']?.getAccount()
+	const connectWallet = (walletName: string) => {
+		dispatch(batchUpdate({ walletName }))
+		walletApi[walletName]?.getAccount()
 	}
 
 	const changeLanguage = (locale: string) => {
@@ -56,11 +57,11 @@ const Drawer: FC<Props> = ({ visible, hide, language }) => {
 				<div className={style.closeBtn} onClick={() => hide()}>
 					<Image src={closeDrawer} alt='close' />
 				</div>
-				{address && walletName === 'OneGate' ? (
+				{address ? (
 					<div className={style.connectInfo}>
 						<div className={style.connectHeader}>
-							<Image src={oneGate} alt='onegate' width={28} height={28} />
-							<span className={style.walletHeaderName}>OneGate</span>
+							<Image src={walletName == "OneGate" ? oneGate : neoLine} alt={walletName} width={28} height={28} />
+							<span className={style.walletHeaderName}>{walletName}</span>
 						</div>
 						<CopyToClipboard text={address}>
 							<div className={style.addressText}>
@@ -70,17 +71,25 @@ const Drawer: FC<Props> = ({ visible, hide, language }) => {
 								</span>
 							</div>
 						</CopyToClipboard>
-						<button className={style.disconnectBtn} onClick={() => walletApi['OneGate']?.disconnect()}>
+						<button className={style.disconnectBtn} onClick={() => walletApi[walletName]?.disconnect()}>
 							Disconnect
 						</button>
 					</div>
 				) : (
-					<button className={style.connectBtn} onClick={() => connectWallet()}>
-						<span>{t('connectWallet')}</span>
-						<span>
-							<Image src={oneGate} alt='onegate' width={32} height={32} />
-						</span>
-					</button>
+					<div>
+						<button className={style.connectBtn} style={{ width: "100%", marginBottom: "12px" }} onClick={() => connectWallet("OneGate")}>
+							<span>{t('connectWallet')}</span>
+							<span>
+								<Image src={oneGate} alt='onegate' width={32} height={32} />
+							</span>
+						</button>
+						<button className={style.connectBtn} style={{ width: "100%" }} onClick={() => connectWallet("NeolineMobile")}>
+							<span>{t('connectWallet')}</span>
+							<span>
+								<Image src={neoLine} alt='neoline' width={32} height={32} />
+							</span>
+						</button>
+					</div>
 				)}
 
 				<a href='https://neoburger.github.io/' className={style.text}>

diff --git a/components/JazzUp/index.tsx b/components/JazzUp/index.tsx
@@ -21,6 +21,7 @@ import { isMobile } from 'react-device-detect'
 
 interface Props {
 	className: string
+	setShowDrawer: (show: boolean) => void
 }
 
 interface ModalInfo {
@@ -29,7 +30,7 @@ interface ModalInfo {
 	jumpUrl?: string
 }
 
-const JazzUp: FC<Props> = ({ className: _className }) => {
+const JazzUp: FC<Props> = ({ className: _className, setShowDrawer }) => {
 	const { t: _t } = i18next
 	const t = useCallback((s: any) => _t(s, { ns: 'jazzUp' }), [_t])
 	const router = useRouter()
@@ -120,10 +121,10 @@ const JazzUp: FC<Props> = ({ className: _className }) => {
 	}
 
 	// 移动端连接钱包
-	const connectWalletInMobile = useCallback(() => {
-		dispatch(batchUpdate({ walletName: 'OneGate' }))
-		walletApi['OneGate']?.getAccount()
-	}, [dispatch])
+	// const connectWalletInMobile = useCallback(() => {
+	// 	dispatch(batchUpdate({ walletName: 'OneGate' }))
+	// 	walletApi['OneGate']?.getAccount()
+	// }, [dispatch])
 
 	// claim按钮是否禁用
 	const claimBtnDisabled = useMemo(() => {
@@ -217,7 +218,7 @@ const JazzUp: FC<Props> = ({ className: _className }) => {
 			<button
 				className={`${style.footerBtn} ${claimBtnDisabled && style.disabledBtn} ${style.hideInPC}`}
 				disabled={claimBtnDisabled}
-				onClick={() => (address ? claim() : connectWalletInMobile())}
+				onClick={() => (address ? claim() : setShowDrawer(true))}
 			>
 				{btnText}
 			</button>

diff --git a/pages/[lang]/home.tsx b/pages/[lang]/home.tsx
@@ -28,7 +28,11 @@ import style_pc from "./Home.pc.module.css";
 import style_mobile from "./Home.mobile.module.css";
 import { isMobile } from "react-device-detect";
 
-const Home: NextPage = () => {
+interface Props {
+  setShowDrawer: (show: boolean) => void
+}
+
+const Home: NextPage<Props> = ({ setShowDrawer }) => {
   const { t } = i18next;
 
   const router = useRouter();
@@ -158,17 +162,15 @@ const Home: NextPage = () => {
         <div className={style.operateWrap} ref={operateRef}>
           <div className={style.switchBtnWrap}>
             <div
-              className={`${style.switchBtn} ${
-                operateType === "burgerStation" && style.switchBtnSelected
-              }`}
+              className={`${style.switchBtn} ${operateType === "burgerStation" && style.switchBtnSelected
+                }`}
               onClick={() => setOperateType("burgerStation")}
             >
               {t("burgerStation")}
             </div>
             <div
-              className={`${style.switchBtn} ${
-                operateType === "jazzUp" && style.switchBtnSelected
-              }`}
+              className={`${style.switchBtn} ${operateType === "jazzUp" && style.switchBtnSelected
+                }`}
               onClick={() => setOperateType("jazzUp")}
             >
               {t("jazzUp")}
@@ -178,9 +180,11 @@ const Home: NextPage = () => {
             className={
               operateType !== "burgerStation" ? style.hideInMobile : ""
             }
+            setShowDrawer={setShowDrawer}
           />
           <JazzUp
             className={operateType !== "jazzUp" ? style.hideInMobile : ""}
+            setShowDrawer={setShowDrawer}
           />
         </div>
         <section className={style.section}>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -36,7 +36,7 @@ function App({ Component, pageProps }: any) {
 			<Provider store={store}>
 				{/* <ErrorHandlder /> */}
 				<Header setShowDrawer={setShowDrawer} {...pageProps} />
-				<Component {...pageProps} />
+				<Component {...pageProps} setShowDrawer={setShowDrawer} />
 				<Footer />
 				<Drawer visible={showDrawer} hide={() => setShowDrawer(false)} {...pageProps} />
 			</Provider>