https://github.com/subvisual/svarknet

A Starknet starter dapp built with Svelte and Vite
https://github.com/subvisual/svarknet

js starknet starter svelte

Last synced: about 1 month ago
JSON representation

A Starknet starter dapp built with Svelte and Vite

• Host: GitHub
• URL: https://github.com/subvisual/svarknet
• Owner: subvisual
• Created: 2022-03-11T17:51:16.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-09-23T16:03:20.000Z (over 2 years ago)
• Last Synced: 2024-11-08T02:52:57.661Z (3 months ago)
• Topics: js, starknet, starter, svelte
• Language: TypeScript
• Homepage:
• Size: 122 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Svarknet

A Starknet starter dapp built with Svelte and Vite

Deployed at [svarknet.netlify.app](https://svarknet.netlify.app/).

It uses [this ERC20 contract](https://goerli.voyager.online/contract/0x07394cbe418daa16e42b87ba67372d4ab4a5df0b05c6e554d158458ce245bc10).

## Getting started

Just run `yarn` to install dependencies, and `yarn dev` to run the app, on `http://localhost:5173`.

## Using stores

This starter contains several stores that help you interact with Starknet.

An example is the `connectStore`:

```svelte

{#if $connectStore.idle}

   connectStore.connectWallet()}

  >

    Connect wallet

  

{:else if $connectStore.loading}

  
Connecting wallet...

{/if}

```


You can also create a contract instance store, and provide a name. The instance will be kept in a store, and can be accessed from anywhere in the app.

```svelte

// App.svelte

  contractStore("testERC20", {

      contractAddress: CONTRACT_ADDRESS,

      abi: ERC20,

      providerOrAccount: $accountStore.account,

  });

//MintForm.svelte

  const contract = $contractsStore.testERC20;

  $contract.mint($account.address, 1)

```

In the same way, you can track the balance of a given token. It will also get added to a store, so you can interact with it elsewhere.

```svelte

// Component A

  let bal = balance("testERC20", {

    contract: $contractsStore.testERC20,

  });



  {#if $bal.loading}

    
Loading balance...

  {/if}

  {#if $bal.success}

    ERC20 Balance: {$bal.balance}

  {/if}



// Component B

  function refreshBalance() {

    $balancesStore.testERC20.getBalance();

  }

```

You can use the `transactionHandler` to track the status of a transaction. It creates a store with reactive values for `pending`, `success`, etc.

```svelte

  const tx = transactionHandler();

  const contract = $contractsStore.testERC20;

  async function mint() {

    await tx.waitFor(() =>

      $contract.mint($account.address, 1)

    );

  }



  {#if $tx.pending}

    
Pending...

  {:else if $tx.error}

    
Something went wrong!

  {:else if $tx.success}

    
Success!

  {/if}



```