Options
All
  • Public
  • Public/Protected
  • All
Menu

solarea.io docs

Help

  • Docs: solarea.io/docs
  • Examples solarea.io/examples
  • Telegram: t.me/solareio
  • Twitter: twitter.com/solareaio

Design

All views in solarea have three properties - id, name and rendering context.

Access to the view is provided by the link

solarea.io/<id>/<name>/<context>

View named default and with React context is provided by

solarea.io/<id>

or

<id>.solarea.io

Get started

Coding

To create your Solana account view, open

solarea.io/<your account address>/?edit

and login by one of browser-extension with your Solana wallet:

  • Solong
  • Phantom
  • Math
  • Ledger
  • Sollet

Afrer login you can see editor page.

Paste this code

const Component = ({value}) => {
  if(value) return (
    <div>
      <div>
        <Render id="logo" name="new"/>
      </div>
      <p>
        Hello, Solarea! My balance is {value.lamports*0.000000001} SOL
      </p>
    </div>
  )

  return (
    <div>
      My account is empty 
    </div>
  )
}

add(Component, {needAccount: true});

Press on save button, and then press on play button.

Great! Your account view is available on solarea.io/<your account address>

Linking

Also, there is another way to create a view of your account - linking.

Open

solarea.io/<your account address>/?edit

Login, then cleanup your code, and paste this to "LINK TO ID" field.

EoQH6QBC8Jjww5DGd1W5h7q3ccMh8LVEXHvMkrHkkce7 

Press save button and now your account will be shown in Solarea default account view.

You can link any of your views to any another view!

Solarea default views:

  • account: EoQH6QBC8Jjww5DGd1W5h7q3ccMh8LVEXHvMkrHkkce7
  • block 70766379
  • transaction: 5FCrbS96pKtdEmJENGtiiLNv6XuF3xcdezjH86UnkCabgLUZg2CMVfbM3ANtZ6hCMpkt3YcxHrPd7WBsZhpbrSsC

Solarea utils

Solarea provides utils via unpkg

import {useBlock, useTransaction, useAccount} from 'https://unpkg.com/solarea-utils';

add(()=>{
  const [block, isLoading] = useBlock(70766379);
  if(isLoading) return <span class="spinner"></span>

  return (
      <div>{block.transactions.length}</div>
  )
});

Use cases

Charts

Generated using TypeDoc