feat: ffa page

packages/client/src/pages/ffa/header/index.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import Logo from '@/assets/img/logo.png';
+import './styles.scss';
+import imgTwitter from '@/assets/img/icon_tw.png';
+import imgDiscord from '@/assets/img/icon_d.png';
+import UserAddress from '@/components/UserAddress';
+import { useMUD } from '@/mud/MUDContext';
+import { ethers } from 'ethers';
+import { TRANSFER_GAS } from '@/config/chain';
+
+interface IProps {
+  onPlayBtnClick: () => void;
+  onlyRight?: boolean;
+}
+
+let transfering = false
+
+const HomeHeader = (props: IProps) => {
+
+  const [walletAddress, setWalletAddress] = useState('');
+  const [walletBalance, setWalletBalance] = useState('');
+
+  const {
+    network
+  } = useMUD();
+
+  const transferFun = async (to) => {
+    if (transfering) return
+    transfering = true
+    let PRIVATE_KEY = ''
+    if (network.walletClient?.chain?.id == 31337 || network.walletClient?.chain?.id == 33784) {
+      PRIVATE_KEY = '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80'
+    } else if (network.walletClient?.chain?.id == 17001) {
+      PRIVATE_KEY = '0x7f5f5b59608a084ae03db047c8c4cfa79898b37c69e1c028c1e310bb28e190fd'
+    }
+    let rpc = network.walletClient?.chain?.rpcUrls?.default?.http[0] || 'http://127.0.0.1:8545'
+    let provider = new ethers.providers.JsonRpcProvider(rpc)
+    let wallet = new ethers.Wallet(PRIVATE_KEY, provider)
+    console.log(wallet, 'wallet')
+    let transferGas = TRANSFER_GAS[network.walletClient?.chain?.id || 31337]
+    wallet.sendTransaction({
+      to,
+      value: ethers.utils.parseEther(transferGas)
+    }).then(res => {
+      console.log(res, 'res')
+      transfering = false
+      getBalance()
+    }).catch(err => {
+      console.log(err)
+    })
+  }
+
+  const getBalance = async () => {
+    let balance = await network.publicClient.getBalance({
+      address: network.walletClient.account.address
+    })
+    let walletBalance = 0
+    if (balance.toString() == '0') {
+      transferFun(network.walletClient.account.address)
+    } else {
+      walletBalance = (+ethers.utils.formatEther(balance.toString())).toFixed(2)
+    }
+    setWalletAddress(network.walletClient.account.address);
+    setWalletBalance(walletBalance);
+    localStorage.setItem('mi_user_address', network.walletClient.account.address)
+    // 转成eth
+  }
+
+  useEffect(() => {
+    if (network.walletClient?.account?.address) {
+      getBalance()
+    }
+  }, [network.walletClient?.account?.address])
+
+
+  return (
+    <div className="home-header" >
+      <div className='home-header-l'>
+        <a href="/">
+          <img src={Logo} alt="MISSISSIPPI" className="header-logo"/>
+        </a>
+
+        <nav className="header-nav">
+          <ul className="menu-lv1">
+            {/* <li><a href="">Leaderboard</a></li> */}
+            <li><a href="https://mississippi.gitbook.io/mississippi/" target='_blank' rel="noreferrer">Docs</a></li>
+            <li className="menu-socials">
+              <a href="">Socials</a>
+              <ul className="menu-lv2">
+                <li>
+                  <a href="https://twitter.com/0xMississippi" target="_blank" rel="noreferrer">Twitter</a>
+                  <img src={imgTwitter} alt=""/>
+                </li>
+                <li>
+                  <a href="https://discord.gg/UkarGN9Fjn" target="_blank" title="coming soon" rel="noreferrer">Discord</a>
+                  <img src={imgDiscord} alt=""/>
+                </li>
+
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      {
+        walletAddress ?
+          <UserAddress address={walletAddress} account={walletBalance + 'ETH'}/>
+          :
+          <button className="play-btn mi-btn" onClick={props.onPlayBtnClick}>PLAY NOW</button>
+      }
+    </div>
+  );
+};
+
+export default HomeHeader;

packages/client/src/pages/ffa/header/styles.scss

@@ -0,0 +1,147 @@
+.home-header {
+  position: fixed;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  padding: 8px 30px 8px 8px;
+  font-family: MISS, sans-serif;
+  //font-family: Arbutus, Arial, sans-serif;
+  background: #020202;
+
+  .home-header-l {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  .header-logo {
+    height: 80px;
+  }
+
+  .play-btn {
+    padding: 0px 30px;
+    height: 55px;
+    font-size: 16px;
+  }
+
+  .header-nav {
+    flex: 1;
+
+    .menu-lv1 {
+      display: flex;
+
+      &>li {
+        position: relative;
+      }
+
+      .menu-socials {
+        &::after {
+          content: '';
+          position: absolute;
+          top: 18px;
+          right: 0;
+          width: 21px;
+          height: 12px;
+          transform: rotate(180deg);
+          transition: all 0.3s;
+          background: url("../../../assets/img/btn_3.png");
+        }
+
+        &:hover::after {
+          transform: rotate(0);
+        }
+
+        &:hover {
+          .menu-lv2 {
+            display: block;
+          }
+        }
+      }
+
+    }
+
+    .menu-lv2 {
+      display: none;
+      position: absolute;
+      left: 32px;
+      top: 99%;
+      padding: 10px;
+      width: 384px;
+      border-radius: 8px;
+      background: #412f50;
+
+      li {
+        position: relative;
+
+        img {
+          position: absolute;
+          right: 8px;
+          top: 50%;
+          transform: translateY(-50%);
+          pointer-events: none;
+        }
+      }
+
+      a {
+        padding: 0 14px;
+        line-height: 60px;
+        border-radius: 8px;
+
+        &:hover {
+          background: #543f66;
+        }
+      }
+    }
+
+    a {
+      display: block;
+      padding: 0 32px;
+      font-size: 14px;
+      line-height: 46px;
+      color: #fff;
+    }
+  }
+}
+
+.select-network {
+  position: relative;
+  margin-right: 15px;
+  min-width: 330px;
+  .mi-btn {
+    width: 100%;
+  }
+  .mask {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+  }
+  .network-list {
+    position: absolute;
+    top: 55px;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    border-radius: 8px;
+    border: 5px solid #BC8C61;
+    background: #FCBD80;
+    z-index: 999;
+    .network-item {
+      font-size: 14px;
+      line-height: 32px;
+      padding: 8px;
+      box-sizing: border-box;
+      cursor: pointer;
+      color: #5d2e1c;
+      &:hover {
+        background: #f5b676;
+      }
+    }
+  }
+}

packages/client/src/pages/ffa/index.tsx

@@ -1,10 +1,21 @@
 import React from 'react';
 import './styles.scss';
+import Header from './header';
+import UserInfo from './userInfo';
 
 const FFA = () => {
   return (
-    <div>
+    <div className={'ffa-page'}>
+      <Header/>
 
+      <section className={'ffa-section'}>
+        <div className="ffa-switch-wrapper">
+          <h2 className={'switch-item active'}>Home</h2>
+          <h2 className={'switch-item'}>Battle</h2>
+        </div>
+        <UserInfo/>
+        <button className="mi-btn">Mint and Go</button>
+      </section>
     </div>
   );
 };

packages/client/src/pages/ffa/styles.scss

@@ -0,0 +1,50 @@
+.ffa-page {
+    font-family: MISS, sans-serif;
+    color: #BC8C61;
+    height: 100vh;
+    background: url("../../assets/img/bg.jpg") no-repeat center / 100% 100%;
+
+    .ffa-section {
+        width: 1280px;
+        margin: 0 auto;
+        padding-top: 120px;
+
+        h2 {
+            font-size: 20px;
+            margin-bottom: 20px;
+        }
+
+        .mi-btn {
+            display: block;
+            margin: 36px auto;
+            width: 234px;
+            height: 66px;
+            font-size: 16px;
+        }
+    }
+
+    .ffa-switch-wrapper {
+        display: flex;
+
+        .switch-item {
+            padding: 10px 12px;
+            //border: 4px solid;
+            cursor: pointer;
+            border-bottom: 4px solid #BC8C61;
+
+            &:not(:first-child) {
+                //border-left-width: 2px;
+            }
+
+            &:not(:last-child) {
+                //border-right-width: 2px;
+            }
+
+            &.active {
+
+                color: #FFF5E9;
+                background: #BC8C61;
+            }
+        }
+    }
+}