From b99d76e3b72484e11fcdfc3e0f1985e94950d694 Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MBP-2021.lan>
Date: Tue, 19 Sep 2023 10:49:24 +0800
Subject: [PATCH 1/2] feat: dapps list

---
 packages/client/scan/src/container/Models.tsx | 56 ++++++++++++++++++-
 packages/client/scan/src/types/index.ts       |  1 +
 2 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/packages/client/scan/src/container/Models.tsx b/packages/client/scan/src/container/Models.tsx
index 402ed72c..fd0304d8 100644
--- a/packages/client/scan/src/container/Models.tsx
+++ b/packages/client/scan/src/container/Models.tsx
@@ -165,11 +165,13 @@ export default function ModelsPage() {
                 <th>Usage Count</th>
                 <th>7 Days Usage</th>
                 <th>Release Date</th>
+                <th>Dapps</th>
                 <th></th>
               </tr>
             </thead>
             <tbody>
               {lists.map((item, idx) => {
+                const dapps = item.dapps || []
                 const hasStarItem = personalCollectionsWithoutFilter.find(
                   (starItem) => starItem.modelId === item.stream_id
                 )
@@ -233,12 +235,13 @@ export default function ModelsPage() {
                     <td>
                       <div className="release-date">
                         {(item.last_anchored_at &&
-                          dayjs(item.created_at).format(
-                            'YYYY-MM-DD HH:mm:ss'
-                          )) ||
+                          dayjs(item.created_at).format('YYYY-MM-DD')) ||
                           '-'}
                       </div>
                     </td>
+                    <td>
+                      <Dapps dapps={dapps} />
+                    </td>
                     <td>
                       <ModelStarItem
                         stream_id={item.stream_id}
@@ -259,6 +262,49 @@ export default function ModelsPage() {
   )
 }
 
+function Dapps({
+  dapps,
+}: {
+  dapps: Array<{ name: string; description: string }>
+}) {
+  return (
+    <DappBox>
+      {dapps.length > 0
+        ? dapps.map((item, idx) => {
+            return (
+              <span key={item.name} title={item.description}>
+                {item.name}
+              </span>
+            )
+          })
+        : 'None'}
+    </DappBox>
+  )
+}
+
+const DappBox = styled.div`
+  display: flex;
+  gap: 10px;
+  overflow: hidden;
+  color: #fff;
+  font-family: Rubik;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  > span {
+    color: #fff;
+    font-family: Rubik;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    border-radius: 4px;
+    border: 1px solid #fff;
+    padding: 2px 6px;
+  }
+`
+
 function ModelStarItem({
   signIn,
   hasStarItem,
@@ -418,6 +464,10 @@ const PageBox = styled.div<{ isMobile: boolean }>`
 
     color: #ffffff;
   }
+
+  a {
+    word-break: break-word;
+  }
 `
 
 const TableContainer = styled.table<{ isMobile: boolean }>`
diff --git a/packages/client/scan/src/types/index.ts b/packages/client/scan/src/types/index.ts
index ab626c8d..ffd634d4 100644
--- a/packages/client/scan/src/types/index.ts
+++ b/packages/client/scan/src/types/index.ts
@@ -61,6 +61,7 @@ export type ModelStream = {
   recentlyUseCount?: number
   isIndexed?: boolean
   firstRecordTime?: string
+  dapps?: { name: string; description: string }[]
 }
 
 export type ModelStreamInfo = {

From 5646ffdc3c003cad9ac3473fd3d7fc80dba7f91b Mon Sep 17 00:00:00 2001
From: ttang <ttang@ttang-MBP-2021.lan>
Date: Tue, 19 Sep 2023 12:24:15 +0800
Subject: [PATCH 2/2] feat: dapps icon

---
 packages/client/scan/src/container/Models.tsx | 88 +++++++++++++++----
 packages/client/scan/src/types/index.ts       |  2 +-
 2 files changed, 73 insertions(+), 17 deletions(-)

diff --git a/packages/client/scan/src/container/Models.tsx b/packages/client/scan/src/container/Models.tsx
index fd0304d8..5c648f23 100644
--- a/packages/client/scan/src/container/Models.tsx
+++ b/packages/client/scan/src/container/Models.tsx
@@ -265,26 +265,61 @@ export default function ModelsPage() {
 function Dapps({
   dapps,
 }: {
-  dapps: Array<{ name: string; description: string }>
+  dapps: Array<{ name: string; description: string; icon: string }>
 }) {
+  const apps = useMemo(() => {
+    const data = [...dapps]
+    if (data.length > 3)
+      return { data: data.slice(0, 3), left: data.length - 3 }
+    return { data, left: 0 }
+  }, [dapps])
+
   return (
-    <DappBox>
-      {dapps.length > 0
-        ? dapps.map((item, idx) => {
+    <DappBox className="cc">
+      {apps.data.length > 0
+        ? apps.data.map((item, idx) => {
             return (
-              <span key={item.name} title={item.description}>
-                {item.name}
-              </span>
+              <ImgOrName key={item.name} name={item.name} imgUrl={item.icon} />
             )
           })
         : 'None'}
+      {apps.left > 0 && <span className="left">{apps.left}+</span>}
     </DappBox>
   )
 }
 
+function ImgOrName({ imgUrl, name }: { imgUrl: string; name: string }) {
+  const [showName, setShowName] = useState(true)
+  if (showName) {
+    return (
+      <>
+        <span title={name} className="name">
+          {name.slice(0, 1).toUpperCase()}
+        </span>
+        <img
+          style={{ display: 'none' }}
+          src={imgUrl}
+          alt=""
+          onLoad={() => {
+            setShowName(false)
+          }}
+          onError={() => {
+            setShowName(true)
+          }}
+        />
+      </>
+    )
+  }
+  return (
+    <span title={name}>
+      <img src={imgUrl} alt="" />
+    </span>
+  )
+}
+
 const DappBox = styled.div`
   display: flex;
-  gap: 10px;
+  gap: 5px;
   overflow: hidden;
   color: #fff;
   font-family: Rubik;
@@ -294,14 +329,35 @@ const DappBox = styled.div`
   line-height: normal;
   > span {
     color: #fff;
-    font-family: Rubik;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    border-radius: 4px;
-    border: 1px solid #fff;
-    padding: 2px 6px;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    border: 1px solid #718096;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    &.name {
+      font-size: 20px;
+      font-weight: 500;
+    }
+    &.left {
+      border: none;
+      color: #fff;
+      justify-content: start;
+      font-family: Rubik;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+    > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      flex-shrink: 0;
+      border-radius: 50%;
+    }
   }
 `
 
diff --git a/packages/client/scan/src/types/index.ts b/packages/client/scan/src/types/index.ts
index ffd634d4..400afc99 100644
--- a/packages/client/scan/src/types/index.ts
+++ b/packages/client/scan/src/types/index.ts
@@ -61,7 +61,7 @@ export type ModelStream = {
   recentlyUseCount?: number
   isIndexed?: boolean
   firstRecordTime?: string
-  dapps?: { name: string; description: string }[]
+  dapps?: { name: string; description: string; icon: string }[]
 }
 
 export type ModelStreamInfo = {