docs: Doc site add Nodejs Tab (#417)

bnb-chain · Dec 8, 2023 · f914c3f · f914c3f
1 parent 54e2c4d
commit f914c3f
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 23 deletions.
diff --git a/doc-site/docs/api/object.mdx b/doc-site/docs/api/object.mdx
@@ -5,6 +5,8 @@ title: 'Object'
 
 import ApiTypes from '../../src/components/snippers/api-types.tsx';
 import Tx from '../../src/components/snippers/tx.mdx';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 ## cancelCreateObject <ApiTypes type="Tx" />
 
@@ -29,22 +31,51 @@ Send create empty object txn to greenfield chain.
 | creator    | the creator of object                  |
 | authType   | [AuthType](/client/sp-client#authtype) |
 
-```jsx title="example"
+<Tabs>
+<TabItem value="Browser" label="Browser">
+
+```jsx
 const tx = await client.object.createFolder(
   {
     bucketName: createObjectInfo.bucketName,
     objectName: createObjectInfo.objectName + '/',
     creator: address,
   },
+  // highlight-start
   {
     type: 'EDDSA',
     domain: window.location.origin,
     seed: offChainData.seedString,
     address,
   },
+  // highlight-end
+);
+```
+
+</TabItem>
+<TabItem value="Nodejs" label="Nodejs">
+
+```js
+const tx = await client.object.createFolder(
+  {
+    bucketName: bucketName,
+    objectName: objectName + '/',
+    creator: ACCOUNT_ADDRESS,
+  },
+  // highlight-start
+  {
+    type: 'ECDSA',
+    privateKey: ACCOUNT_PRIVATEKEY,
+  },
+  // highlight-end
 );
 ```
 
+</TabItem>
+</Tabs>
+
+<Tx />
+
 ## createObject <ApiTypes type="Storage Provider" /> <ApiTypes type="Tx" />
 
 Get approval of creating object and send createObject txn to greenfield chain.
@@ -61,7 +92,11 @@ Get approval of creating object and send createObject txn to greenfield chain.
 | contentLength   | file content length                                                     |
 | expectCheckSums | file's expectCheckSums                                                  |
 
-```jsx title="example"
+<Tabs>
+<TabItem value="Browser" label="Browser">
+
+```jsx
+// https://github.com/bnb-chain/greenfield-js-sdk/blob/main/examples/nextjs/src/components/object/create/index.tsx#L76-L95
 const tx = await client.object.createObject(
   {
     bucketName: 'bucket_name',
@@ -73,15 +108,44 @@ const tx = await client.object.createObject(
     contentLength: 13311,
     expectCheckSums: JSON.parse(expectCheckSums),
   },
+  // highlight-start
   {
     type: 'EDDSA',
     domain: window.location.origin,
     seed: offChainData.seedString,
     address,
   },
+  // highlight-end
+);
+```
+</TabItem>
+<TabItem value="Nodejs" label="Nodejs">
+
+```js
+// https://github.com/bnb-chain/greenfield-js-sdk/blob/main/examples/nodejs/cases/storage.js#L61-L76
+const tx = await client.object.createObject(
+  {
+    bucketName: bucketName,
+    objectName: objectName,
+    creator: ACCOUNT_ADDRESS,
+    visibility: 'VISIBILITY_TYPE_PRIVATE',
+    fileType: fileType,
+    redundancyType: 'REDUNDANCY_EC_TYPE',
+    contentLength,
+    expectCheckSums: JSON.parse(expectCheckSums),
+  },
+  // highlight-start
+  {
+    type: 'ECDSA',
+    privateKey: ACCOUNT_PRIVATEKEY,
+  },
+  // highlight-end
 );
 ```
 
+</TabItem>
+</Tabs>
+
 <Tx />
 
 ## deleteObject <ApiTypes type="Tx" />
@@ -94,7 +158,7 @@ Send DeleteObject msg to greenfield chain and return txn hash.
 | bucketName | the name of the bucket where the object which to be deleted is stored                               |
 | objectName | the name of the object which to be deleted                                                          |
 
-```jsx title="example"
+```jsx title="Browser / Nodejs Example"
 const tx = await client.object.deleteObject({
   bucketName: 'bucket_name',
   objectName: 'object_name',
@@ -116,7 +180,7 @@ Delete the object policy of the principal.
 | principalAddr | principal address                                         |
 | principal     | [PrincipalType](/types/principal)                         |
 
-```jsx title="example"
+```jsx title="Browser / Nodejs Example"
 const tx = await client.object.deleteObjectPolicy(
   '0x000..', // operator
   'bucket_name', // bucket name
@@ -137,20 +201,45 @@ Download s3 object payload and return the related object info.
 | bucketName | bucket name |
 | objectName | object name |
 
-```jsx title="example"
+<Tabs>
+<TabItem value="Browser" label="Browser">
+
+```jsx
 await client.object.downloadFile(
   {
     bucketName,
     objectName,
   },
+  // highlight-start
   {
     type: 'EDDSA',
     address,
     domain: window.location.origin,
     seed: offChainData.seedString,
   },
+  // highlight-end
+);
+```
+
+</TabItem>
+<TabItem value="Nodejs" label="Nodejs">
+
+```js
+await client.object.downloadFile(
+  {
+    bucketName,
+    objectName,
+  },
+  // highlight-start
+  {
+    type: 'ECDSA',
+    privateKey: ACCOUNT_PRIVATEKEY,
+  },
+  // highlight-end
 );
 ```
+</TabItem>
+</Tabs>
 
 ## getObjectPolicy <ApiTypes type="Query" />
 
@@ -170,7 +259,7 @@ const tx = await client.object.getObjectPolicy('bucket_name', 'object_name', '0x
 
 Get the object preview url.
 
-```jsx title="example"
+```jsx title="Browser"
 const res = await client.object.getObjectPreviewUrl(
   {
     bucketName: 'bucket_name',
@@ -322,19 +411,47 @@ Uploading the object to bucket.
 | txnHash    | [createObject](#createobject) 's hash  |
 | authType   | [AuthType](/client/sp-client#authtype) |
 
-```jsx title="example"
+<Tabs>
+<TabItem value="Browser" label="Browser">
+
+```jsx
 const uploadRes = await client.object.uploadObject(
   {
     bucketName: createObjectInfo.bucketName,
     objectName: createObjectInfo.objectName,
     body: file,
     txnHash: txHash,
   },
+  // highlight-start
   {
     type: 'EDDSA',
     domain: window.location.origin,
     seed: offChainData.seedString,
     address,
   },
+  // highlight-end
+);
+```
+
+</TabItem>
+<TabItem value="Nodejs" label="Nodejs">
+
+```js
+const uploadRes = await client.object.uploadObject(
+  {
+    bucketName: bucketName,
+    objectName: objectName,
+    body: fileBuffer,
+    txnHash: createObjectTxRes.transactionHash,
+  },
+  // highlight-start
+  {
+    type: 'ECDSA',
+    privateKey: ACCOUNT_PRIVATEKEY,
+  },
+  // highlight-end
 );
 ```
+
+</TabItem>
+</Tabs>
diff --git a/doc-site/docs/client/greenfield.mdx b/doc-site/docs/client/greenfield.mdx
@@ -20,7 +20,7 @@ const client = Client.create(GRPC_URL, GREEN_CHAIN_ID);
 // Browser
 const client = Client.create(GRPC_URL, String(GREEN_CHAIN_ID), {
   zkCryptoUrl:
-    'https://unpkg.com/@bnb-chain/greenfield-zk-crypto@1.0.0/dist/node/zk-crypto.wasm',
+    'https://unpkg.com/@bnb-chain/greenfield-zk-crypto/dist/node/zk-crypto.wasm',
 });
 ```
 
@@ -30,8 +30,6 @@ Browser need load wasm manually.
 
 :::
 
-## Usage
-
 The JS SDK consists of two parts:
 
 - Chain: https://docs.bnbchain.org/greenfield-docs/docs/api/blockchain-rest

diff --git a/doc-site/docs/client/sp-client.mdx b/doc-site/docs/client/sp-client.mdx
@@ -4,6 +4,9 @@ sidebar_position: 3
 title: 'Storage Provider Client'
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 The api related to storage provider are some troublesome.
 
 ## AuthType
@@ -45,9 +48,9 @@ browser). -->
 
 ## Sp Api Example
 
-`getBucketReadQuota` as example:
+Take `getBucketReadQuota` as a complete example:
 
-```jsx title="browser"
+```js title="offchainAuth"
 const getAllSps = async () => {
   const sps = await getSps();
 
@@ -72,30 +75,45 @@ const offchainAuthRes = await client.offchainauth.genOffChainAuthKeyPairAndUploa
   },
   provider: 'wallet provider',
 );
+```
+
+<Tabs>
+<TabItem value="Browser" label="Browser">
 
+```jsx title="browser"
 // request sp api
 const bucketQuota = await client.bucket.getBucketReadQuota(
   {
     bucketName,
   },
+  // highlight-start
   {
     type: 'EDDSA',
     seed: offchainAuthRes.seedString,
     domain: window.location.origin,
-    address: 'your address',
+    address: '0x...',
   },
+  // highlight-end
 );
 ```
 
+</TabItem>
+<TabItem value="Nodejs" label="Nodejs">
+
 ```jsx title="Nodejs"
 // request sp api
 const bucketQuota = await client.bucket.getBucketReadQuota(
   {
     bucketName,
   },
+  // highlight-start
   {
     type: 'ECDSA',
     privateKey: '0x....',
   },
+  // highlight-end
 );
 ```
+
+</TabItem>
+</Tabs>
diff --git a/doc-site/docs/client/tx-client.mdx b/doc-site/docs/client/tx-client.mdx
@@ -4,6 +4,9 @@ sidebar_position: 1
 title: 'Tx Client'
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 ## About Tx
 
 A transaction contains at least:
@@ -41,8 +44,10 @@ Broadcast the transaction to the chain.
 | signTypedDataCallback | broadcast use `window.ethereum` as signature provider by default.                                                 |
 | privateKey            | If you broadcast in Nodejs, you can broadcast a tx by privateKey                                                  |
 
-```jsx title="broadcast tx"
-// broadcast tx
+<Tabs>
+<TabItem value="Browser" label="Browser">
+
+```js title="broadcast tx"
 const broadcastRes = await transferTx.broadcast({
   denom: 'BNB',
   gasLimit: Number(simulateInfo.gasLimit),
@@ -56,7 +61,7 @@ const broadcastRes = await transferTx.broadcast({
 
 If you want to use others wallet, you can set `signTypedDataCallback`:
 
-```jsx
+```js
 // trustwallet:
 const broadcastRes = await transferTx.broadcast({
   // ...
@@ -68,21 +73,31 @@ const broadcastRes = await transferTx.broadcast({
   },
 });
 ```
+:::
 
-If you broadcast in Nodejs, you can broadcast a tx by privateKey:
+</TabItem>
+<TabItem value="Nodejs" label="Nodejs">
 
-```jsx
+If you broadcast in Nodejs, you can broadcast a tx by `privateKey`:
+
+```js title="broadcast tx"
 const broadcastRes = await transferTx.broadcast({
-  // ...
+  denom: 'BNB',
+  gasLimit: Number(simulateInfo.gasLimit),
+  gasPrice: simulateInfo.gasPrice,
+  payer: '0x0000000000000000000000000000000000000001',
+  granter: '',
+  // highlight-start
   privateKey: '0x.......',
+  // highlight-end
 });
 ```
-
-:::
+</TabItem>
+</Tabs>
 
 ## Example
 
-Take `transfer` tx as an example.
+Take `transfer` tx as a complete example:
 
 ### 1. construct a transaction