Merge pull request #797 from near/develop

Release mobile upgrades to Entity Framework
near · May 2, 2024 · 8c85ed2 · 8c85ed2
2 parents ac4f7d7 + 0f0f05f
commit 8c85ed2
Show file tree

Hide file tree

Showing 10 changed files with 356 additions and 254 deletions.
diff --git a/src/DIG/Input.jsx b/src/DIG/Input.jsx
@@ -153,7 +153,7 @@ const Input = styled.input`
   border: none;
   background: none;
   margin: 0;
-  min-width: 150px;
+  min-width: 0;
   height: 40px;
   line-height: 40px;
   padding: 0;

diff --git a/src/DIG/Tabs.jsx b/src/DIG/Tabs.jsx
@@ -32,21 +32,27 @@ State.init({
   activeTab: items.length > 0 ? items[0].value : "",
 });
 
-const TabGroup = styled("Tabs.Root")``;
+const TabGroup = styled("Tabs.Root")`
+  width: 100%;
+`;
 
 const TabList = styled("Tabs.List")`
   display: inline-flex;
   align-items: center;
   margin-bottom: 1rem;
   transition: inherit;
-  gap: ${(p) => (p.size === "small" ? ".375rem" : ".5rem")};
+  gap: ${(p) => (p.size === "small" ? "1rem" : "2rem")};
   ${variant === "toggle" &&
   `
     border-radius: 6px;
     background-color: hsla(0, 0%, 10%, 0.05);
     gap: 2px !important;
     padding: 2px;
   `}
+  overflow: auto;
+  scroll-behavior: smooth;
+  max-width: 100%;
+  min-width: 0;
 `;
 
 const Tab = styled("Tabs.Trigger")`
@@ -60,6 +66,7 @@ const Tab = styled("Tabs.Trigger")`
   gap: ${(p) => (p.size === "small" ? ".375rem" : ".5rem")};
   font: ${(p) => (p.size === "small" ? "var(--text-xs)" : p.size === "large" ? "var(--text-base)" : "var(--text-s)")};
   font-weight: 600;
+  white-space: nowrap;
 
   &:hover {
     color: var(--sand12);
@@ -115,14 +122,14 @@ const Tab = styled("Tabs.Trigger")`
     ${
       size === "small"
         ? `
-      padding: 10px 12px;
+      padding: 10px 0;
     `
         : size === "large"
           ? `
-      padding: 12px 18px;
+      padding: 12px 0;
     `
           : `
-      padding: 10px 16px;
+      padding: 10px 0;
     `
     }
   `}

diff --git a/src/Entities/QueryApi/Client.jsx b/src/Entities/QueryApi/Client.jsx
@@ -2,10 +2,10 @@ const GRAPHQL_ENDPOINT = props.GRAPHQL_ENDPOINT ?? "https://near-queryapi.api.pa
 const LIMIT = props.LIMIT ?? 25;
 const HASURA_ROLE = props.HASURA_ROLE ?? "dataplatform_near";
 
-function fetchGraphQL(operationsDoc, operationName, variables) {
+function fetchGraphQL(operationsDoc, operationName, variables, hasuraRole) {
   return asyncFetch(`${GRAPHQL_ENDPOINT}/v1/graphql`, {
     method: "POST",
-    headers: { "x-hasura-role": HASURA_ROLE },
+    headers: { "x-hasura-role": hasuraRole ?? HASURA_ROLE },
     body: JSON.stringify({
       query: operationsDoc,
       variables: variables,

diff --git a/src/Entities/QueryApi/DataPlatformIndexerStatuses.jsx b/src/Entities/QueryApi/DataPlatformIndexerStatuses.jsx
@@ -1,4 +1,7 @@
-const GRAPHQL_ENDPOINT = props.GRAPHQL_ENDPOINT || "https://near-queryapi.api.pagoda.co";
+const { fetchGraphQL } = VM.require("${REPL_ACCOUNT}/widget/Entities.QueryApi.Client");
+if (!fetchGraphQL) {
+  return <p>Loading modules...</p>;
+}
 
 const indexerAccount = props.indexerAccount || "dataplatform.near";
 const sanitizedAccountId = indexerAccount.replace(/[^a-zA-Z0-9]/g, "_").replace(/^([0-9])/, "_$1");
@@ -9,6 +12,7 @@ const [errors, setErrors] = useState("");
 const [timer, setTimer] = useState(null);
 
 const [latestBlock, setLatestBlock] = useState(0);
+const [latestFinalBlock, setLatestFinalBlock] = useState(0);
 const [indexerList, setIndexerList] = useState(null);
 const registryContract = "queryapi.dataplatform.near";
 const registry = Near.view(registryContract, "list_indexer_functions", {
@@ -49,19 +53,8 @@ if (!indexerList) {
   );
 }
 
-function fetchGraphQL(operationsDoc, operationName, variables) {
-  return asyncFetch(`${GRAPHQL_ENDPOINT}/v1/graphql`, {
-    method: "POST",
-    headers: { "x-hasura-role": sanitizedAccountId },
-    body: JSON.stringify({
-      query: operationsDoc,
-      variables: variables,
-      operationName: operationName,
-    }),
-  });
-}
-const query = (indexer) => `query MyQuery {
-  ${sanitizedAccountId}_${indexer}_sys_metadata {
+const query = (indexer) => `query StatusQuery($offset: Int, $limit: Int) {
+  ${sanitizedAccountId}_${indexer}_sys_metadata(offset: $offset, limit: $limit) {
     attribute
     value
   }
@@ -90,7 +83,7 @@ function handleResults(indexer, result) {
   }
 }
 
-const update = () => {
+const rpcBlock = (finality) =>
   asyncFetch("https://rpc.mainnet.near.org", {
     method: "POST",
     headers: {
@@ -99,18 +92,34 @@ const update = () => {
     body: JSON.stringify({
       jsonrpc: "2.0",
       id: "dontcare",
-      method: "status",
-      params: {},
+      method: "block",
+      params: {
+        finality,
+      },
     }),
-  }).then((res) => setLatestBlock(res.body.result.sync_info.latest_block_height));
+  });
+
+const update = () => {
+  rpcBlock("optimistic").then((res) => setLatestBlock(res.body.result.header.height));
+  rpcBlock("final").then((res) => setLatestFinalBlock(res.body.result.header.height));
   if (indexerList) {
-    indexerList.forEach((indexer) => fetchGraphQL(query(indexer)).then((result) => handleResults(indexer, result)));
+    indexerList.forEach((indexer) =>
+      fetchGraphQL(
+        query(indexer),
+        "StatusQuery",
+        {
+          offset: 0,
+          limit: 100,
+        },
+        sanitizedAccountId,
+      ).then((result) => handleResults(indexer, result)),
+    );
   }
 };
 
-update();
 if (!timer) {
-  setTimer(setInterval(update, 3000));
+  update();
+  setTimer(setInterval(update, 1000));
 }
 
 const StatusTable = styled.table`
@@ -149,10 +158,15 @@ return (
       </thead>
       <tbody>
         <tr>
-          <TableElement bold>Latest Block</TableElement>
+          <TableElement bold>Latest Optimistic Block</TableElement>
           <TableElement>MAINNET</TableElement>
           <TableElement bold>{latestBlock}</TableElement>
         </tr>
+        <tr>
+          <TableElement bold>Latest Final Block</TableElement>
+          <TableElement>MAINNET</TableElement>
+          <TableElement bold>{latestFinalBlock}</TableElement>
+        </tr>
         {Object.entries(statuses)
           .sort()
           .map(([indexer, status]) => (

diff --git a/src/Entities/Template/EntityDetails.jsx b/src/Entities/Template/EntityDetails.jsx
@@ -81,8 +81,6 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 32px;
-  padding-bottom: 48px;
-  padding-left: 48px;
 `;
 
 const ContentWrapper = styled.div`
@@ -105,11 +103,12 @@ const Header = styled.h1`
 `;
 
 const Properties = styled.div`
-  margin: 2em;
-  display: grid;
-  grid-template-columns: 5em 1fr;
-  gap: 16px;
+  padding-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 `;
+
 const Text = styled.p`
   margin: 0;
   line-height: 20px;
@@ -121,12 +120,20 @@ const Text = styled.p`
     margin-right: 4px;
   }
 `;
-const PropValue = styled.p`
+const PropValue = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   margin: 0;
   font-size: 14px;
   line-height: 20px;
-  padding-bottom: 10px;
+  padding-bottom: 0.5rem;
+
+  p {
+    margin: 0;
+  }
 `;
+
 const entityProperties = (obj) => {
   const attributes = obj.attributes;
   return (
@@ -155,11 +162,11 @@ const entityProperties = (obj) => {
                   </Text>
                   <PropValue>
                     {value && (
-                      <>
-                        <p>{value?.name}</p>
-                        <p>{value.type}</p>
-                        <p>{value.size} bytes</p>
-                      </>
+                      <ul>
+                        <li>{value?.name}</li>
+                        <li>{value.type}</li>
+                        <li>{value.size} bytes</li>
+                      </ul>
                     )}
                   </PropValue>
                 </>
@@ -209,7 +216,7 @@ const tabs = () => {
 };
 
 return (
-  <Wrapper>
+  <Wrapper className="gateway-page-container">
     {returnTo && (
       <Link to={listLink}>
         <Header>
@@ -235,13 +242,13 @@ return (
         src="${REPL_ACCOUNT}/widget/DIG.Tabs"
         props={{
           variant: "line",
-          size: "large",
           defaultValue: "properties",
           items: tabs(),
         }}
       />
-
-      <Widget src="${REPL_ACCOUNT}/widget/ComponentDetails.Sidebar" props={{ src }} />
+      <div>
+        <Widget src="${REPL_ACCOUNT}/widget/ComponentDetails.Sidebar" props={{ src }} />
+      </div>
     </ContentWrapper>
   </Wrapper>
 );