Merge pull request #218 from us3r-network/F-dappsList-ttang

feat: dapps list
us3r-network · Sep 19, 2023 · 93b90c7 · 93b90c7
2 parents f525b31 + 5646ffd
commit 93b90c7
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 3 deletions.
diff --git 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,105 @@ export default function ModelsPage() {
   )
 }
 
+function Dapps({
+  dapps,
+}: {
+  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 className="cc">
+      {apps.data.length > 0
+        ? apps.data.map((item, idx) => {
+            return (
+              <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: 5px;
+  overflow: hidden;
+  color: #fff;
+  font-family: Rubik;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  > span {
+    color: #fff;
+    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%;
+    }
+  }
+`
+
 function ModelStarItem({
   signIn,
   hasStarItem,
@@ -418,6 +520,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
@@ -61,6 +61,7 @@ export type ModelStream = {
   recentlyUseCount?: number
   isIndexed?: boolean
   firstRecordTime?: string
+  dapps?: { name: string; description: string; icon: string }[]
 }
 
 export type ModelStreamInfo = {