feat: king hill view bind data

2026-01-12 15:14:17 +08:00 · 2024-11-08 22:43:26 +08:00
parent 0705e9007c
commit 662a5ff566
12 changed files with 40 additions and 21 deletions
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>satlayer</title>
+    <title>Babylong</title>
  </head>
  <body>
    <div id="root"></div>
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -1,4 +1,4 @@
-<svg width="268" height="383" viewBox="0 0 268 383" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="268" height="383" viewBox="0 0 268 383" fill="Pink" xmlns="http://www.w3.org/2000/svg">
 <path d="M137.453 112.531C171.783 111.138 168.458 63.2513 137.453 64.2176C106.987 66.2922 107.271 110.03 137.453 112.531ZM126.369 79.5641C137.737 64.6154 161.069 80.3598 151.293 96.4737C141.517 112.587 114.746 98.122 126.369 79.5641Z" fill="#FFCA05"/>
 <path d="M78.2 374.159C79.5926 376.632 82.0651 376.092 81.8093 373.591C80.7009 366.941 71.834 359.182 67.4006 356.965C67.1164 343.409 85.1344 332.07 96.1895 338.692C102.84 342.869 102.555 334.258 94.8254 332.07C81.2409 328.461 63.2514 339.544 62.143 354.493C39.72 344.518 11.7269 353.1 0.927467 375.267C-1.91448 380.781 2.54738 384.362 3.99677 380.951C17.2402 350.969 60.2105 347.331 78.2 374.159Z" fill="white"/>
 <path d="M121.113 60.1812C142.996 43.8685 162.375 69.8723 160.158 56.8846C158.226 46.9094 152.116 26.6747 145.21 18.092C140.208 11.7261 136.94 6.32635 129.977 17.8362C124.833 26.3052 103.12 73.7658 121.11 60.1812H121.113Z" fill="#FFCA05"/>
--- a/src/pages/Home/ListContentView/KingHillView/_/banner.png
+++ b/src/pages/Home/ListContentView/KingHillView/_/banner.png
--- a/src/pages/Home/ListContentView/KingHillView/_/hot.png
+++ b/src/pages/Home/ListContentView/KingHillView/_/hot.png
--- a/src/pages/Home/ListContentView/KingHillView/_/kingHill.png
+++ b/src/pages/Home/ListContentView/KingHillView/_/kingHill.png
--- a/src/pages/Home/ListContentView/KingHillView/_/leftClasses.png
+++ b/src/pages/Home/ListContentView/KingHillView/_/leftClasses.png
--- a/src/pages/Home/ListContentView/KingHillView/_/nft.png
+++ b/src/pages/Home/ListContentView/KingHillView/_/nft.png
--- a/src/pages/Home/ListContentView/KingHillView/_/rightClasses.png
+++ b/src/pages/Home/ListContentView/KingHillView/_/rightClasses.png
--- a/src/pages/Home/ListContentView/KingHillView/index.tsx
+++ b/src/pages/Home/ListContentView/KingHillView/index.tsx
@@ -4,26 +4,41 @@ import nft from './_/nft.png'
 import hot from './_/hot.png'
 import leftClasses from './_/leftClasses.png'
 import rightClasses from './_/rightClasses.png'
-import { CreateToken } from '../CreateToken'
+import { CreateToken } from '../../CreateToken'
+import { CombineTokenData } from '../../../../service'
+import { FC } from 'react'
+import { useQuerySmart } from 'graz'
+import { TokenPrice } from '../../../Detail'
+import { getEllipsisAddress } from '../../../../utils/formatAddress'
+import { formatUnits } from '../../../../utils/number'




-const KingHillView = () => {
+export const KingHillView: FC<{ item: CombineTokenData }> = ({ item }) => {
+    const { data: tokenPrice } = useQuerySmart<TokenPrice, string>({
+        address: item.address,
+        queryMsg: {
+            curve_info: {},
+        },
+    });
+    console.log(item.description);
+    
+
    return <>
        <div className="bg-[#FFCA05] border-t border-black py-[122px] flex flex-col items-center gap-[84px] overflow-hidden">
            <img className='h-[108px] ml-[26px]' src={kingHill} alt="king hill" />
            <div className="h-[442px] w-[1117px] relative bg-white rounded-3xl flex items-center gap-2.5 ">
-                <img className='h-[394px]' src={nft} alt="nft" />
+                <img className='h-[360px] w-[360px]' src={item.image} alt="nft" />
                <img className='absolute -top-[70px] -left-[100px] h-[200px]' src={hot} alt="hot" />
                <div className='flex flex-col gap-7'>
-                    <p className='text-4xl font-bold'>TOKEN-NAME</p>
+                    <p className='text-4xl font-bold'>{item.displayName}</p>
                    <div className='flex flex-col gap-1'>
-                        <p>Created by <span className='underline'>2B5XZX</span> </p>
-                        <p className='text-[#D90368]'>Market cap <span className='font-bold'>47.50K</span></p>
+                        <p>Created by <span className='underline'>{getEllipsisAddress(item?.creator)}</span> </p>
+                        <p className='text-[#D90368]'>Market cap <span className='font-bold'>{formatUnits(tokenPrice?.supply, 6)}</span></p>
                    </div>
                    <p>
-                        <span className='font-bold'>America/ACC (ticker: USA/ACC):</span> We are so back</p>
+                        <span className='font-bold text-xl'>{item.ticker}:</span> {item.description}</p>
                </div>
                <img className='absolute -left-[444px] bottom-[71px] h-[123px]' src={leftClasses} alt="" />
                <img className='absolute -right-[447px] h-[123px] top-[95px]' src={rightClasses} alt="" />
@@ -35,7 +50,3 @@ const KingHillView = () => {
    </>
 }

-
-export const WireKingHillView = () => {
-    return <KingHillView />
-}
--- a/src/pages/Home/ListContentView/index.tsx
+++ b/src/pages/Home/ListContentView/index.tsx
@@ -16,6 +16,7 @@ import { getEllipsisAddress } from "../../../utils/formatAddress"
 import { formatUnits } from "../../../utils/number"
 import { TokenPrice } from "../../Detail"
 import { useSearch } from '../../../context/SearchContext';
+import { KingHillView } from "./KingHillView"


 interface ListContentProps {
@@ -32,7 +33,7 @@ const ListItem: React.FC<{ item: CombineTokenData }> = ({ item }) => {
    });

    return (
-        <div className="flex rounded-lg bg-white p-4 shadow-md transition-shadow duration-300 hover:shadow-lg h-fit cursor-pointer" onClick={() => navigate(`/detail/${item.address}`)}>
+        <div className="flex rounded-lg bg-white p-4 shadow-md max-w-[533px] transition-shadow duration-300 hover:shadow-lg h-fit cursor-pointer" onClick={() => navigate(`/detail/${item.address}`)}>
            <div className="flex-shrink-0">
                <img
                    src={item.image}
@@ -50,7 +51,7 @@ const ListItem: React.FC<{ item: CombineTokenData }> = ({ item }) => {
                    <p className="text-[#D90368]">Market cap <span className="font-medium">  {formatUnits(tokenPrice?.supply, 6)}</span></p>
                </div>
                <div className="flex items-center justify-between">
-                    <p className="text-gray-600"> <span className="font-semibold">{item.name}</span> {item.description}</p>
+                    <p className="text-gray-600 text-wrap break-all"> <span className="font-semibold">{item.name}</span> {item.description}</p>
                </div>
            </div>
        </div>
@@ -59,8 +60,8 @@ const ListItem: React.FC<{ item: CombineTokenData }> = ({ item }) => {

 const ListContent: React.FC<ListContentProps> = ({ items }) => {
    const { searchValue } = useSearch();
-    
-    const filteredItems = items.filter(item => 
+
+    const filteredItems = items.filter(item =>
        item.address.toLowerCase().includes(searchValue.toLowerCase()) ||
        item.name.toLowerCase().includes(searchValue.toLowerCase())
    );
@@ -95,6 +96,7 @@ const ListContent: React.FC<ListContentProps> = ({ items }) => {

 export const WireListContent = () => {
    const [tokenList, setTokenList] = useState<CombineTokenData[]>([])
+    const [lastItem, setLastItem] = useState<CombineTokenData | undefined>(undefined)

    const { data: signingClient } = useCosmWasmSigningClient({
        opts: signingOpts,
@@ -119,9 +121,13 @@ export const WireListContent = () => {
                } as CombineTokenData
            })
            setTokenList(result)
+            setLastItem(result[result.length - 1])
        })
    }, [signingClient])


-    return <ListContent items={tokenList} />
+    return <>
+        <ListContent items={tokenList} />
+        {lastItem && <KingHillView item={lastItem} />}
+    </>
 }
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,7 +1,6 @@
 import { SearchProvider } from "../../context/SearchContext"
 import { Footer } from "../../components/footer"
 import { Banner } from "./Banner"
-import { WireKingHillView } from "./KingHillView"
 import { WireListContent } from "./ListContentView"

 export const HomePage = () => {
@@ -9,7 +8,6 @@ export const HomePage = () => {
    <SearchProvider>
      <Banner />
      <WireListContent />
-      <WireKingHillView />
      <Footer />
    </SearchProvider>
  )
--- a/src/pages/createToken/index.tsx
+++ b/src/pages/createToken/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, ChangeEvent } from "react"
+import { FC, useState, ChangeEvent, useEffect } from "react"
 import { useCosmWasmSigningClient, useExecuteContract } from "graz"
 import { toast } from "react-toastify"
 import { signingOpts } from "../../constant"
@@ -131,6 +131,10 @@ export const CreateTokenPage: FC = () => {
    }
  }

+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [])
+
  return (
    <div className="w-full min-h-[100vh] relative flex flex-col items-center justify-center">
      <div className="flex-1 w-full flex flex-col items-center justify-center relative pb-[524px]">