about.md

If you're able to set up taquito locally, you can use the wallet.js code below to programmatically place pixels on my Spectrum Color board (hangzhou testnet).

Testnet contract:

KT1MeQytVramwMXJRyksTemX2B7qF4MJoRSG

Example:

(async () => {
  // place red at top left of board
  await place({ color: 3, index: 0 });
  
  // place pixels in a batch by index:color map
  await placeBatch({
    3: '0', // beige (paper)
    4: '1', // black
    8: '2', // white
    //...
  });
})();

The board is 16 x 16. The colors are indexed like so:

0  #e9e3d5 empty (beige paper)
1  #000000 black
2  #f7f7f7 white
3  #E84420 red
4  #F4CD00 yellow
5  #3E58E2 blue
6  #999999 grey
7  #F1892A orange
8  #22A722 green
9  #7F3CAC purple
10 #F391C7 pink
11 #995F29 brown

wallet.js

import { TezosToolkit } from '@taquito/taquito/dist/taquito.es5.js';
import { BeaconWallet } from '@taquito/beacon-wallet/dist/taquito-beacon-wallet.es5.js';

const contractAddress = "KT1MeQytVramwMXJRyksTemX2B7qF4MJoRSG";
const network = "hangzhounet";

const Tezos = new TezosToolkit(`https://${network}.api.tez.ie`);
let wallet;

const curWalletGlobal = Symbol.for('active-wallet');
const oldWallet = window[curWalletGlobal];
if (oldWallet) {
  console.log('Re-using old wallet');
  wallet = oldWallet;
}

export async function disconnect () {
  if (wallet) {
    await wallet.clearActiveAccount();
  }
}

export async function connect () {
  if (!wallet) {
    console.log('Loading wallet');
    wallet = new BeaconWallet({
      name: 'ColorBoard',
      iconUrl: 'https://tezostaquito.io/img/favicon.png',
      preferredNetwork: network,
      eventHandlers: {
        PERMISSION_REQUEST_SUCCESS: {
          handler: async (data) => {
            console.log('permission data:', data);
          },
        },
      },
    });
    window[curWalletGlobal] = wallet;
  }

  // We check the storage and only do a permission request if we don't have an active account yet
  // This piece of code should be called on startup to "load" the current address from the user
  // If the activeAccount is present, no "permission request" is required again, unless the user "disconnects" first.
  const activeAccount = await wallet.client.getActiveAccount()
  if (activeAccount == null) {
    console.log('Requesting Permissions')
    const network = {
      type: network
      // rpcUrl: 'https://mainnet.smartpy.io',
    }
    await wallet.requestPermissions({ network })
  }

  Tezos.setWalletProvider(wallet);

  const pkh = await wallet.getPKH();
  console.log('pkh', pkh);
}

export async function place ({ color, index, progress = (() => {}) } = {}) {
  progress({ event: 'connect', message: 'Connecting...' });
  await connect();

  progress({ event: 'contract', message: 'Loading contract...' });
  const contract = await Tezos.wallet.at(contractAddress);

  progress({ event: 'send', message: 'Sending transaction...' });
  const op = await contract.methods.default(color, index).send({
    amount: 0,
    storageLimit: 310
  });
  
  progress({ event: 'confirmation', hash: op.opHash, message: 'Waiting for confirmation: ' + op.opHash });
  await op.confirmation(1)

  progress({ event: 'finish', message: 'Done' });
}

export async function placeBatch (changes, { progress = (() => {}) } = {}) {
  progress({ event: 'connect', message: 'Connecting...' });
  await connect();

  progress({ event: 'contract', message: 'Loading contract...' });
  const contract = await Tezos.wallet.at(contractAddress);

  progress({ event: 'send', message: 'Sending transaction...' });
  let batch = await Tezos.wallet.batch()
  Object.entries(changes).forEach(([ index, color ]) => {
    index = parseInt(index, 10);
    color = parseInt(color, 10);
    batch = batch.withContractCall(contract.methods.default(color, index));
  });

  const op = await batch.send({
    amount: 0,
    storageLimit: 310
  });
  
  progress({ event: 'confirmation', hash: op.opHash, message: 'Waiting for confirmation: ' + op.opHash });
  await op.confirmation(1)

  progress({ event: 'finish', message: 'Done' });
}