Skip to content

Commit

Permalink
improves docs
Browse files Browse the repository at this point in the history
  • Loading branch information
julia-script committed Feb 21, 2024
1 parent 229a8b1 commit ace74d2
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 87 deletions.
86 changes: 0 additions & 86 deletions README.md

This file was deleted.

135 changes: 135 additions & 0 deletions packages/dappstore-sdk/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
# DAppStore SDK Client

The DAppStore SDK Client is a toolkit to help you develop Instant DApps Widgets directly for Evmos DAppstore.

## What are Instant DApps?

Instant DApps are DApps featured in Evmos DAppstore that can be interacted with directly from the DAppstore. Essentially, they are widgets embeded in an iframe that gives users the ability to seamlessly interact with a DApp created by other developers.

## Why use the DAppStore SDK Client?

The DAppStore SDK Client main function is to provide a simple way to interact with the Evmos DAppstore from inside your DApp. Iframes allows us to securely embed third party content into our page, but it also comes with some limitations. Iframes are sandboxed and do not have access to the parent window, which means it will not have access to the user's wallet connections, forcing the them to connect their wallet again, and the developer to implement a wallet connection flow.

That not only adds complexity, but also creates an inconsistent user experience. The DAppStore SDK Client solves this problem by providing a way to interact with the Evmos DAppstore directly from the iframe, by implementing an EIP-1193 compliant provider that communicates with the DAppStore wallet connection.

Because it's an EIP-1193 provider, it can be used with any library that supports it, like ethers.js, web3.js, viem, etc.

## Getting started

The quickest way to get started is to use the `dappstore` CLI to create a new project:

1. First, create a new project with the framework of your choice, Ex. `create-react-app`:

```sh
npx create-react-app my-instant-dapp
cd ./my-instant-dapp
```

2. Then, use the `dappstore` CLI to setup the DAppStore SDK Client:

```sh
# npm
npx dappstore init
# yarn
yarn dappstore init
# pnpm
pnpm dlx dappstore init
# bun
bunx dappstore init
```

3. This will install the necessary dependencies, create a `src/dappstore.ts` file that initializes the DAppStore SDK Client and provider, and add a script to your `package.json` to start the development server with the DAppStore SDK Client. After that you can start your project, and the DAppStore dev environment.

```sh
# Starts next
npm run dev
# Starts DAppStore dev environment
npm run dev:dappstore
```

4. Navigate to http://localhost:1337 to see your DApp running in the DAppStore dev environment.

## Manual setup

If you prefer to set up the DAppStore SDK Client manually, you can do so by following these steps:

1. Install the DAppStore SDK Client and the DAppStore CLI:

```sh
npm install @evmos/dappstore-sdk dappstore
```

2. Start the DAppStore dev environment:

```sh
npx dappstore dev --target 3000 # <- or the port your app is running on
```

3. Initialize the DAppStore SDK Client in your app:

```ts
import { createDAppStoreClient } from "@evmos/dappstore-sdk";

export const dappstore = createDAppStoreClient();

/**
* EIP-1193 provider
*/
export const provider = dappstore.provider;
```

### Standalone usage:

```ts
import { createDAppStoreClient } from "@evmos/dappstore-sdk";

export const dappstore = createDAppStoreClient();

dappstore.provider
.request({ method: "eth_requestAccounts" })
.then((accounts) => {
console.log(`Accounts: ${accounts}`); // -> Accounts: ["0x..."]
});
```

### Send a transaction:

```ts
const sendTransaction = async (to: `0x${string}`) => {
const [from] = dappstore.accounts;
if (!from) {
throw new Error("No account connected");
}

return await dappstore.provider.request({
method: "eth_sendTransaction",
params: [
{
from,
to,
value: "0x1", // We recommend using a library like ethers.js or viem to handle amounts
},
],
});
};
```

### With ethers.js:

```ts
import { ethers } from "ethers";
import { createDAppStoreClient } from "@evmos/dappstore-sdk";

export const dappstore = createDAppStoreClient();

const provider = new ethers.BrowserProvider(dappstore.ethereum);

const signer = await provider.getSigner();

const sendTransaction = async (to: `0x${string}`) => {
return await signer.sendTransaction({
to,
value: ethers.utils.parseEther("0.1"),
});
};
```
1 change: 0 additions & 1 deletion packages/dappstore-sdk/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
export { createDAppStoreClient, type DAppStoreClient } from "./client";
export * from "./types/EIP1193Provider";

0 comments on commit ace74d2

Please sign in to comment.