add orbis context

package.json

@@ -29,6 +29,7 @@
     "@oceanprotocol/lib": "^2.0.2",
     "@oceanprotocol/typographies": "^0.1.0",
     "@oceanprotocol/use-dark-mode": "^2.4.3",
+    "@orbisclub/orbis-sdk": "^0.3.46",
     "@tippyjs/react": "^4.2.6",
     "@urql/exchange-refocus": "^1.0.0",
     "@walletconnect/web3-provider": "^1.8.0",

src/@context/Orbis.tsx

@@ -0,0 +1,66 @@
+import React, {
+  useContext,
+  createContext,
+  useState,
+  useEffect,
+  ReactNode,
+  ReactElement
+} from 'react'
+import { sleep } from '@utils/index'
+import { Orbis } from '@orbisclub/orbis-sdk'
+
+const OrbisContext = createContext(null)
+
+function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
+  const [orbis, setOrbis] = useState<OrbisInterface>()
+  const [account, setAccount] = useState<AccountInterface>()
+
+  // Connecting to Orbis
+  const connectOrbis = async (): Promise<void> => {
+    if (!orbis) return
+
+    const res = await orbis.connect()
+    if (res.status !== 200) {
+      await sleep(2000)
+      connectOrbis()
+    } else {
+      setAccount(res)
+    }
+  }
+
+  // Init Orbis
+  useEffect(() => {
+    const _orbis = new Orbis()
+    setOrbis(_orbis)
+  }, [])
+
+  // Check if already has ceramic-session
+  useEffect(() => {
+    if (!orbis) return
+
+    const isConnected = async (): Promise<void> => {
+      const res = await orbis.isConnected()
+
+      if (res.status !== 200) {
+        await sleep(2000)
+        isConnected()
+      } else {
+        setAccount(res)
+      }
+    }
+
+    isConnected()
+  }, [orbis])
+
+  return (
+    <OrbisContext.Provider value={{ orbis, account, connectOrbis }}>
+      {children}
+    </OrbisContext.Provider>
+  )
+}
+
+const useOrbis = () => {
+  return useContext(OrbisContext)
+}
+
+export { OrbisProvider, useOrbis }

src/@images/chatbubble.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+</svg>
+
+<svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-1.6 -1.6 19.2 19.2">
+  <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 01-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM5 8a1 1 0 10-2 0 1 1 0 002 0zm4 0a1 1 0 10-2 0 1 1 0 002 0zm3 1a1 1 0 100-2 1 1 0 000 2z" />
+</svg>

src/@images/chevrondoubleup.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="24" height="24">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+</svg>
+

src/@types/Orbis.d.ts

@@ -0,0 +1,60 @@
+// import { CeramicClient } from '@ceramicnetwork/http-client'
+// import type { SupabaseClient } from '@supabase/supabase-js'
+
+declare module '@orbisclub/orbis-sdk'
+
+interface OrbisInterface {
+  connect: function
+  connectLit: function
+  connectWithSeed: function
+  createChannel: function
+  createContext: function
+  createConversation: function
+  createGroup: function
+  createPost: function
+  createTileDocument: function
+  decryptMessage: function
+  decryptPost: function
+  deletePost: function
+  deterministicDocument: function
+  editPost: function
+  getChannel: function
+  getConversation: function
+  getConversations: function
+  getDids: function
+  getGroup: function
+  getGroupMembers: function
+  getGroups: function
+  getIsFollowing: function
+  getIsGroupMember: function
+  getMessages: function
+  getNotifications: function
+  getPost: function
+  getPosts: function
+  getProfile: function
+  getProfileFollowers: function
+  getProfileFollowing: function
+  getProfileGroups: function
+  getProfilesByUsername: function
+  isConnected: function
+  logout: function
+  react: function
+  sendMessage: function
+  setFollow: function
+  setGroupMember: function
+  setNotificationsReadTime: function
+  testConnectSolana: function
+  updateChannel: function
+  updateContext: function
+  updateGroup: function
+  updatePost: function
+  updateProfile: function
+  updateTileDocument: function
+}
+
+interface AccountInterface {
+  details: object
+  did: string
+  result: string
+  status: number
+}

src/components/@shared/Orbis/Conversation/index.module.css

@@ -0,0 +1,54 @@
+.conversation {
+  position: fixed;
+  width: 400px;
+  display: flex;
+  justify-content: flex-end;
+  right: calc(var(--spacer) / 3);
+  bottom: calc(var(--spacer) / 3);
+  z-index: 20;
+}
+
+.toggler {
+  width: 3.5rem;
+  height: 3.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 1px solid var(--border-color);
+  border-radius: 50%;
+  margin-left: calc(var(--spacer) / 3);
+  background-color: var(--background-content);
+  white-space: nowrap;
+}
+
+.toggler svg {
+  fill: var(--brand-grey-light);
+  transition: 0.2s ease-out;
+  width: 1.75em;
+}
+
+.toggler:hover svg {
+  fill: var(--font-color-text);
+}
+
+.box {
+  height: 600px;
+  max-height: 100%;
+  width: 350px;
+  max-width: 100%;
+}
+
+@media screen and (min-width: 42rem) {
+  .conversation {
+    right: calc(var(--spacer) / 2);
+    bottom: calc(var(--spacer) / 2);
+  }
+}
+
+@media screen and (min-width: 55rem) {
+  .conversation {
+    right: var(--spacer);
+    bottom: var(--spacer);
+  }
+}

src/components/@shared/Orbis/Conversation/index.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+import Tooltip from '@shared/atoms/Tooltip'
+import ChatBubble from '@images/chatbubble.svg'
+import styles from './index.module.css'
+
+export default function FloatingChat() {
+  const [opened, setOpened] = useState(false)
+
+  return (
+    <div className={`${styles.conversation}`}>
+      <Tooltip
+        content={
+          <div className={styles.box}>
+            <div className={styles.header}>Header</div>
+            <div className={styles.body}>Messages</div>
+            <div className={styles.footer}>Postbox</div>
+          </div>
+        }
+        trigger="click focus"
+        className={styles.toggler}
+        placement="top-end"
+      >
+        <ChatBubble aria-label="Messages" className={styles.icon} />
+      </Tooltip>
+    </div>
+  )
+}

src/components/@shared/Orbis/FloatingChat/index.module.css

@@ -0,0 +1,76 @@
+.wrapper {
+  width: 100%;
+  padding: 0 calc(var(--spacer) / 3);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition: all 300ms ease 0s;
+  pointer-events: none;
+  z-index: 20;
+}
+
+.floating {
+  pointer-events: auto;
+  width: 100%;
+  max-width: 400px;
+  height: 530px;
+  max-height: 80vh;
+  background-color: var(--brand-black);
+  border: 1px solid var(--border-color);
+  border-bottom: 0;
+  border-radius: var(--border-radius);
+  transform: translateY(0);
+  transition: all 0.3s ease-in-out;
+}
+
+.isClosed {
+  transform: translateY(90%);
+}
+
+.header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  padding: calc(0.35 * var(--spacer)) var(--spacer);
+  border-bottom: 1px solid var(--border-color);
+  box-shadow: var(--box-shadow);
+  font-size: var(--font-size-h5);
+  font-weight: var(--font-weight-bold);
+}
+
+.icon {
+  margin-left: 0;
+  width: 1.5rem;
+  margin-right: calc(0.5 * var(--spacer));
+}
+
+.toggle {
+  cursor: pointer;
+  margin-left: auto;
+  background: transparent;
+  border: none;
+  color: var(--font-color-text);
+  width: 32px;
+  height: 32px;
+}
+
+.isFlipped {
+  transform: scaleY(-1);
+}
+
+@media screen and (min-width: 42rem) {
+  .wrapper {
+    padding: 0 calc(var(--spacer) / 2);
+  }
+}
+
+@media screen and (min-width: 55rem) {
+  .wrapper {
+    padding: 0 var(--spacer);
+  }
+}

src/components/@shared/Orbis/FloatingChat/index.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import ChatBubble from '@images/chatbubble.svg'
+import ChevronDoubleUp from '@images/chevrondoubleup.svg'
+import styles from './index.module.css'
+
+export default function FloatingChat() {
+  const [opened, setOpened] = useState(false)
+
+  return (
+    <div className={`${styles.wrapper} ${!opened && styles.isClosed}`}>
+      <div className={styles.floating}>
+        <div className={styles.header}>
+          <ChatBubble role="img" aria-label="Chat" className={styles.icon} />
+          <span>Messages</span>
+          <button
+            type="button"
+            className={styles.toggle}
+            onClick={() => setOpened(!opened)}
+          >
+            <ChevronDoubleUp
+              role="img"
+              aria-label="Toggle"
+              className={`${styles.icon} ${opened && styles.isFlipped}`}
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/@shared/Orbis/Message.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function Message() {
+  return <div>Message</div>
+}

src/components/App/index.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react'
 import Alert from '@shared/atoms/Alert'
 import Footer from '../Footer/Footer'
 import Header from '../Header'
+import Conversation from '@shared/Orbis/Conversation'
 import { useWeb3 } from '@context/Web3'
 import { useAccountPurgatory } from '@hooks/useAccountPurgatory'
 import AnnouncementBanner from '@shared/AnnouncementBanner'
@@ -38,6 +39,8 @@ export default function App({
       <main className={styles.main}>{children}</main>
       <Footer />
 
+      <Conversation />
+
       {appConfig?.privacyPreferenceCenter === 'true' && (
         <PrivacyPreferenceCenter style="small" />
       )}

src/components/Asset/AssetContent/index.tsx

@@ -4,6 +4,7 @@ import MetaFull from './MetaFull'
 import MetaSecondary from './MetaSecondary'
 import AssetActions from '../AssetActions'
 import { useUserPreferences } from '@context/UserPreferences'
+import { useOrbis } from '@context/Orbis'
 import Bookmark from './Bookmark'
 import { useAsset } from '@context/Asset'
 import Alert from '@shared/atoms/Alert'
@@ -22,6 +23,7 @@ export default function AssetContent({
   asset: AssetExtended
 }): ReactElement {
   const { isInPurgatory, purgatoryData, isOwner, isAssetNetwork } = useAsset()
+  const { account, connectOrbis } = useOrbis()
   const { debug } = useUserPreferences()
   const [receipts, setReceipts] = useState([])
   const [nftPublisher, setNftPublisher] = useState<string>()
@@ -34,6 +36,10 @@ export default function AssetContent({
     )
   }, [receipts])
 
+  useEffect(() => {
+    console.log(account)
+  }, [account])
+
   return (
     <>
       <div className={styles.networkWrap}>
@@ -67,6 +73,10 @@ export default function AssetContent({
             <EditHistory receipts={receipts} setReceipts={setReceipts} />
             {debug === true && <DebugOutput title="DDO" output={asset} />}
           </div>
+
+          <div>
+            <button onClick={() => connectOrbis()}>Connect Orbis</button>
+          </div>
         </div>
 
         <div className={styles.actions}>

src/pages/_app.tsx

@@ -6,6 +6,7 @@ import { UserPreferencesProvider } from '@context/UserPreferences'
 import PricesProvider from '@context/Prices'
 import UrqlProvider from '@context/UrqlProvider'
 import ConsentProvider from '@context/CookieConsent'
+import { OrbisProvider } from '@context/Orbis'
 import App from 'src/components/App'
 
 import '@oceanprotocol/typographies/css/ocean-typo.css'
@@ -22,9 +23,11 @@ function MyApp({ Component, pageProps }: AppProps): ReactElement {
           <UserPreferencesProvider>
             <PricesProvider>
               <ConsentProvider>
-                <App>
-                  <Component {...pageProps} />
-                </App>
+                <OrbisProvider>
+                  <App>
+                    <Component {...pageProps} />
+                  </App>
+                </OrbisProvider>
               </ConsentProvider>
             </PricesProvider>
           </UserPreferencesProvider>