Skip to content

Commit

Permalink
Merge pull request #920 from singnet/development
Browse files Browse the repository at this point in the history
Update packages an added handling of big numbers
  • Loading branch information
MarinaFedy authored Jun 7, 2024
2 parents a2fa733 + 48e54bb commit 7285674
Show file tree
Hide file tree
Showing 449 changed files with 1,427 additions and 74,996 deletions.
4 changes: 2 additions & 2 deletions .env.sandbox
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
REACT_APP_SANDBOX_SERVICE_ENDPOINT=http://localhost:8088
REACT_APP_SANDBOX_SERVICE_ENDPOINT=daemon_enpoint
REACT_APP_SANDBOX_ORG_ID=org_id
REACT_APP_SANDBOX_SERVICE_ID=service_id
REACT_APP_WEB3_PROVIDER=wss://ropsten.infura.io/ws/v3/{infura_project_id}
REACT_APP_SANDBOX=true
3 changes: 3 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -83,3 +83,6 @@ src/aws_config.js

#external scripts
src/assets/externalScripts

#services demo components
src/assets/thirdPartyServices
7 changes: 4 additions & 3 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
{
"extends": ["react-app", "eslint:recommended"],
"parser": "babel-eslint",
"parser": "@babel/eslint-parser",
"plugins": ["react", "prettier", "react-hooks"],
"rules": {
"prettier/prettier": [
"error",
"warn",
{ "singleQuote": false, "semi": true, "max-len": { "code": 120, "ignoreUrls": true }, "tab-width": 2 }
],
"lines-between-class-members": ["error", "always"],
"jsx-a11y/anchor-is-valid": "warn",
"prefer-arrow-callback": ["error", { "allowNamedFunctions": false, "allowUnboundThis": false }],
"no-empty-function": ["error"],
"no-empty-function": ["warn"],
"no-prototype-builtins": ["warn"],
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/self-closing-comp": ["error", { "component": true, "html": true }],
Expand Down
98 changes: 65 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,67 +1,94 @@
# snet-dapp

This Dapp allows you to browse the list of services from the SingularityNET Registry and call them.
The beta dapp is under active development and will see several changes in the upcoming weeks
This Dapp allows you to browse the list of AI services from the SingularityNET Registry and call them.

## How to call a Service

1. Navigate to the SingularityNET beta [dapp](http://beta.singularitynet.io/)
1. Navigate to the SingularityNET [beta dapp](http://beta.singularitynet.io/)
2. Sign up / Login to the DApp account
3. Every service has a free trial, so you can invoke the service without any payment
3. Some artificial intelligence services have a free trial version, so you can use it without any payment
4. If free trial has expired, you need to use your AGIX tokens to make the call using Metamask (this is on the mainnet)
5. Authorize and Transfer tokens to the Multi party escrow in the Accounts page
6. Follow the service execution steps on the service details page
7. The result from the operation is displayed in the result tab

## Development instructions

* Install [Node.js and npm](https://nodejs.org/)
* `npm install` to get dependencies
* `npm run start` to serve the application locally and watch source files for modifications

Install [Node.js and npm](https://nodejs.org/) and [yarn](https://classic.yarnpkg.com/lang/en/docs/install)

- node version >=18
- yarn version >=1.22.21

For getting dependencies:
```
yarn install
```
To serve the application locally and watch source files for modifications:
```
yarn start
```
or
```
npm run start
```
## UI for Services

Currently the UI needed by a service to capture inputs and render the output must be provided by the service developer as a PR. It must be provided in the form of a React component.
This approach will change in the future as we support a generic mechanism to declaratively describe a service's API. See [this](https://github.com/singnet/custom-ui-research) for more details
Currently the UI needed by a service to capture inputs and render the output must be provided by the service developer through [Publisher](https://publisher.singularitynet.io/). To create a Snet-dapp style user interface, a developer can use the [next repository](https://github.com/singnet/snet-dapp-components).

## Sandbox mode for Services

git clone [email protected]:singnet/snet-dapp.git
cd snet-dapp
npm install
cp .env.sandbox .env
This approach will change in the future. Work on it is in progress

## Sandbox mode for Services

Cloning this repo:
```
git clone [email protected]:singnet/snet-dapp.git
```
Go to project folder:
```
cd snet-dapp
```
Get dependencies:
```
yarn install
```
Create the env file:
```
cp .env.sandbox .env
```
1. Update `.env` file to reflect the actual values for each environment variable.

1. `REACT_APP_SANDBOX_SERVICE_ENDPOINT`

The endpoint of the service running locally. `snetd` defaults to `http://localhost:8088`.
The daemon endpoint for call AI methods of your service.

2. `REACT_APP_SANDBOX_ORG_ID` & `REACT_APP_SANDBOX_SERVICE_ID`

The `org_id` to which the service belongs and the `service_id` of the service. The values set for these variables will be used for registering the custom ui.

3. `REACT_APP_WEB3_PROVIDER`

The infura endpoint to be used for the Web3 connection.

2. Start the AI service locally along with the snet daemon. Make sure the blockchain is disabled in the daemon configuration.
2. Start the AI service locally along with the snet daemon. Make sure the blockchain is disabled in the daemon configuration.
3. Building the custom ui
1. Generate `js` stubs from `.proto` files

For the custom ui to talk to the services on SingularityNET platform via the DApp, we are using [gRPC-web](https://github.com/improbable-eng/grpc-web) by improbable-eng. Apart from the steps mentioned at the official [documentation](https://github.com/improbable-eng/grpc-web/blob/master/client/grpc-web/docs/code-generation.md) to generate `js stubs` from `.proto` definitions, you also need to provide the `namespace_prefix` flag to the generator. Here is an example which illustrates the usage

```
For Linux
```
protoc \
--plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts \
--js_out=import_style=commonjs,binary,namespace_prefix=<uniq_name_space>:. \
--ts_out=service=true:. \
example_service.proto
```

<uniq_name_space> should be a combination of `package_name` + `org_id` + `service_id`.
For the following [proto file](https://github.com/singnet/example-service/blob/master/service/service_spec/example_service.proto) with `org_id=snet` and `service_id=example-service` the namespace_prefix would be `example_service_snet_example_service`. <br />
PS: All the `-` should be replaced by `_`.
--js_out=import_style=commonjs,binary,namespace_prefix=\
[package name]_[org id]_[service]:. --ts_out=service=grpc-web:. \
[proto file name].proto
```

For Windows CMD
```
protoc ^
--plugin=protoc-gen-ts=%cd%/node_modules/.bin/protoc-gen-ts.cmd ^ --js_out=import_style=commonjs,binary,namespace_prefix=^
[package name]_[org id]_[service]:. --ts_out=service=grpc-web:. ^
[proto file name].proto
```

2. You need build the custom UI following the steps

Create a new directory named after the `org-id` to which this service belongs inside `src/assets/thirdPartyServices`. It could be possible that the directory already exists, in which case you can use it instead of creating a new one.
Expand All @@ -84,7 +111,12 @@ For the following [proto file](https://github.com/singnet/example-service/blob/m

thirdPartyCustomUIComponents.addCustomUIComponent(orgId, serviceId, CustomUIComponent);

5. Assuming that the snet daemon is running on port `8088`, running the bellow commands should bring up the DApp in sandbox mode for local development.

npm run sandbox
5. Assuming that the snet daemon is running on the port that you specified in the REACT_APP_SANDBOX_SERVICE_ENDPOINT, running the bellow commands should bring up the DApp in sandbox mode for local development.

```
yarn start
```
or
```
npm run start
```
27 changes: 27 additions & 0 deletions config-overrides.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
const webpack = require("webpack");

module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
os: require.resolve("os-browserify"),
url: require.resolve("url"),
path: require.resolve("path-browserify"),
});
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
}),
]);
config.ignoreWarnings = [/Failed to parse source map/];
config.module.rules.push({
test: /\.(js|mjs|jsx)$/,
enforce: "pre",
loader: require.resolve("source-map-loader"),
resolve: {
fullySpecified: false,
},
});
return config;
};
69 changes: 41 additions & 28 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"@material-ui/lab": "^3.0.0-alpha.30",
"@material-ui/styles": "^4.11.2",
"@sentry/browser": "^5.29.0",
"aws-amplify": "^1.1.28",
"aws-amplify": "^4.3.46",
"clsx": "^1.1.1",
"color": "^3.1.3",
"css-loader": "^5.0.1",
Expand All @@ -28,51 +28,54 @@
"material-ui": "^1.0.0-beta.47",
"material-ui-flat-pagination": "^3.2.0",
"material-ui-rating": "^3.1.1",
"moment": "^2.29.1",
"moment": "^2.30.1",
"notistack": "^0.8.9",
"papaparse": "^5.3.0",
"path": "^0.12.7",
"query-string": "^6.13.7",
"react": "^16.14.0",
"react": "^18.2.0",
"react-app-rewired": "^2.2.1",
"react-async-script-loader": "^0.3.0",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.14.0",
"react-dropzone": "^8.0.4",
"react-dom": "^18.2.0",
"react-dropzone": "^10.2.1",
"react-file-drop": "^0.2.8",
"react-ga": "^2.6.0",
"react-google-charts": "^3.0.10",
"react-google-charts": "^4.0.1",
"react-helmet": "^6.1.0",
"react-image-gallery": "^1.0.8",
"react-json-view": "^1.19.1",
"react-redux": "^7.2.2",
"react-image-gallery": "^1.3.0",
"react-json-view": "^1.21.3",
"react-redux": "^9.1.0",
"react-router-dom": "^5.2.0",
"react-router-sitemap": "^1.2.0",
"react-scripts": "^3.4.4",
"react-slick": "^0.28.0",
"react-scripts": "^5.0.1",
"react-slick": "^0.30.2",
"react-star-rating-component": "^1.4.1",
"react-swipeable-views": "^0.13.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"react-swipeable-views": "^0.14.0",
"redux": "^5.0.1",
"redux-thunk": "^3.1.0",
"scrypt": "github:barrysteyn/node-scrypt#fb60a8d3c158fe115a624b5ffa7480f3a24b03fb",
"singularitynet-platform-contracts": "1.0.2",
"singularitynet-platform-contracts": "1.0.4",
"slick-carousel": "^1.8.1",
"snet-sdk-web": "3.0.0",
"style-loader": "^2.0.0",
"snet-sdk-web": "^4.0.0",
"utf8": "^3.0.0",
"validate.js": "^0.13.1",
"web3": "1.0.0-beta.52"
"web3": "^4.5.0"
},
"resolutions": {
"concat-stream": "github:singnet/concat-stream"
},
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "npm run sitemap && react-scripts --max_old_space_size=8192 build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"start": "react-app-rewired --openssl-legacy-provider start",
"build": "npm run sitemap && react-app-rewired --max_old_space_size=8192 build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"sandbox": "REACT_APP_SANDBOX=true npm start",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"sitemap": "babel-node scripts/sitemap-generator.js",
"zip-components": "REACT_APP_SANDBOX=true babel-node scripts/zip-components.js",
"zip-components": "babel-node scripts/zip-components.js",
"generate-stubs": "babel-node scripts/generate-stubs.js"
},
"lint-staged": {
Expand All @@ -97,23 +100,33 @@
]
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/node": "^7.23.9",
"@babel/preset-env": "^7.24.0",
"@storybook/addon-actions": "^5.3.21",
"@storybook/addon-links": "^5.3.21",
"@storybook/addons": "^5.3.21",
"@storybook/react": "^5.3.21",
"adm-zip": "0.5.5",
"archiver": "5.3.0",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "4.1.1",
"dotenv": "8.2.0",
"eslint": "^8.57.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^9.1.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.34.0",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^2.7.0",
"lint-staged": "^8.2.0",
"prettier": "^1.18.2",
"pretty-quick": "^1.11.0",
"path-browserify": "^1.0.1",
"prettier": "^3.2.5",
"prompts": "^2.4.1",
"rimraf": "^3.0.2",
"storybook-addon-react-docgen": "^1.2.42",
Expand Down
10 changes: 5 additions & 5 deletions scripts/generate-stubs.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const promptForDetails = async () => {
type: "text",
name: "packageName",
message: "Package Name",
validate: value =>
validate: (value) =>
value && Boolean(value.trim()) ? true : "Please enter the Package Name. It wil be in the .proto file",
});
if (!response.packageName) {
Expand All @@ -78,7 +78,7 @@ const promptForDetails = async () => {
type: "text",
name: "orgId",
message: "Organization Id",
validate: value => (value && Boolean(value.trim()) ? true : "Please enter the organization Id"),
validate: (value) => (value && Boolean(value.trim()) ? true : "Please enter the organization Id"),
initial: process.env.REACT_APP_SANDBOX_ORG_ID,
});
if (!response.orgId) {
Expand All @@ -91,7 +91,7 @@ const promptForDetails = async () => {
type: "text",
name: "serviceId",
message: "Service Id",
validate: value => (value && Boolean(value.trim()) ? true : "Please enter the service Id"),
validate: (value) => (value && Boolean(value.trim()) ? true : "Please enter the service Id"),
initial: process.env.REACT_APP_SANDBOX_SERVICE_ID,
});
if (!response.serviceId) {
Expand All @@ -112,7 +112,7 @@ const getProtoFilePathFromArgs = () => {
return protoFilePath;
};

const downloadProtoCBinary = async protoBinaryFileURL => {
const downloadProtoCBinary = async (protoBinaryFileURL) => {
let data;
try {
const response = await axios.get(protoBinaryFileURL, { responseType: "arraybuffer" });
Expand All @@ -130,7 +130,7 @@ const downloadProtoCBinary = async protoBinaryFileURL => {
}
};

const executeProtoCBinary = async protoFilePath => {
const executeProtoCBinary = async (protoFilePath) => {
if (shouldIncludeNamespacePrefix) {
outputDir = `${outputDir}/${orgId.replace(/-/g, "_")}_${serviceId.replace(/-/g, "_")}`;
}
Expand Down
Loading

0 comments on commit 7285674

Please sign in to comment.