Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Update example #533

Merged
merged 1 commit into from
Apr 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion examples/nextjs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ NEXT_PUBLIC_BSC_CHAIN_ID=5601

> this is TESTNET's configuration.


Run the demo application: `npm run dev`

## Usage case
Expand All @@ -46,4 +45,6 @@ Run the demo application: `npm run dev`
* [withdraw](./src/components/withdraw/index.tsx)
* [bucket](./src/components/bucket/index.tsx)
* [object](./src/components/object/index.tsx)
* [create object with tx](./src/components/object/create/withTx.tsx)
* [create object and uploading object by delegrated agent](./src/components/object/create/delegrate.tsx)
* [query](./src/components/withdraw/query.tsx)
203 changes: 203 additions & 0 deletions examples/nextjs/src/components/object/create/delegrate.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
import { client } from '@/client';
import { getOffchainAuthKeys } from '@/utils/offchainAuth';
import {
bytesFromBase64,
Long,
RedundancyType,
VisibilityType,
OnProgressEvent,
} from '@bnb-chain/greenfield-js-sdk';
import { ReedSolomon } from '@bnb-chain/reed-solomon';
import { ChangeEvent, useState } from 'react';
import { useAccount } from 'wagmi';

export const DelegrateObject = () => {
const { address, connector } = useAccount();
const [file, setFile] = useState<File>();
const [txHash, setTxHash] = useState<string>();
const [createObjectInfo, setCreateObjectInfo] = useState({
bucketName: '',
objectName: '',
});

return (
<div>
<>
<h4>Create Object and uploading by delegated agent</h4>
bucket name :
<input
value={createObjectInfo.bucketName}
placeholder="bucket name"
onChange={(e) => {
setCreateObjectInfo({ ...createObjectInfo, bucketName: e.target.value });
}}
/>
<br />
object name :
<input
value={createObjectInfo.objectName}
placeholder="object name"
onChange={(e) => {
setCreateObjectInfo({ ...createObjectInfo, objectName: e.target.value });
}}
/>
<br />
<input
type="file"
placeholder="select a file"
onChange={(e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
setFile(e.target.files[0]);
}
}}
/>
<br />
<button
onClick={async () => {
if (!address || !file) return;

const provider = await connector?.getProvider();
const offChainData = await getOffchainAuthKeys(address, provider);
if (!offChainData) {
alert('No offchain, please create offchain pairs first');
return;
}

const uploadRes = await client.object.delegateUploadObject(
{
bucketName: createObjectInfo.bucketName,
objectName: createObjectInfo.objectName,
body: file,
delegatedOpts: {
visibility: VisibilityType.VISIBILITY_TYPE_PUBLIC_READ,
},
onProgress: (e: OnProgressEvent) => {
console.log('progress: ', e.percent);
},
},
{
type: 'EDDSA',
domain: window.location.origin,
seed: offChainData.seedString,
address,
},
);
console.log('uploadRes', uploadRes);

if (uploadRes.code === 0) {
alert('success');
}
}}
>
* delegated upload
</button>{' '}
<button
onClick={async () => {
if (!address || !file) return;

const provider = await connector?.getProvider();
const offChainData = await getOffchainAuthKeys(address, provider);
if (!offChainData) {
alert('No offchain, please create offchain pairs first');
return;
}

const uploadRes = await client.object.delegateUploadObject(
{
bucketName: createObjectInfo.bucketName,
objectName: createObjectInfo.objectName,
body: file,
timeout: 20000,
delegatedOpts: {
visibility: VisibilityType.VISIBILITY_TYPE_PUBLIC_READ,
},
resumableOpts: {
partSize: 1024 * 1024 * 16,
disableResumable: false,
},
},
{
type: 'EDDSA',
domain: window.location.origin,
seed: offChainData.seedString,
address,
},
);
console.log('uploadRes', uploadRes);

if (uploadRes.code === 0) {
alert('success');
}
}}
>
* delegated resumable upload (part size is 16mb)
</button>
<br />
<button
onClick={async () => {
if (!address) return;

const provider = await connector?.getProvider();
const offChainData = await getOffchainAuthKeys(address, provider);
if (!offChainData) {
alert('No offchain, please create offchain pairs first');
return;
}

const res = await client.object.getObjectUploadProgress(
createObjectInfo.bucketName,
createObjectInfo.objectName,
{
type: 'EDDSA',
domain: window.location.origin,
seed: offChainData.seedString,
address,
},
);

alert('progress: ' + res);
}}
>
get object's upload progress
</button>
<br />
<button
onClick={async () => {
if (!address) return;

const provider = await connector?.getProvider();
const offChainData = await getOffchainAuthKeys(address, provider);
if (!offChainData) {
alert('No offchain, please create offchain pairs first');
return;
}

const res = await client.object.delegateCreateFolder(
{
bucketName: createObjectInfo.bucketName,
objectName: createObjectInfo.objectName,
delegatedOpts: {
visibility: VisibilityType.VISIBILITY_TYPE_PUBLIC_READ,
},
},
{
type: 'EDDSA',
domain: window.location.origin,
seed: offChainData.seedString,
address,
},
);

console.log('res', res);

if (res.code === 0) {
alert('success');
}
}}
>
delegate create folder
</button>
</>
</div>
);
};
Loading
Loading