feat(oracle): focus on learning

- stub landing - better surfing - cool filters and sortings - search by ipfs hash - explicite ranks by @ dasein @El-NIVVO @master
cybercongress · Oct 2, 2023 · 2b2d35e · 2b2d35e
1 parent bc0b6f7
commit 2b2d35e
Show file tree

Hide file tree

Showing 99 changed files with 2,794 additions and 1,180 deletions.
diff --git a/.storybook/_template.tsx b/.storybook/_template.tsx
@@ -2,11 +2,11 @@
 
 import { Meta, StoryObj } from '@storybook/react';
 
-import $Component from './$Component';
+import _Component from './_Component';
 
-const meta: Meta<typeof $Component> = {
-  component: $Component,
-  title: 'atoms/$Component',
+const meta: Meta<typeof _Component> = {
+  component: _Component,
+  title: 'atoms/_Component',
   parameters: {
     design: {
       type: 'figma',
@@ -16,7 +16,7 @@ const meta: Meta<typeof $Component> = {
 };
 export default meta;
 
-type Story = StoryObj<typeof $Component>;
+type Story = StoryObj<typeof _Component>;
 
 const defaultArgs = {};
 

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -10,6 +10,8 @@ import './styles.scss';
 // storybook error that React not defined, may be fixed in future
 import React from 'react';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import store from '../src/redux/store';
+import { Provider } from 'react-redux';
 window.React = React;
 
 export const queryClient = new QueryClient({
@@ -39,13 +41,15 @@ const preview: Preview = {
     (Story) => (
       <div style={{ margin: '3em' }}>
         <BrowserRouter>
-          <SdkQueryClientProvider>
-            <QueryClientProvider client={queryClient}>
-              <IbcDenomProvider>
-                <Story />
-              </IbcDenomProvider>
-            </QueryClientProvider>
-          </SdkQueryClientProvider>
+          <Provider store={store}>
+            <SdkQueryClientProvider>
+              <QueryClientProvider client={queryClient}>
+                <IbcDenomProvider>
+                  <Story />
+                </IbcDenomProvider>
+              </QueryClientProvider>
+            </SdkQueryClientProvider>
+          </Provider>
         </BrowserRouter>
       </div>
     ),

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,15 +1,16 @@
 {
   "cSpell.words": [
+    "bech32",
     "Bostrom",
     "cybercongress",
     "cyberlink",
     "cyberlinks",
+    "denoms",
     "investmint",
     "Ipfs",
     "Keplr",
     "stylelint",
-    "denoms",
-    "bech32",
+    "superintelligence",
     "websockets"
   ]
 }
diff --git a/package.json b/package.json
@@ -212,7 +212,6 @@
     "react-dom": "^18.0.0",
     "react-force-graph": "^1.39.5",
     "react-helmet": "^6.1.0",
-    "react-infinite-scroller": "^1.2.6",
     "react-localization": "^1.0.15",
     "react-markdown": "^7.1.1",
     "react-number-format": "^5.1.2",

diff --git a/src/components/ContentItem/contentItem.tsx b/src/components/ContentItem/contentItem.tsx
@@ -3,7 +3,11 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { $TsFixMe } from 'src/types/tsfix';
 import useQueueIpfsContent from 'src/hooks/useQueueIpfsContent';
-import { IPFSContentDetails, IPFSContentMaybe } from 'src/utils/ipfs/ipfs';
+import {
+  IPFSContentDetails,
+  IPFSContentMaybe,
+  IpfsContentType,
+} from 'src/utils/ipfs/ipfs';
 import { parseRawIpfsData } from 'src/utils/ipfs/content-utils';
 
 import SearchItem from '../SearchItem/searchItem';
@@ -17,29 +21,39 @@ type ContentItemProps = {
   grade?: $TsFixMe;
   className?: string;
   parent?: string;
+  setType?: (type: IpfsContentType) => void;
 };
 
 function ContentItem({
   item,
   cid,
   grade,
+  linkType,
   parent: parentId,
+  setType,
   className,
 }: ContentItemProps): JSX.Element {
-  const { status, content } = useQueueIpfsContent(cid, item.rank, parentId);
+  const { status, content } = useQueueIpfsContent(cid, item?.rank, parentId);
 
   return (
     <Link className={className} style={{ color: '#fff' }} to={`/ipfs/${cid}`}>
       <SearchItem
         key={cid}
+        linkType={linkType}
         status={status}
         grade={
-          item.rank
+          item?.rank
             ? getRankGrade(item.rank)
             : grade || { from: 'n/a', to: 'n/a', value: 'n/a' }
         }
       >
-        <ContentIpfs status={status} content={content} cid={cid} search />
+        <ContentIpfs
+          status={status}
+          content={content}
+          cid={cid}
+          search
+          setType={setType}
+        />
       </SearchItem>
     </Link>
   );

diff --git a/src/components/Dropdown/Dropdown.module.scss b/src/components/Dropdown/Dropdown.module.scss
@@ -0,0 +1,68 @@
+.dropdown {
+  display: inline-block;
+  padding: 0 15px;
+
+  > button {
+    color: var(--blue-light);
+
+    display: flex;
+    align-items: center;
+
+    &::after {
+      content: '▼';
+      font-size: 8px;
+      position: relative;
+      top: 3px;
+      margin-left: 10px;
+    }
+  }
+  position: relative;
+
+  ul {
+    margin-top: 15px;
+    &::before {
+      background-color: rgba(0, 17, 22, 0.37);
+      filter: blur(10px);
+      content: '';
+      height: 100%;
+      left: 0;
+      z-index: -1;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+    position: absolute;
+    padding: 15px;
+
+    z-index: 1;
+    left: 0;
+    right: 0;
+    list-style-type: none;
+
+    li + li {
+      margin-top: 12px;
+    }
+
+    li {
+      &.active {
+        button {
+          color: var(--blue-light);
+        }
+      }
+      transition: all 300ms ease-out;
+
+      button {
+        color: rgba(255, 255, 255, 0.5);
+
+        &:hover {
+          color: var(--blue-light);
+        }
+      }
+    }
+  }
+
+  button {
+    text-transform: lowercase;
+    font-size: 1rem;
+  }
+}
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
@@ -0,0 +1,47 @@
+/* eslint-disable import/no-unused-modules */
+
+import { Meta, StoryObj } from '@storybook/react';
+
+import { useState } from 'react';
+import Dropdown from './Dropdown';
+
+const defaultArgs = {
+  options: [
+    {
+      label: 'Rank',
+      value: 'rank',
+    },
+    {
+      label: 'Date',
+      value: 'date',
+    },
+    {
+      label: 'Size',
+      value: 'size',
+    },
+  ],
+};
+
+const meta: Meta<typeof Dropdown> = {
+  component: Dropdown,
+  title: 'atoms/Dropdown',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/7i0Ly3YF587km0F8iDZod4/cyb?type=design&node-id=20608-4734&mode=dev',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Dropdown>;
+
+function Wrapper() {
+  const [value, setValue] = useState<string>(defaultArgs.options[0].value);
+
+  return <Dropdown {...defaultArgs} value={value} onChange={setValue} />;
+}
+
+export const Main: Story = {
+  render: Wrapper,
+};
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import styles from './Dropdown.module.scss';
+import { CSSTransition } from 'react-transition-group';
+import cx from 'classnames';
+
+type Props = {
+  options: {
+    label: string;
+    value: string;
+  }[];
+
+  value: string;
+  onChange: (value: string) => void;
+};
+
+function Dropdown({ options = [], value, onChange }: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className={styles.dropdown}>
+      <button type="button" onClick={() => setIsOpen(!isOpen)}>
+        {value
+          ? options.find((option) => option.value === value)?.label
+          : options[0]?.label || 'Select'}
+      </button>
+
+      {isOpen && (
+        // <CSSTransition>
+
+        // </CSSTransition>
+        <ul>
+          {options.map(({ label, value: val }) => {
+            return (
+              <li
+                key={val}
+                className={cx({
+                  [styles.active]: val === value,
+                })}
+              >
+                <button
+                  type="button"
+                  onClick={() => {
+                    onChange(val);
+                    setIsOpen(false);
+                  }}
+                >
+                  {label}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default Dropdown;
diff --git a/src/components/PDF/index.tsx b/src/components/PDF/index.tsx
@@ -1,10 +1,16 @@
 import Iframe from '../Iframe/Iframe';
 
-function Pdf({ content, search }) {
+type Props = {
+  content: string;
+  search?: boolean;
+};
+
+function Pdf({ content, search }: Props) {
   return (
     <Iframe
       height={search ? '400px' : '700px'}
       url={content}
+
       // TODO: USE loaded content
       // url={`${CYBER.CYBER_GATEWAY}${ipfsDataDetails?.link}`}
     />

diff --git a/src/components/Rank/Rank.module.scss b/src/components/Rank/Rank.module.scss
@@ -0,0 +1,30 @@
+.rank {
+  padding: 6px 8px;
+  width: 25px;
+  height: 16px;
+  z-index: 15;
+  align-items: center;
+  color: #fff;
+  font-size: 12px;
+  border-radius: 20px;
+  justify-content: center;
+  text-align: center;
+  font-weight: 800;
+  display: flex;
+}
+
+.rank2 {
+  border: 1px solid var(--primary-color);
+  color: var(--primary-color) !important;
+  text-shadow: 0 0 5px var(--primary-color);
+  // font-size: 14px;
+  // font-size: 100;
+  border-radius: 50%;
+  // padding-bottom: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  // padding: 0px;
+  width: 16px;
+  height: 16px;
+}