diff --git a/docs/developers/intro.md b/docs/developers/intro.md index 1496e31..944aecd 100644 --- a/docs/developers/intro.md +++ b/docs/developers/intro.md @@ -1,8 +1,9 @@ --- -sidebar_position: 1 +sidebar_position: 2 --- # Getting Started - +## Web-Apps +To get started building web apps that leverage Jackal, head over to the [Jackal.js Quickstart](./jackaljs/intro.md) -# Coming Soon \ No newline at end of file +# dApp Docs Coming Soon \ No newline at end of file diff --git a/docs/developers/jackaljs/_category_.json b/docs/developers/jackaljs/_category_.json new file mode 100644 index 0000000..9f7b976 --- /dev/null +++ b/docs/developers/jackaljs/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "Web Apps", + "position":1 + } + \ No newline at end of file diff --git a/docs/developers/jackaljs/intro.md b/docs/developers/jackaljs/intro.md new file mode 100644 index 0000000..1e49889 --- /dev/null +++ b/docs/developers/jackaljs/intro.md @@ -0,0 +1,168 @@ +--- +sidebar_position: 2 +--- +# Jackal.js + +## Quickstart + +To get started using Jackal in the browser, you'll need a few things! + +### Pre-requesites + +* [Node.js](https://nodejs.org/en/download) +* [Jackal.js](https://www.npmjs.com/package/jackal.js) +* [Vite](https://vitejs.dev/) +* [Keplr](https://www.keplr.app/) + +### Setting Up + +To get started, make sure you start your project using Vite. If you have an existing React app for example, re-init the project using Vite. + +#### Updating Vite Config + +```js +// In vite.config.js: +import nodePolyfills from 'vite-plugin-node-stdlib-browser' + +export default defineConfig({ + plugins: [ + nodePolyfills() + ], +}) +``` + +### Connecting Your Wallet + +```js +const chainConfig = { // mainnet chain config + chainId: 'jackal-1', + chainName: 'Jackal', + rpc: 'https://rpc.jackalprotocol.com', + rest: 'https://api.jackalprotocol.com', + bip44: { + coinType: 118 + }, + coinType: 118, + stakeCurrency: { + coinDenom: 'JKL', + coinMinimalDenom: 'ujkl', + coinDecimals: 6 + }, + bech32Config: { + bech32PrefixAccAddr: 'jkl', + bech32PrefixAccPub: 'jklpub', + bech32PrefixValAddr: 'jklvaloper', + bech32PrefixValPub: 'jklvaloperpub', + bech32PrefixConsAddr: 'jklvalcons', + bech32PrefixConsPub: 'jklvalconspub' + }, + currencies: [ + { + coinDenom: 'JKL', + coinMinimalDenom: 'ujkl', + coinDecimals: 6 + } + ], + feeCurrencies: [ + { + coinDenom: 'JKL', + coinMinimalDenom: 'ujkl', + coinDecimals: 6, + gasPriceStep: { + low: 0.002, + average: 0.002, + high: 0.02 + } + } + ], + features: [] +} + +const walletConfig = { + selectedWallet: 'keplr', + signerChain: 'jackal-1', + enabledChains: ['jackal-1'], + queryAddr: 'https://grpc.jackalprotocol.com', + txAddr: 'https://rpc.jackalprotocol.com', + chainConfig: chainConfig +} + +// Hooking up the wallet to your app +const wallet = await WalletHandler.trackWallet(walletConfig) + +``` + +### Buying Storage Space + +Every account that wishes to use the Jackal Protocol to store data needs to have a paid account. This means giving the protocol $8/month/tb. We can do this with Jackal.js! + +```js +const storage = await StorageHandler.trackStorage(wallet) + +// (Wallet address, duration in hours (min 720), +// space in bytes (min 1000000000) +await storage.buyStorage(WALLET_ADDRESS, 720, 1000000000000) +``` + +### Creating a Folder + +```js +const fileIo = await FileIo.trackIo(wallet) + +const listOfFolders = ["folder_name", ...] +// you can create as many folders as you would like this way + +// The first time a user connects, they must init the system +const storage = await StorageHandler.trackStorage(wallet) +const msg = storage.makeStorageInitMsg() +await fileIo.generateInitialDirs(msg, listOfFolders) + +// after the first time, this code can be used instead. this will only create new folders if they don't already exist +const newFolderCount = await fileIo.verifyFoldersExist(listOfFolders) +``` + + +### Uploading a File + +```js +const fileIo = await FileIo.trackIo(wallet) + +const parentFolderPath = PARENT_FOLDER_NAME // replace this with your own path +const fileName = FILE_NAME // replace this with your own file name + +const handler = await FileUploadHandler.trackFile(FILE_OBJECT, parentFolderPath) + +const parent = await fileIo.downloadFolder(parentFolderPath) + +const uploadList = { + fileName: { + data: null, + exists: false, + handler: handler, + key: fileName, + uploadable: await handler.getForUpload() + } +} + +await fileIo.staggeredUploadFiles(uploadList, parent, {counter: 0, complete: 0}) +``` + +### Downloading a File + +```js +const fileIo = await FileIo.trackIo(wallet) + +const file = await fileIo.downloadFile( + { + rawPath: FILE_PATH + owner: OWNER_ADDRESS + isFolder: false + }, + { + track: 0 + } +) + +const fileData = file.receiveBacon() +// do what you want with the File object returned by receiveBacon +``` \ No newline at end of file