Skip to content

Commit

Permalink
Merge branch 'dev'
Browse files Browse the repository at this point in the history
  • Loading branch information
bangjelkoski committed Jan 11, 2024
2 parents 1459a2a + 06d0f35 commit b8661f0
Show file tree
Hide file tree
Showing 521 changed files with 9,890 additions and 4,100 deletions.
23 changes: 15 additions & 8 deletions .gitbook/README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,31 @@
# Getting Started

**Stable Package Version**

![Stable Package (all) versions](https://img.shields.io/npm/v/%40injectivelabs/sdk-ts/latest?label=%40injectivelabs%2Fsdk-ts)
![Supported Node Version](http://img.shields.io/badge/node-16.x-brightgreen.svg)

**Latest Package Versions:**

![](https://img.shields.io/npm/v/%40injectivelabs/sdk-ts/next?label=%40injectivelabs%2Fsdk-ts)![](https://img.shields.io/npm/v/%40injectivelabs/wallet-ts/next?label=%40injectivelabs%2Fwallet-ts)![](https://img.shields.io/npm/v/%40injectivelabs/sdk-ui-ts/next?label=%40injectivelabs%2Fsdk-ui-ts)![](https://img.shields.io/npm/v/%40injectivelabs/utils/next?label=%40injectivelabs%2Futils)![](https://img.shields.io/npm/v/%40injectivelabs/token-metadata/next?label=%40injectivelabs%2Ftoken-metadata)![](https://img.shields.io/npm/v/%40injectivelabs/networks/next?label=%40injectivelabs%2Fnetworks)
![](https://img.shields.io/npm/v/%40injectivelabs/sdk-ts/next?label=%40injectivelabs%2Fsdk-ts)![](https://img.shields.io/npm/v/%40injectivelabs/wallet-ts/next?label=%40injectivelabs%2Fwallet-ts)![](https://img.shields.io/npm/v/%40injectivelabs/sdk-ui-ts/next?label=%40injectivelabs%2Fsdk-ui-ts)

![](https://img.shields.io/npm/v/%40injectivelabs/utils/next?label=%40injectivelabs%2Futils)![](https://img.shields.io/npm/v/%40injectivelabs/token-metadata/next?label=%40injectivelabs%2Ftoken-metadata)![](https://img.shields.io/npm/v/%40injectivelabs/networks/next?label=%40injectivelabs%2Fnetworks)

_**Note:** The latest versions are published using the `next` tag. For stable versions use the `latest` tag or check npm registry for the latest stable version._ 

The purpose of this Wiki is to help developers build decentralized applications on top of Injective. Let's dive a bit deeper into each section and explain its purpose so its easier to get the bigger picture.

_Note: Reading the Technical Concepts section after reading the overview below is highly recommended. There are some concepts that can have a bit steeper learning curve than others, so we recommend going through them to understand a bit more about Injective._

* [Wallets](wallet/) - In this section, we are going to explain (in technical terms) how Accounts are derived on Injective, how you can connect your wallet straight from the dApp itself, and finally have a look at the **WalletStrategy** - a package built by the InjectiveLabs team which offers out of the box solution for providing multiple wallet solutions to the user to connect and interact with your dApp.
* [Querying](querying/) - In this section we are going to explore different ways to obtain data from different data sources needed to build your dApps. First, we are going to see how to query the chain directly and then we are going to explore the Indexer API - an indexer solution for easier data access/streaming including historical data.
* [Transaction](transactions/) - In this section, we are going to explore different ways to make transactions on Injective. First, we are going to explain (in technical terms) how Transactions work on Injective and some technical concepts around them and then we are going to have a look at how to prepare, sign, and broadcast transactions on Injective in several ways. There are a couple of ways to do this.
- [Wallets](wallet/) - In this section, we are going to explain (in technical terms) how Accounts are derived on Injective, how you can connect your wallet straight from the dApp itself, and finally have a look at the **WalletStrategy** - a package built by the InjectiveLabs team which offers out of the box solution for providing multiple wallet solutions to the user to connect and interact with your dApp.
- [Querying](querying/) - In this section we are going to explore different ways to obtain data from different data sources needed to build your dApps. First, we are going to see how to query the chain directly and then we are going to explore the Indexer API - an indexer solution for easier data access/streaming including historical data.
- [Transaction](transactions/) - In this section, we are going to explore different ways to make transactions on Injective. First, we are going to explain (in technical terms) how Transactions work on Injective and some technical concepts around them and then we are going to have a look at how to prepare, sign, and broadcast transactions on Injective in several ways. There are a couple of ways to do this.
1. Using the Cosmos native approach in creating a transaction, sign it using a **Cosmos native wallet** and broadcast it to Injective,
2. Using the Ethereum native approach in creating a transaction using EIP712 typed data, sign it using an **Ethereum native wallet** and broadcast it to Injective,
3. Using the Ethereum native approach in creating a transaction using EIP712 typed data, sign it using a **Ledger device** and broadcast it to Injective,
4. Using the Cosmos native approach in creating a transaction, sign it using a **raw PrivateKey** and broadcast it to Injective,
5. Using the Web3Gateway microservice - an API that provides fee delegation services.
* [Core Modules](core-modules/) - In this section we are going to have a quick summary of the core modules on Injective and show examples of how to create some Messages (+ pack them into a transaction, sign them using a private key, and broadcast them on Injective) within these core modules.
* [Bridge](bridge/) - In this section, we are going to have a look at Injective's interoperability and explain how developers can utilize the Peggy bridge and the IBC bridge to bridge assets over to Injective.
* [Networks](readme/networks.md) - In this section, we will look at different (pre-defined) available Networks for developers to utilize while building dApps on top of Injective, allowing them to start building without the need to make their own infrastructure.
* [Calculations](calculations/) - In this section, we will look at different calculations formula converting values between UI human-readable and chain format.
- [Core Modules](core-modules/) - In this section we are going to have a quick summary of the core modules on Injective and show examples of how to create some Messages (+ pack them into a transaction, sign them using a private key, and broadcast them on Injective) within these core modules.
- [Bridge](bridge/) - In this section, we are going to have a look at Injective's interoperability and explain how developers can utilize the Peggy bridge and the IBC bridge to bridge assets over to Injective.
- [Networks](readme/networks.md) - In this section, we will look at different (pre-defined) available Networks for developers to utilize while building dApps on top of Injective, allowing them to start building without the need to make their own infrastructure.
- [Calculations](calculations/) - In this section, we will look at different calculations formula converting values between UI human-readable and chain format.
7 changes: 6 additions & 1 deletion .gitbook/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
* [Denom Client](readme/token-metadata/denom-client.md)
* [Networks](readme/networks.md)
* [CosmJs Support](readme/getting-started-cosmjs.md)
* [Running examples](readme/running-examples.md)
* [Wallet](wallet/README.md)
* [Accounts](wallet/wallet-accounts.md)
* [Wallet Connections](wallet/wallet-connections.md)
Expand Down Expand Up @@ -50,9 +51,11 @@
* [Tendermint](querying/querying-chain/querying-chain-tendermint.md)
* [Wasm](querying/querying-chain/querying-chain-wasm.md)
* [WasmX](querying/querying-chain/querying-chain-wasmx.md)
* [Token Factory](querying/querying-chain/token-factory.md)
* [Ethereum (GraphQL)](querying/querying-ethereum.md)
* [Transactions](transactions/README.md)
* [Cosmos](transactions/transactions-cosmos.md)
* [Cosmos](transactions/transactions-cosmos/README.md)
* [Ledger through Keplr Wallet](transactions/transactions-cosmos/ledger-through-keplr-wallet.md)
* [Ethereum](transactions/ethereum.md)
* [Ethereum Ledger](transactions/ethereum-ledger.md)
* [MsgBroadcaster](transactions/msgbroadcaster.md)
Expand Down Expand Up @@ -86,3 +89,5 @@
* [DEX](building-dapps/dex.md)
* [Bridge](building-dapps/bridge.md)
* [Calculations](calculations/README.md)
* [Min Price Tick Size](calculations/min-price-tick-size.md)
* [Min Quantity Tick Size](calculations/min-quantity-tick-size.md)
4 changes: 2 additions & 2 deletions .gitbook/bridge/ethereum.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const contract = new PeggyContract({
})
```

* The snippet below instantiates a PeggyContract instance which can easily `estimateGas` and `sendTransaction` using the `web3` we provide to the contract’s constructor. It’s implementation can be found [here](https://github.com/InjectiveLabs/injective-ts/blob/master/packages/contracts/src/contracts/Peggy.ts). Obviously, this is just an example and you can use the web3 package directly + the ABI of the contract to instantiate the contract, and then handle the logic of signing and broadcasting the transaction using some web3 provider.
* The snippet below instantiates a PeggyContract instance which can easily `estimateGas` and `sendTransaction` using the `web3` we provide to the contract’s constructor. Its implementation can be found [here](https://github.com/InjectiveLabs/injective-ts/blob/master/packages/contracts/src/contracts/Peggy.ts). Obviously, this is just an example and you can use the web3 package directly + the ABI of the contract to instantiate the contract, and then handle the logic of signing and broadcasting the transaction using some web3 provider.

### From Injective to Ethereum

Expand All @@ -61,7 +61,7 @@ If you are not familiar with how Transactions (and Messages) work on Cosmos you

When `MsgSendToEth` is called on the chain, some of the validators will pick up the transaction, batch multiple `MsgSendToEth` requests into one and: burn the assets being withdrawn on Injective, unlock these funds on the Peggy Smart Contract on Ethereum and send them to the respective address.

There is a bridgeFee included in these transactions to incentivise Validators to pick up and process your withdrawal requests faster. The bridgeFee is in the asset the user wants to withdraw to Ethereum (if you withdraw INJ you have to pay the bridgeFee in INJ as well).
There is a bridgeFee included in these transactions to incentivize Validators to pick up and process your withdrawal requests faster. The bridgeFee is in the asset the user wants to withdraw to Ethereum (if you withdraw INJ you have to pay the bridgeFee in INJ as well).

Here is an example implementation that prepares the transaction, uses a privateKey to sign it and finally, broadcasts it to Injective:

Expand Down
15 changes: 9 additions & 6 deletions .gitbook/building-dapps/configuring-nuxt.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ $ yarn add @bangjelkoski/node-stdlib-browser
$ yarn add -D @bangjelkoski/vite-plugin-node-polyfills
```

Make sure you are using the `vue-tsc@^1.2.0`, `nuxt@^3.3.3`, `typescript@^4.9.5` versions.
Make sure you are using the `[email protected]
`, `nuxt@^3.8.1`, `typescript@^5.0.4` versions.

**Buffer**

Expand All @@ -55,7 +56,7 @@ export default defineNuxtPlugin(() => {
If you are going to use `pinia` as state management, add it to your packages:

```bash
$ yarn add pinia @pinia/nuxt
$ yarn add @pinia/nuxt@^0.4.9
```

### 5. Using `vueuse`
Expand Down Expand Up @@ -88,11 +89,12 @@ Then, we need to configure the `tsconfig.json` if you are using TypeScript (reco

### 6. nuxt.config.ts / packages.json

Before we boot our application, we need to set everything up in the `nuxt.config.ts`, the main configuration point for every Nuxt 3 application. Let's see a reference `nuxt.config.ts` and explain every line using comments so its easier for developers to understand.
Before we boot our application, we need to set everything up in the `nuxt.config.ts`, the main configuration point for every Nuxt 3 application. Let's see a reference `nuxt.config.ts` and explain every line using comments so it's easier for developers to understand.

```ts
// filename - nuxt.config.ts
import { nodePolyfills } from "@bangjelkoski/vite-plugin-node-polyfills";
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineNuxtConfig({
ssr: false, // whether to pre-render your application
Expand Down Expand Up @@ -120,10 +122,10 @@ export default defineNuxtConfig({

// We generate only sitemaps for the client side as we don't need a server
// Note: there is a problem with sitemaps for Vite + Nuxt3
// as usually is that it takes to much time/memory to generate
// as usual is that it takes too much time/memory to generate
// sitemaps and the build process can fail
// on Github Actions/Netlify/Vercel/etc so we have to use another
// strategy like generating them locally and them pushing them to services like
// strategy like generating them locally and pushing them to services like
// busgnag
sourcemap: {
server: false,
Expand All @@ -137,7 +139,8 @@ export default defineNuxtConfig({
"process.env.DEBUG": JSON.stringify(process.env.DEBUG),
},

plugins: [ // setting up node + crypto polyfils
plugins: [ // setting up node + crypto polyfils + vite TS path resolution
tsconfigPaths(),
nodePolyfills({ protocolImports: false })
],

Expand Down
2 changes: 1 addition & 1 deletion .gitbook/building-dapps/configuring-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ $ yarn add @bangjelkoski/vite-plugin-node-polyfills

### 4. Using a state management

React has a lot of different state managers, pick the one you are going to use and install it. You can use the build in `Context API` for state management without the need to install a third-party solution. The preffered third-party state managers are `Redux` and `Zustand`.
React has a lot of different state managers, pick the one you are going to use and install it. You can use the build in `Context API` for state management without the need to install a third-party solution. The preferred third-party state managers are `Redux` and `Zustand`.

```bash
$ yarn add zustand
Expand Down
10 changes: 5 additions & 5 deletions .gitbook/building-dapps/smart-contract.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Smart Contract

Within these short series we are going to showcase how easy it is to build a dApp on top of Injective. There is an open-sourced [dApp](https://github.com/InjectiveLabs/injective-simple-sc-counter-ui) which everyone can reference and use to build on top of Injective.There are examples for Next, Nuxt and Vanilla Js. For those who want to start from scratch, this is the right place to start.
Within these short series we are going to showcase how easy it is to build a dApp on top of Injective. There is an open-sourced [dApp](https://github.com/InjectiveLabs/injective-simple-sc-counter-ui) which everyone can reference and use to build on top of Injective. There are examples for Next, Nuxt and Vanilla Js. For those who want to start from scratch, this is the right place to start.

In this example we will implement the connection and interact with an example Smart Contract deployed on the Injective Chain using the injective-ts module.

Expand All @@ -10,7 +10,7 @@ The series will include:
- Connecting to the Chain and the Indexer API,
- Connect to a user wallet and get their address,
- Querying the smart contract ( in this case fetching the current count of the smart contract ),
- Modifying the state of the contract ( in this case incrementing the count by 1, or setting it to a speciffic value),
- Modifying the state of the contract ( in this case incrementing the count by 1, or setting it to a specific value),

### Setup

Expand Down Expand Up @@ -167,7 +167,7 @@ const msg = MsgExecuteContractCompat.fromJSON({
contractAddress: COUNTER_CONTRACT_ADDRESS,
sender: injectiveAddress,
msg: {
increment: {}, // we pass an empty object if the method doesnt have parameters
increment: {}, // we pass an empty object if the method doesn't have parameters
},
})

Expand All @@ -181,7 +181,7 @@ const response = await msgBroadcastClient.broadcast({
console.log(response)
```

Now, lets see an example of how to se the counter to a specific value. Note that in this Smart Contract the count can be set to specific value only by the creator of the Smart Contract.
Now, lets see an example of how to set the counter to a specific value. Note that in this Smart Contract the count can be set to specific value only by the creator of the Smart Contract.

```js
// Preparing the message
Expand All @@ -191,7 +191,7 @@ const msg = MsgExecuteContractCompat.fromJSON({
sender: injectiveAddress,
msg: {
reset: {
count: parseInt(number, 10), // we are parseing the number variable here because usualy it comes from an input which always gives a string, and we need to pass a number instead.
count: parseInt(number, 10), // we are parsing the number variable here because usually it comes from an input which always gives a string, and we need to pass a number instead.
},
},
})
Expand Down
12 changes: 6 additions & 6 deletions .gitbook/calculations/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Calculations

Here are some formula formatting values between the chain and UI human-readable.
In this page we are going to look through some calculations and formatting to understand better about how numbers are represented on the chain vs how we are showing them on the UI.

### Bridges Supported
### Tick Sizes

| Topic | Description |
| ------------------------------------------------------- | --------------------------------------- |
| [Market min price tick size](minPriceTickSize.md) | Minimum market order price tick size |
| [Market min quantity tick size](minQuantityTickSzie.md) | Minimum market order quantity tick size |
| Topic | Description |
| ---------------------------------------------------------- | --------------------------------------- |
| [Market min price tick size](min-price-tick-size.md) | Minimum market order price tick size |
| [Market min quantity tick size](min-quantity-tick-size.md) | Minimum market order quantity tick size |
File renamed without changes.
2 changes: 1 addition & 1 deletion .gitbook/contracts/injective-name-service.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ console.log(injectiveAddress)

### Reverse Resolution

* Get primary name for injective address.
* Get the primary name for injective address.

```ts
import { getNetworkEndpoints, Network } from '@injectivelabs/networks'
Expand Down
Loading

0 comments on commit b8661f0

Please sign in to comment.