weekly promotion of develop to main

replacements.dev.json

@@ -6,5 +6,6 @@
   "REPL_NEAR_URL": "test.near.org",
   "REPL_NEARWEEK": "discom-dev.testnet",
   "REPL_QUERYAPI_FEED": "discom-dev.testnet/widget/Posts",
-  "REPL_FEATURED_COMP_MANAGER": "discom.testnet"
+  "REPL_FEATURED_COMP_MANAGER": "discom.testnet",
+  "REPL_TIME_AGO_VERSION": ""
 }

replacements.mainnet.json

@@ -6,5 +6,6 @@
   "REPL_NEAR_URL": "near.org",
   "REPL_NEARWEEK": "nearweekapp.near",
   "REPL_QUERYAPI_FEED": "dataplatform.near/widget/QueryApi.Feed",
-  "REPL_FEATURED_COMP_MANAGER": "bosfeaturedmanager.near"
+  "REPL_FEATURED_COMP_MANAGER": "bosfeaturedmanager.near",
+  "REPL_TIME_AGO_VERSION": "@97556750"
 }

replacements.testnet.json

@@ -6,5 +6,6 @@
   "REPL_NEAR_URL": "test.near.org",
   "REPL_NEARWEEK": "discom-dev.testnet",
   "REPL_QUERYAPI_FEED": "discom.testnet/widget/Posts",
-  "REPL_FEATURED_COMP_MANAGER": "discom.testnet"
+  "REPL_FEATURED_COMP_MANAGER": "discom.testnet",
+  "REPL_TIME_AGO_VERSION": ""
 }

src/AccountProfile.jsx

@@ -94,7 +94,7 @@ const AccountProfile = (
           <Text small style={{ marginLeft: "auto" }}>
             Joined{" "}
             <Widget
-              src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+              src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
               props={{ blockHeight: props.blockHeight }}
             />{" "}
             ago

src/Comments/Comment.jsx

@@ -159,7 +159,7 @@ return (
               ) : (
                 <Text>
                   <Widget
-                    src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+                    src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
                     props={{ blockHeight }}
                   />{" "}
                   ago

src/ComponentCard.jsx

@@ -152,7 +152,7 @@ return (
       <CardTag>
         <i className="bi bi-clock"></i>{" "}
         <Widget
-          src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+          src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
           props={{
             blockHeight: props.blockHeight,
             keyPath: `${accountId}/widget/${widgetName}`,

src/ComponentDetailsPage.jsx

@@ -279,7 +279,7 @@ return (
               <i className="bi bi-clock"></i>
               Last updated
               <Widget
-                src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+                src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
                 props={{ keyPath: `${accountId}/widget/${widgetName}` }}
               />{" "}
               ago.

src/DIG/Dialog.jsx

@@ -0,0 +1,170 @@
+let {
+  type,
+  title,
+  description,
+  onCancel,
+  onConfirm,
+  cancelButtonText,
+  confirmButtonText,
+  cancelButton,
+  confirmButton,
+  ...forwardedProps
+} = props;
+
+type = type ?? "dialog";
+
+if (["alert", "dialog"].indexOf(type) < 0) {
+  return "Unsupported type of component. `type` could be only 'alert' or 'dialog'";
+}
+
+const variant = type === "alert" ? "AlertDialog" : "Dialog";
+
+const Root = styled(`${variant}.Root`)``;
+
+const Overlay = styled(`${variant}.Overlay`)`
+  background-color: var(--blackA3);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 2147483648;
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
+const Content = styled(`${variant}.Content`)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0px 4px 8px 0px var(--blackA3), 0px 0px 0px 1px var(--blackA4);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 409px;
+  max-height: 85vh;
+  padding: 24px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const Title = styled(`${variant}.Title`)`
+  font: var(--text-base);
+  font-weight: 700;
+  color: var(--sand12);
+`;
+
+const Description = styled(`${variant}.Description`)`
+  font: var(--text-s);
+  color: var(--sand11);
+`;
+
+const ActionWrapper = styled.div`
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+`;
+
+const Close = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  transition: all 200ms;
+  cursor: pointer;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--violet6);
+    color: var(--violet8);
+  }
+
+  &:focus-within {
+    box-shadow: 0 0 0 4px var(--violet4);
+  }
+`;
+
+cancelButton = cancelButton ?? (
+  <Widget
+    src="${REPL_ACCOUNT}/widget/DIG.Button"
+    props={{
+      label: cancelButtonText ?? "Cancel",
+      variant: "secondary",
+      onClick: onCancel,
+    }}
+  />
+);
+
+confirmButton = confirmButton ?? (
+  <Widget
+    src="${REPL_ACCOUNT}/widget/DIG.Button"
+    props={{
+      label: confirmButtonText ?? "Confirm",
+      variant: "primary",
+      onClick: onConfirm,
+    }}
+  />
+);
+
+return (
+  <Root {...forwardedProps}>
+    {type === "alert" ? (
+      <AlertDialog.Trigger asChild>{trigger}</AlertDialog.Trigger>
+    ) : (
+      <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>
+    )}
+    <Overlay />
+    <Content>
+      {title && <Title>{title}</Title>}
+      {description && <Description>{description}</Description>}
+      <ActionWrapper>
+        {type === "alert" ? (
+          <AlertDialog.Cancel asChild>
+            <div className="d-inline-block">{cancelButton}</div>
+          </AlertDialog.Cancel>
+        ) : (
+          <Dialog.Close asChild>
+            <div className="d-inline-block">{confirmButton}</div>
+          </Dialog.Close>
+        )}
+
+        {type === "alert" && (
+          <AlertDialog.Action asChild>
+            <div className="d-inline-block">{confirmButton}</div>
+          </AlertDialog.Action>
+        )}
+      </ActionWrapper>
+      {type === "dialog" && (
+        <Dialog.Close asChild>
+          <Close>
+            <i class="ph ph-x" />
+          </Close>
+        </Dialog.Close>
+      )}
+    </Content>
+  </Root>
+);

src/DIG/Dialog.metadata.json

@@ -0,0 +1,7 @@
+{
+  "description": "This Dialog is built with the Radix primitive: https://www.radix-ui.com/primitives/docs/components/dialog\n\nExample:\n\n```jsx\n<Widget\n  src=\"near/widget/DIG.Dialog\"\n  props={{\n    type: \"dialog\",\n    title: \"Header\",\n    description: \"Some description\",\n    onCancel: handleCancelFunction,\n    onConfirm: handleConfirmFunction,\n    cancelButtonText: \"Cancel\",\n    confirmButtonText: \"Confirm,\n  }}\n/>\n```\n\n### Props\n\n`type`\n\n- type: `string` (variants: `\"alert\"` or `\"dialog\"`)\n- `\"alert\"` - https://www.radix-ui.com/primitives/docs/components/alert-dialog\n- `\"dialog\"` - https://www.radix-ui.com/primitives/docs/components/dialog\n- Defines type of Dialog.\n\n`title`\n\n- type: `string`\n- Title of Dialog.\n\n`description`\n\n- type: `string`\n- Description of Dialog.\n\n`onCancel`\n\n- type: `function`\n- Event handler called when the user clicks on cancel button.\n\n`cancelButtonText`\n\n- type: `string`\n- Label on cancel button.\n\n`onConfirm`\n\n- type: `function`\n- Event handler called when the user clicks on confirm button.\n\n`confirmButtonText`\n\n- type: `string`\n- Label on confirm button.\n\n`cancelButton`\n\n- type: `JSX`\n- A custom button that closes the dialog.\n- Overrides `cancelButtonText`.\n- _note:_ pass `onCancel` event handler to specify custom action on cancel.\n\n`confirmButton`\n\n- type: `JSX`\n- A custom button that closes the dialog.\n- Overrides `confirmButtonText`.\n- _note:_ pass `onConfirm` event handler to specify custom action on cancel.\n\nThis component also accepts all `Alert.Dialog` or `Dialog` (depends on selected `type`) props as outlined in the Radix documentation.",
+  "name": "DIG.Dialog",
+  "tags": {
+    "dig": ""
+  }
+}

src/Flagged/Feed.jsx

@@ -59,7 +59,7 @@ const renderItem = (a) => {
         </div>
         <div>
           <Widget
-            src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+            src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
             props={{ blockHeight: a.blockHeight }}
           />
         </div>

src/LatestFollowActivity.jsx

@@ -67,7 +67,7 @@ return (
             <i className="bi bi-arrow-right"></i>
             <br />
             <Widget
-              src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+              src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
               props={{ blockHeight: item.blockHeight }}
             />
           </Text>

src/LatestNews.jsx

@@ -127,7 +127,7 @@ return (
             </Text>
             <Text small>
               <Widget
-                src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+                src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
                 props={{ blockHeight: item.blockHeight }}
               />{" "}
               ago

src/NestedDiscussions/Preview.jsx

@@ -126,7 +126,7 @@ return (
               <Text as="span">･</Text>
               <Text>
                 <Widget
-                  src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+                  src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
                   props={{ blockHeight }}
                 />{" "}
                 ago

src/Notification.jsx

@@ -176,7 +176,7 @@ return (
           {notificationMessage[type]}
         </Text>
         <Widget
-          src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+          src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
           props={{ blockHeight: props.blockHeight }}
         />
         ago

src/Onboarding/ComponentCard.jsx

@@ -63,7 +63,7 @@ return (
       <Text as="div" className="d-flex align-items-center">
         <i className="ph ph-clock" style={{ fontSize: "20px" }} />
         <Widget
-          src={`${REPL_MOB_2}/widget/TimeAgo@97556750`}
+          src={`${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}`}
           props={{
             blockHeight: props.commits[props.commits.length - 1],
             className: "description",

src/Posts/Post.jsx

@@ -234,7 +234,7 @@ return (
                     ) : (
                       <>
                         <Widget
-                          src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+                          src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
                           props={{ blockHeight }}
                         />{" "}
                         ago

src/Search/AccountProfile.jsx

@@ -99,7 +99,7 @@ const AccountProfile = (
           <Text small style={{ marginLeft: "auto" }}>
             Joined{" "}
             <Widget
-              src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+              src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
               props={{ blockHeight: props.blockHeight }}
             />{" "}
             ago

src/v1/Posts/Post.jsx

@@ -112,7 +112,7 @@ return (
                     ) : (
                       <>
                         <Widget
-                          src="${REPL_MOB_2}/widget/TimeAgo@97556750"
+                          src="${REPL_MOB_2}/widget/TimeAgo${REPL_TIME_AGO_VERSION}"
                           props={{ blockHeight }}
                         />{" "}
                         ago