Merge pull request #84 from oceanprotocol/fix/issue-83-refactor-dbs-u…

…ploader

refactor code to remove refs to dbs

.example.env

@@ -0,0 +1,7 @@
+# WALLET
+PUBLIC_INFURA_PROJECT_ID=""
+PUBLIC_WALLETCONNECT_PROJECT_ID=""
+
+# DBS
+UPLOADER_URL=""
+UPLOADER_ACCOUNT=""

.storybook/main.ts

@@ -7,8 +7,8 @@ module.exports = {
   addons: ['@storybook/addon-essentials', 'storybook-css-modules-preset'],
   env: (config) => ({
     ...config,
-    DBS_URL: process.env.DBS_URL,
-    DBS_ACCOUNT: process.env.DBS_ACCOUNT,
+    UPLOADER_URL: process.env.UPLOADER_URL, 
+    UPLOADER_ACCOUNT: process.env.UPLOADER_ACCOUNT,
     PUBLIC_INFURA_PROJECT_ID: process.env.PUBLIC_INFURA_PROJECT_ID,
     PUBLIC_WALLETCONNECT_PROJECT_ID: process.env.PUBLIC_WALLETCONNECT_PROJECT_ID,
   }),

.storybook/oceanTheme.js

@@ -1,8 +1,8 @@
 import { create } from '@storybook/theming/create';
 
 export default create({
-  brandTitle: 'Ocean DBS UI Library',
-  brandUrl: 'https://github.com/oceanprotocol/dbs-ui-lib',
+  brandTitle: 'Ocean Uploader UI Library',
+  brandUrl: 'https://github.com/oceanprotocol/uploader-ui-lib',
   brandImage: 'https://oceanprotocol.com/static/2db93b91a20e45673d4116ee79532142/logo-white.svg',
   brandTarget: '_self',
 });

README.md

@@ -49,14 +49,15 @@ Run `export NODE_OPTIONS=--openssl-legacy-provider` before building.
 
 ## 🚀 Usage
 
-Import and use the Uploader UI components in your app:
+Import and use the Uploader UI components in your app**:
 
 ```bash
-import { DBSUploader } from '@oceanprotocol/uploader-ui-lib';
+import { Uploader } from '@oceanprotocol/uploader-ui-lib';
+import '@oceanprotocol/uploader-ui-lib/dist/index.es.css';
 
-<DBSUploader 
-   dbs_url={process.env.DBS_URL}
-   dbs_account={process.env.DBS_ACCOUNT}
+<Uploader 
+   uploader_url={process.env.UPLOADER_URL}
+   uploader_account={process.env.UPLOADER_ACCOUNT}
    infuraId={process.env.PUBLIC_INFURA_PROJECT_ID}
    walletConnectProjectId={process.env.PUBLIC_WALLETCONNECT_PROJECT_ID}
 />
@@ -66,13 +67,63 @@ To enable the functionality of Ocean Uploader, the following setting variables n
 
 | Variable                | Description                                           |
 |-------------------------|-------------------------------------------------------|
-| `dbs_url`               | URL for Uploader service communication                    |
-| `dbs_account`           | Account info for Uploader authentication                  |
+| `uploader_url`               | URL for Uploader service communication                    |
+| `uploader_account`           | Account info for Uploader authentication                  |
 | `infuraId`              | Project ID for Ethereum access via Infura            |
 | `walletConnectProjectId`| Project ID for WalletConnect integration             |
 
 These variables are needed to interact with the Uploader service, provide authentication credentials, access the Ethereum network through Infura, and enable integration with WalletConnect. 
 
+** under development
+
+## NextJS Setup for Ocean Protocol Uploader UI Library
+
+To configure NextJS for the integration of Ocean's Uploader UI library, modify your `next.config.js` file to include these fallbacks:
+
+```javascript
+module.exports = {
+  webpack: (config) => {
+    config.resolve.fallback = { 
+      fs: false,
+      process: false,
+      net: false,
+      tls: false
+    };
+    return config;
+  },
+};
+```
+** add these fallbacks to avoid any issue related to webpack 5 Polyfills imcompatibility: https://github.com/webpack/changelog-v5#automatic-nodejs-polyfills-removed
+
+install dependencies:
+
+```javascript
+> npm install @oceanprotocol/uploader-ui-lib
+```
+
+Import the library's CSS into your project:
+```javascript
+> import '@oceanprotocol/uploader-ui-lib/dist/index.es.css';
+```
+
+Dynamically import the Uploader component and ensure it is not processed during server-side rendering (SSR) using the next/dynamic function:
+
+```javascript
+import dynamic from 'next/dynamic';
+...
+
+const Uploader = dynamic(() => import('@oceanprotocol/uploader-ui-lib').then((module) => module.Uploader), { ssr: false });
+```
+
+When incorporating the Uploader component into your application, make sure to set 'use client' on top in your app's component. This ensures that the component operates on the client side, bypassing SSR when rendering:
+
+```javascript
+'use client'
+import dynamic from 'next/dynamic';
+```
+
+This comprehensive setup ensures the proper integration and functioning of the Ocean Protocol's Uploader UI library within a NextJS application.
+
 ## 👩‍🎤 Storybook
 
 Storybook helps us build UI components in isolation from our app's business logic, data, and context. That makes it easy to develop hard-to-reach states and save these UI states as stories to revisit during development, testing, or QA.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanprotocol/uploader-ui-lib",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Ocean Uploader component library",
   "repository": {
     "type": "git",

src/@types/TabsFile.d.ts

@@ -1,6 +1,7 @@
+import { UploaderClient } from "@oceanprotocol/uploader"
 
 interface TabsProps {
-    items: dbs_setting[]
+    items: uploader_setting[]
     className?: string
-    dbsClient: DBSClient
+    uploaderClient: UploaderClient
 }

src/@types/DBSComponent.d.ts → src/@types/UploaderConnection.d.ts

@@ -9,13 +9,13 @@ interface payment {
     acceptedTokens: acceptedTokens[]
 }
 
-interface dbs_setting {
+interface uploader_setting {
     type: string,
     description: string
     payment: payment[]
 }
 
-interface dbsParams {
-    dbs_url: string
-    dbs_account: string
+interface uploaderParams {
+    uploader_url: string
+    uploader_account: string
 }

src/components/HistoryList/index.tsx

@@ -50,7 +50,6 @@ const HistoryList = ({
             <tr>
               <th>Quote ID</th>
               <th>Status Message</th>
-              <th>Status Code</th>
               <th>DDO Link</th>
               <th>{'Preview'}</th>
             </tr>
@@ -60,7 +59,6 @@ const HistoryList = ({
               <tr key={`table_uploads_${items[tabIndex].type}_${index}`}>
                 <td>{addEllipsesToText(file.quoteId, 15)}</td>
                 <td>{getStatusMessage(file.status, items[tabIndex].type)}</td>
-                <td>{file.status}</td>
                 <td>{file?.transactionHash || file?.cid}</td>
                 <td>
                   <Button

src/components/TabsFile/index.tsx

@@ -20,11 +20,12 @@ import HistoryList from '../HistoryList'
 import { addEllipsesToText } from '../../@utils/textFormat'
 import { getStatusMessage } from '../../@utils/statusCode'
 import { truncateAddress } from '../../@utils/truncateAddress'
+import { TabsProps } from '../../@types/TabsFile'
 
 export default function TabsFile({
   items,
   className,
-  dbsClient
+  uploaderClient
 }: TabsProps): ReactElement {
   const [values, setFieldValue] = useState() as any;
   const initialState = () => {
@@ -167,7 +168,7 @@ export default function TabsFile({
   const getQuote = async ({ type, duration, payment, userAddress, filePath, fileInfo}: GetQuoteArgs) => {
     try {
       console.log('quoting: ', { type, duration, payment, userAddress, filePath, fileInfo });
-      const quoteResult: GetQuoteResult = await dbsClient.getQuote({
+      const quoteResult: GetQuoteResult = await uploaderClient.getQuote({
         type,
         duration,
         payment,
@@ -189,7 +190,7 @@ export default function TabsFile({
   async function getStatus(quoteId: string){
     try {
       console.log('get status: ', { quoteId });
-      const statusResult: GetStatusResult = await dbsClient.getStatus(
+      const statusResult: GetStatusResult = await uploaderClient.getStatus(
         quoteId
       )
       console.log('status result:', statusResult)
@@ -222,7 +223,7 @@ export default function TabsFile({
   const getUpload = async ({ quoteId, payment, quoteFee, files, type}: any) => {
     try {
       console.log('uploading: ', { quoteId, payment, quoteFee, files, type});
-      const quoteAndUploadResult: any = await dbsClient.uploadBrowser(
+      const quoteAndUploadResult: any = await uploaderClient.uploadBrowser(
         quoteId,
         payment,
         String(quoteFee),
@@ -249,7 +250,7 @@ export default function TabsFile({
   const getDDOlink = async (quoteId: any) => {
     try {
       console.log('get DDO link: ', quoteId);
-      const linkResult: GetLinkResult[] = await dbsClient.getLink(quoteId)
+      const linkResult: GetLinkResult[] = await uploaderClient.getLink(quoteId)
       console.log('ddo link result:', linkResult)
       setDDOLink(linkResult[0].transactionHash || linkResult[0].CID || '');
       setUploadIsLoading(false);
@@ -329,7 +330,7 @@ export default function TabsFile({
   const getHistoryList = async (pageNumber = 1, pageSize = 1000, service = items[tabIndex].type) => {
     setHistoryLoading(true);
     try {
-      const historyList = await dbsClient.getHistory(pageNumber, pageSize, service)
+      const historyList = await uploaderClient.getHistory(pageNumber, pageSize, service)
       console.log('history result: ', historyList)
       setTotalPagesHistory(historyList?.maxPages);
       setHistoryList(historyList?.data);

src/components/Uploader/index.stories.tsx

@@ -0,0 +1,26 @@
+require('dotenv').config()
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import Uploader from "./index";
+
+export default {
+  title: "Uploader UI Library/Uploader",
+  component: Uploader,
+  parameters:{
+    controls:{
+      exclude:/.*/g
+    }
+  }
+} as Meta<typeof Uploader>;
+
+const Template: StoryFn<typeof Uploader> = (args) => <Uploader {...args} />;
+
+export const UploaderArgs = Template.bind({});
+console.log('Uploader starting in: ', process.env.UPLOADER_URL, process.env.UPLOADER_ACCOUNT);
+
+UploaderArgs.args = { 
+    uploader_url: process.env.UPLOADER_URL, 
+    uploader_account: process.env.UPLOADER_ACCOUNT,
+    infuraId: process.env.PUBLIC_INFURA_PROJECT_ID,
+    walletConnectProjectId: process.env.PUBLIC_WALLETCONNECT_PROJECT_ID,
+};

src/components/DBSUploader/index.tsx → src/components/Uploader/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { WagmiConfig, createConfig } from 'wagmi'
 import { polygon, polygonMumbai } from 'wagmi/chains'
 import { ConnectKitProvider, getDefaultConfig } from 'connectkit'
-import DBSComponent from '../DBSComponent'
+import UploaderConnection from '../UploaderConnection'
 
 // ConnectKit CSS overrides
 // https://docs.family.co/connectkit/theming#theme-variables
@@ -23,11 +23,11 @@ export const connectKitTheme = {
 type web3Params = {
     infuraId: string
     walletConnectProjectId: string
-    dbs_url: string
-    dbs_account: string
+    uploader_url: string
+    uploader_account: string
 }
 
-const DBSUploader = ({ infuraId, walletConnectProjectId, dbs_url, dbs_account }: web3Params) => {
+const Uploader = ({ infuraId, walletConnectProjectId, uploader_url, uploader_account }: web3Params) => {
 
   // Initialize the Wagmi client
   const wagmiConfig = createConfig(
@@ -45,10 +45,10 @@ const DBSUploader = ({ infuraId, walletConnectProjectId, dbs_url, dbs_account }:
             options={{ initialChainId: 137 }}
             customTheme={connectKitTheme}
         >
-            <DBSComponent dbs_url={dbs_url} dbs_account={dbs_account}/>
+            <UploaderConnection uploader_url={uploader_url} uploader_account={uploader_account}/>
       </ConnectKitProvider>
     </WagmiConfig>
   )
 }
 
-export default DBSUploader
+export default Uploader

src/components/UploaderConnection/index.module.css

@@ -0,0 +1,3 @@
+.UploaderConnection {
+  padding: 15px;
+}

src/components/DBSComponent/index.tsx → src/components/UploaderConnection/index.tsx

@@ -2,21 +2,21 @@ import React, { useEffect } from 'react'
 import { useEthersSigner } from '../../@utils/useEthersSigner'
 
 import '../../stylesGlobal/styles.css'
-import './index.module.css'
+import styles from './index.module.css'
 import TabsFile from '../TabsFile'
 
 import {UploaderClient} from '@oceanprotocol/uploader';
 
-const DBSComponent = ({ dbs_url, dbs_account }: dbsParams) => {
-  const [ DBSsettings, setDBSsettings ] = React.useState([])
+const UploaderConnection = ({ uploader_url, uploader_account }: uploaderParams) => {
+  const [ uploaderSettings, setUploaderSettings ] = React.useState([])
   const [ loading, setLoading ] = React.useState(true)
   const signer = useEthersSigner()
 
   // TODO: fix any type
-  const client = new UploaderClient(dbs_url, dbs_account, signer);
+  const client = new UploaderClient(uploader_url, uploader_account, signer);
   // Fetch storage info
   useEffect(() => {
-    // Fetch storage info from DBS endpoint
+    // Fetch storage info from Uploader endpoint
     const getStorageInfo = async () => {
       try {
         const storageInfo = await client.getStorageInfo();
@@ -29,28 +29,27 @@ const DBSComponent = ({ dbs_url, dbs_account }: dbsParams) => {
     }
     // Fetch storage info
     getStorageInfo().then((storageInfo: any) => {
-      // TODO: fix error on DBS.js when endpoint is empty / unavailable / wrong
-      setDBSsettings(storageInfo)
+      // TODO: fix error on Uploader.js when endpoint is empty / unavailable / wrong
+      setUploaderSettings(storageInfo)
       setLoading(false)
     }).catch((err) => {
       console.log(err);
     })
   }, [signer])
 
   return (
-    <div className="DBSComponent">
-      <h1>Ocean Uploader</h1>  
-      { DBSsettings.length === 0 && loading && <div>Loading...</div> }
-      { DBSsettings.length > 0 && 
-        <TabsFile items={DBSsettings as dbs_setting[]} dbsClient={client} />
+    <div className={styles.UploaderConnection}>
+      { uploaderSettings.length === 0 && loading && <div>Loading...</div> }
+      { uploaderSettings.length > 0 && 
+        <TabsFile items={uploaderSettings as uploader_setting[]} uploaderClient={client} />
       }
       {
-        DBSsettings.length === 0 && !loading && (
-          <p>DBS Not available</p>
+        uploaderSettings.length === 0 && !loading && (
+          <p>Uploader Not available</p>
         )
       }
     </div>
   )
 }
 
-export default DBSComponent
+export default UploaderConnection