Revert "Removed Ocean Market & Predictoor Docs"

This reverts commit b11296130a.
This commit is contained in:
Andrea 2024-04-12 08:54:27 +01:00
parent b11296130a
commit bed4e30d6a
7 changed files with 463 additions and 0 deletions

View File

@ -0,0 +1,46 @@
---
title: Forking Ocean Market
description: Forking and customizing Ocean Market (Frontend)
---
# Build a Marketplace
## Outcome
Your own fully functioning customized fork of Ocean Market is deployed and working.
## Introduction
Have you ever thought about monetizing digital assets over the blockchain? Your first instinct might be to head on over to a popular marketplace - but why not create your own marketplace? Its a lot easier than you might imagine. This guide will cover everything you need to start your own blockchain marketplace in less than an hour. The reason its so easy is that well be starting with a fork of Ocean Market, which provides us with some pretty cool tech under-the-hood (if youre interested in blockchain, read on).
Using Ocean Market is already a big improvement on the alternatives that are out there, but it gets even better. Ocean Market is completely open-source and freely available under the Apache 2 license. This means that you can fork Ocean Market and set up your own marketplace in just a few steps. Ocean Market is primarily focused on monetizing data, but it can actually handle the sale of any digital asset. This guide will walk you through the process of forking Ocean Market and starting your own marketplace for selling photos; youll be surprised how easy it is. No prior blockchain knowledge is required!
## Content
The tutorial covers:
* [Forking and running Ocean Market locally](forking-ocean-market.md)
* [Customizing your fork of Ocean market](customising-your-market.md)
* [Quick deployment of Ocean Market](deploying-market.md)
## Preparation
**Prior knowledge**
If youre completely unfamiliar with Ocean Market or web3 applications in general, you will benefit from reading these guides first:
* To use your clone of Ocean Market, youll need a [wallet](../../user-guides/wallets/README.md). We recommend [getting set up with metamask](../../user-guides/wallets/metamask-setup.md).
* Youll also need some [OCEAN on a testnet](../../user-guides/wallets-and-ocean.md) to use your marketplace.
* When you have the testnet tokens, have a go at [publishing a data NFT](../../user-guides/publish-data-nfts.md) on Ocean Market.
* Run through the process of [consuming a data asset](../../user-guides/buy-data-nfts.md) on Ocean Market.
**Required Prerequisites**
* Git. Instructions for installing Git can be found [here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git).
* Node.js can be downloaded from [here](https://nodejs.org/en/download/) (were using version 18 in this guide)
* A decent code editor, such as [Visual Studio Code](https://code.visualstudio.com/).
* Youll need a Github account to fork Ocean Market via [Github](https://github.com/).
{% hint style="warning" %}
Let's emphasize an important aspect of building dApps. It's crucial to keep in mind that practically everything can be added to the blockchain 😵 When you integrate with these components, it becomes **crucial** for you, as a developer, to ensure **proper sanitization** of the responses on your end. This means you should carefully **validate and filter** the data received to **prevent** any potential vulnerabilities or security risks in your applications.
{% endhint %}

View File

@ -0,0 +1,211 @@
---
title: Customising Market
description: Step by step guide to customizing your fork of Ocean market
---
# Customising a Market
So youve got a fully functioning data marketplace at this point, which is pretty cool. But it doesnt really look like your data marketplace. Right now, its still just a clone of Ocean Market — the same branding, name, logo, etc. The next few steps focus on personalizing your data marketplace.
* Change your Market Name
* Change the Logo
* Change the Styling
* Edit the Publish Form
* Advanced customization
## Change your Market Name
Its now time to open up your favorite code editor and start getting stuck into the code. The first thing we will be doing is changing the name of your marketplace. A decent code editor (such as VS Code) makes this incredibly simple by searching and replacing all the places where the name appears.
Lets start by searching and replacing `Ocean Marketplace`. In VS Code there is a magnifying glass symbol in the left-hand panel (arrow 1 in the image below) that will open up the interface for searching and replacing text. Type “Ocean Marketplace” into the first textbox, and the name of your marketplace into the second textbox (arrow 2). To make things simple, there is a button to the right of the second textbox (arrow 3) that will replace all instances at once. You can take a moment to review all the text youre changing if you wish, and then click this button.
![Market Customisation](../../.gitbook/assets/market/market-customisation-3.png)
Next up, we need to repeat the process but this time well be searching for and replacing `Ocean Market`. As you can see in the screenshot below, we have called our fork `Crypto Photos Market`.
![Market Customisation](../../.gitbook/assets/market/market-customisation-4.png)
![Market Customisation](../../.gitbook/assets/market/market-customisation-4.1.png)
![Market Customisation](../../.gitbook/assets/market/market-customisation-4.2.jpg)
Now lets change the tagline of your site. Open up the folder called `content` and then open the file called `site.json`.
![Market Customisation](../../.gitbook/assets/market/market-customisation-5.png)
On line 3 in this file, you can enter the tagline that you want for your marketplace.
![Market Customisation](../../.gitbook/assets/market/market-customisation-6.png)
![Market Customisation](../../.gitbook/assets/market/market-customisation-6.1.png)
## Change the Logo
The next important step to personalizing your marketplace is setting up your own logo. We highly recommend using your logo in SVG format for this. The site logo is stored in the following location:
```
src/@images/logo.svg
```
Delete the `logo.svg` file from that folder and paste your own logo in the same folder. Then, if you rename your `logo.svg` everything will work without any problems.
At this point, its a good idea to check how things are looking. First, check that you have saved all of your changes, then cancel the build thats running in your terminal (Ctrl + C OR Cmnd + C) and start it again `npm start`. Once the build has finished, navigate to http://localhost:8000/ and see how things look.
![Market Customisation](../../.gitbook/assets/market/market-customisation-7.1.png)
Awesome! Our logo is looking great!
## Change the Styling
Hopefully, you like our pink and purple branding, but we dont expect you to keep it in your own marketplace. This step focuses on applying your own brand colors and styles.
### Background
Lets start with the background. Open up the following CSS file:
```
src/components/App/index.module.css
```
Youll notice in the screenshot above that we are setting our `wave` background on line 3. Here, youll want to use your own background color or image. For this example, well use an SVG background from [here](https://www.svgbackgrounds.com/). First, we save the new background image into the src/images/ folder (same folder as the logo), then we change the CSS to the file location of the new background (see line 3 in the image below).
![Market Customisation](../../.gitbook/assets/market/market-customisation-8.png)
If we save this file and view the site at this point, we get a white section at the top (see image below). And youll also notice that the background doesnt fill all the way down to the bottom of the screen.
![Market Customisation](../../.gitbook/assets/market/market-customisation-10.1.png) ![Market Customisation](../../.gitbook/assets/market/market-customisation-10.2.png)
To fix this, we need to change the starting position of the background image and change it from no-repeat to repeat. We can do this on line 3.
When we view our marketplace, we can see that the new background starts at the top and fills the whole page. Perfect!
![Market Customisation](../../.gitbook/assets/market/market-customisation-11.1.png)
### Brand Colors
Next up, lets change the background colors to match your individual style. Open up the following file: `src/global/_variables.css`. Here youll see the global style colors that are set. Now is the time to get creative, or consult your brand handbook (if you already have one).
You can change these colors as much as you wish until youre happy with how everything looks. Each time you save your changes, the site will immediately update so you can see how things look. You can see the styles chosen for this example in the image below.
![Market Customisation](../../.gitbook/assets/market/market-customisation-12.png)
### Change Fonts
The final part of the styling that well alter in this guide is the fonts. This is an important step because the font used in Ocean Market is one of the few elements of the market that are **copyright protected**. If you want to use the same font youll need to purchase a license. The other copyrighted elements are the logo and the name — which we have already changed.
If you dont already have a brand font, head over to Google Fonts to pick some fonts that suit the brand youre trying to create. Google makes it nice and easy to see how theyll look, and its simple to import them into your project.
The global fonts are set in the same file as the colors, scroll down and youll see them on lines 36 to 41.
If you are importing fonts, such as from Google Fonts, you need to make sure that you include the import statement at the top of the `_variables.css` file.
As with the color changes, its a good idea to save the file with each change and check if the site is looking the way that you expected it to. You can see our eclectic choices below.
![Market Customisation](../../.gitbook/assets/market/market-customisation-13.png)
## Customize the Publish Form
Lets head to the publish page to see what it looks like with our new styling - so far, so good. But there is one major issue, the publish form is still telling people to publish datasets. On our new marketplace, we want people to publish and sell their photos, so were going to have to make some changes here.
![Market Customisation](../../.gitbook/assets/market/publish-page-before-edit.png)
Open up the `index.json` file from `content/publish/index.json` - here we change the text to explain that this form is for publishing photos.
![Market Customisation](../../.gitbook/assets/market/market-customisation-15.png)
Additionally, the asset type currently says dataset, and we need to change this so that it says photo. The simplest way to do this is to change the title of the asset type without changing anything else. Ocean can handle selling any digital asset that can be accessed via a URL, so no further changes are needed to accommodate selling photos.
Open up `src/components/Publish/Metadata/index.tsx` and change line 33 so that it says `Photo`
![Market Customisation](../../.gitbook/assets/market/market-customisation-18.png)
Great, now our publish page explains that users should be publishing photos and the photo is provided as an asset type option. Well also leave the algorithm as an option in case some data scientists want to do some analysis or image transformation on the photos.
![Market Customisation](../../.gitbook/assets/market/publish-page-2.png)
There is one more thing that is fun to change before we move away from the publish form. Youll notice that Ocean Market now has a cool SVG generation feature that creates the images for the Data NFT. It creates a series of pink waves. Lets change this so that it uses our brand colors in the waves!
Open up `/src/@utils/SvgWaves.ts` and have a look at lines 27 to 30 where the colors are specified. Currently, the pink color is the one used in the SVG generator. You can replace this with your own brand color:
![Market Customisation](../../.gitbook/assets/market/market-customisation-21.png)
If youre interested in doing some further customization, take a look at lines 53 to 64. You can change these properties to alter how the image looks. Feel free to play around with it. Weve increased the number of layers from 4 to 5.
![Market Customisation](../../.gitbook/assets/market/market-customisation-22.png)
And now your customized publish page is ready for your customers:
![Market Customisation](../../.gitbook/assets/market/market-customisation-20.png)
## Advanced customization
This important step is the last thing that we will change in this guide. To set the marketplace fees and address, youll need to save them as environmental variables. You'll also need to set the environmental variables if you customized services like Aquarius, Provider, or Subgraph.
First, we are going to create a new file called `.env` in the root of your repository.
Copy and paste the following into the file:
```bash
NEXT_PUBLIC_MARKET_FEE_ADDRESS="0x123abc"
NEXT_PUBLIC_PUBLISHER_MARKET_ORDER_FEE="0.01"
NEXT_PUBLIC_PUBLISHER_MARKET_FIXED_SWAP_FEE="0.01"
NEXT_PUBLIC_CONSUME_MARKET_ORDER_FEE="0.01"
NEXT_PUBLIC_CONSUME_MARKET_FIXED_SWAP_FEE="0.01"
#
# ADVANCED SETTINGS
#
# Toggle pricing options presented during price creation
#NEXT_PUBLIC_ALLOW_FIXED_PRICING="true"
#NEXT_PUBLIC_ALLOW_FREE_PRICING="true"
# Privacy Preference Center
#NEXT_PUBLIC_PRIVACY_PREFERENCE_CENTER="true"
# Development Preference Center
#NEXT_PUBLIC_PROVIDER_URL="http://xxx:xxx"
#NEXT_PUBLIC_SUBGRAPH_URI="http://xxx:xxx"
#NEXT_PUBLIC_METADATACACHE_URI="http://xxx:xxx"
#NEXT_PUBLIC_RPC_URI="http://xxx:xxx"
```
### Change the Fee Address
At this point, we have made a lot of changes and hopefully, youre happy with the way that your marketplace is looking. Given that you now have your own awesome photo marketplace, its about time we talked about monetizing it. Yup, thats right - you will earn a [commission](../contracts/fees.md) when people buy and sell photos in your marketplace. In Ocean, there are a whole host of [fees](../contracts/fees.md) and customization options that you can use. In order to receive the fees youll need to set the address where you want to receive these fees in.
When someone sets the pricing for their photos in your marketplace, they are informed that a commission will be sent to the owner of the marketplace. You see that at the moment this fee is set to zero, so youll want to increase that.
You need to replace “0x123abc” with your Ethereum address (this is where the fees will be sent).
### Change the Fees Values
You can also alter the fees to the levels that you intend them to be at. If you change your mind, these fees can always be altered later.
Go to [Fees page](../contracts/fees.md) to know more details about each type of fee and its relevance.
![Market Customisation](../../.gitbook/assets/market/market-customisation-23.png)
It is important that the file is saved in the right place at the root of your repository, your file structure should look the same as below.
![Market Customisation](../../.gitbook/assets/market/market-customisation-24.png)
Now thats it; you now have a fully functioning photo marketplace that operates over the blockchain. Every time someone uses it, you will receive revenue.
![Market Customisation](../../.gitbook/assets/market/market-customisation-25.png)
### Using a custom Provider
You have the flexibility to tailor the ocean market according to your preferences by directing it to a predetermined custom [provider](https://github.com/oceanprotocol/provider/) deployment. This customization option allows you to choose a specific default provider, in addition to the option of manually specifying it when publishing an asset. To make use of this feature, you need to uncomment the designated line and modify the URL for your custom provider in the previously generated `.env` file. Look for the key labeled `NEXT_PUBLIC_PROVIDER_URL` and update its associated URL accordingly.
### Using a custom MetadataCache
If you intend to utilize the ocean market with a custom [Aquarius](../aquarius/README.md) deployment, you can also make set a custom MetadataCache flag. To do this, you will need to update the same file mentioned earlier. However, instead of modifying the `NEXT_PUBLIC_PROVIDER_URL` key, you should update the `NEXT_PUBLIC_METADATACACHE_URI` key. By updating this key, you can specify the URI for your custom Aquarius deployment, enabling you to take advantage of the ocean market with your preferred metadata cache setup.
### Using a custom subgraph
Using a custom subgraph with the ocean market requires additional steps due to the differences in deployment. Unlike the multi-network deployment of the provider and Aquarius services, each network supported by the ocean market has a separate subgraph deployment. This means that while the provider and Aquarius services can be handled by a single deployment across all networks, the subgraph requires specific handling for each network.
To utilize a custom subgraph, you will need to implement additional logic within the `getOceanConfig` function located in the `src/utils/ocean.ts` file. By modifying this function, you can ensure that the market uses the desired custom subgraph for the selected network. This is particularly relevant if your market aims to support multiple networks and you do not want to enforce the use of the same subgraph across all networks. By incorporating the necessary logic within `getOceanConfig`, you can ensure the market utilizes the appropriate custom subgraph for each network, enabling the desired level of customization. If the mentioned scenario doesn't apply to your situation, there is another approach you can take. Similar to the previously mentioned examples, you can modify the `.env` file by updating the key labeled `NEXT_PUBLIC_SUBGRAPH_URI`. By making changes to this key, you can configure the ocean market to utilize your preferred subgraph deployment. This alternative method allows you to customize the market's behavior and ensure it utilizes the desired subgraph, even if you don't require different subgraph deployments for each network.

View File

@ -0,0 +1,42 @@
---
title: Deployment of Ocean Market
description: Step by step guide to a quick deployment of Ocean Market
---
# Build and host your Data Marketplace
All thats left is for you to host your data marketplace and start sharing it with your future users.
## **Build and host your marketplace using surge**
To host your data marketplace, you need to run the build command:
```bash
npm run build:static
```
This takes a few minutes to run. While this is running, you can get prepared to host your new data marketplace. You have many options for hosting your data marketplace (including AWS S3, Vercel, Netlify and many more). In this guide, we will demonstrate how to host it with surge, which is completely free and very easy to use. You can also refer to this [tutorial](../../infrastructure/deploying-marketplace.md) from the infrastructuree section as well if you want to deploy your market in you own infrastructure using docker.
Open up a new terminal window and run the following command to install surge:
```bash
npm install --global surge
```
When this is complete, navigate back to the terminal window that is building your finished data marketplace. Once the build is completed, enter the following commands to enter the public directory and host it:
```bash
cd out
```
```bash
surge
```
If this is your first time using surge, you will be prompted to enter an email address and password to create a free account. It will ask you to confirm the directory that it is about to publish, check that you are in the market/public/ directory and press enter to proceed. Now it gives you the option to choose the domain that you want your project to be available on.
<figure><img src="../../.gitbook/assets/market/Screenshot 2023-06-14 at 14.30.59.png" alt=""><figcaption><p>surge interaction</p></figcaption></figure>
We have chosen https://crypto-photos.surge.sh which is a free option. You can also set a CNAME value in your DNS to make use of your own custom domain.
After a few minutes, your upload will be complete, and youre ready to share your data marketplace. You can view the version we created in this guide [here](https://crypto-photos.surge.sh/).

View File

@ -0,0 +1,55 @@
---
title: Forking Ocean Market
description: Forking and running Ocean Market locally.
---
# Forking Ocean Market
One of the best use cases for Ocean is running your own marketplace and monetizing your digital assets. With Ocean you can sell your data directly to your customers with no third party in-between, no need to speak to data with data brokers. Ocean makes this all super easy for you with some pretty cool tech under the hood. Furthermore, an Ocean powered market isn't just limited to selling data, you can use it for selling any type of digital asset!
Using Ocean Market is already a big improvement on the alternatives that are out there, but it gets even better. Ocean Market is completely open-source and made freely available under the Apache 2 license. This means that you can fork Ocean Market and set up your own data marketplace in just a few steps. This guide will walk you through the process, youll be surprised how easy it is. No prior blockchain knowledge is required!
* Fork Ocean Market
* Clone the market locally
* Install the dependencies
* Run your Market fork for the first time
## Fork Ocean Market
The first step is to log into Github and navigate to the [Ocean Market repository](https://github.com/oceanprotocol/market), youll need to log in or create a Github account. Now you need to click “Fork” in the top right-hand corner. If you are a member of an organization on Github, it will give you the option to clone it into either your personal account or the organization. Choose whichever is suitable for you.
## Clone the market locally
Now we need to clone the market fork locally so that we can start making changes to the code. Upon forking Ocean Market, GitHub will take you to the repository page. Here, you should copy the URL of the repository. To do this, click on the green “Code” button and then click the copy icon to copy the HTTPS URL. Make sure that you have git installed and set up and installed on your computer before proceeding. See [this guide](https://git-scm.com/) if youre not familiar with git.
## Install the dependencies
Installing the dependencies is a vital step for running the market. Its a super simple process, thanks to npm (node package manager). Make sure you have node.js installed, otherwise it will fail. In Ocean Market its highly recommended that you use the same version of node that we are using, you can check this in the [.nvmrc file](https://github.com/oceanprotocol/market/blob/main/.nvmrc).
Enter the following command to install the dependencies:
```bash
npm install
```
This command will take a few minutes to complete and youll see some warnings as it runs (no need to worry about the warnings).
## Run your Market fork for the first time
At this point, you are ready to run your data marketplace for the first time. This is another straightforward step that requires just one command:
```bash
npm start
```
The above command will build the development bundle and run it locally.
<figure><img src="../../.gitbook/assets/market/Screenshot 2023-06-13 at 14.39.17.png" alt=""><figcaption><p>Forking Ocean Market</p></figcaption></figure>
Great news - your marketplace has successfully been built and is now running locally. Lets check it out! Open your browser and navigate to http://localhost:8000/. Youll see that you have a full-on clone of Ocean Market running locally. Give it a go and test out publishing and consuming assets - everything works!
Thats all thats required to get a clone of Ocean market working. The whole process is made simple because your clone can happily use all the smart contracts and backend components that are maintained by Ocean Protocol Foundation.
<figure><img src="../../.gitbook/assets/market/Screenshot 2023-06-13 at 14.43.25.png" alt=""><figcaption><p>Forking Ocean Market</p></figcaption></figure>
So youve got a fully functioning marketplace at this point, which is pretty cool. But it doesnt really look like your marketplace. Right now, its still just a clone of Ocean Market - the same branding, name, logo, etc. The next few steps focus on personalizing your marketplace.

View File

@ -0,0 +1,71 @@
# Deploying Marketplace
### Prerequisites
* A server for hosting Ocean Marketplace. See [this guide](setup-server.md) on creating a server.
* Obtain API key for wanted network. See [this guide](../developers/obtaining-api-keys-for-blockchain-access.md) for this.
### Push your customized Ocean Market code to your Git repository
In case you customized the Ocean Market using the tutorial from this chapter (link), push your code to a Git repository.
### Create a directory
```bash
mkdir my-marketplace
cd my-marketplace
```
### Create a file with the name \`.env\`
If you already created the .env file as instructed in ...(link to customize the market chapter), you can skip this step, otherwise copy the below content into the \`.env\` file.
{% code title=".env" overflow="wrap" %}
```bash
# Update this value if your Market should use custom Aquarius
NEXT_PUBLIC_METADATACACHE_URI=https://v4.aquarius.oceanprotocol.com
# Provide INFURA project ID from the obtained API key for NEXT_PUBLIC_INFURA_PROJECT_ID
#NEXT_PUBLIC_INFURA_PROJECT_ID="xxx"
#NEXT_PUBLIC_MARKET_FEE_ADDRESS="0xxx"
#NEXT_PUBLIC_PUBLISHER_MARKET_ORDER_FEE="1"
#NEXT_PUBLIC_CONSUME_MARKET_ORDER_FEE="1"
#NEXT_PUBLIC_CONSUME_MARKET_FIXED_SWAP_FEE="1"
#
# ADVANCED SETTINGS
#
# Toggle pricing options presented during price creation
#NEXT_PUBLIC_ALLOW_FIXED_PRICING="true"
#NEXT_PUBLIC_ALLOW_FREE_PRICING="true"
# Privacy Preference Center
#NEXT_PUBLIC_PRIVACY_PREFERENCE_CENTER="true"
```
{% endcode %}
### Create a \`Dockerfile\` file and copy the below content into it.
In the following Dockerfile, replace \<YOUR\_GIT\_REPO\_URL> with the url of your Ocean Market fork repository or use "https://github.com/oceanprotocol/market.git" if you want to deploy the standard image of Ocean Market.
<pre class="language-docker" data-title="Dockerfile"><code class="lang-docker">FROM node:16
<strong>RUN git clone &#x3C;YOUR_GIT_REPO_URL> /usr/app/market
</strong>WORKDIR /usr/app/market
RUN npm ci --legacy-peer-deps
RUN npm run build
EXPOSE 3000
CMD ["npx", "next", "start"]
</code></pre>
### Build a docker image
```bash
docker build . -f Dockerfile -t market:latest
```
### Start the marketplace
```bash
docker start market
```

8
predictoor/README.md Normal file
View File

@ -0,0 +1,8 @@
---
description: Run AI-powered prediction bots or trading bots on crypto price feeds to earn $
---
**Predictoor docs are now at [docs.predictoor.ai](https://docs.predictoor.ai).**
<figure><img src="../.gitbook/assets/cover/predictoor_banner.png" alt=""></figure>

View File

@ -0,0 +1,30 @@
---
description: Buy, mint, and sell all sorts of data on the Ocean Market
---
# Guide to the Ocean Market
<figure><img src="../.gitbook/assets/gif/shopping-minions.gif" alt=""><figcaption><p>Retail therapy mood!</p></figcaption></figure>
### What is the [Ocean Market](https://market.oceanprotocol.com/)? 🛒
The Ocean Market is a place for buyers + sellers of top-notch data and algorithms to exchange goods. The market also gives you easy-to-use publishing and purchasing tools to monetize your intellectual property. 🤑 What's not to love? 💕
#### **You can:**
* Buy access to unique data, algorithms, and compute jobs. 🛍️
* Tokenize & monetize your intellectual property through blockchain technology. 💪
#### **Learn to:**
* [Publish an NFT](publish-data-nfts.md)
* [Download NFT Assets](buy-data-nfts.md)
* [Host Your Assets](asset-hosting/README.md)
#### Getting Basic 💁‍♀️
**If you are new to web3** and blockchain technologies then we suggest you first get familiar with some Web3 basics:
* [Wallet Basics](../user-guides/wallets/README.md) 👛
* [Set Up MetaMask](../user-guides/wallets/metamask-setup.md) 🦊
* [Manage Your OCEAN](../user-guides/wallets-and-ocean.md) 🪙