react-pixels-metaverse

Welcome to react-pixels-metaverse 👋

🏠 Homepage

1. yarn
2. cd example
3. yarn
4. yarn start

//传入 networkId, web3, address 三个值到 PixelsMetaverseContextProvider 上下文环境中去
import { PixelsMetaverseContextProvider } from 'react-pixels-metaverse';

export const Example = ({ src }: { src: string }) => {
  const { networkId, web3, address } = useContract() // 前端自行编写获取web3等数据的代码
  if (!web3 || !networkId || !address) return (
    <div>
      请链接钱包并切换到 Ropsten 测试网
    </div>
  )

  return (
    <PixelsMetaverseContextProvider web3={web3} networkId={networkId} currentAddress={address}>
      <YourOtherComponent />
    </PixelsMetaverseContextProvider>
  );
};

import { 
  PixelsMetaverseImgByPositionData, 
  PixelsMetaverseImgByAddress,
  TGoodsData, 
  usePixelsMetaverseContract 
} from "react-pixels-metaverse";
import { fetchGetGoodsIdList, fetchUserInfo } from "../web3/hook";
import { useLoading } from "./Loading";

export const Avatar = ({ src }: { src: string }) => {
  const { accounts, contract, } = usePixelsMetaverseContract()
  const { openLoading, closeDelayLoading } = useLoading()
  if (!contract) return ( 
    <div>
      请链接钱包并切换到 Ropsten 测试网
    </div>
  )

  const [userInfo, setUserInfo] = useState<Dictionary<any>>({});
  const [goodsList, setGoodsList] = useState<any[]>([]);

  const getInfo = (address: string) => {
    if (isEmpty(address)) return
    fetchUserInfo({ contract, accounts }, { address, setUserInfo, openLoading, closeDelayLoading })
  }

  useEffect(() => {
    if (isEmpty(src)) return
    getInfo(src)
  }, [src, contract])

  useEffect(() => {
    fetchGetGoodsIdList({ contract, accounts }, { setValue: setGoodsList, openLoading, closeDelayLoading })
  }, [contract])

  // 获取到该地址的已配置的头像数据数组，以上获取方式可以前端自行决定，但是 
  // 传给 PixelsMetaverseImgByPositionData 组件的数据必须满足 TGoodsData[] 该格式
  const avatarList: TGoodsData[] = useMemo(() => {
    return filter(goodsList, item => item?.owner === userInfo?.account && item?.isOutfit)
  }, [goodsList, userInfo])

  return (
    <div style={{ display: 'flex', fontSize: 14, color: "rgba(225,225,225,0.7)" }}>
      <div>
        <div style={{ margin: 20 }}>通过头像数据绘制头像</div>
        <PixelsMetaverseImgByPositionData
          data={{ goodsData: avatarList }}
          size={240}
          className="App-logo"
          style={{
            borderRadius: "50%",
            background: userInfo?.user?.bgColor || "#e1e1e11a",
            boxShadow: "0px 0px 5px rgba(225,225,225,0.3)"
          }}
        />
      </div>
      &emsp;&emsp;&emsp;&emsp;
      <div>
        <div  style={{ margin: 20 }}>通过地址绘制头像</div>
        <PixelsMetaverseImgByAddress
          address={src}
          size={240}
          className="App-logo"
          style={{
            borderRadius: "50%",
            background: userInfo?.user?.bgColor || "#e1e1e11a",
            boxShadow: "0px 0px 5px rgba(225,225,225,0.3)"
          }}
        />
      </div>
    </div>
  );
};