Increment sequence on every transaction

Compiled wasm file stats

components/Accounts.tsx

@@ -36,13 +36,11 @@ const AccountDialog = ({
 }) => {
   const snap = useSnapshot(state);
   const [showSecret, setShowSecret] = useState(false);
-  const activeAccount = snap.accounts.find(
+  const activeAccount = snap.accounts.find(account => account.address === activeAccountAddress);
-    (account) => account.address === activeAccountAddress
-  );
   return (
     <Dialog
       open={Boolean(activeAccountAddress)}
-      onOpenChange={(open) => {
+      onOpenChange={open => {
         setShowSecret(false);
         !open && setActiveAccountAddress(null);
       }}
@@ -137,7 +135,7 @@ const AccountDialog = ({
                     }}
                     ghost
                     size="xs"
-                    onClick={() => setShowSecret((curr) => !curr)}
+                    onClick={() => setShowSecret(curr => !curr)}
                   >
                     {showSecret ? "Hide" : "Show"}
                   </Button>
@@ -201,15 +199,7 @@ const AccountDialog = ({
                     fontFamily: "$monospace",
                   }}
                 >
-                  {activeAccount && activeAccount?.hooks?.length > 0
+                  {activeAccount && activeAccount.hooks.length}
-                    ? activeAccount?.hooks
-                        .map((i) => {
-                          return `${i?.substring(0, 6)}...${i?.substring(
-                            i.length - 4
-                          )}`;
-                        })
-                        .join(", ")
-                    : "–"}
                 </Text>
               </Flex>
             </Flex>
@@ -231,15 +221,13 @@ interface AccountProps {
   showHookStats?: boolean;
 }
 
-const Accounts: FC<AccountProps> = (props) => {
+const Accounts: FC<AccountProps> = props => {
   const snap = useSnapshot(state);
-  const [activeAccountAddress, setActiveAccountAddress] = useState<
+  const [activeAccountAddress, setActiveAccountAddress] = useState<string | null>(null);
-    string | null
-  >(null);
   useEffect(() => {
     const fetchAccInfo = async () => {
       if (snap.clientStatus === "online") {
-        const requests = snap.accounts.map((acc) =>
+        const requests = snap.accounts.map(acc =>
           snap.client?.send({
             id: acc.address,
             command: "account_info",
@@ -251,15 +239,13 @@ const Accounts: FC<AccountProps> = (props) => {
           const address = res?.account_data?.Account as string;
           const balance = res?.account_data?.Balance as string;
           const sequence = res?.account_data?.Sequence as number;
-          const accountToUpdate = state.accounts.find(
+          const accountToUpdate = state.accounts.find(acc => acc.address === address);
-            (acc) => acc.address === address
-          );
           if (accountToUpdate) {
             accountToUpdate.xrp = balance;
             accountToUpdate.sequence = sequence;
           }
         });
-        const objectRequests = snap.accounts.map((acc) => {
+        const objectRequests = snap.accounts.map(acc => {
           return snap.client?.send({
             id: `${acc.address}-hooks`,
             command: "account_objects",
@@ -269,9 +255,7 @@ const Accounts: FC<AccountProps> = (props) => {
         const objectResponses = await Promise.all(objectRequests);
         objectResponses.forEach((res: any) => {
           const address = res?.account as string;
-          const accountToUpdate = state.accounts.find(
+          const accountToUpdate = state.accounts.find(acc => acc.address === address);
-            (acc) => acc.address === address
-          );
           if (accountToUpdate) {
             accountToUpdate.hooks = res.account_objects
               .filter((ac: any) => ac?.LedgerEntryType === "Hook")
@@ -353,7 +337,7 @@ const Accounts: FC<AccountProps> = (props) => {
             overflowY: "auto",
           }}
         >
-          {snap.accounts.map((account) => (
+          {snap.accounts.map(account => (
             <Flex
               column
               key={account.address + account.name}
@@ -380,7 +364,7 @@ const Accounts: FC<AccountProps> = (props) => {
                   <Text>{account.name} </Text>
                   <Text
                     css={{
-                      color: "$mauve9",
+                      color: "$textMuted",
                       wordBreak: "break-word",
                     }}
                   >
@@ -406,11 +390,10 @@ const Accounts: FC<AccountProps> = (props) => {
                     isLoading={account.isLoading}
                     disabled={
                       account.isLoading ||
-                      !snap.files.filter((file) => file.compiledWatContent)
+                      !snap.files.filter(file => file.compiledWatContent).length
-                        .length
                     }
                     variant="secondary"
-                    onClick={(e) => {
+                    onClick={e => {
                       e.stopPropagation();
                       deployHook(account);
                     }}
@@ -421,7 +404,7 @@ const Accounts: FC<AccountProps> = (props) => {
               </Flex>
               {props.showHookStats && (
                 <Text muted small css={{ mt: "$2" }}>
-                  X hooks installed
+                  {account.hooks.length} hook{account.hooks.length === 1 ? "" : "s"} installed
                 </Text>
               )}
             </Flex>
@@ -453,7 +436,7 @@ const ImportAccountDialog = () => {
             name="secret"
             type="password"
             value={value}
-            onChange={(e) => setValue(e.target.value)}
+            onChange={e => setValue(e.target.value)}
           />
         </DialogDescription>
 

components/Button.tsx

@@ -66,6 +66,12 @@ export const StyledButton = styled("button", {
       },
     },
     variant: {
+      link: {
+        textDecoration: "underline",
+        fontSize: "inherit",
+        color: "$textMuted",
+        textUnderlineOffset: "2px",
+      },
       default: {
         backgroundColor: "$mauve12",
         boxShadow: "inset 0 0 0 1px $colors$mauve12",
@@ -81,8 +87,7 @@ export const StyledButton = styled("button", {
           boxShadow: "inset 0 0 0 1px $colors$mauve11",
         },
         "&:focus": {
-          boxShadow:
+          boxShadow: "inset 0 0 0 1px $colors$mauve12, inset 0 0 0 2px $colors$mauve12",
-            "inset 0 0 0 1px $colors$mauve12, inset 0 0 0 2px $colors$mauve12",
         },
         '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
           {
@@ -137,7 +142,11 @@ export const StyledButton = styled("button", {
           },
       },
     },
-
+    muted: {
+      true: {
+        color: "$textMuted",
+      },
+    },
     outline: {
       true: {
         backgroundColor: "transparent",
@@ -227,21 +236,16 @@ export const StyledButton = styled("button", {
   },
 });
 
-const CustomButton: React.FC<
+const CustomButton: React.FC<React.ComponentProps<typeof StyledButton> & { as?: string }> =
-  React.ComponentProps<typeof StyledButton> & { as?: string }
+  React.forwardRef(({ children, as = "button", ...rest }, ref) => (
-> = React.forwardRef(({ children, as = "button", ...rest }, ref) => (
+    // @ts-expect-error
-  // @ts-expect-error
+    <StyledButton {...rest} ref={ref} as={as}>
-  <StyledButton {...rest} ref={ref} as={as}>
+      <Flex as="span" css={{ gap: "$2", alignItems: "center" }} className="button-content">
-    <Flex
+        {children}
-      as="span"
+      </Flex>
-      css={{ gap: "$2", alignItems: "center" }}
+      {rest.isLoading && <Spinner css={{ position: "absolute" }} />}
-      className="button-content"
+    </StyledButton>
-    >
+  ));
-      {children}
-    </Flex>
-    {rest.isLoading && <Spinner css={{ position: "absolute" }} />}
-  </StyledButton>
-));
 
 CustomButton.displayName = "CustomButton";
 

components/DeployEditor.tsx

@@ -1,10 +1,12 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { useSnapshot, ref } from "valtio";
 import Editor, { loader } from "@monaco-editor/react";
 import type monaco from "monaco-editor";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
 import NextLink from "next/link";
+import ReactTimeAgo from "react-time-ago";
+import filesize from "filesize";
 
 import Box from "./Box";
 import Container from "./Container";
@@ -13,8 +15,7 @@ import light from "../theme/editor/xcode_default.json";
 import state from "../state";
 
 import EditorNavigation from "./EditorNavigation";
-import Text from "./Text";
+import { Button, Text, Link, Flex } from ".";
-import Link from "./Link";
 
 loader.config({
   paths: {
@@ -22,11 +23,65 @@ loader.config({
   },
 });
 
+const FILESIZE_BREAKPOINTS: [number, number] = [2 * 1024, 5 * 1024];
+
 const DeployEditor = () => {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
   const snap = useSnapshot(state);
   const router = useRouter();
   const { theme } = useTheme();
+
+  const [showContent, setShowContent] = useState(false);
+
+  const activeFile = snap.files[snap.active];
+  const compiledSize = activeFile?.compiledContent?.byteLength || 0;
+  const color =
+    compiledSize > FILESIZE_BREAKPOINTS[1]
+      ? "$error"
+      : compiledSize > FILESIZE_BREAKPOINTS[0]
+      ? "$warning"
+      : "$success";
+
+  const CompiledStatView = activeFile && (
+    <Flex
+      column
+      align="center"
+      css={{
+        fontSize: "$sm",
+        fontFamily: "$monospace",
+        textAlign: "center",
+      }}
+    >
+      <Flex row align="center">
+        <Text css={{ mr: "$1" }}>Compiled {activeFile.name.split(".")[0] + ".wasm"}</Text>
+        {activeFile?.lastCompiled && <ReactTimeAgo date={activeFile.lastCompiled} locale="en-US" />}
+        {activeFile.compiledContent?.byteLength && (
+          <Text css={{ ml: "$2", color }}>({filesize(activeFile.compiledContent.byteLength)})</Text>
+        )}
+      </Flex>
+      <Button variant="link" onClick={() => setShowContent(true)}>
+        View as WAT-file
+      </Button>
+    </Flex>
+  );
+  const NoContentView = !snap.loading && router.isReady && (
+    <Text
+      css={{
+        mt: "-60px",
+        fontSize: "$sm",
+        fontFamily: "$monospace",
+        maxWidth: "300px",
+        textAlign: "center",
+      }}
+    >
+      {`You haven't compiled any files yet, compile files on `}
+      <NextLink shallow href={`/develop/${router.query.slug}`} passHref>
+        <Link as="a">develop view</Link>
+      </NextLink>
+    </Text>
+  );
+  const isContent =
+    snap.files?.filter(file => file.compiledWatContent).length > 0 && router.isReady;
   return (
     <Box
       css={{
@@ -39,60 +94,45 @@ const DeployEditor = () => {
       }}
     >
       <EditorNavigation showWat />
-      {snap.files?.filter((file) => file.compiledWatContent).length > 0 &&
+      <Container
-      router.isReady ? (
+        css={{
-        <Editor
+          display: "flex",
-          className="hooks-editor"
+          flex: 1,
-          // keepCurrentModel
+          justifyContent: "center",
-          defaultLanguage={snap.files?.[snap.active]?.language}
+          alignItems: "center",
-          language={snap.files?.[snap.active]?.language}
+        }}
-          path={`file://tmp/c/${snap.files?.[snap.active]?.name}.wat`}
+      >
-          value={snap.files?.[snap.active]?.compiledWatContent || ""}
+        {!isContent ? (
-          beforeMount={(monaco) => {
+          NoContentView
-            if (!state.editorCtx) {
+        ) : !showContent ? (
-              state.editorCtx = ref(monaco.editor);
+          CompiledStatView
-              // @ts-expect-error
+        ) : (
-              monaco.editor.defineTheme("dark", dark);
+          <Editor
-              // @ts-expect-error
+            className="hooks-editor"
-              monaco.editor.defineTheme("light", light);
+            defaultLanguage={snap.files?.[snap.active]?.language}
-            }
+            language={snap.files?.[snap.active]?.language}
-          }}
+            path={`file://tmp/c/${snap.files?.[snap.active]?.name}.wat`}
-          onMount={(editor, monaco) => {
+            value={snap.files?.[snap.active]?.compiledWatContent || ""}
-            editorRef.current = editor;
+            beforeMount={monaco => {
-            editor.updateOptions({
+              if (!state.editorCtx) {
-              glyphMargin: true,
+                state.editorCtx = ref(monaco.editor);
-              readOnly: true,
+                // @ts-expect-error
-            });
+                monaco.editor.defineTheme("dark", dark);
-          }}
+                // @ts-expect-error
-          theme={theme === "dark" ? "dark" : "light"}
+                monaco.editor.defineTheme("light", light);
-        />
+              }
-      ) : (
+            }}
-        <Container
+            onMount={(editor, monaco) => {
-          css={{
+              editorRef.current = editor;
-            display: "flex",
+              editor.updateOptions({
-            flex: 1,
+                glyphMargin: true,
-            justifyContent: "center",
+                readOnly: true,
-            alignItems: "center",
+              });
-          }}
+            }}
-        >
+            theme={theme === "dark" ? "dark" : "light"}
-          {!snap.loading && router.isReady && (
+          />
-            <Text
+        )}
-              css={{
+      </Container>
-                mt: "-60px",
-                fontSize: "14px",
-                fontFamily: "$monospace",
-                maxWidth: "300px",
-                textAlign: "center",
-              }}
-            >
-              {`You haven't compiled any files yet, compile files on `}
-              <NextLink shallow href={`/develop/${router.query.slug}`} passHref>
-                <Link as="a">develop view</Link>
-              </NextLink>
-            </Text>
-          )}
-        </Container>
-      )}
     </Box>
   );
 };

components/EditorNavigation.tsx

@@ -62,7 +62,7 @@ import { styled } from "../stitches.config";
 const DEFAULT_EXTENSION = ".c";
 
 const ErrorText = styled(Text, {
-  color: "$crimson9",
+  color: "$error",
   mt: "$1",
   display: "block",
 });
@@ -90,9 +90,16 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
 
   const validateFilename = useCallback(
     (filename: string): { error: string | null } => {
-      if (snap.files.find((file) => file.name === filename)) {
+      // check if filename already exists
+      if (snap.files.find(file => file.name === filename)) {
         return { error: "Filename already exists." };
       }
+
+      // check for illegal characters
+      const ILLEGAL_REGEX = /[/]/gi;
+      if (filename.match(ILLEGAL_REGEX)) {
+        return { error: "Filename contains illegal characters" };
+      }
       // More checks in future
       return { error: null };
     },

components/Flex.tsx

@@ -16,9 +16,37 @@ const Flex = styled(Box, {
     },
     fluid: {
       true: {
-        width: '100%'
+        width: "100%",
-      }
+      },
-    }
+    },
+    align: {
+      start: {
+        alignItems: "start",
+      },
+      center: {
+        alignItems: "center",
+      },
+      end: {
+        alignItems: "end",
+      },
+    },
+    justify: {
+      start: {
+        justifyContent: "start",
+      },
+      center: {
+        justifyContent: "center",
+      },
+      end: {
+        justifyContent: "end",
+      },
+      "space-between": {
+        justifyContent: "space-between",
+      },
+      "space-around": {
+        justifyContent: "space-around",
+      },
+    },
   },
 });
 

components/HooksEditor.tsx

@@ -173,7 +173,7 @@ const HooksEditor = () => {
                     fontFamily: "$monospace",
                   }}
                 >
-                  Click the link above to create a your file
+                  Click the link above to create your file
                 </Text>
               </Box>
             </Box>

components/LogText.tsx

@@ -11,13 +11,13 @@ const Text = styled("span", {
         color: "$text",
       },
       warning: {
-        color: "$amber11",
+        color: "$warning",
       },
       error: {
-        color: "$crimson11",
+        color: "$error",
       },
       success: {
-        color: "$grass11",
+        color: "$success",
       },
     },
     capitalize: {

components/Navigation.tsx

@@ -279,28 +279,18 @@ const Navigation = () => {
                       >
                         <Heading>Starter</Heading>
                         <Text>
-                          Just an empty starter with essential imports
+                          Just a basic starter with essential imports
                         </Text>
                       </PanelBox>
                       <PanelBox
                         as="a"
-                        href={`/develop/${templateFileIds.starter}`}
+                        href={`/develop/${templateFileIds.firewall}`}
                       >
                         <Heading>Firewall</Heading>
                         <Text>
                           This Hook essentially checks a blacklist of accounts
                         </Text>
                       </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.accept}`}
-                      >
-                        <Heading>Accept</Heading>
-                        <Text>
-                          This hook just accepts any transaction coming through
-                          it
-                        </Text>
-                      </PanelBox>
                       <PanelBox
                         as="a"
                         href={`/develop/${templateFileIds.notary}`}
@@ -322,7 +312,7 @@ const Navigation = () => {
                         href={`/develop/${templateFileIds.peggy}`}
                       >
                         <Heading>Peggy</Heading>
-                        <Text>An oracle based stabe coin hook</Text>
+                        <Text>An oracle based stable coin hook</Text>
                       </PanelBox>
                     </Flex>
                   </Flex>

components/Tabs.tsx

@@ -19,7 +19,7 @@ import { Plus, X } from "phosphor-react";
 import { styled } from "../stitches.config";
 
 const ErrorText = styled(Text, {
-  color: "$crimson9",
+  color: "$error",
   mt: "$1",
   display: "block",
 });

components/index.tsx

@@ -1,15 +1,16 @@
-export { default as Flex } from './Flex'
+export { default as Flex } from "./Flex";
-export { default as Container } from './Container'
+export { default as Link } from "./Link";
-export { default as Heading } from './Heading'
+export { default as Container } from "./Container";
-export { default as Stack } from './Stack'
+export { default as Heading } from "./Heading";
-export { default as Text } from './Text'
+export { default as Stack } from "./Stack";
-export { default as Input } from './Input'
+export { default as Text } from "./Text";
-export { default as Select } from './Select'
+export { default as Input } from "./Input";
-export * from './Tabs'
+export { default as Select } from "./Select";
-export * from './AlertDialog'
+export * from "./Tabs";
-export { default as Box } from './Box'
+export * from "./AlertDialog";
-export { default as Button } from './Button'
+export { default as Box } from "./Box";
-export { default as ButtonGroup } from './ButtonGroup'
+export { default as Button } from "./Button";
-export { default as DeployFooter } from './DeployFooter'
+export { default as ButtonGroup } from "./ButtonGroup";
-export * from './Dialog'
+export { default as DeployFooter } from "./DeployFooter";
-export * from './DropdownMenu'
+export * from "./Dialog";
+export * from "./DropdownMenu";

package.json

@@ -23,6 +23,8 @@
     "base64-js": "^1.5.1",
     "dinero.js": "^1.9.1",
     "file-saver": "^2.0.5",
+    "filesize": "^8.0.7",
+    "javascript-time-ago": "^2.3.11",
     "jszip": "^3.7.1",
     "monaco-editor": "^0.30.1",
     "next": "^12.0.4",
@@ -43,6 +45,7 @@
     "react-select": "^5.2.1",
     "react-split": "^2.0.14",
     "react-stay-scrolled": "^7.4.0",
+    "react-time-ago": "^7.1.9",
     "reconnecting-websocket": "^4.4.0",
     "valtio": "^1.2.5",
     "vscode-languageserver": "^7.0.0",

pages/_app.tsx

@@ -13,6 +13,10 @@ import Navigation from "../components/Navigation";
 import { fetchFiles } from "../state/actions";
 import state from "../state";
 
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en.json";
+TimeAgo.addDefaultLocale(en);
+
 function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   const router = useRouter();
   const slug = router.query?.slug;

state/actions/compileCode.ts

@@ -25,6 +25,7 @@ export const compileCode = async (activeId: number) => {
   }
   // Set loading state to true
   state.compiling = true;
+  state.logs = []
   try {
     const res = await fetch(process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT, {
       method: "POST",
@@ -65,6 +66,7 @@ export const compileCode = async (activeId: number) => {
     // Decode base64 encoded wasm that is coming back from the endpoint
     const bufferData = await decodeBinary(json.output);
     state.files[state.active].compiledContent = ref(bufferData);
+    state.files[state.active].lastCompiled = new Date();
     // Import wabt from and create human readable version of wasm file and
     // put it into state
     import("wabt").then((wabt) => {

state/actions/sendTransaction.ts

@@ -24,6 +24,10 @@ export const sendTransaction = async (account: IAccount, txOptions: TransactionO
         Fee,  // TODO auto-fillable
         ...opts
     };
+    const currAcc = state.accounts.find(acc => acc.address === account.address);
+    if (currAcc) {
+        currAcc.sequence = account.sequence + 1;
+    }
     const { logPrefix = '' } = options || {}
     try {
         const signedAccount = derive.familySeed(account.secret);

state/constants/templates.ts

@@ -1,6 +1,5 @@
 export const templateFileIds = {
     'starter': '1d14e51e2e02dc0a508cb0733767a914', // TODO currently same as accept
-    'accept': '1d14e51e2e02dc0a508cb0733767a914',
     'firewall': 'bcd6d0c0fcbe52545ddb802481ff9d26',
     'notary': 'a789c75f591eeab7932fd702ed8cf9ea',
     'carbon': '43925143fa19735d8c6505c34d3a6a47',

state/index.ts

@@ -9,6 +9,7 @@ export interface IFile {
   content: string;
   compiledContent?: ArrayBuffer | null;
   compiledWatContent?: string | null;
+  lastCompiled?: Date
 }
 
 export interface FaucetAccountRes {

stitches.config.ts

@@ -19,6 +19,8 @@ import {
   mauveDark,
   amberDark,
   purpleDark,
+  red,
+  redDark,
 } from "@radix-ui/colors";
 
 export const {
@@ -41,11 +43,16 @@ export const {
       ...mauve,
       ...amber,
       ...purple,
+      ...red,
       accent: "#9D2DFF",
       background: "$gray1",
       backgroundAlt: "$gray4",
       text: "$gray12",
+      textMuted: "$gray10",
       primary: "$plum",
+      error: '$red9',
+      warning: '$amber11',
+      success: "$grass11",
       white: "white",
       black: "black",
       deep: "rgb(244, 244, 244)",
@@ -348,6 +355,7 @@ export const darkTheme = createTheme("dark", {
     ...mauveDark,
     ...amberDark,
     ...purpleDark,
+    ...redDark,
     deep: "rgb(10, 10, 10)",
     // backgroundA: transparentize(0.1, grayDark.gray1),
   },

yarn.lock

@@ -2273,6 +2273,11 @@ file-uri-to-path@1.0.0:
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
   integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
 
+filesize@^8.0.7:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-8.0.7.tgz#695e70d80f4e47012c132d57a059e80c6b580bd8"
+  integrity sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -2833,6 +2838,13 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
+javascript-time-ago@^2.3.11:
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/javascript-time-ago/-/javascript-time-ago-2.3.11.tgz#b488ae765b7f42ff003f3830977a92411ef1fe92"
+  integrity sha512-R6Ux0IGv7RmAZ7vB04r/gevGaLDJeZY7+6jTYyYsPAF5x4PSv6up+dW2hLK99+OUY8xwdeXPItZFiUppIRUaoQ==
+  dependencies:
+    relative-time-format "^1.0.6"
+
 jest-worker@27.0.0-next.5:
   version "27.0.0-next.5"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.0.0-next.5.tgz#5985ee29b12a4e191f4aae4bb73b97971d86ec28"
@@ -3608,6 +3620,11 @@ pbkdf2@^3.0.3, pbkdf2@^3.0.9:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+
 phosphor-react@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/phosphor-react/-/phosphor-react-1.3.1.tgz#96e33f44370d83cda15b60cccc17087ad0060684"
@@ -3754,6 +3771,13 @@ queue@6.0.2:
   dependencies:
     inherits "~2.0.3"
 
+raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -3889,6 +3913,15 @@ react-style-singleton@^2.1.0:
     invariant "^2.2.4"
     tslib "^1.0.0"
 
+react-time-ago@^7.1.9:
+  version "7.1.9"
+  resolved "https://registry.yarnpkg.com/react-time-ago/-/react-time-ago-7.1.9.tgz#df3999f1184b71ab09aaf1d05dda2a19b76e0bb8"
+  integrity sha512-jN4EsEgqm3a5eLJV0ZrRpom3iG+w4bullS2NHc2htIucGUIr2FbgHXjU0wIkuN9uWM87aFvIfkUDpS/ju7Mazg==
+  dependencies:
+    memoize-one "^6.0.0"
+    prop-types "^15.7.2"
+    raf "^3.4.1"
+
 react-transition-group@^4.3.0:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -3969,6 +4002,11 @@ regexpp@^3.1.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
+relative-time-format@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/relative-time-format/-/relative-time-format-1.0.6.tgz#4956f6aa161f63cbab8a7f2d8b2e92d7b6a888a3"
+  integrity sha512-voemOJLxlKun4P1fAo4PEg2WXNGjhqfE/G8Xen4gcy24Hyu/djn5bT5axmhx4MnjynoZ8f0HCOjk3RZpsY6X/g==
+
 require-from-string@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"