@huma-finance/widgets 0.0.31 → 0.0.33

package/src/components/Factoring/UpcomingList.tsx

@@ -1,90 +1,90 @@
-import { Box, css, LinearProgress, useTheme } from '@mui/material'
-import { useWeb3React } from '@web3-react/core'
-import { useMQ } from '@huma-finance/shared'
-import React from 'react'
-
-import { ColumnType, WCProps } from '../../utilTypes'
-import { HumaTable } from '../HumaTable'
-
-type Props<T> = {
-  items: T[] | undefined
-  loading: boolean
-  columns: ColumnType<T>[]
-  title: string
-  connectWalletDesc: string
-  noItemDesc: string
-}
-
-export function UpcomingList<T>({
-  items,
-  loading,
-  columns,
-  title,
-  connectWalletDesc,
-  noItemDesc,
-  children,
-}: WCProps<Props<T>>): React.ReactElement {
-  const theme = useTheme()
-  const { isActive } = useWeb3React()
-  const { isMdSize, isSmSize } = useMQ()
-
-  const getPadding = () => {
-    if (isMdSize) {
-      return '0 8px 8px 8px'
-    }
-    return '0 16px 16px 16px'
-  }
-
-  const styles = {
-    title: css`
-      font-family: 'Uni-Neue-Black';
-      color: ${theme.palette.text.primary};
-      font-size: 24px;
-      margin-bottom: 16px;
-    `,
-    description: css`
-      font-family: 'Uni-Neue-Regular';
-      color: ${theme.palette.text.primary};
-      font-size: 1rem;
-    `,
-    tableWrapper: css`
-      margin-top: 24px;
-      padding: ${getPadding()};
-      background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
-      border: 1px solid #ffffff;
-      border-radius: 24px;
-      position: relative;
-    `,
-    progress: css`
-      width: calc(100% - 30px);
-      position: absolute;
-      top: 0;
-      left: 15px;
-    `,
-  }
-
-  return (
-    <Box>
-      <Box css={styles.title}>{title}</Box>
-      <Box css={styles.description} marginBottom='47px'>
-        {!isActive && <Box component='span'>{connectWalletDesc}</Box>}
-        {isActive && !items?.length && <Box>{noItemDesc}</Box>}
-        {isActive && !!items?.length && (
-          <Box css={styles.tableWrapper}>
-            {loading && (
-              <Box css={styles.progress}>
-                <LinearProgress />
-              </Box>
-            )}
-            <HumaTable
-              columns={columns}
-              rows={items}
-              hideRowsPerPage={isSmSize}
-            />
-          </Box>
-        )}
-        {children}
-      </Box>
-    </Box>
-  )
-}
+import { Box, css, LinearProgress, useTheme } from '@mui/material'
+import { useWeb3React } from '@web3-react/core'
+import { useMQ } from '@huma-finance/shared'
+import React from 'react'
+
+import { ColumnType, WCProps } from '../../utilTypes'
+import { HumaTable } from '../HumaTable'
+
+type Props<T> = {
+  items: T[] | undefined
+  loading: boolean
+  columns: ColumnType<T>[]
+  title: string
+  connectWalletDesc: string
+  noItemDesc: string
+}
+
+export function UpcomingList<T>({
+  items,
+  loading,
+  columns,
+  title,
+  connectWalletDesc,
+  noItemDesc,
+  children,
+}: WCProps<Props<T>>): React.ReactElement {
+  const theme = useTheme()
+  const { isActive } = useWeb3React()
+  const { isMdSize, isSmSize } = useMQ()
+
+  const getPadding = () => {
+    if (isMdSize) {
+      return '0 8px 8px 8px'
+    }
+    return '0 16px 16px 16px'
+  }
+
+  const styles = {
+    title: css`
+      font-family: 'Uni-Neue-Black';
+      color: ${theme.palette.text.primary};
+      font-size: 24px;
+      margin-bottom: 16px;
+    `,
+    description: css`
+      font-family: 'Uni-Neue-Regular';
+      color: ${theme.palette.text.primary};
+      font-size: 1rem;
+    `,
+    tableWrapper: css`
+      margin-top: 24px;
+      padding: ${getPadding()};
+      background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
+      border: 1px solid #ffffff;
+      border-radius: 24px;
+      position: relative;
+    `,
+    progress: css`
+      width: calc(100% - 30px);
+      position: absolute;
+      top: 0;
+      left: 15px;
+    `,
+  }
+
+  return (
+    <Box>
+      <Box css={styles.title}>{title}</Box>
+      <Box css={styles.description} marginBottom='47px'>
+        {!isActive && <Box component='span'>{connectWalletDesc}</Box>}
+        {isActive && !items?.length && <Box>{noItemDesc}</Box>}
+        {isActive && !!items?.length && (
+          <Box css={styles.tableWrapper}>
+            {loading && (
+              <Box css={styles.progress}>
+                <LinearProgress />
+              </Box>
+            )}
+            <HumaTable
+              columns={columns}
+              rows={items}
+              hideRowsPerPage={isSmSize}
+            />
+          </Box>
+        )}
+        {children}
+      </Box>
+    </Box>
+  )
+}

package/src/components/Factoring/index.ts

@@ -1,2 +1,2 @@
-export * from './UpcomingList'
-export * from './FactoredList'
+export * from './UpcomingList'
+export * from './FactoredList'

package/src/components/HumaLoading.tsx

@@ -1,68 +1,68 @@
-import { css } from '@emotion/react'
-import { useTheme } from '@mui/material'
-import React, { useEffect, useState } from 'react'
-
-import { LoaderIcon } from './icons'
-
-type Props = {
-  fullScreen?: boolean
-  minHeight?: string
-}
-
-export function HumaLoading({
-  fullScreen = false,
-  minHeight = '0px',
-}: Props): React.ReactElement {
-  const theme = useTheme()
-  const pathLength = 45
-  const [count, setCount] = useState(1)
-  const intervalTime = 30
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (count <= pathLength) {
-        const element = document.querySelector(
-          `#huma-loader-wrapper > svg > path:nth-of-type(${count})`,
-        )
-        if (element) {
-          // @ts-ignore
-          element.style.visibility = 'visible'
-          setCount((pre) => pre + 1)
-        }
-      } else {
-        const elements = document.querySelectorAll(
-          `#huma-loader-wrapper > svg > path`,
-        )
-        if (elements) {
-          // @ts-ignore
-          elements.forEach((element) => {
-            // @ts-ignore
-            element.style.visibility = 'hidden'
-          })
-          setCount(1)
-        }
-      }
-    }, intervalTime)
-    return () => clearInterval(interval)
-  }, [count])
-
-  const styles = {
-    wrapper: css`
-      ${theme.cssMixins.rowCentered};
-      min-height: ${fullScreen ? '100vh' : minHeight};
-      width: 50px;
-      height: 50px;
-    `,
-    icon: css`
-      & > path {
-        visibility: hidden;
-      }
-    `,
-  }
-
-  return (
-    <div css={styles.wrapper} id='huma-loader-wrapper'>
-      <LoaderIcon css={styles.icon} />
-    </div>
-  )
-}
+import { css } from '@emotion/react'
+import { useTheme } from '@mui/material'
+import React, { useEffect, useState } from 'react'
+
+import { LoaderIcon } from './icons'
+
+type Props = {
+  fullScreen?: boolean
+  minHeight?: string
+}
+
+export function HumaLoading({
+  fullScreen = false,
+  minHeight = '0px',
+}: Props): React.ReactElement {
+  const theme = useTheme()
+  const pathLength = 45
+  const [count, setCount] = useState(1)
+  const intervalTime = 30
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (count <= pathLength) {
+        const element = document.querySelector(
+          `#huma-loader-wrapper > svg > path:nth-of-type(${count})`,
+        )
+        if (element) {
+          // @ts-ignore
+          element.style.visibility = 'visible'
+          setCount((pre) => pre + 1)
+        }
+      } else {
+        const elements = document.querySelectorAll(
+          `#huma-loader-wrapper > svg > path`,
+        )
+        if (elements) {
+          // @ts-ignore
+          elements.forEach((element) => {
+            // @ts-ignore
+            element.style.visibility = 'hidden'
+          })
+          setCount(1)
+        }
+      }
+    }, intervalTime)
+    return () => clearInterval(interval)
+  }, [count])
+
+  const styles = {
+    wrapper: css`
+      ${theme.cssMixins.rowCentered};
+      min-height: ${fullScreen ? '100vh' : minHeight};
+      width: 50px;
+      height: 50px;
+    `,
+    icon: css`
+      & > path {
+        visibility: hidden;
+      }
+    `,
+  }
+
+  return (
+    <div css={styles.wrapper} id='huma-loader-wrapper'>
+      <LoaderIcon css={styles.icon} />
+    </div>
+  )
+}

package/src/components/HumaSnackBar.tsx

@@ -0,0 +1,60 @@
+import { css } from '@emotion/react'
+import { Alert, Box, Snackbar } from '@mui/material'
+
+type Props = {
+  open: boolean
+  title: string
+  message: string
+  severity: 'success' | 'info' | 'warning' | 'error'
+  autoHideDuration?: number
+  onClose: () => void
+}
+
+export function HumaSnackBar({
+  open,
+  autoHideDuration,
+  title,
+  message,
+  severity,
+  onClose,
+}: Props) {
+  const styles = {
+    snackbar: css`
+      margin-top: 80px;
+    `,
+    alert: css`
+      max-width: 400px;
+      padding: 20px 35px 20px 20px;
+      border-radius: 16px;
+      overflow: hidden;
+    `,
+    title: css`
+      margin-bottom: 10px;
+      font-size: 16px;
+      font-family: 'Uni-Neue-Bold';
+    `,
+    message: css`
+      font-size: 15px;
+      font-family: 'Uni-Neue-Regular';
+    `,
+  }
+
+  return (
+    <Snackbar
+      open={open}
+      autoHideDuration={autoHideDuration ?? 6000}
+      onClose={onClose}
+      css={styles.snackbar}
+    >
+      <Alert
+        onClose={onClose}
+        title={title}
+        severity={severity}
+        css={styles.alert}
+      >
+        <Box css={styles.title}>{title}</Box>
+        <Box css={styles.message}>{message}</Box>
+      </Alert>
+    </Snackbar>
+  )
+}