@oanda/labs-sentiment-widget 1.0.172 → 1.0.174

package/dist/types/SentimentWidget/SentimentWidget.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { SentimentConfig } from './types';
+import type { SentimentConfig } from './types';
 declare const SentimentWidget: ({ graphqlUrl, division, instrument, locale, theme, includeDescriptionLabels, isParamError, logoLink, }: SentimentConfig) => React.JSX.Element;
 export { SentimentWidget };

package/dist/types/SentimentWidget/Tool.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { SentimentToolConfig } from './types';
+import type { SentimentToolConfig } from './types';
 declare const Tool: ({ division }: SentimentToolConfig) => React.JSX.Element;
 export { Tool };

package/dist/types/SentimentWidget/Widget.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { SentimentWidgetConfig } from './types';
+import type { SentimentWidgetConfig } from './types';
 declare const Widget: ({ instrument, division, includeDescriptionLabels, }: SentimentWidgetConfig) => React.JSX.Element;
 export { Widget };

package/dist/types/SentimentWidget/components/SortSwitch/SortSwitch.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { SortSwitchProps } from './types';
+import type { SortSwitchProps } from './types';
 declare const SortSwitch: ({ onClickButtonDown, onClickButtonUp, selected, disabled, }: SortSwitchProps) => React.JSX.Element;
-export { SortSwitch, };
+export { SortSwitch };

package/dist/types/SentimentWidget/types.d.ts

@@ -1,5 +1,5 @@
-import { WidgetConfig } from '@oanda/labs-widget-common';
-import { Division } from '../gql/types/graphql';
+import type { WidgetConfig } from '@oanda/labs-widget-common';
+import type { Division } from '../gql/types/graphql';
 export interface SentimentConfig extends WidgetConfig {
     division: Division;
     instrument?: string;

package/dist/types/SentimentWidget/utils.d.ts

@@ -1,4 +1,5 @@
-import { GetSentimentListQuery, Sort } from '../gql/types/graphql';
+import type { GetSentimentListQuery } from '../gql/types/graphql';
+import { Sort } from '../gql/types/graphql';
 export declare const sortData: ({ sentimentList }: GetSentimentListQuery, sort: Sort) => {
     __typename?: "SentimentInstrument";
     name: string;

package/dist/types/gql/types/gql.d.ts

@@ -11,11 +11,11 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 declare const documents: {
-    "\n  query GetInstrumentSentiment(\n    $name: String!\n    $division: Division\n  ) {\n    sentiment(\n      name: $name\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n": DocumentNode<types.GetInstrumentSentimentQuery, types.Exact<{
+    '\n  query GetInstrumentSentiment(\n    $name: String!\n    $division: Division\n  ) {\n    sentiment(\n      name: $name\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n': DocumentNode<types.GetInstrumentSentimentQuery, types.Exact<{
         name: types.Scalars["String"]["input"];
         division?: types.InputMaybe<types.Division>;
     }>>;
-    "\n  query GetSentimentList (\n    $division: Division\n  ) {\n    sentimentList (\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n": DocumentNode<types.GetSentimentListQuery, types.Exact<{
+    '\n  query GetSentimentList (\n    $division: Division\n  ) {\n    sentimentList (\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n': DocumentNode<types.GetSentimentListQuery, types.Exact<{
         division?: types.InputMaybe<types.Division>;
     }>>;
 };
@@ -35,10 +35,10 @@ export declare function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export declare function graphql(source: "\n  query GetInstrumentSentiment(\n    $name: String!\n    $division: Division\n  ) {\n    sentiment(\n      name: $name\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n"): (typeof documents)["\n  query GetInstrumentSentiment(\n    $name: String!\n    $division: Division\n  ) {\n    sentiment(\n      name: $name\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n"];
+export declare function graphql(source: '\n  query GetInstrumentSentiment(\n    $name: String!\n    $division: Division\n  ) {\n    sentiment(\n      name: $name\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n'): (typeof documents)['\n  query GetInstrumentSentiment(\n    $name: String!\n    $division: Division\n  ) {\n    sentiment(\n      name: $name\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export declare function graphql(source: "\n  query GetSentimentList (\n    $division: Division\n  ) {\n    sentimentList (\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n"): (typeof documents)["\n  query GetSentimentList (\n    $division: Division\n  ) {\n    sentimentList (\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n"];
+export declare function graphql(source: '\n  query GetSentimentList (\n    $division: Division\n  ) {\n    sentimentList (\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n'): (typeof documents)['\n  query GetSentimentList (\n    $division: Division\n  ) {\n    sentimentList (\n      division: $division\n    ) {\n      name\n      displayName\n      sentiment {\n        shortPercent\n        longPercent\n      }\n      updatedAt\n    }\n  }\n'];
 export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
 export {};

package/dist/types/gql/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./fragment-masking";
-export * from "./gql";
+export * from './fragment-masking';
+export * from './gql';

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from './SentimentWidget/types';
 export * from './SentimentWidget/SentimentWidget';
+export * from './SentimentWidget/types';

package/dist/types/translations/index.d.ts

@@ -1,4 +1,4 @@
-import { Translations } from '@oanda/mono-i18n';
-import { defaultTranslations } from './translations';
+import type { Translations } from '@oanda/mono-i18n';
+import type { defaultTranslations } from './translations';
 export type TranslationKey = keyof typeof defaultTranslations;
 export declare const translations: Translations;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-sentiment-widget",
-  "version": "1.0.172",
+  "version": "1.0.174",
   "description": "Labs Sentiment Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.172",
+    "@oanda/labs-widget-common": "^1.0.174",
     "@oanda/mono-i18n": "10.0.1",
     "graphql": "16.8.1"
   },
@@ -20,5 +20,5 @@
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0"
   },
-  "gitHead": "f3c94dbb01bc271f175ba95700c51001c4099a52"
+  "gitHead": "4c5d84b00c7fbf3acd7ef27634fbd2a9ef0afd6b"
 }

package/src/SentimentWidget/SentimentWidget.tsx

@@ -1,13 +1,11 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
 import React from 'react';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
-import { LocaleProvider } from '@oanda/mono-i18n';
-import {
-  ChartError, ThemeProvider, getLocale, renderComponent,
-} from '@oanda/labs-widget-common';
-import { Widget } from './Widget';
-import { Tool } from './Tool';
-import { SentimentConfig } from './types';
+
 import { translations } from '../translations';
+import { Tool } from './Tool';
+import type { SentimentConfig } from './types';
+import { Widget } from './Widget';
 
 const SentimentWidget = ({
   graphqlUrl,
@@ -25,31 +23,28 @@ const SentimentWidget = ({
   });
 
   return (
-    <ThemeProvider theme={theme}>
-      <LocaleProvider locale={getLocale(locale)} translations={translations}>
-        <ApolloProvider client={client}>
-          {isParamError ? (
-            <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
-              <ChartError />
-            </div>
-          ) : (
-            renderComponent({
-              logoLink,
-              linkArea: 'logo',
-              Component: instrument
-                ? (
-                  <Widget
-                    division={division}
-                    instrument={instrument}
-                    includeDescriptionLabels={includeDescriptionLabels}
-                  />
-                )
-                : <Tool division={division} />,
-            })
-          )}
-        </ApolloProvider>
-      </LocaleProvider>
-    </ThemeProvider>
+    <WidgetProvider
+      client={client}
+      locale={locale}
+      theme={theme}
+      translations={translations}
+    >
+      <WidgetWrapper
+        isParamError={isParamError}
+        linkArea="logo"
+        logoLink={logoLink}
+      >
+        {instrument ? (
+          <Widget
+            division={division}
+            includeDescriptionLabels={includeDescriptionLabels}
+            instrument={instrument}
+          />
+        ) : (
+          <Tool division={division} />
+        )}
+      </WidgetWrapper>
+    </WidgetProvider>
   );
 };
 

package/src/SentimentWidget/Tool.tsx

@@ -1,37 +1,43 @@
-import React, { useEffect, useState, useContext } from 'react';
-import classNames from 'classnames';
+import { useQuery } from '@apollo/client';
 import {
-  Sentiment,
-  SentimentHeight,
-  Loader,
-  LoaderSize,
   ChartError,
-  Truncate,
-  Tooltip,
-  ThemeContext,
-  Size,
   EMPTY_VALUE,
   LastUpdated,
+  Loader,
+  LoaderSize,
+  Sentiment,
+  SentimentHeight,
+  Size,
+  Tooltip,
+  Truncate,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
-import { useQuery } from '@apollo/client';
 import { useLocale } from '@oanda/mono-i18n';
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+
+import { INSTRUMENT_TOOLTIP_ID } from '../constant';
 import { getSentimentList } from '../gql/getSentimentList';
-import { SentimentToolConfig } from './types';
-import { sortData } from './utils';
-import { SelectedArrow, SortSwitch } from './components/SortSwitch';
-import {
-  GetSentimentListQuery, GetSentimentListQueryVariables, SentimentInstrument, Sort,
+import type {
+  GetSentimentListQuery,
+  GetSentimentListQueryVariables,
+  SentimentInstrument,
 } from '../gql/types/graphql';
-import { INSTRUMENT_TOOLTIP_ID } from '../constant';
+import { Sort } from '../gql/types/graphql';
+import { SelectedArrow, SortSwitch } from './components/SortSwitch';
+import type { SentimentToolConfig } from './types';
+import { sortData } from './utils';
 
 const Tool = ({ division }: SentimentToolConfig) => {
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const [sort, setSort] = useState(Sort.Bullish);
-  const [sortedData, setSortedData] = useState<Omit<SentimentInstrument, 'id'>[]>(new Array(20).fill({}));
+  const [sortedData, setSortedData] = useState<
+    Omit<SentimentInstrument, 'id'>[]
+  >(new Array(20).fill({}));
   const { loading, data, error } = useQuery<
-  GetSentimentListQuery,
-  GetSentimentListQueryVariables
+    GetSentimentListQuery,
+    GetSentimentListQueryVariables
   >(getSentimentList, {
     variables: {
       division,
@@ -47,75 +53,85 @@ const Tool = ({ division }: SentimentToolConfig) => {
       setSortedData(sortData(data, sort));
       setUpdatedTimestamp(data.sentimentList![0]?.updatedAt);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, sort]);
 
   return (
     <>
       {size && (
-      <div data-testid="sentiment-tool" className="lw-relative lw-bg-bg-primary lw-text-sm lw-tracking-normal lw-text-text-primary">
-        {error || sortedData.length === 0 ? (
-          <div className="lw-flex lw-h-[200px] lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary lw-p-2">
-            <ChartError />
-          </div>
-        ) : (
-          <>
-            <div className="lw-flex lw-justify-end lw-pb-5">
-              <SortSwitch
-                disabled={loading}
-                selected={sort === Sort.Bullish ? SelectedArrow.UP : SelectedArrow.DOWN}
-                onClickButtonDown={() => setSort(Sort.Bearish)}
-                onClickButtonUp={() => setSort(Sort.Bullish)}
-              />
+        <div
+          className="lw-relative lw-bg-bg-primary lw-text-sm lw-tracking-normal lw-text-text-primary"
+          data-testid="sentiment-tool"
+        >
+          {error || sortedData.length === 0 ? (
+            <div className="lw-flex lw-h-[200px] lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary lw-p-2">
+              <ChartError />
             </div>
-            <div className="lw-flex lw-flex-col lw-border lw-border-solid lw-border-border-primary lw-p-2">
-              <div className="lw-mb-2 lw-flex lw-justify-between lw-font-semibold">
-                <span className={classNames('lw-uppercase', {
-                  'lw-ml-40': isDesktop,
-                  'lw-ml-[7.5rem]': !isDesktop,
-                })}
-                >
-                  {lang('net_short')}
-                </span>
-                <span className={classNames('lw-text-right lw-uppercase', {
-                  'lw-mr-10': isDesktop,
-                })}
-                >
-                  {lang('net_long')}
-                </span>
+          ) : (
+            <>
+              <div className="lw-flex lw-justify-end lw-pb-5">
+                <SortSwitch
+                  disabled={loading}
+                  selected={
+                    sort === Sort.Bullish
+                      ? SelectedArrow.UP
+                      : SelectedArrow.DOWN
+                  }
+                  onClickButtonDown={() => setSort(Sort.Bearish)}
+                  onClickButtonUp={() => setSort(Sort.Bullish)}
+                />
               </div>
-              {sortedData.map((item, index) => (
-                <div className="lw-flex lw-h-8 lw-w-full lw-items-center" key={item.name || index}>
-                  <div className="lw-w-[120px] lw-shrink-0">
-                    {loading ? (
-                      <Loader size={LoaderSize.md} />
-                    ) : (
-                      <Truncate
-                        maxWidth={120}
-                        tooltipId={INSTRUMENT_TOOLTIP_ID}
-                        className="lw-pr-2 lw-font-sans lw-text-sm lw-font-bold"
-                        text={item.displayName || '\u2014'}
-                      />
-                    )}
-                  </div>
-                  <Sentiment
-                    isLoading={loading}
-                    height={SentimentHeight.md}
-                    sentiment={item.sentiment}
-                  />
+              <div className="lw-flex lw-flex-col lw-border lw-border-solid lw-border-border-primary lw-p-2">
+                <div className="lw-mb-2 lw-flex lw-justify-between lw-font-semibold">
+                  <span
+                    className={classNames('lw-uppercase', {
+                      'lw-ml-40': isDesktop,
+                      'lw-ml-[7.5rem]': !isDesktop,
+                    })}
+                  >
+                    {lang('net_short')}
+                  </span>
+                  <span
+                    className={classNames('lw-text-right lw-uppercase', {
+                      'lw-mr-10': isDesktop,
+                    })}
+                  >
+                    {lang('net_long')}
+                  </span>
                 </div>
-              ))}
+                {sortedData.map((item, index) => (
+                  <div
+                    key={item.name || index}
+                    className="lw-flex lw-h-8 lw-w-full lw-items-center"
+                  >
+                    <div className="lw-w-[120px] lw-shrink-0">
+                      {loading ? (
+                        <Loader size={LoaderSize.md} />
+                      ) : (
+                        <Truncate
+                          className="lw-pr-2 lw-font-sans lw-text-sm lw-font-bold"
+                          maxWidth={120}
+                          text={item.displayName || '\u2014'}
+                          tooltipId={INSTRUMENT_TOOLTIP_ID}
+                        />
+                      )}
+                    </div>
+                    <Sentiment
+                      height={SentimentHeight.md}
+                      isLoading={loading}
+                      sentiment={item.sentiment}
+                    />
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+          <Tooltip id={INSTRUMENT_TOOLTIP_ID} />
+          {!error && (
+            <div className="lw-mt-2 lw-h-8">
+              <LastUpdated labelCallback={lang} timestamp={updatedTimestamp} />
             </div>
-          </>
-        )}
-        <Tooltip id={INSTRUMENT_TOOLTIP_ID} />
-        {!error
-        && (
-        <div className="lw-mt-2 lw-h-8">
-          <LastUpdated timestamp={updatedTimestamp} labelCallback={lang} />
+          )}
         </div>
-        )}
-      </div>
       )}
     </>
   );

package/src/SentimentWidget/Widget.tsx

@@ -1,22 +1,26 @@
-import React, { useContext } from 'react';
-import classNames from 'classnames';
+import { useQuery } from '@apollo/client';
 import {
-  Sentiment,
-  SentimentHeight,
   Error,
+  LastUpdated,
   Loader,
   LoaderSize,
-  Truncate,
-  ThemeContext,
+  Sentiment,
+  SentimentHeight,
   Size,
-  LastUpdated,
+  Truncate,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import { useQuery } from '@apollo/client';
-import { getInstrumentSentiment } from '../gql/getInstrumentSentiment';
-import { SentimentWidgetConfig } from './types';
-import { GetInstrumentSentimentQuery, GetInstrumentSentimentQueryVariables } from '../gql/types/graphql';
+import classNames from 'classnames';
+import React from 'react';
+
 import { INSTRUMENT_TOOLTIP_ID } from '../constant';
+import { getInstrumentSentiment } from '../gql/getInstrumentSentiment';
+import type {
+  GetInstrumentSentimentQuery,
+  GetInstrumentSentimentQueryVariables,
+} from '../gql/types/graphql';
+import type { SentimentWidgetConfig } from './types';
 
 const Widget = ({
   instrument,
@@ -24,8 +28,8 @@ const Widget = ({
   includeDescriptionLabels = false,
 }: SentimentWidgetConfig) => {
   const { loading, data, error } = useQuery<
-  GetInstrumentSentimentQuery,
-  GetInstrumentSentimentQueryVariables
+    GetInstrumentSentimentQuery,
+    GetInstrumentSentimentQueryVariables
   >(getInstrumentSentiment, {
     variables: {
       name: instrument,
@@ -33,71 +37,73 @@ const Widget = ({
     },
     fetchPolicy: 'cache-and-network',
   });
-  const { size } = useContext(ThemeContext);
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const { lang } = useLocale();
 
   const { displayName, sentiment, updatedAt } = data?.sentiment?.[0] || {};
 
-  const isError = error
-    || (sentiment?.shortPercent === 0 && sentiment?.longPercent === 0)
-    || sentiment?.shortPercent === undefined
-    || sentiment?.longPercent === undefined;
+  const isError =
+    error ||
+    (sentiment?.shortPercent === 0 && sentiment?.longPercent === 0) ||
+    sentiment?.shortPercent === undefined ||
+    sentiment?.longPercent === undefined;
 
   return (
     <>
       {size && (
-      <>
-        <div
-          data-testid="sentiment-widget"
-          className="lw-border lw-border-solid lw-border-border-primary lw-bg-bg-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary"
-        >
-          {includeDescriptionLabels && !isError
-          && (
-          <div className="lw-mb-2 lw-flex lw-justify-between lw-font-semibold">
-            <span className={classNames('lw-uppercase', {
-              'lw-ml-40': isDesktop,
-              'lw-ml-[7.5rem]': !isDesktop,
-            })}
-            >
-              {lang('net_short')}
-            </span>
-            <span className={classNames('lw-text-right lw-uppercase', {
-              'lw-mr-10': isDesktop,
-            })}
-            >
-              {lang('net_long')}
-            </span>
-          </div>
-          )}
-          <div className="lw-flex lw-items-center lw-justify-between">
-            <div className="lw-w-[120px] lw-shrink-0">
-              {loading && <Loader size={LoaderSize.md} />}
-              {!loading && !isError && (
-              <Truncate
-                maxWidth={120}
-                tooltipId={INSTRUMENT_TOOLTIP_ID}
-                className="lw-pr-2 lw-font-sans lw-text-sm lw-font-bold"
-                text={displayName || '\u2014'}
+        <>
+          <div
+            className="lw-border lw-border-solid lw-border-border-primary lw-bg-bg-primary lw-p-4 lw-text-sm lw-tracking-normal lw-text-text-primary"
+            data-testid="sentiment-widget"
+          >
+            {includeDescriptionLabels && !isError && (
+              <div className="lw-mb-2 lw-flex lw-justify-between lw-font-semibold">
+                <span
+                  className={classNames('lw-uppercase', {
+                    'lw-ml-40': isDesktop,
+                    'lw-ml-[7.5rem]': !isDesktop,
+                  })}
+                >
+                  {lang('net_short')}
+                </span>
+                <span
+                  className={classNames('lw-text-right lw-uppercase', {
+                    'lw-mr-10': isDesktop,
+                  })}
+                >
+                  {lang('net_long')}
+                </span>
+              </div>
+            )}
+            <div className="lw-flex lw-items-center lw-justify-between">
+              <div className="lw-w-[120px] lw-shrink-0">
+                {loading && <Loader size={LoaderSize.md} />}
+                {!loading && !isError && (
+                  <Truncate
+                    className="lw-pr-2 lw-font-sans lw-text-sm lw-font-bold"
+                    maxWidth={120}
+                    text={displayName || '\u2014'}
+                    tooltipId={INSTRUMENT_TOOLTIP_ID}
+                  />
+                )}
+              </div>
+              <Sentiment
+                height={SentimentHeight.md}
+                isLoading={loading}
+                sentiment={sentiment}
+                withError={false}
               />
-              )}
             </div>
-            <Sentiment
-              withError={false}
-              isLoading={loading}
-              height={SentimentHeight.md}
-              sentiment={sentiment}
-            />
-          </div>
 
-          {!loading && isError && <Error />}
-        </div>
-        {!isError && updatedAt && (
-        <div className="lw-mt-2 lw-h-8">
-          <LastUpdated timestamp={updatedAt} labelCallback={lang} />
-        </div>
-        )}
-      </>
+            {!loading && isError && <Error />}
+          </div>
+          {!isError && updatedAt && (
+            <div className="lw-mt-2 lw-h-8">
+              <LastUpdated labelCallback={lang} timestamp={updatedAt} />
+            </div>
+          )}
+        </>
       )}
     </>
   );