move statement info panel to new UI kit #159

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@loadable/component": "^5.15.3",
     "@nilfoundation/react-components": "^0.8.3",
-    "@nilfoundation/ui-kit": "^2.0.16",
+    "@nilfoundation/ui-kit": "^2.0.37",
     "@reduxjs/toolkit": "^1.8.5",
     "@sentry/react": "^7.21.1",
     "@sentry/tracing": "^7.21.1",

src/components/login/index.ts

@@ -3,7 +3,7 @@
  * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
  */
 
-export * from './LoginForm';
+export * from '../../features/auth/components/LoginForm';
 export * from './AuthContainer';
-export * from './RegisterForm';
-export * from './ReadonlyAccessProvider';
+export * from '../../features/auth/components/RegisterForm';
+export * from '../../features/auth/components/ReadonlyAccessProvider';

src/components/market/StatementDashboard/StatementDashboard.tsx

@@ -9,12 +9,12 @@ import { match } from 'ts-pattern';
 import { ChartType, DateUnit } from '@/enums';
 import { selectCurrentStatement, useAppSelector } from '@/redux';
 import { useLocalStorage, useWindowHeight } from '@/hooks';
+import { StatementInfoPanel } from '@/features/dashboard';
 import type { ChartBaseProps } from '../../common';
 import { DashboardCard, FullScreenView, ProofCostChart, ProofTimeGenChart } from '../../common';
 import { ChartTypeSelect } from './ChartTypeSelect';
 import { DataRangeSelect } from './DataRangeSelect';
 import { DashboardToolbar } from './DashboardToolbar';
-import { StatementInfoPanel } from '../StatementInfoPanel';
 import { CopyToClipboardNavItem } from './CopyToClipboardNavItem';
 import './StatementDashboard.scss';
 

src/components/market/index.ts

@@ -3,10 +3,8 @@
  * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
  */
 
-export * from './StatementDetailedInfo';
 export * from './StatementDashboard';
 export * from './OrderBook';
 export * from './OrderManagementContextProvider';
 export * from './CreateOrdersPanel';
 export * from './ManageOrdersPanel';
-export * from './StatementInfoPanel';

src/components/login/LoginForm/LoginForm.tsx → src/features/auth/components/LoginForm/LoginForm.tsx

@@ -24,7 +24,7 @@ import { login } from '@/api';
 import { useLogin } from '@/features/auth';
 import type { LoginData } from '@/models';
 import { getApiErrorMessage } from '@/utils';
-import { AuthCard } from '../AuthCard';
+import { AuthCard } from '../AuthCard/AuthCard';
 import styles from './LoginForm.module.scss';
 
 /**

src/components/login/RegisterForm/RegisterForm.tsx → src/features/auth/components/RegisterForm/RegisterForm.tsx

@@ -26,7 +26,7 @@ import { SocialLinks } from '@/features/shared';
 import type { RegisterData } from '@/models';
 import { signUp, checkIsUsernameUnique } from '@/api';
 import { getApiErrorMessage } from '@/utils';
-import { AuthCard } from '../AuthCard';
+import { AuthCard } from '../AuthCard/AuthCard';
 import styles from './RegisterForm.module.scss';
 
 const usernameRequiredMinLength = 3;

src/features/auth/index.ts

@@ -8,3 +8,4 @@ export { useLogout } from './hooks/useLogout';
 export { useLogin } from './hooks/useLogin';
 
 export * from './components/ProtectedContent/ProtectedContent';
+export * from './components/ReadonlyAccessProvider/ReadonlyAccessProvider';

src/features/dashboard/components/StatementInfoPanel/StatementDetailedInfo.tsx

@@ -0,0 +1,47 @@
+/**
+ * @file React component.
+ * @copyright Yury Korotovskikh <u.korotovskiy@nil.foundation>
+ */
+
+import { globalStyles } from '@/styles/globalStyles';
+import type { ReactElement } from 'react';
+import { useStyletron } from 'styletron-react';
+
+type StatementDetailedInfoProps = {
+  description?: string;
+  url?: string;
+};
+
+/**
+ * Statement detailed info component.
+ *
+ * @param {StatementDetailedInfoProps} props Props.
+ * @returns React component.
+ */
+export const StatementDetailedInfo = ({
+  description,
+  url,
+}: StatementDetailedInfoProps): ReactElement => {
+  const [css] = useStyletron();
+
+  return (
+    <div>
+      <div>
+        <span className={css(globalStyles.textMuted)}>Description:</span>
+        {description ? ` ${description}` : 'No description'}
+      </div>
+      {url && (
+        <div>
+          <span className={css(globalStyles.textMuted)}>Url:</span>{' '}
+          <a
+            href={url}
+            rel="noreferrer"
+            target="_blank"
+          >
+            {url}
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};