{"id":28912504,"url":"https://github.com/oceanprotocol/uploader-ui-lib","last_synced_at":"2025-10-07T15:38:47.644Z","repository":{"id":189724489,"uuid":"635398191","full_name":"oceanprotocol/uploader-ui-lib","owner":"oceanprotocol","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-11T02:17:24.000Z","size":3704,"stargazers_count":2,"open_issues_count":13,"forks_count":0,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-06-13T11:52:54.528Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://uploader-ui-lib.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oceanprotocol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-02T15:56:17.000Z","updated_at":"2025-05-15T04:44:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"ad360491-b4b7-4aab-ba47-b11fd5d020a1","html_url":"https://github.com/oceanprotocol/uploader-ui-lib","commit_stats":{"total_commits":212,"total_committers":3,"mean_commits":70.66666666666667,"dds":"0.48584905660377353","last_synced_commit":"3499ff01e304d9a2c0a7c4555d5dc4163ca15de7"},"previous_names":["oceanprotocol/dbs-ui-lib","oceanprotocol/uploader-ui-lib"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/oceanprotocol/uploader-ui-lib","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oceanprotocol%2Fuploader-ui-lib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oceanprotocol%2Fuploader-ui-lib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oceanprotocol%2Fuploader-ui-lib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oceanprotocol%2Fuploader-ui-lib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oceanprotocol","download_url":"https://codeload.github.com/oceanprotocol/uploader-ui-lib/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oceanprotocol%2Fuploader-ui-lib/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261186794,"owners_count":23121949,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-21T20:11:40.603Z","updated_at":"2025-10-07T15:38:47.626Z","avatar_url":"https://github.com/oceanprotocol.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![banner](https://raw.githubusercontent.com/oceanprotocol/art/master/github/repo-banner%402x.png)](https://oceanprotocol.com)\n\n\u003ch1 align=\"center\"\u003eOcean Uploader UI Library\u003c/h1\u003e\n\n**Table of Contents**\n\n- [🏄 Get Started](#-get-started)\n- [🚀 Usage](#-usage)\n- [👩‍🎤 Storybook](#-storybook)\n- [🤖 Testing](#-testing)\n- [✨ Code Style](#-code-style)\n- [🛳 Production](#-production)\n- [⬆️ Deployment](#️-deployment)\n- [💖 Contributing](#-contributing)\n- [🏛 License](#-license)\n\n## 🏄 Get Started\n\nThe lib uses React + TypeScript + CSS modules and will connect to Ocean remote components by default.\n\nPrerequisites:\n\n- [Node.js](https://nodejs.org/en/) (required). Check the [.nvmrc](.nvmrc) file to make sure you are using the correct version of Node.js.\n- [nvm](https://github.com/nvm-sh/nvm) (recommended). This is the recommend way to manage Node.js versions.\n- [Git](https://git-scm.com/) is required to follow the instructions below.\n\nTo start local development:\n\n```bash\ngit clone git@github.com:oceanprotocol/uploader-ui-lib.git\ncd uploader-ui-lib\n\n# when using nvm to manage Node.js versions\nnvm use\n\nnpm install\n# in case of dependency errors, rather use:\n# npm install --legacy-peer-deps\n\nnpm run build:watch\n# to build the library and watch for changes.\n```\n\nRun `npm run build` from the root folder to build the library. This creates `dist` folder which contains everything that\nwould be published to npm.\n\n# if you encounter this error: Error: error:0308010C:digital envelope routines::unsupported\n\nRun `export NODE_OPTIONS=--openssl-legacy-provider` before building.\n\n## 🚀 Usage\n\nIntegrating Uploader UI into your application is straightforward. The package facilitates seamless uploads but requires a wallet connector library to function optimally. Compatible wallet connection choices include [ConnectKit](https://docs.family.co/), [Web3Modal](https://web3modal.com/), [Dynamic](https://dynamic.xyz/) and [RainbowKit](https://www.rainbowkit.com/docs/installation).\n\n**Step 1:** Install the necessary packages. For instance, if you're using ConnectKit, the installation command would be:\n\n```bash\nnpm install connectkit @oceanprotocol/uploader-ui-lib\n```\n\n**Step 2:** Incorporate the DBSComponent from the uploader-ui-lib into your app. It's crucial to ensure the component is nested within both the WagmiConfig and ConnectKit providers. Here's a basic implementation:\n\n```bash\nimport React from 'react'\nimport { WagmiConfig, createConfig } from 'wagmi'\nimport { polygon } from 'wagmi/chains'\nimport {\n  ConnectKitProvider,\n  getDefaultConfig,\n  ConnectKitButton\n} from 'connectkit'\nimport DBSComponent from 'uploader-ui-lib'\n\nexport default function App () {\n  // Initialize the Wagmi client\n  const wagmiConfig = createConfig(\n    getDefaultConfig({\n      appName: 'Ocean Uploader UI',\n      infuraId: 'Your infura ID',\n      chains: [polygon],\n      walletConnectProjectId: 'Your wallet connect project ID'\n    })\n  )\n\n  return (\n    \u003cWagmiConfig config={wagmiConfig}\u003e\n      \u003cConnectKitProvider\u003e\n        {/* Your App */}\n        \u003cConnectKitButton /\u003e\n        \u003cDBSComponent\n          dbs_url=\"https://dbs.oceanprotocol.com\"\n          dbs_account=\"0x21F2B4d705aC448c9Ff96694Dd9e5901F79f1Ab2\"\n        /\u003e\n      \u003c/ConnectKitProvider\u003e\n    \u003c/WagmiConfig\u003e\n  )\n}\n\n```\n\nBy following the steps above, you can smoothly incorporate the Uploader UI into your application while ensuring the essential providers wrap the necessary components.\n\nAlternatively, the example below shows how you could use uploader-ui-lib with RainbowKit:\n\n```bash\nimport React from 'react'\nimport { WagmiConfig, createConfig } from 'wagmi'\nimport { polygon } from 'wagmi/chains'\nimport { RainbowKitProvider, ConnectButton } from '@rainbow-me/rainbowkit';\nimport DBSComponent from 'uploader-ui-lib'\n\nexport default function App () {\n  // Initialize the Wagmi client\n  const wagmiConfig = createConfig(\n    getDefaultConfig({\n      appName: 'Ocean Uploader UI',\n      infuraId: 'Your infura ID',\n      chains: [polygon],\n      walletConnectProjectId: 'Your wallet connect project ID'\n    })\n  )\n\n  return (\n    \u003cWagmiConfig config={wagmiConfig}\u003e\n      \u003cRainbowKitProvider\u003e\n        {/* Your App */}\n        \u003cConnectButton /\u003e\n        \u003cDBSComponent\n          dbs_url=\"https://dbs.oceanprotocol.com\"\n          dbs_account=\"0x21F2B4d705aC448c9Ff96694Dd9e5901F79f1Ab2\"\n        /\u003e\n      \u003c/RainbowKitProvider\u003e\n    \u003c/WagmiConfig\u003e\n  )\n}\n\n```\n\n\\*\\* under development\n\n## NextJS Setup for Ocean Protocol Uploader UI Library\n\nTo configure NextJS for the integration of Ocean's Uploader UI library, modify your `next.config.js` file to include these fallbacks:\n\n```javascript\nmodule.exports = {\n  webpack: (config) =\u003e {\n    config.resolve.fallback = {\n      fs: false,\n      process: false,\n      net: false,\n      tls: false\n    }\n    return config\n  }\n}\n```\n\n\\*\\* add these fallbacks to avoid any issue related to webpack 5 Polyfills imcompatibility: https://github.com/webpack/changelog-v5#automatic-nodejs-polyfills-removed\n\ninstall dependencies:\n\n```javascript\n\u003e npm install @oceanprotocol/uploader-ui-lib\n```\n\nImport the library's CSS into your project:\n\n```javascript\n\u003e import '@oceanprotocol/uploader-ui-lib/dist/index.es.css';\n```\n\nDynamically import the Uploader component and ensure it is not processed during server-side rendering (SSR) using the next/dynamic function:\n\n```javascript\nimport dynamic from 'next/dynamic';\n...\n\nconst Uploader = dynamic(() =\u003e import('@oceanprotocol/uploader-ui-lib').then((module) =\u003e module.Uploader), { ssr: false });\n```\n\nWhen 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:\n\n```javascript\n'use client'\nimport dynamic from 'next/dynamic'\n```\n\nThis comprehensive setup ensures the proper integration and functioning of the Ocean Protocol's Uploader UI library within a NextJS application.\n\n## 👩‍🎤 Storybook\n\nStorybook 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.\n\nTo start adding stories, create a `index.stories.tsx` inside the component's folder:\n\n\u003cpre\u003e\nsrc\n└─── components\n│   └─── \u003cyour component\u003e\n│            │   index.tsx\n│            │   index.module.css\n│            │   \u003cb\u003eindex.stories.tsx\u003c/b\u003e\n│            │   index.test.tsx\n\u003c/pre\u003e\n\nStarting up the Storybook server with this command will make it accessible under `http://localhost:6006`:\n\n```bash\nnpm run storybook\n```\n\nIf you want to build a portable static version under `storybook-static/`:\n\n```bash\nnpm run storybook:build\n```\n\n## 🤖 Testing\n\nTest runs utilize [Jest](https://jestjs.io/) as test runner and [Testing Library](https://testing-library.com/docs/react-testing-library/intro) for writing tests.\n\nExecuting a full test run:\n\n```bash\nnpm test\n```\n\nDuring local development you can continuously get coverage report feedback in your console by running Jest in watch mode:\n\n```bash\nnpm test:watch\n```\n\n## ✨ Code Style\n\nCode style is automatically enforced through [ESLint](https://eslint.org) \u0026 [Prettier](https://prettier.io) rules:\n\nFor running linting and auto-formatting, you can use from the root of the project:\n\n```bash\n# linting check\nnpm run lint\n\n# auto format all files in the project with prettier, taking all configs into account\nnpm run format\n```\n\n## 🛳 Production\n\nTo create a production build, run from the root of the project:\n\n```bash\nnpm run build\n```\n\n## ⬆️ Deployment\n\nTBD\n\n## 💖 Contributing\n\nWe welcome contributions in form of bug reports, feature requests, code changes, or documentation improvements. Have a look at our contribution documentation for instructions and workflows:\n\n- [**Ways to Contribute →**](https://docs.oceanprotocol.com/contribute)\n- [Code of Conduct →](https://docs.oceanprotocol.com/contribute/code-of-conduct)\n- [Reporting Vulnerabilities →](https://docs.oceanprotocol.com/contribute#report-vulnerabilities)\n\n## ⬆️ Releases\n\nReleases are managed semi-automatically. They are always manually triggered from a developer's machine with release scripts.\n\nFor the GitHub releases steps a GitHub personal access token, exported as `GITHUB_TOKEN` is required. [Setup](https://github.com/release-it/release-it#github-releases)\n\n```bash\nexport GITHUB_TOKEN=\"ghp_abc123abc123abc123abc123abc123abc123\"\nnpm run release\n```\n\nThe task does the following:\n\n- bumps the project version in `package.json`, `package-lock.json`\n- auto-generates and updates the CHANGELOG.md file from commit messages\n- creates a Git tag\n- commits and pushes everything\n- creates a GitHub release with commit messages as description\n- Git tag push will trigger a GitHub Action workflow to do a npm release\n\n## 🏛 License\n\n```text\nCopyright 2023 Ocean Protocol Foundation Ltd.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foceanprotocol%2Fuploader-ui-lib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foceanprotocol%2Fuploader-ui-lib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foceanprotocol%2Fuploader-ui-lib/lists"}