# Blockchain Z-Days Workshop

https://community-z.com/events/blockchain-z-days-2021/talks/10265

## Short Plan
1. Install Dapplet Extension
2. Create and fund a wallet
3. Create a dapplet project in Gitpod
4. Learn state machine example
5. Learn wallet interaction example
6. Deploy dapplet to Ethereum Registry

## Detailed Plan

1. Download and Drag and Drop the Dapplet Extension to install it into your Google Chrome Browser.
https://github.com/dapplets/dapplet-extension/releases/latest/download/dapplet-extension.zip
2. Connect a built-in wallet (for testing only) and copy address
3. Open workshop project at https://gitpod.io#https://github.com/dapplets/dapplet-template/tree/ex05-wallet-exercise
4. Set unique module name in `package.json#/name`
5. Run in console: `npm i` and `npm start`
6. Click Open in browser or Remote Explorer tab => 3001 port => Open Browser
7. Copy link and paste into Extension Popup => Developer tab => Paste into Dev Registry URL... => Click Add
8. Open https://twitter.com/alsakhaev or another twitter profile
9. Open DevTools (F12)
10. Activate your Dev Dapplet on Twitter page


`[DAPPLETS]: The module alsakhaev-workshop-01#default@0.1.1 is loaded.` should be shown in the console.


A button in tweets should be injected.

11. Add states into existing code
12. Add wallet interaction
13. Deploy module to Ethereum Registry

## STEP 1. State Switching

import {} from '@dapplets/dapplet-extension';
import EXAMPLE_IMG from './icons/icon19.png';
import ICON_LOADING from './icons/loading.svg';

@Injectable
export default class TwitterFeature {

  // eslint-disable-next-line @typescript-eslint/no-explicit-any,  @typescript-eslint/explicit-module-boundary-types
  @Inject('twitter-adapter.dapplet-base.eth') public adapter: any;

  async activate() {
    const { button } = this.adapter.exports;
    this.adapter.attachConfig({
      POST: (ctx) => [

        // DEFAULT => PENDING => CONNECTED => PENDING => MINED => DEFAULT

        button({
          initial: 'DEFAULT',
          DEFAULT: {
            label: 'Connect',
            img: EXAMPLE_IMG,
            exec: (ctx, me) => {
              me.state = 'PENDING';
              setTimeout(() => me.state = "CONNECTED", 1000);
            }
          },
          PENDING: {
            label: 'Pending',
            img: ICON_LOADING
          },
          CONNECTED: {
            label: 'Connected',
            img: EXAMPLE_IMG,
            exec: (ctx, me) => {
              me.state = 'PENDING';
              setTimeout(() => me.state = "MINED", 1000);
            }
          },
          MINED: {
            label: 'Mined',
            img: EXAMPLE_IMG,
            exec: (ctx, me) => {
              me.state = 'DEFAULT';
            }
          }
        }),
      ],
    });
  }
}

## STEP 2. Wallet Interaction

import {} from '@dapplets/dapplet-extension';
import EXAMPLE_IMG from './icons/icon19.png';
import ICON_LOADING from './icons/loading.svg';

@Injectable
export default class TwitterFeature {

  // eslint-disable-next-line @typescript-eslint/no-explicit-any,  @typescript-eslint/explicit-module-boundary-types
  @Inject('twitter-adapter.dapplet-base.eth') public adapter: any;

  async activate() {
    const wallet = await Core.wallet({ type: 'ethereum', network: 'rinkeby' });    

    const { button } = this.adapter.exports;
    this.adapter.attachConfig({
      POST: (ctx) => [

        // DEFAULT => PENDING => CONNECTED => PENDING => MINED => DEFAULT

        button({
          initial: 'DEFAULT',
          DEFAULT: {
            label: 'Connect',
            img: EXAMPLE_IMG,
            exec: async (ctx, me) => {
              me.state = 'PENDING';
              await wallet.connect();
              me.state = "CONNECTED";
            }
          },
          PENDING: {
            label: 'Pending',
            img: ICON_LOADING
          },
          CONNECTED: {
            label: 'Connected',
            img: EXAMPLE_IMG,
            exec: (ctx, me) => {
              me.state = 'PENDING';
              const amount = prompt('Enter the number of tokens to transfer in WEIs');

              wallet.sendAndListen('eth_accounts', [], {
                result: (_, { data }) => {
                  const [account] = data; 
                  
                  wallet.sendAndListen('eth_sendTransaction', [{
                    from: account,
                    to: account,
                    value: Core.BigNumber.from(amount).toHexString()
                  }], {
                    mined: () => me.state = 'MINED'
                  });
                }
              });    
            }
          },
          MINED: {
            label: 'Mined',
            img: EXAMPLE_IMG,
            exec: (ctx, me) => {
              me.state = 'DEFAULT';
            }
          }
        }),
      ],
    });
  }
}

## References
1. [Dapplets Extension at GitHub](https://github.com/dapplets/dapplet-extension)
2. [Example Project at GitPod](https://gitpod.io#https://github.com/dapplets/dapplet-template/tree/ex05-wallet-exercise)
3. [Ethereum Wiki: JSON RPC API](https://eth.wiki/json-rpc/API)
4. [Rinkeby Etherscan](https://rinkeby.etherscan.io/)
5. [Our Discord Channel](https://discord.gg/YcxbkcyjMV)