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>

<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

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>
  )
});

solarea.io docs