chore: more ui tweaks/add back button

allo-protocol · Sep 20, 2023 · 22a11da · 22a11da
1 parent d279ce6
commit 22a11da
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 18 deletions.
diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx
@@ -29,19 +29,23 @@ const Pool = (data: any) => {
     ],
     rows: Object.values(data.data).map((pool: any) => {
       return [
+        // eslint-disable-next-line react/jsx-key
         <Link
           className="text-green-800 hover:bg-green-200 p-2 rounded-md"
           href={`/pool/${pool.chainId}/${pool.poolId}`}
         >
           {pool.poolId}
         </Link>,
         ,
+        // eslint-disable-next-line react/jsx-key
         <Address address={pool.strategy} chainId={pool.chainId} />,
         // pool.name, FIXME: THE API DOES NOT RETURN THE POOL NAME
         // shortenPoolName("Pool Name is really long"),
+        // eslint-disable-next-line react/jsx-key
         <Address address={pool.token} chainId={pool.chainId} />,
         formatAmount(pool.amount),
         shortenPoolName(pool.profile.name),
+        // eslint-disable-next-line react/jsx-key
         <Address address={pool.profile.owner} chainId={pool.chainId} />,
         convertChainIdToNetworkName(pool.chainId),
       ];

diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx
@@ -6,6 +6,7 @@ import { MetadataProtocol } from "@/types/types";
 import { TbExternalLink } from "react-icons/tb";
 import JsonView from "@uiw/react-json-view";
 import { ethers } from "ethers";
+import Link from "next/link";
 
 const PoolDetailPage = ({
   pool,
@@ -18,14 +19,23 @@ const PoolDetailPage = ({
 
   return (
     <div>
-      <div className="px-4 sm:px-0 my-10">
-        <h3 className="text-base font-semibold leading-7 text-gray-900">
-          {/* {pool.name} */}
-          "Pool Name"
-        </h3>
-        <p className="mt-1 max-w-xs text-sm leading-6 text-gray-500 font-mono">
-          {pool.poolId}
-        </p>
+      <div className="flex flex-row items-center justify-between px-4 sm:px-0 my-10">
+        <div className="flex flex-row">
+          <h3 className="text-base font-semibold leading-7 text-gray-900">
+            {/* {pool.name} */}
+            This is a test pool
+          </h3>
+          <p className="mt-1 ml-4 max-w-xs text-sm leading-6 text-gray-500 font-mono">
+            {pool.poolId}
+          </p>
+        </div>
+        <div>
+          <Link href={`/pool/`}>
+            <button className="ml-4 inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md shadow-sm text-white bg-green-800 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
+              Back
+            </button>
+          </Link>
+        </div>
       </div>
       <div className="mt-6 border-t border-gray-100">
         <dl className="divide-y divide-gray-100">

diff --git a/src/components/Registry/Profile.tsx b/src/components/Registry/Profile.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import Link from "next/link";
 import { Address, truncatedString } from "../Address";
 import Table from "../Table";

diff --git a/src/components/Registry/ProfileDetail.tsx b/src/components/Registry/ProfileDetail.tsx
@@ -1,12 +1,12 @@
 "use client";
+
 import { convertChainIdToNetworkName } from "@/utils/utils";
 import { AddressResponsive } from "../Address";
 import { TProfileDetails } from "./types";
 import { MetadataProtocol } from "@/types/types";
 import { TbExternalLink } from "react-icons/tb";
 import JsonView from "@uiw/react-json-view";
 
-
 const ProfileDetail = ({
   profile,
   metadata,
@@ -83,8 +83,8 @@ const ProfileDetail = ({
             </dt>
             <dd className="mt-2 text-sm text-gray-900 sm:col-span-1 sm:mt-0">
               <ul role="list" className="">
-                {profile.members.map((member) => (
-                  <li className="flex items-center justify-between py-4 text-sm leading-6">
+                {profile.members.map((member, index) => (
+                  <li key={index} className="flex items-center justify-between py-4 text-sm leading-6">
                     <div className="flex w-0 flex-1 items-center">
                       <div className="flex">
                         <span className="font-medium">
@@ -120,7 +120,11 @@ const ProfileDetail = ({
           </div>
         </dl>
         <div className="pb-6">
-          <JsonView value={metadataObj} shortenTextAfterLength={120} collapsed={2} />
+          <JsonView
+            value={metadataObj}
+            shortenTextAfterLength={120}
+            collapsed={2}
+          />
         </div>
       </div>
     </div>

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -40,12 +40,14 @@ const Table = ({ data }: { data: TTableData }) => {
                   {data.rows.map((row, index) => (
                     <tr key={"rows-" + index}>
                       {row.map((col, colIndex) => (
-                        <td
-                          key={"rows-" + index + "-col-" + colIndex}
-                          className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-0 lg:table-cell"
-                        >
-                          {col}
-                        </td>
+                        <>
+                          <td
+                            key={"rows-" + index + "-col-" + colIndex}
+                            className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-0 lg:table-cell"
+                          >
+                            {col}
+                          </td>
+                        </>
                       ))}
                     </tr>
                   ))}