Merge pull request #803 from near/develop

develop -> main
near · May 3, 2024 · 592e655 · 592e655
2 parents 8c85ed2 + e3cb82b
commit 592e655
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 62 deletions.
diff --git a/src/Entities/QueryApi/Ipfs.jsx b/src/Entities/QueryApi/Ipfs.jsx
@@ -8,7 +8,12 @@ const ipfsUpload = (f) =>
   }).then((res) => res.body.cid);
 
 const ipfsUrl = (cid) => {
-  const c = typeof cid === "object" ? cid.cid : cid;
+  let c = typeof cid === "object" ? cid.cid : cid;
+  if (c.startsWith("{")) {
+    try {
+      c = JSON.parse(c).cid;
+    } catch (ignored) {}
+  }
   return `https://ipfs.near.social/ipfs/${c}`;
 };
 

diff --git a/src/Entities/Template/EntityDetails.jsx b/src/Entities/Template/EntityDetails.jsx
@@ -145,14 +145,12 @@ const entityProperties = (obj) => {
           switch (schemaField.type) {
             case "image":
               return (
-                <>
-                  <Text bold key={key}>
-                    {capitalize(key)}:
-                  </Text>
+                <Fragment key={key}>
+                  <Text bold>{capitalize(key)}:</Text>
                   <PropValue>
                     <img className="logo" src={imageUrl} alt={key} />
                   </PropValue>
-                </>
+                </Fragment>
               );
             case "file":
               return (

diff --git a/src/Entities/Template/EntityList.jsx b/src/Entities/Template/EntityList.jsx
@@ -167,20 +167,6 @@ const Flex = styled.div`
   }
 `;
 
-const Grid = styled.div`
-  display: grid;
-  gap: ${(p) => p.$gap};
-  grid-template-columns: ${(p) => p.$columns};
-  align-items: ${(p) => p.$alignItems};
-  row-gap: ${(p) => p.$rowGap};
-
-  @media (max-width: 900px) {
-    grid-template-columns: ${(p) => p.$mobileColumns ?? "1fr"};
-    gap: ${(p) => p.$mobileGap ?? p.$gap};
-    row-gap: ${(p) => p.$mobileRowGap ?? p.$rowGap};
-  }
-`;
-
 const dialogStyles = {
   maxWidth: "800px",
   borderRadius: "14px",
@@ -194,7 +180,6 @@ const ScrollBox = styled.div`
 const Items = styled.div`
   display: ${props.table ? "flex" : "grid"};
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  display: flex;
   flex-direction: column;
   gap: 1rem;
 

diff --git a/src/Entities/Template/Forms/FormBuilder.jsx b/src/Entities/Template/Forms/FormBuilder.jsx
@@ -212,38 +212,61 @@ const renderInput = (
       );
 
     case "image":
+      let hasUploadedFile = fieldValue && typeof fieldValue === "object";
+      if (typeof fieldValue === "string" && fieldValue.indexOf("{") > -1) {
+        try {
+          fieldValue = JSON.parse(fieldValue);
+        } catch (ignored) {}
+        hasUploadedFile = true;
+      }
+      const [useImageUrl, setUseImageUrl] = useState(!hasUploadedFile);
+      if (typeof useImageUrl === "object") {
+        setUseImageUrl(!hasUploadedFile);
+      }
       return (
         <div
           className="d-flex flex-column align-items-start justify-content-evenly gap-1 p-2"
           style={{ order: order, width: "100%" }}
         >
-          {renderBaseInputComponent({
-            inputComponentProps,
-            fieldProps,
-            isEditable,
-            noop,
-            isDisabled,
-            format,
-            fieldKey,
-            label,
-            form,
-            key,
-            style,
-            order: null,
-            fieldType,
-            fieldValue,
-            skipPaddingGap: true,
-            inputProps,
-          })}
+          <Widget
+            src="near/widget/DIG.Checkbox"
+            props={{
+              id: "useImageUrl",
+              checked: useImageUrl,
+              label: "Set Image from URL",
+              onCheckedChange: (e) => setUseImageUrl(!useImageUrl),
+            }}
+          />
+          {useImageUrl &&
+            renderBaseInputComponent({
+              inputComponentProps,
+              fieldProps,
+              isEditable,
+              noop,
+              isDisabled,
+              format,
+              fieldKey,
+              label,
+              form,
+              key,
+              style,
+              order: null,
+              fieldType,
+              fieldValue: hasUploadedFile ? "" : fieldValue,
+              skipPaddingGap: true,
+              inputProps,
+            })}
           <div className="p-2 align-items-start text-start">
             {fieldValue && (
               <img
                 style={{ objectFit: "cover", width: "30%", borderRadius: "10%" }}
-                src={fieldValue.startsWith("http") ? fieldValue : ipfsUrl(fieldValue)}
+                src={typeof fieldValue === "string" && fieldValue.startsWith("http") ? fieldValue : ipfsUrl(fieldValue)}
                 alt="upload preview"
               />
             )}
-            <span className="p-2">{renderUpload(fieldType, fieldValue, key, form.update({ path: [key] }))}</span>
+            {!useImageUrl && (
+              <span className="p-2">{renderUpload(fieldType, fieldValue, key, form.update({ path: [key] }))}</span>
+            )}
           </div>
         </div>
       );

diff --git a/src/Entities/Template/GenericEntityConfig.jsx b/src/Entities/Template/GenericEntityConfig.jsx
@@ -130,6 +130,13 @@ const Name = styled.div`
   }
 `;
 
+const Logo = styled.img`
+  objectfit: "cover";
+  max-width: 2.8rem;
+  max-height: 2.8rem;
+  borderradius: "10%";
+`;
+
 const NameAndTags = styled.div`
   display: flex;
   flex-direction: column;
@@ -220,7 +227,7 @@ const defaultRenderTableItem = (rawItem, editFunction) => {
   const { accountId, name, displayName, logoUrl, tags, attributes } = item;
   const itemComponent = item.component ? item.component : `${REPL_ACCOUNT}/widget/Entities.Template.EntityDetails`;
   const imageUrl = logoUrl
-    ? logoUrl.startsWith("http")
+    ? typeof logoUrl == "string" && logoUrl.startsWith("http")
       ? logoUrl
       : ipfsUrl(logoUrl)
     : "https://ipfs.near.social/ipfs/bafkreibysr2mkwhb4j36h2t7mqwhynqdy4vzjfygfkfg65kuspd2bawauu";
@@ -242,7 +249,7 @@ const defaultRenderTableItem = (rawItem, editFunction) => {
     <Row>
       <Primary>
         <Name>
-          <img className="logo" src={imageUrl} alt="item logo" />
+          <Logo src={imageUrl} alt="item logo" />
 
           <NameAndTags>
             <Link to={detailsLink}>{displayName}</Link>

diff --git a/src/Gateway/Home.jsx b/src/Gateway/Home.jsx
@@ -395,22 +395,23 @@ return (
               <Flex $direction="column" $gap="32px">
                 <H1>Welcome</H1>
                 <Text $size="text-xl" $mobileSize="text-l" style={{ maxWidth: "385px" }}>
-                  Start building right away with easy to use developer tools.
+                  Start building right away with easy to use tutorials.
                 </Text>
               </Flex>
-              <Flex $direction="column" $gap="0" $mobileGap="48px">
+              <Flex $direction="column" $gap="16px" $mobileGap="48px">
                 <ButtonLink
                   href="https://app.jutsu.ai"
                   target="_blank"
                   icon="ph-bold ph-plus"
-                  title="Create a Project"
+                  title="Create a UI Project"
                   text="Start tinkering with Jutsu.ai using a template or start a blank project."
                 />
                 <ButtonLink
-                  href="/components"
-                  icon="ph-bold ph-git-fork"
-                  title="Fork a Project"
-                  text="Get started by forking a component or app from NEAR's open source community."
+                  href="https://docs.near.org/build/smart-contracts/quickstart"
+                  target="_blank"
+                  icon="ph-bold ph-code-block"
+                  title="Smart Contracts"
+                  text="Learn how to create your first smart contract in NEAR testnet."
                 />
               </Flex>
             </Grid>
@@ -443,24 +444,21 @@ return (
               ))}
             </Grid>
           </Card>
-          <Card
-            title="Documentation &amp; Learning"
-            text="Dive into the docs or get started with a tutorial from Jutsu.ai"
-          >
+          <Card title="Documentation &amp; Learning" text="Dive into example apps or get started with developer tools.">
             <Flex $direction="column" $gap="16px" $mobileGap="48px">
               <ButtonLink
-                href="https://docs.near.org"
+                href="https://near.org/devhub.near/widget/app?page=community&handle=chain-abstraction&tab=technical-resources"
                 target="_blank"
-                icon="ph-bold ph-book-open-text"
-                title="Documentation"
-                text="Learn key concepts and build with confidence."
+                icon="ph-bold ph-link"
+                title="Chain Abstraction"
+                text="Unlock blockchain interoperability via a single NEAR account."
               />
               <ButtonLink
-                href="https://app.jutsu.ai/learn"
+                href="https://github.com/near#%EF%B8%8F-dev-tools"
                 target="_blank"
-                icon="ph-bold ph-video"
-                title="Lessons"
-                text="Try Jutsu.ai tutorials to build a decentralized frontend or a basic smart contract."
+                icon="ph-bold ph-wrench"
+                title="Near Tooling"
+                text="Explore the Near ecosystem's complete set of tools for you to build better, quickly."
               />
             </Flex>
           </Card>

diff --git a/src/NearOrg/FoundersPage.jsx b/src/NearOrg/FoundersPage.jsx
@@ -217,6 +217,21 @@ const selfServeResources = [
     url: docs.tokenLaunchChecklist,
     target: "_blank",
   },
+  {
+    name: "Builder Perks",
+    description: (
+      <>
+        We've curated a growing collection of curated resources and over $500K in discounts for HZN Founders.
+        <br />
+        <br />
+        Interested in having your product listed as a perk? Send us a message at:{" "}
+        <a href="mailto:[email protected]">[email protected]</a>
+      </>
+    ),
+    icon: "ph-hammer",
+    url: "https://www.notion.so/near-horizon/Builder-Perks-cb5e5f55870c4c5da6bf9f72fbae35a9",
+    target: "_blank",
+  },
 ];
 
 const ecosystemCommunityResources = [
@@ -275,6 +290,7 @@ return (
         </Flex>
       </Container>
     </Section>
+
     <Section backgroundColor="#F2F1EA">
       <Container>
         <Flex direction="column" gap="24px">