@xyo-network/react-footer 2.26.37 → 2.26.40

package/dist/docs.json

@@ -10,7 +10,7 @@
 			"fileName": "index.ts",
 			"line": 1,
 			"character": 0,
-			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eeec410/packages/footer/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/0cea94b/packages/footer/src/index.ts#L1"
 		}
 	]
 }

package/package.json

@@ -79,5 +79,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.37"
+  "version": "2.26.40"
 }

package/src/Copyright.tsx

@@ -0,0 +1,47 @@
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import { LinkExProps } from '@xylabs/react-link'
+
+import { FooterLink } from './Link'
+
+export interface CopyrightProps extends FlexBoxProps {
+  onMore?: () => void
+}
+
+const footerLinks: LinkExProps[] = [
+  {
+    href: 'https://xylabs.com/',
+    title: `Copyright © ${new Date().getFullYear()} XY Labs, Inc.`,
+  },
+  {
+    href: 'https://xyo.network/',
+    title: 'XYO Foundation',
+  },
+  {
+    href: 'https://xylabs.com/privacy/',
+    title: 'Privacy',
+  },
+  {
+    href: 'https://xylabs.com/terms/',
+    title: 'Terms',
+  },
+  {
+    href: 'https://xylabs.com/jobs',
+    title: 'Careers',
+  },
+]
+
+export const Copyright: React.FC<CopyrightProps> = ({ style, onMore, ...props }) => (
+  <FlexRow flexWrap="wrap" textTransform="uppercase" style={{ opacity: 0.6, ...style }} {...props}>
+    {footerLinks.map((footerLink, index) => (
+      <FooterLink noWrap key={index} paddingX={1} margin={0} {...footerLink}>
+        <small>{footerLink.title}</small>
+      </FooterLink>
+    ))}
+    {onMore ? (
+      <FlexRow style={{ cursor: 'pointer' }} paddingX={0.5} onClick={onMore}>
+        <MoreHorizIcon color="primary" fontSize="small" />
+      </FlexRow>
+    ) : null}
+  </FlexRow>
+)

package/src/DeveloperLinks.tsx

@@ -0,0 +1,14 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+
+import { FooterLink } from './Link'
+import { FooterLinks } from './Links'
+
+export const DeveloperLinks: React.FC<FlexBoxProps> = (props) => (
+  <FooterLinks title="Developer" {...props}>
+    <FooterLink href="https://xyo.network/developer">Overview</FooterLink>
+    <FooterLink href="https://xyo.network/developer/get-started">Get Started</FooterLink>
+    <FooterLink href="https://xyo.network/developer">SDKs</FooterLink>
+    <FooterLink href="https://github.com/xyoraclenetwork">Open Source Github</FooterLink>
+    <FooterLink href="https://xyo.network/docs/sdk/js">Documentation</FooterLink>
+  </FooterLinks>
+)

package/src/Footer.stories.tsx

@@ -0,0 +1,32 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexCol } from '@xylabs/react-flexbox'
+
+import { Footer } from './Footer'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: Footer,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'footer/Footer',
+} as ComponentMeta<typeof Footer>
+
+const Template: ComponentStory<typeof Footer> = (args) => (
+  <FlexCol minHeight="80vh" justifyContent="flex-end">
+    <Footer {...args}></Footer>
+  </FlexCol>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+
+const DynamicHeight = Template.bind({})
+DynamicHeight.args = { dynamicHeight: true }
+
+export { Default, DynamicHeight }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/Footer.tsx

@@ -0,0 +1,79 @@
+import { Container, ContainerProps, Grid, GridProps } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { useState } from 'react'
+
+import { Copyright } from './Copyright'
+import { DeveloperLinks } from './DeveloperLinks'
+import { MoreLinks } from './MoreLinks'
+import { NetworkLinks } from './NetworkLinks'
+import { SocialLinks } from './SocialLinks'
+import { SupportLinks } from './SupportLinks'
+import { XyoTokens } from './XyoTokens'
+
+export interface FooterProps extends FlexBoxProps {
+  dynamicHeight?: boolean
+  footerHtmlElement?: boolean
+  container?: ContainerProps['maxWidth'] | 'none'
+}
+
+export const FooterLinkSection: React.FC<GridProps> = (props) => {
+  return (
+    <Grid container justifyContent="space-between" alignItems="flex-start" {...props}>
+      <Grid item xs={12} md={2}>
+        <SocialLinks alignItems="flex-start" />
+      </Grid>
+      <Grid item xs={6} md={2}>
+        <NetworkLinks alignItems="flex-start" />
+      </Grid>
+      <Grid item xs={6} md={2}>
+        <XyoTokens alignItems="flex-start" />
+      </Grid>
+      <Grid item xs={6} md={2}>
+        <DeveloperLinks alignItems="flex-start" />
+      </Grid>
+      <Grid item xs={6} md={2}>
+        <MoreLinks alignItems="flex-start" />
+      </Grid>
+      <Grid item xs={6} md={2}>
+        <SupportLinks alignItems="flex-start" />
+      </Grid>
+    </Grid>
+  )
+}
+
+export const Footer: React.FC<FooterProps> = ({ container, dynamicHeight = false, ...props }) => {
+  const [more, setMore] = useState(false)
+  const onMore = () => {
+    setMore(!more)
+  }
+  return (
+    <FlexCol
+      onMouseLeave={() => {
+        setMore(false)
+      }}
+      alignItems="stretch"
+      {...props}
+    >
+      {more || !dynamicHeight ? (
+        <FlexRow alignItems="flex-start">
+          {container && container !== 'none' ? (
+            <Container>
+              <FooterLinkSection />
+            </Container>
+          ) : (
+            <FooterLinkSection />
+          )}
+        </FlexRow>
+      ) : null}
+      <FlexRow>
+        {container && container !== 'none' ? (
+          <Container>
+            <Copyright onMore={onMore} />
+          </Container>
+        ) : (
+          <Copyright onMore={onMore} />
+        )}
+      </FlexRow>
+    </FlexCol>
+  )
+}

package/src/Link.tsx

@@ -0,0 +1,35 @@
+import { LinkEx, LinkExProps } from '@xylabs/react-link'
+import { assertEx } from '@xylabs/sdk-js'
+
+/**
+ * @description
+ * FooterLink automatically uses a local To if the link is to the current domain
+ * If the link is not local, it defaults to target being _blank
+ * In the case of 'beta' domains, it navigates correctly
+ */
+
+const convertToBetaIfNeeded = (url: string | URL, currentUrl = new URL(document.location.href)) => {
+  const urlObj = typeof url === 'string' ? new URL(url) : url
+  const currentUrlObj = typeof currentUrl === 'string' ? new URL(currentUrl) : currentUrl
+  const currentHostnameParts = currentUrlObj.hostname.split('.')
+  const beta = currentHostnameParts.shift() === 'beta'
+  if (beta) {
+    const currentHostnameWithoutBeta = currentHostnameParts.join('.')
+    if (currentHostnameWithoutBeta === urlObj.hostname) {
+      urlObj.hostname = currentUrlObj.hostname
+    }
+  }
+  return urlObj
+}
+
+export const FooterLink: React.FC<LinkExProps> = ({ target, href, margin = 0.5, variant = 'body2', ...props }) => {
+  const url = new URL(assertEx(href, 'href not set'))
+  assertEx(url.hostname, 'Hostname is required in href')
+  const convertedUrl = convertToBetaIfNeeded(url)
+  if (document.location.hostname === convertedUrl.hostname) {
+    const to = url.search.length > 0 ? `${convertedUrl.pathname}${convertedUrl.search}` : url.pathname
+    return <LinkEx margin={margin} to={to} target={target} variant={variant} {...props} />
+  } else {
+    return <LinkEx margin={margin} href={href} target={target ?? '_blank'} variant={variant} {...props} />
+  }
+}

package/src/Links.tsx

@@ -0,0 +1,13 @@
+import { Typography } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+
+export const FooterLinks: React.FC<FlexBoxProps> = ({ children, title, ...props }) => {
+  return (
+    <FlexCol margin={1} justifyContent="flex-start" title={title} {...props}>
+      <Typography margin={0.5} variant="h6" noWrap>
+        {title}
+      </Typography>
+      {children}
+    </FlexCol>
+  )
+}

package/src/MoreLinks.tsx

@@ -0,0 +1,12 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+
+import { FooterLink } from './Link'
+import { FooterLinks } from './Links'
+
+export const MoreLinks: React.FC<FlexBoxProps> = (props) => (
+  <FooterLinks title="More" {...props}>
+    <FooterLink href="https://xyo.network/partners">Partners</FooterLink>
+    <FooterLink href="https://xyo.network/fhr">FHR</FooterLink>
+    <FooterLink href="https://xyo.network/brand">Brand</FooterLink>
+  </FooterLinks>
+)

package/src/NetworkLinks.tsx

@@ -0,0 +1,13 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+
+import { FooterLink } from './Link'
+import { FooterLinks } from './Links'
+
+export const NetworkLinks: React.FC<FlexBoxProps> = (props) => (
+  <FooterLinks title="Network" {...props}>
+    <FooterLink href="https://xyo.network/network">Overview</FooterLink>
+    <FooterLink href="https://xyo.network/network/bound-witness">Bound Witness</FooterLink>
+    <FooterLink href="https://xyo.network/network/proof-of-origin">Proof Of Origin</FooterLink>
+    <FooterLink href="https://xyo.network/papers">White Paper</FooterLink>
+  </FooterLinks>
+)

package/src/SocialLinks.tsx

@@ -0,0 +1,39 @@
+import { Facebook, Instagram, LinkedIn, Reddit, Telegram, Twitter, YouTube } from '@mui/icons-material'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import { FaDiscord } from 'react-icons/fa'
+
+import { FooterLink } from './Link'
+import { FooterLinks } from './Links'
+
+export const SocialLinks: React.FC<FlexBoxProps> = (props) => {
+  return (
+    <FooterLinks title="XYO Socials" {...props}>
+      <FlexRow flexWrap="wrap" justifyContent="flex-start">
+        <FooterLink href="https://business.facebook.com/OfficialXYO/">
+          <Facebook />
+        </FooterLink>
+        <FooterLink href="https://twitter.com/OfficialXYO">
+          <Twitter />
+        </FooterLink>
+        <FooterLink href="https://www.instagram.com/officialxyo/">
+          <Instagram />
+        </FooterLink>
+        <FooterLink href="https://t.me/xyonetwork">
+          <Telegram />
+        </FooterLink>
+        <FooterLink href="https://www.reddit.com/r/XYONetwork/">
+          <Reddit />
+        </FooterLink>
+        <FooterLink href="https://www.youtube.com/channel/UCyZDqb9pgntVHJVt1pxXtsw">
+          <YouTube />
+        </FooterLink>
+        <FooterLink href="https://www.linkedin.com/company/officialxyo/">
+          <LinkedIn />
+        </FooterLink>
+        <FooterLink href="https://discord.com/channels/935586624392298547/935586625101103227">
+          <FaDiscord />
+        </FooterLink>
+      </FlexRow>
+    </FooterLinks>
+  )
+}

package/src/SupportLinks.tsx

@@ -0,0 +1,11 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+
+import { FooterLink } from './Link'
+import { FooterLinks } from './Links'
+
+export const SupportLinks: React.FC<FlexBoxProps> = (props) => (
+  <FooterLinks title="Support" {...props}>
+    <FooterLink href="https://support.xy.company/hc/en-us/categories/360001417734">Help Center</FooterLink>
+    <FooterLink href="https://support.xy.company/hc/en-us/requests/new">Contact Support</FooterLink>
+  </FooterLinks>
+)

package/src/XyoTokens.tsx

@@ -0,0 +1,15 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+import React from 'react'
+
+import { FooterLink } from './Link'
+import { FooterLinks } from './Links'
+
+export const XyoTokens: React.FC<FlexBoxProps> = (props) => (
+  <FooterLinks title="XYO Tokens" {...props}>
+    <FooterLink href="https://xyo.network/token">About</FooterLink>
+    <FooterLink href="https://xyo.network/token/exchange">Exchanges</FooterLink>
+    <FooterLink href="https://xyo.network/token/price">Prices</FooterLink>
+    <FooterLink href="https://xyo.network/token/wallet">Wallets</FooterLink>
+    <FooterLink href="https://etherscan.io/address/0x55296f69f40ea6d20e478533c15a6b08b654e758">Contract</FooterLink>
+  </FooterLinks>
+)

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from './Copyright'
+export * from './DeveloperLinks'
+export * from './Footer'
+export * from './Link'
+export * from './Links'
+export * from './MoreLinks'
+export * from './NetworkLinks'
+export * from './SocialLinks'
+export * from './SupportLinks'
+export * from './XyoTokens'