## Welcome to the GC PBL course 2025!
### How this course works

- All ***Project-Based Learning courses*** consist of a series of ***modules***.
- Each **module** begins with a list of ***Student Learning Targets (SLTs)***.
- For **each SLT**, there is a ***lesson*** that introduces some important ideas. Usually, these lessons show you how to ***do something***.
- We believe that ***learning by doing*** is the most effective way to learn. That's why we will introduce several different ***projects*** throughout this course.

Welcome to the first lesson on the GameChanger Wallet, focusing specifically on the wallet dApp connector. This lesson will highlight the benefits of using GameChanger for developing decentralized applications (dApps) on the Cardano blockchain.

### Prerequisites

This is a more advanced course to learn building dApps on GC there are a lot of resources already available to learn the basics of using a Gamechanger wallet. To start this course mare sure you are already familiar with the following:

- Javascript development. Knowledge of NodeJS is not required.
- The basics of JSON file structure.
- How the eUTXO model of Cardano works.
- Setting up a wallet on GC and the several types of wallet that are available.
- VSCode and installing extensions. ( It will not be hard to use other editors )

Introduction

GameChanger Wallet offers a streamlined and efficient approach to building dApps on Cardano, making the process significantly faster and more decentralized compared to traditional methods. 

GCScript offers several advantages over CIP-30 for Web3 development, particularly in the areas of decentralization, transparency, interoperability, security, and developer experience.
Here’s why:

**Interoperability**

1. **Standardized Web Technologies**: GameChanger leverages web technologies that are already available in your browser, eliminating the need for additional software installations and simplifying the development process.
2. **Open and accessible source code:** With GCScript, the source code is publicly available on the blockchain, allowing anyone to inspect it for vulnerabilities or malicious code. This increases trust in dApps, as users do not have to blindly rely on developers' claims.
3. **Universal Language:** GCScript is designed to be a universal language for dApps on Cardano. This facilitates interoperability between different protocols and fosters a more connected ecosystem where dApps can interact seamlessly.
4. **Code reuse:** GCScript code stored on the blockchain is easily accessible and reusable by other developers, promoting collaboration and accelerating innovation in the Cardano ecosystem.

**Transparent**

1. **Helios Language and CBOR**: The Helios language, used within GameChanger, allows for CBOR (Concise Binary Object Representation) compilation directly in the browser. This means smart contracts can be written, compiled, and executed seamlessly within the wallet environment. This allows users to read and verify if contracts they are running are correct. Before executing them. Because it is very difficult to decompile CBOR. It will limit your capacity to check the logic. You can also run compiled Plutus when you want. 
2. **On-chain code storage:** GCScript can be stored on the Cardano blockchain using GCFS, making it censorship-resistant and ensuring maximum availability. Even if the original developers disappear, anyone can access the code and interact with the dApp.
3. **Simplicity and ease of use:** GCScript is designed to be simple and easy to learn, with a syntax similar to JSON. This lowers the entry barrier for new developers and speeds up the development process.

**Decentralization**

1. **Standardized API services with Dandelion-Lite**: One of the standout features of GameChanger is its use of the dandelion-lite services. GC utilizes GraphQL and other services, providing a standardized infrastructure that developers can rely on. It removes the complexity of managing and running API services independently, A task that can be challenging and resource-intensive.
2. **Ease of Installation**: Dandelion-lite can be installed by anyone with basic knowledge of Linux and Docker, making it accessible even for developers who may not have extensive experience.

**Secure**

1. **Client-side execution:** GCScript runs in users' wallets, not on centralized servers or frontends as is often the case with dApps using CIP-30. This gives users full control over their assets and data, better reflecting the principles of Web3.
2. **User control:** GCScript's client-side execution means dApps no longer need to request full access to the user's wallet, as is common with CIP-30. This improves security by reducing the risk of malicious dApps stealing funds or data.

Overall, GCScript represents a significant shift from CIP-30 and other standards by promoting a more decentralized, transparent, secure, and interoperable dApp ecosystem on Cardano.

101.1: I understand why Gamechanger was built

A big part of the tasks we are going to be completing will take place in the dApp builder section of the Gamechanger wallet. This is a visual code like workspace where you can edit code and execute it with the wallet.
![](https://example.com/your-image.png)

![](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/playground.webp)

101.2: I can find the GC playground IDE (code editor)

Communication to the Gamechagner Wallet is done through scripts.
And is coded in a JSON based programming language, a language full of native Cardano-related functions.

This domain specific language is called GCSciprt DSL

A simple "Hello World" example in GCScript"

```
{
    "type": "script",
    "title": "Example",
    "description": "Once executed will return 'Hello World!' ",
    "exportAs": "myResults",
    "run": {
        "myVariable": {
            "type": "data",
            "value": "Hello World"
        }
    }
}
```

and the isomorphic results:

```
{
    "exports": {
        "myResults": {
            "myVariable": "Hello World!"
        }
    }
}
```

### Function calls

A function call is a JSON object with a "type" property. It's value is the name of the function. All the other properties are arguments.

There is limited set of function you can call (around 40)

Example of a function call without arguments:

```
{
	"type": "getCurrentAddress"
}
```

the "getCurrentAddress" function returns current wallet
address and has no arguments.

Example of a function call with an argument named "value":

```
{
    "type": "data",
    "value": [
        "foo",
        "bar",
        true,
        null,
        {
            "nested": {
                "object": {
                    "inside": "here"
                }
            }
        }
    ]
}
```

The "data function returns the JSON type passed as a "value"
argument, and allows you to define a constant"

### Blocks of code

GCScipt has nested function calls. A block of code is definded by the "script" function,
The body is a key-value map, or list, of function calls. They are passed on the "run" argument

JSON arguments can be passed into block context through the "args" property

Example of a block of code:

```
{
	"type": "script",
	"run": {
		"resulte01": {"type": "data", "value": "A"},
		"resulte02": {"type": "data", "value": "B"},
		"resulte03": {"type": "data", "value": "C"}
	}
}
```

Example of a block of code passing an argument to it's context

```
{
	"type": "script",
	"args": "Hey, I'm an argument!",
	"run": {
		"name":    {"type": "getname"},
		"address": {"type": "getCurrentAddress"},
		"slot":    {"type": "getCurrentSlot"}
	}
}
```

### Cache and Exports

Locally, a block of code, (and descendants) has a cache, a local scope memory space where child function calls store their results.

In order to return data from script execution back to a dApp, data needs to be exported from the local cache into the unique global export object. This can be done by passing an “exportAs” property with a name for those exports.

Example of a block of code with exports:

```
{
    "type": "script",
    "exportAs": "myFirstExport",
    "run": {
    "resulte01": {"type": "data", "value": "A"},
    "resulte02": {"type": "data", "value": "B"},
    "resulte03": {"type": "data", "value": "C"}
    }
}
```

Exported values

```
{
    "exports": {
    "myFirstExport": {
        "resulte01": "A",
        "resulte02": "B",
        "resulte03": "C"
        }
    }
}
```

### Inline Scripting Language (ISL)

ISL is a limited subset of Javascript. You can run a script inside the "macro" type function call.

The ISL "get" function allows you to return the value of a "block argument" of previous function results stored in the script cache.

Example of a block of code with exports:

```
{
    "type": "script",
    "exportAs": "myPrivateWalletData",
    "return": {
        "mode": "last"
    },
    "run": {
        "address": {
            "type": "getCurrentAddress"
        },
        "hash": {
            "type": "macro"
        },
        "run": {"sha512(get('cache.address'))"}
    }
}
```

Returns the following results

```
{
    "exports": {
    "myPrivateWalletData": "77688725....725048ea"
    }
}
```

101.3  I understand the basic buildingblocks of a GC script

Ok you have found the playground. This is the place to prototype your transactions. And you can also run them. Feel free to explore the example transactions. And on a preprod network you can run test transactions as much as you like for free.

Transactions in GC mirror in a big way how Cardano transaction are structured. Very much like the standard cardano-cli command. But there are some convenience functions added to to create context and to make running of the script more convenient.

In the playground there is a “Docs” tab here you can find a detailed reference of all the allowed statements. Best place to start is at "Initial block of code". But right now we will stick to the basics. Basic components:

**Type** - Define the type of the transaction. Normally of type script.

**Title** - Define the title. This will be used in the transaction and seen by the user. You can use it to communicate with the user what the transaction is going to do.

**Run** - This is the business part of the transaction where transaction actions are being described. The run part of the transaction usually consist of 3 parts.

-**Build** - This is where the inputs and the outputs are defined. The good part about the Gamechanger wallet is that it will automatically balance the transaction for you. So you do not need to define a change address.

-**Sign** - Once the transaction is built you need to sign it. Make sure you are the owner of all the assets defined in the build stage. Submission of the transaction is now authorized.

-**Submit** - This will send the signed transaction to the Cardano blockchain.

See below what this would look like.

```
{
    "type": "script",
    "title": "Pay me 1 tADA",
    "run": {
        "build_1": {
            "type": "buildTx",
            "name": "Basic tx",
            "tx": {
                "outputs": [
                    {
                        "address": "addr_test1qrl0....tdp2f6rqvz02jw",
                        "assets": [
                            {
                                "policyId": "ada",
                                "assetName": "ada",
                                "quantity": "1000000"
                            }
                        ]
                    }
                ]
            }
        },
        "sign_1": {
            "type": "signTxs",
            "namePattern": "Sign",
            "detailedPermissions": false,
            "txs": [
                "{get('cache.build_1.txHex')}"
            ]
        },
        "submit_1": {
            "type": "submitTxs",
            "namePattern": "Submit",
            "txs": "{get('cache.sign_1')}"
        }
    }
}
```

101.4: I can write a basic GC script

Go to https://payments.m2tec.nl/ and press F12. This will drop you into the debugging environment.

![](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/web-browser-debugger.png)

In the debugger tab you can see that this site consists of only two pages. An index.html and an index.js. This is all you need to build your own dApp. Skim over both pages and try to understand the basic structure. 

Find "let gcscript =" in the index.js file. What is the value of the "description" property?

Assignment 101: Go find GC script in a deployed dApp

Module 101: Introduction

## Welcome module 102!
Ok, in module 101 we have learned about the playground and have an understanding about the basic structure of a GC script. In this module we are going to learn the basics of how this works in a dApp that you can run locally. We are going to be using VS Code. But other editors should work too.   

Ok we know where the playground is and the basic stucture of a transaction. Go to the GC wallet playground. https://beta-preprod-wallet.gamechanger.finance/playground
The default script is a basic transaction to send 1 ADA. We are going to run this script.
Important is to check the context in which you are running this script. 
Circled in blue here is the enpoint. In this case you can see you are on the beta version of the GC wallet. And the environment is the preprod network. 
Circled in green. You can see you wallet name and the icon will show you what type of wallet this is. In this case it is a mnemonic wallet.
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.1/gc-header.png?raw=true)
As you can see below the default policy id is “ada”. Make sure you have some test ada in your wallet. Otherwise get some test Ada here.  https://docs.cardano.org/cardano-testnets/tools/faucet/ Make sure you select the preprod network, in the environment drop down menu.
```
"outputs": [
    {
        "address": "addr_test1qrl07u9ssdtdwtzhrt0zrrr7...2vhc2ftdp2f6rqvz02jw",
        "assets": [
            {
                "policyId": "ada",
                "assetName": "ada",
                "quantity": "1000000"
            }
        ]
    }
```
It is very easy to adapt this basic recipe. You could for example change the address. This is in the output section of the transaction. This defines where the tokens are going to end up. You do not need to balance the transaction in GC. The change address is automatically assumed to be the wallet address where you are currently working in. 
You have made your changes? Ok then. Now we are going to run it. Straight forward by pressing the run button.
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.1/run-button.png?raw=true)
GC has a GCscript interpreter and live debugger. The process will run in several stages following the instructions set in the script. The scripts get executed wallet-side, on the users device. 

Transaction explanation. You can see here how the title and the description of the script are reused in the dialog box.

![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.1/tx-action-request.png?raw=true)

Preparing the transaction for signing 
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.1/tx-pre-sign.png?raw=true)

Explanation of inputs and outputs. This shows exactly where your funds are going. To minimize risk of making errors. 
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.1/tx-overview.png?raw=true)

After signing you can wait here for the transaction to complete. 
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.1/tx-completion.png?raw=true)

You can find your completed transaction in the home screen. 
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.1/Transaction-history.png?raw=true)

Here you can check how the transaction was executed. Inputs, outputs and metadata. 
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.1/tx-input-output.png?raw=true)




102.1: I can send a transaction using a  GC script

As you have seen in the previous lesson. The transaction is executed in several stages. This closely matches the buildup of the script. Gamechanger provides some extra information to closely follow what is going on during the transaction. For debugging of validation purposes. 
As you can see below you can expand the advanced section. In here you can follow several aspects of what is going on in a script. For example. The code section. This is the interpreted code. Useful for example when you are using variable in your JavaScript and want to check if they ware coming through in the correct way.
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.2/txa-advanced-2.png?raw=true)
In the first stage the status tab will not show any results. However when you press continue and move on the the next stage. You will find something interesting there. This is because by pressing this button you have now completed the build section of the script. 
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.2/txb-status_2.png?raw=true)
Ok there is something in the cache. That’s great. You now understand better how GC works. Every section of the script generates data which you can reference in follow up sections. You do this by calling the get function. 
`"{get('cache.stage1_build_transaction.txHex')}"`
Look at the green arrows. You can access the data using the dot separator. The “buildTx” type section generates the transaction hex. This “hex” data is needed as an input by the “signTxs" type. And the sign transaction section gets access to this by calling the get function. 
Ok we are moving on to the next stage. After pressing the sign button. Look at what happens. More data in the cache. Perfect! And this matches exactly with what is going on in the next stage of the script.
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.2/txb-sign_2.png?raw=true)
I have referenced the documentation here as a reminder. This will help you in your own exploration when you are ready to do something new. You will see here the two sections that should look very familiar. “type” and “txs” are required. And those are present in the script.
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.2/docs-sign.png?raw=true)
Next step is to submit the transaction. 

```
        "stage3_submit_transaction": {
            "type": "submitTxs",
            "namePattern": "Submitted Demo Transaction",
            "txs": "{get('cache.stage2_sign_transaction')}"
        },
```
As you can see this consumes the signed transaction data from the cache and you are basically done. 





102.2: I can analyze what is going on during GCScript

As you probably now realize you do not need to run the script in the playground every time something needs to happen. You want to build your own dApps. Ok here we go!
Create a new folder for a project like you normally would. And start VS Code here. 
Go to the extension marketplace and install live server.
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.3/code-liveserver.png?raw=true)
This will allow you to run html pages for testing purposes. 
I have create the most basic webpage here called index.html

```
<!DOCTYPE html>
<html>
<body>

<h1>dApp</h1>
<p>This is my first dApp.</p>

</body>
</html> 
```
Right clicking in the file will allow you to run it like a web server would.
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.3/code-run-page.png?raw=true)
We need this setup to start testing our dApp in the following lesson. 




102.3: I can setup my dev environment: http server using VSCode

Ok we are upgrading our HTML to load the GC Javascript library. 
index.html
```
<!DOCTYPE html>
<html>

<head>
    <link rel="icon" type="image/png" href="/favicon.png">
    <script src='https://cdn.jsdelivr.net/npm/@gamechanger-finance/gc/dist/browser.min.js'></script>
</head>

<body>

    <h1>dApp</h1>
    <p>This is my first dApp.</p>

    <script src="index.js"></script>
</body>

</html>
```
index.js
```
async function main() {
    const gc = window.gc

    console.log(gc);
}

window.onload = function () {
    main();
}
```
That is all we had to do. 

In the HTML <head> we are loading the GC library. At the bottom of the body we are loading our own Javascript, the index.js file. 
In the index.js file we have a main function that is started on loading of the browser window. We console.log gc and in your browser console window you can see the functions that are available to you.
![](https://github.com/M2tec/Catalyst-F12-Gamechanger-Education/blob/master/course-images/102.4/dapp-basic-1.png?raw=true)
Ok library is loaded. Now what? Well we are going to run GC scripts. Just like we did in the playground. First we are going to make a transaction link. This will redirect the user to the GC wallet. 
index.html

```
<!DOCTYPE html>
<html>

<head>
    <link rel="icon" type="image/png" href="/favicon.png">
    <script 
        src='https://cdn.jsdelivr.net/npm/@gamechanger-finance/gc/dist/browser.min.js'>
    </script>

</head>

<body class="p-3">

    <h1>dApp</h1>
    <p>This is my first dApp.</p>

    <a id="txLink" 
       href='https://beta-preprod-wallet.gamechanger.finance'>
       Transaction
    </a>

    <script src="index.js"></script>
</body>

</html>
```
Ok here we added a link to allow a user to make a transaction. The href is where the link is pointing to. This has a placeholder link to gamechanger.finance. In the index.js file we are going to change the href. The href will contain a compressed version of the GCscript. Allowing you to pass your instructions to a users wallet. 
index.js

```
let txLinkElement = document.getElementById('txLink');

async function main() {
    const gc = window.gc

    let gcscript = {
        "type": "script",
        "title": "🚀 TX",
        "description": "Payment",
        "run": {
            "build_tx": {
                "type": "buildTx",
                "tx": {
                    "outputs": [
                        {
                            "address": "addr_test1qrl07u9ssdtdwtzhrt0zrrr79yejxhfvmsmjt9jxqyaz0ktp6ydulqht6r9z4ld0jms3a3c7gw45u32vhc2ftdp2f6rqvz02jw",
                            "assets": [
                                {
                                    "policyId": "ada",
                                    "assetName": "ada",
                                    "quantity": "1000000"
                                }
                            ]
                        }
                    ]
                }
            },
            "sign_tx": {
                "type": "signTxs",
                "namePattern": "Signed Demo Transaction",
                "detailedPermissions": false,
                "txs": [
                    "{get('cache.build_tx.txHex')}"
                ]
            },
            "submit_tx": {
                "type": "submitTxs",
                "namePattern": "Submitted Demo Transaction",
                "txs": "{get('cache.sign_tx')}"
            }
        }
    }

    const actionUrl = await gc.encode.url({
        input: JSON.stringify(gcscript),
        apiVersion: '2',
        network: "preprod"
    })


    console.log(actionUrl)

    txLinkElement.setAttribute("href", actionUrl)

}

window.onload = function () {
    main();
}
```
Ok a whole lot has changed. But it might look more complicated than it really is. First we get the link element to access it later in the script. Then we define the GCscript. This is basically copied from the playground. Where we already tested this is working. 
Next we take this GCscript and pass it into the gc.encode.url function. Make sure to pass the correct network. We now have an action url. Next we take this action url and attach it to the link. Not bad. As you can see your script is packed inside the url. This is the way your dApp communicates with the GC wallet. 
This is the bare essence of a Gamechanger dApp. Click the link and you can let the user take actions on the wallet.




102.4: I am able to run my own scripts using gc lib from npm

Playground is just a staging ground for your first project. And to test you scripts. Scripts can easily be used in websites / dApps. An example of this is https://payments.m2tec.nl/. This site uses a library provided by Gamechanger. The library has some convenience functions. Go to the site and press F12. This will open up the developer side window.

In the debugger tab you can see that this site consists of only two files. An index.html and an index.js. This is all you need to build your own dApp. Skim over both pages.

Copy the GC script from the JS file. And paste it into the playground window. 

Modify the script to send 5 tAda to you own wallet. Paste your address for verification. 

Assignment 102: Hack into a payments.m2tec.nl dapp <--> wallet connection

Module 102: Basic transaction

## Welcome to module 201!
Gamechanger has considerable support to setup DAO infrastructure. Allowing with a lot of flexibility to build the infrastructure that suits your organization. 

The wallet makes use of a standard known as Hierarchy for Deterministic Wallets (HD), originally introduced in BIP-32 for Bitcoin. (https://en.bitcoin.it/wiki/BIP_0032). This standard allows for a great deal of flexibility. 

You have your seed phrase keeping your wallet safe. In a lot of wallets you have a single address associated. This is because there is no way to organize these addresses in a consistent way. Gamechanger comes to the rescue in a big way here. Workspaces allow you to label child addresses in a wallet. Making a great feature even better.

[BIP-0044](https://en.bitcoin.it/wiki/BIP_0044) a Bitcoin improvement proposal created a wallet standard extended by Cardano.  Every wallet defined by a seed phrase contains a large amount of address. If you know the seed phrase of a wallet and have an account index and an address index you are able to calculate the exact address every time without having to store or retrieve it somewhere. The consequence of this is that wallet addresses are very long strings. This makes them cumbersome to use. GC solves this by giving a name to an address. The wallet names are wallet internal so not addressable from other wallets like a wallet handle service. 

![address_BIP_32.svg](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/d1ea4e3e8cbf10da562fed6f8827a832f62b7e52/course-images/201.1/address_BIP_32.svg)

Ok, so how do we create a workspace. This can be done using GCScript. Using the “loadConfig” type. The loadConfig type holds an array of layers. One of these layers can be of type “Workspace”

“updateId” is just a version reference here. 

For the full documentation look here [loadConfig documentation](https://beta-wallet.gamechanger.finance/doc/api/v2/loadConfig.html)

```
{
    "type": "script",
    "title": "Load a configuration",
    "description": "Loading a Workspace configuration into the wallet",
    "run": {
        "usingWorkspaces": {
            "type": "loadConfig",
            "updateId": "Workspace-exercise-1",
            "layers": [
                {
                    "type": "Workspace",
                    "items": [
                        {
                            "namePattern": "my_workspace",
                            "titlePattern": "My Workspace",
                            "descriptionPattern": "My custom wallet settings!"
                        }
                    ]
                }
            ]
        }
    }
}
```

This script creates an empty workspace. To make it useful we would have to add more layers. Also you are not limited to the amount of workspaces you can create. Just add as many layers as you want. 

When playing around with workspaces it is always possible to reset your configuration. 
From sidebar menu navigate through *discover -> advanced -> workspaces* to access **Workspaces** page.

![workspace_config.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/201.1/workspace_config.png)

But this is also a good place to discover more about the current state of your wallet configuration. Here you see Workspace_2 expanded and you can press the “eye” icon to inspect the wallet configuration further. 
If you want to import a workspace from example Roundtable which results in the same setup. You will need to respect the sorting order of the addresses.

201.1: I know what a Workspace is

Next step is to link an address to a workspace. An address needs a spend and a stake key. So we are also going to generate these first. 
```
{
    "type": "script",
    "title": "Load a configuration",
    "description": "Loading a Workspace configuration into the wallet",
    "run": {
        "usingWorkspaces": {
            "type": "loadConfig",
            "updateId": "Workspace-exercise-1",
            "layers": [
                {
                    "type": "Workspace",
                    "items": [
                        {
                            "namePattern": "my_workspace",
                            "titlePattern": "My Workspace",
                            "descriptionPattern": "My custom wallet settings!"
                        }
                    ]
                },
                {
                    "type": "Key",
                    "workspaceIds": [
                        "my_workspace"
                    ],
                    "items": [                        
                        {
                            "namePattern": "my_key_spend",
                            "kind": "spend",
                            "accountIndex": 5,
                            "addressIndex": 0
                        },
                        {
                            "namePattern": "my_key_stake",
                            "kind": "stake",
                            "accountIndex": 5,
                            "addressIndex": 0
                        }
                    ]
                },
                {
                    "type": "Address",
                    "workspaceIds": [
                        "my_workspace"
                    ],
                    "items": [
                        {
                            "namePattern": "My_Address_1",
                            "stakePubKeyName": "my_key_spend",
                            "spendPubKeyName": "my_key_stake"
                        }
                    ]
                }
            ]
        }
    }
}
```
As you can see below. Every layer you can name with a “namePattern”. The arrows point where the name is used to refer to the data this layer generated. In this way keys and addresses are linked to “my_workspace” and the keys in their turn are linked to the address. 
![](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/201.2/workspace_account_2.png)
And that’s it you can add as many workspaces keys and addresses as you like. 


201.2: I know how to create a workspace with child addresses

Multisig wallets are a type of wallet that need multiple people’s signature before you can submit the transaction. This type of wallet is often used in a DAO. Where approval of multiple people is required to proceed with a process or project. Wallets use “Native Scripts” to make this possible. 

Native scripts are a simplified type of script, completely separate from Plutus. See documentation on how native scripts work

https://github.com/IntersectMBO/cardano-node/blob/1.26.1-with-cardano-cli/doc/reference/simple-scripts.md

Setting up 2 wallets. Click this link to make that happen: [Gift wallet](https://beta-preprod-wallet.gamechanger.finance/api/2/run/1-H4sIAAAAAAAAA72RzUvEMBDF_5Uhl71UYVdPvdUPVhFlFcRzbGdLIE26kwndUvq_m35tUPAgC946fb95eXnpBLc1ilS4nFTNIhGsWA8_bgklK1NCplWOCdzYz6AWOIHKmsBs0SBJRgcb8EYdPMLrG9TSucZScYEmp7ZmLGCr9gwfUmtkdxls8Fhb4swFj-c204x0X1oXBPLBtxPjmcPHnK4ZV-fjLAVQVtYbFul6yLSXXvOLrHAnOXgN0SaHk7ibM0XgsRqR9ebqOmJ38XqRfHcIbMGp0oB08MP5CduITjmj-KAMR7W1nk7tgHKw6papX4WlA4mUyWNYt43RVhbLjEcmOQ19IoanOKeb5Sl_bSYAf-_lm-u_t9L3X4pTns7LAgAA)
Make sure to copy the exports when reaching the green “done”. 

![wallet-create-exports.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/201.3/wallet-create-exports.png)

Or if you have already some wallets setup. Get address info like this. 

```
{
    "type": "script",
    "title": "Key Info",
    "description": "Get hash",
    "exportAs": "data",
    "run": {
        "mainSpendKey": {
            "type": "getSpendingPublicKey"
        },
        "mainStakeKey": {
            "type": "getStakingPublicKey"
        }
    }
}
```

Or you can use the “getAddressInfo” function in a macro block. This will give you identity information on any address you enter as an argument. 

```
{
    "type": "script",
    "title": "Key Info",
    "description": "Get hash",
    "exportAs": "data",
    "run": {
        "KeyInfo": {
            "type": "macro",
            "run": "{getAddressInfo('addr_test1qzhk0pycq7g5krcl88dfly68r4d8v0qem66tfz0pv3gm284vtuft7q8490g8a8jq6f47sy87gvse82danhchjvjf3ucqsccj6p')}"
       }
    }
}
```

You will need to add this info as arguments at the start of the script. 

```
{
    "type": "script",
    "title": "Multisig 2 of 2 Workspace",
    "description": "Alice and Bob must sign",
    "args":{
        "Alice":{
					  "spendKeyHashHex": "ccc8ff3028155a487228a6e0ecf02edcd3cd42a02ab4eee947766227",
			      "stakeKeyHashHex": "9957781a7c45357f96120ee73f80bfaa98adae68ce6ae80a3014d175"
        },
        "Bob":{
				    "spendKeyHashHex": "0146e2d57bb52dc888f15cf17fef414e4ab1b71a36fdf8cd199bc2c2",
		        "stakeKeyHashHex": "80ca5adf47eb9ff0f4408bd0e3927fc39e1472d460441d4cdb9d2d28"        }
    },
    "run": {
        "walletSetup": {
            "type": "loadConfig",
            "updateId": "multisigs_update_1",
            "layers": [
                {
                    "type": "Workspace",
                    "items": [
                        {
                            "namePattern": "multisigs",
                            "titlePattern": "Multisig Wallets",
                            "descriptionPattern": "Example multisigs involving Alice, Bob and Charles wallets"
                        }
                    ]
                },
                {
                    "type": "NativeScript",
                    "workspaceIds": [
                        "multisigs"
                    ],               
                    "namePattern": "2_of_2_{key}_script",
                    "items": {
                        "spend": {
                            "all": {
                                "alice": {
                                    "pubKeyHashHex": "{get('args.Alice.spendKeyHashHex')}"
                                },
                                "bob": {
                                    "pubKeyHashHex": "{get('args.Bob.spendKeyHashHex')}"
                                }
                            }
                        },
                        "stake": {
                            "all": {
                                "alice": {
                                    "pubKeyHashHex": "{get('args.Alice.stakeKeyHashHex')}"
                                },
                                "bob": {
                                    "pubKeyHashHex": "{get('args.Bob.stakeKeyHashHex')}"
                                }
                            }
                        }
                    }
                },
                {
                    "type": "Address",
                    "workspaceIds": [
                        "multisigs"
                    ],
                    "items": [
                        {
                            "namePattern": "2_of_2",
                            "spendNativeScriptName": "2_of_2_spend_script",
                            "stakeNativeScriptName": "2_of_2_stake_script"
                        }
                    ]
                }
            ]
        }
    }
}

```

[Run on GC](https://beta-preprod-wallet.gamechanger.finance/api/2/run/1-H4sIAAAAAAAAA52TXWvbMBSG_4rxTTcIRZJlS-5dVwYtY2XQi16MEI6ko9TUsY2ltA0h_32Snc-Sdmy-8IfOe45f-X28Tv2qw_QqdbqvOp9OUl_5Oi78XNa-ctU8YUlrw-mx7Z9dBxqDxuAor9omKK_rSmMCjUm-tSpZLJ1PQl8TdNDPXXq1HhXxxnXYmB-4ugX3dItvoVlrLa3NCJM0z4FLwZiEAglqSxgabTJtOAPCQHFELLkQRcGYCNOdh2c8GVaWuRCSgtA8z3Jhy4IygigyK4myAKUEA1hIjQWgJJARyg0VebqZpMH7eYdBUyAzuVAqZ0ZLKS3NtaXCouWUIwdFlaCQFdZYqQ0tS6WZZmcdSqIhB2O5QFVaSyznRCpDMCuZsDorkXLBDC8I59RwbVRpmGEy3QSL_bKJFl-hrtE_oF928XEbYN2CuWkbW83Di5edAY93Jqwvtjm62bg4o6Fewwr7EM3vfftxvJXHxVhsYIG_wHvsm-NRO0wOpT0tj4M5dwrJQff9DRZdjcl-VFI1L239UjXzZKBkMkAUYbp5gr5Gl7xuJ26mm8ne7j346gUfdtC-7tzfmWj8yOl08m4TbNbaGZutn3G1me2p3255m3-8CW8dL1t0u6U6SXI9R__lIhJ-ORi_fEfOxddNxEqNWH3SHfZ7tjcmPgD0f25O0fs3N2d643H4_NfG9Ojc3778RyCNGcQfJO77OMv7oDuENJQPIQ2-PlHH8k4daJkGy38A2BdowOAEAAA)

![image.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/201.3/named_workspace_wallet.png)

You have now setup you multisig wallet. This workspace is a contract address because it makes use of native scripts. This contract address is defined by the policy and the users. When you would change the users or the native scripts. The address will also need to change. 

So a multisig wallet workspace is in that way not tied to your wallet specifically. You can export it from the wallet. Look in Discover → Advanced → Worksapces → Expand a workspace → Select the workspace artefact → Click the export button

![image.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/201.3/workspace_content_overview.png)

It is probably best to let the workspace live with a DAO administrator or Technical DAO participant. But as long as the structure does not change you can import a workspace into the wallet of other participants.

201.3: I know how to create a workspace with a multisig wallet address

Assignment 201

Module 201: Workspaces and Multisig wallets

Welcome in this first module of the advanced section. Modules that start with 300. Here we are going to combine the knowledge from previous modules 100 (beginner) 200 (higher level) and combine the in full fledged dApps. We are starting with a dApp that is built on top of Unimatrix. A technology developed by GC to make privately sharing transactions easier. Unimatrix allows you to store the transaction hex (CBOR transaction body) and upload witnesskeys (signatures) separately. Storage is handled by GunDB. Allowing you to share a private access key among DAO participants. Gamechanger can monitor this same “channel” and interact with transaction and keys from a GCscript. 

When you have a multi-signature transaction, the signed transaction needs to be shared with other users for them to also review and sign the transaction. This can be a manual process. Where the transaction is built and signed by the first person. And then this transaction can be shared via the same link. Gamechanger will aggregate all the signatures. For somebody else to sign it and pass it to the next. The transaction can be submitted when GC has aggregated all of the required signatures. So the last person signing the transaction will have the “submit” button available. 

We are first going to do the process in a manual way. And later transition to using Unimatrix that allows use more control and automation over the process. 

See below the most basic transaction of sending 1 ADA. And building it in such a way, that more signers are required. Done by adding the following to the “tx” section of the script:

```
"requiredSigners": {
    "spend": "1c983ed55319939f6e521bf79c5965a2b456acdab81d6ad4a520d3f3"
},
"options": {
    "autoProvision": {
        "workspaceNativeScript": true
    },
    "autoOptionalSigners": {
        "nativeScript": true
    }
}
```

Where the required signers is the extra spend keys you want to ask for. You can obtain the spend key by running the following code in the wallet you want to add. It is from the “share your public key information” example. 

```
{
    "type": "script",
    "title": "Share your public key information?",
    "description": "This dapp connection will ask your spending and staking public key hashes",
    "exportAs": "data",
    "return": {
        "mode": "last"
    },
    "run": {
        "getSpendCredential": {
            "type": "getSpendingPublicKey"
        },
        "getStakeCredential": {
            "type": "getStakingPublicKey"
        },
        "finally": {
            "type": "macro",
            "run": {
                "spend": "{get('cache.getSpendCredential.pubKeyHashHex')}",
                "stake": "{get('cache.getStakeCredential.pubKeyHashHex')}"
            }
        }
    }
}
```

[Run in GC](https://beta-preprod-wallet.gamechanger.finance/api/2/run/1-H4sIAAAAAAAAA3WQQWoDMQxFryK8SQolB-gmlG4C3RTSC6i2Eovx2MbW0AzD3L3yTFsS0nplf-k_fXkyMmYyT6bawlnMoxGW0ISjx0IwpqFAHj4CW-hoBI6nVHoUTnGvzY5Wnz7V8u65gsOcwaYYyTYZPjkEwNqtqJopOo5nwOigCnbtfsX3WD1VJdMlpyLPVbEOBVUpJEPRMZPpk2sJA1YxsxaGRT2THBv9pZCjKIyhqd_r_RR13Nsy7ZXG5m26pqB_TWvEG8-JI4YwXjX2aEsyv0mWJVWeFLDdWLSedvfpdrq2Eg-68YEum4dZAe1H6A_nbcR756znC6FNzx7LAQAA)

![exports_spend_pub_key.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/301.1/exports_spend_pub_key.png)

This will create the exports as shown above. Copy the spend keys you need into the script. 

Gamechanger has some heuristics for multisig transactions to make sure enough signing “slots” are reserved. Also called dummy positions. This is how the signing process works without changing the transaction as they are not counted in generating the transaction “hex” or id. So signings can be filled arbitrarily and not in a predefined order.  

```
{
    "type": "script",
    "title": "🚀 Pay me 1 tADA",
    "description": "This is a payment request.",
    "exportAs": "CoinSendingDemo",
    "return": {
        "mode": "last"
    },
    "run": {
        "stage1_build_transaction": {
            "type": "buildTx",
            "title": "🚀 Pay me 1 tADA",
            "description": "This is a payment request. ",
            "name": "Unsigned Demo Transaction",
            "tx": {
                "outputs": [
                    {
                        "address": "addr_test1qrl07u9ssdtdwtzhrt0zrrr79yejxhfvmsmjt9jxqyaz0ktp6ydulqht6r9z4ld0jms3a3c7gw45u32vhc2ftdp2f6rqvz02jw",
                        "assets": [
                            {
                                "policyId": "ada",
                                "assetName": "ada",
                                "quantity": "1000000"
                            }
                        ]
                    }
                ],
                "requiredSigners": {
                    "spend": "1c983ed55319939f6e521bf79c5965a2b456acdab81d6ad4a520d3f3"
                },
                "options": {
                    "autoProvision": {
                        "workspaceNativeScript": true
                    },
                    "autoOptionalSigners": {
                        "nativeScript": true
                    }
                }
            }
        },
        "stage2_sign_transaction": {
            "type": "signTxs",
            "namePattern": "Signed Demo Transaction",
            "detailedPermissions": false,
            "txs": [
                "{get('cache.stage1_build_transaction.txHex')}"
            ]
        },
        "stage3_submit_transaction": {
            "type": "submitTxs",
            "namePattern": "Submitted Demo Transaction",
            "txs": "{get('cache.stage2_sign_transaction')}"
        },
        "stage4_export_results": {
            "type": "macro",
            "run": "{get('cache.stage1_build_transaction.txHash')}"
        }
    }
}
```

[Run in GC](https://beta-preprod-wallet.gamechanger.finance/api/2/run/1-H4sIAAAAAAAAA-1UwWrbQBD9lUEXt5A6tmU7kW8mgTaX1BCXHkowY-3IWkfalXdnbcvB0O_opb_YT-iu5EAgNfTUU4UEYubN7ps3b_c54rqiaBLZ1MiKo4uIJRch8Ovnj-8wwxpKgj7w9Hbqk4JanNTKQ-a5tOBfhArrkhSDoY0jy124pS0VuiIDSjPZCcxzgo52XDm2HahMyHENOgMOmaWThZjvOzCd3UHmVBq2ACwKvbNQawesQVAmFUHpCpYf0FpiYIPKYgs-Ld6FOwU3aAQqDQ3KEzR0qhawrANfXci0vhOAKnwt7h5LuoBMm6Zb2BE466mhwA5IBUvNOaRoyW8xhY8efJOjWvkWv3qenswtVpVvvNRdyJkrO7m8XHlU2qK6fntUKV16GWlfacNT6zW80VI9kBJSrUKpTxpiZ7y8z1GpRZhEgZajo0-4JmoZV9RfNIotXgkQcqdhntT8P81_Mk3lw16_L8rKVeAUimD-ajB-DPswnVNP0eTbc4RCGLLBAeFv4VXl_sYUvSuXWCtY7PiQG-4djDFXSU3rfZ5tS1uuOVnvNzUeek9cjWvhik3OY5MchoXorUsbY5xerXbDkYsH2zwdZCyqQTY2m-2hN1jvPJVWxIbDi24NCXzJ3bfttJGNQ-U9VPtAv9c80fHx-BhcunHSkHgIPRvbGLPyPg7ANLmOSYxGcT9J4iQb02jQX2ZXSTpKxiMcLIejMaYCl9d9MUYxxNGgJ-IsDh7XjRub5dCxnhm9lfZk7p02T7bClO6R5ZYe2htrwsaRrwzwz001Fq9IqbdY_1y0p2iwCCM7c4hCar63pwHPkJnCsYwezk5ZEKMsSMzIlNLatpEMC0vBAUHz6HlF_K6TYppT99xB7vL-E-0774_R4wvReGHdspR8jmqT_CPZJsPnXBn894bSW1UClxcqw0V7ey28ff3Zta9olJia5gYLF9Vft4o2b9Y_Hn8D6fAWX40GAAA)

![multisig_confirm.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/301.1/multisig_confirm.png)

Running the script will change the blue “confirmation” button from Sign to Multisig. Of interest also here are the “keys to sign with” and the “multisig” foldout fields. In the multisig area you could for example copy the link. Share the link with the other signers. Gamechanger will aggregate the signatures. The last person to complete the set will be shown the “submit” button to send the transaction to the blockchain.

301.1 I can sign and send a transaction from my multisig wallet

Ok now we have done it completely manually. Let’s add some automation. GC has created the unimatrix server for this. Unimatrix is a server that uses GunDB to share your transaction over a secret key channel. This makes sure only the right people have access to the transaction data. 

In module 201 we have setup a multisig wallet for Alice and Bob. Now they have both agreed to fund work to a subcontractor for some work. They are going to use the multisig wallet to pay this amount. 

This can be done using the following script:

```
 {
    "title": "Pay contractor",
    "description": "Work related to Alice and Bob DAO",
    "type": "script",
    "run": {
        "build1": {
            "type": "buildTx",
            "title": "Unimatrix Multisig 1",
            "tx": {
                "outputs": {
                    "contractor": {
                        "address": "addr_test1qqwfs0k42vve88mw2gdl08zevk3tg44vm2up66k555sd8uau4p4s4tm6s7fr7dp6hmqxe3klu484pehqg3t50ed27jfqz046we",
                        "assets": [
                            {
                                "policyId": "ada",
                                "assetName": "ada",
                                "quantity": "5000000"
                            }
                        ]
                    }
                },
                "options": {
                    "autoProvision": {
                        "workspaceNativeScript": true
                    },
                    "autoOptionalSigners": {
                        "nativeScript": true
                    }
                }
            }
        },
        "sign": {
            "detailedPermissions": false,
            "type": "signTxs",
            "multisig": [
                {
                    "kind": "CurrentWorkspace"
                },
                {
                    "id": "multisig_1234",
                    "kind": "Unimatrix",
                    "share": true,
                    "shareTxs": true,
                    "announceTxHashes": true,
                    "announceTxHashesSubPath": "signTxs",
                    "relays": [
                        "https://ar01.gamechanger.finance:2083/unimatrix/gun",
                        "https://ar02.gamechanger.finance:2083/unimatrix/gun",
                        "https://unimatrix01.gamechanger.finance/gun",
                        "https://unimatrix02.gamechanger.finance/gun"
                    ]
                }
            ],
            "txs": [
                "{get('cache.build1.txHex')}"
            ]
        },
        "submit": {
            "type": "submitTxs",
            "txs": "{get('cache.sign')}"
        }
    }
}
```

As you can see most of the script is completely normal. Except for the “sign” code block. The type is still “signTxs” but there is an extra block added called “multisig”. First we make sure we are using the current workspace to sign the transaction. 

```
            "kind": "CurrentWorkspace"
```

Then we add an extra block for our Unimatrix configuration. You can find in the documentation that there is also a “Roundtable” kind [SignTx](https://beta-preprod-wallet.gamechanger.finance/doc/api/v2//signTxs.html#multisig_anyOf_i1_items_anyOf_i0_oneOf_i4_kind).

```
            "kind": "Unimatrix",
```

You only need to configure the “id” property. This is a “secret” between you and the user. Allowing you a private channel where nobody can see your transaction. 

As you can see no mention is made of any of the needed signers. This is inferred from the wallet settings.

301.2 I know how to enable Unimatrix signing in a GCscript

Gamechanger sends the transaction over a secure channel to a P2P network. We have to retrieve this. In the preceding script we gave this an id 

```
                    "id": "multisig_1234",
```

You will need this to find the transaction using your unimatrix server. 

First clone the unimatrix github repository. If you get a permission error “npm link” setup your nodejs global directory to be in your home folder like [this](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally). Then you don’t have to install system wide which is usually easier to keep a clean system. 
The below script compiles the library locally but you can also import it from [npmjs](https://www.npmjs.com/package/@gamechanger-finance/unimatrix#Development)

```
git clone https://github.com/GameChangerFinance/unimatrix
# Build the unimatrix library. You can also use it from n
cd unimatrix
npm install
npm run build
npm link

cd examples/react:
npm link @gamechanger-finance/unimatrix
npm install
npm run dev
```

You will see the following where you can open the server in your browser by clicking the local link.

![unimatrix_run_dev.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/301.3/unimatrix_run_dev.png)

You now have a running unimatrix node. These examples are a great starting point to setup your own DAO website. I the case below we have signing bot as additional functionality. We don’t need to use this feature however. 

![unimatrix_node.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/301.3/unimatrix_node.png)

Click on “+ add listener” without doing anything else. Take note of the Unimatrix ID. This is important as we noted before in the Unimatrix GCScript. 

![sign_unimatrix.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/301.3/sign_unimatrix.png)

Ok the transaction is available here. If the transaction was signed by Alice. Then Bob would have to click this link to add his signature and finish submitting the transaction. Amazing you can now sign multisig transactions using Unimatrix.

301.3 I know how to start the Unimatrix examples

Ok, we are implementing what we have learned into a DAO website. Lets put all these building blocks together. We are going to build a react site using [Vite](https://vite.dev/). There is tons of good documentation and tutorials about using this generic tooling. So we are not going into details about how this works. But we will not be going into advanced features. At least as much as possible. See following repository for the end result. https://github.com/M2tec/gc-unimatrix-tutorial. And the [deployed site](https://unimatrix-dao.netlify.app/)

### Setup environment

In this tutorial we use [nvm](https://github.com/nvm-sh/nvm) for node version management. And we will use node version v18.20.4. At the moment newer versions of libraries do not work. Please follow the library versions provided in the course. 

Install node version:

```
$ nvm use v18.20.4
```

Create project folder with basic vite template: 

```
$ npm create vite@latest gc-unimatrix-dao -- --template react
```

Edit package.json and make it look as follows

package.json:

```
{
	"name": "gc-unimatrix-dao",
	"private": true,
	"version": "0.0.0",
	"type": "module",
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
		"preview": "vite preview",
},
	"dependencies": {
		"@emurgo/cardano-serialization-lib-browser": "^13.2.1",
		"@gamechanger-finance/gc": "^0.1.0",
		"@gamechanger-finance/unimatrix": "^1.0.3",
		"gun": "^0.2020.1240",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"react-router-dom": "^6.28.2"
	},
	"devDependencies": {
		"@types/react": "^18.2.66",
		"@types/react-dom": "^18.2.22",
		"@vitejs/plugin-react": "^4.2.1",
		"eslint": "^8.57.0",
		"eslint-plugin-react": "^7.34.1",
		"eslint-plugin-react-hooks": "^4.6.0",
		"eslint-plugin-react-refresh": "^0.4.6",
		"vite": "^5.2.0",
		"vite-plugin-node-polyfills": "0.17.0",
		"vite-plugin-top-level-await": "^1.4.1",
		"vite-plugin-wasm": "^3.3.0"
	}
}
```

Make sure to follow these package versions to prevent incompatibilities. 

And the vite config for wasm functions of Cardan Serialization Lib (CSL)

vite.config.js:

```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";
import { nodePolyfills } from 'vite-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    nodePolyfills({
      include: ['crypto'] ,
      globals:{
        Buffer: true,
        global: true,
      }
    }),
    wasm(),
    topLevelAwait(),
    react()
  ],
  optimizeDeps: {
    esbuildOptions: {
        external: ['*.ttf'],
    },
    rollupOptions: {
      // Exclude files with the *.cy.tsx extension from being processed by Vite
      external: [
        "*.ttf",
        "*/vite-plugin-node-polyfills/*"
      ],
    }
  },
  exclude: ['*.ttf'],
})
```

Make sure you are in the project root folder to install the libraries. 

```
$ npm install
```

## GC dApp building blocks

There is some functionality we need for making a useful dApp. Here we describe helper functions and the way to receive data back from GC. 

### Adding GC lib

We do not add the gamechanger library via the package manager we add the library using the following procedure. 

Look in the root folder and add the following to index.html 

```
<script src="https://cdn.jsdelivr.net/npm/@gamechanger-finance/gc/dist/browser.min.js"></script>
```

index.html will now look like this. 

```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOA Unimatrix</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
    rel="stylesheet" 
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 
    crossorigin="anonymous">
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 
    crossorigin="anonymous">
    </script>
    
    <script src="https://cdn.jsdelivr.net/npm/@gamechanger-finance/gc/dist/browser.min.js">
    </script>

  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
```

Please not that [bootstrap](https://getbootstrap.com/) is also added here. We will use bootstrap for some UI (CSS) convenience functions. 

When we want to use GC lib in a .jsx file. We can get access to that functionality by adding the following

```
const gc = window.gc;
```

You can then use the gc function to communicate with the wallet. We use the following function to create a browser popup. 

```
 async function handleGC(gcscript) {

    let url = await gc.encode.url({
      input: JSON.stringify(gcscript), // GCScript is pure JSON code, supported on all platforms
      apiVersion: '2', //APIV2
      network: 'preprod', // mainnet or preprod
      encoding: 'gzip' //suggested, default message encoding/compression 
    });
    
    window.open(url, '_blank', 'location=yes,height=700,width=520,scrollbars=yes,status=yes');
  }
```

Here we create a url from a gcscript and open a popup window using this url. 

### Receiving data

Ok we can now send data. But we also want to receive data from the wallet. We do this using urls. Just like with sending data. You can add a "returnURLPattern" to a GCscript. When finishing an interaction with the wallet, GC will access this URL when the user hits the done button. 

![image.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/301.4/done_returndata.png)

Depending on what is in the GCscript the returnURL can contain data. This is sent back using a query string. 

```
"returnURLPattern": host + "/return-data?d={result}”
```

We use host here to get the root URL of the site. Making it easier for changing environments from working on [localhost](http://localhost) and then changing to deployment. You can get the host URL with the following function 

```
let myHostname = location.protocol + '//' + location.host
```

Then we add "/return-data?d=” the path “return-data” followed by the question mark turns this into a [query string](https://en.wikipedia.org/wiki/Query_string). And after this “{result}” this is replaced by GC with an encoded string. And contains your data.  

Ok how are we going to use this in our project. Let’s setup some services to make this all work. 

We are going to use react-router-dom, to route urls to their proper page. So we are adding routing code App.jsx 

src/App.jsx:

```
import './App.css'
import { Route, createBrowserRouter, createRoutesFromElements, RouterProvider } from 'react-router-dom';
import Home from "./pages/Home";
import Data from "./pages/Data";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route>
      <Route index element={<Home />} />
      <Route path="return-data" element={<Data />} />
    </Route>
  )
)

function App({routes}) {

  return (
    <>
      <RouterProvider router={router}/>
    </>
  )
}

export default App

```

We import the library functions we need from react-router dom. The router will go to 2 pages. Your “Home” page is where general user interaction takes place. And the “Data” page where you will receive data from the wallet. Index or root path will go to home. And we added return-data to the returnURLPattern before to make it possible to redirect the the “Data” page. 

Create a pages folder in the src folder. Add the following files

src/pages/Home.jsx:

```
import { useEffect, useState } from 'react'

const Home = () => {

  const [host, setHost] = useState("")
  const gc = window.gc;

  async function handleGC(gcscript) {

    console.log(JSON.stringify(gcscript))

    let url = await gc.encode.url({
      input: JSON.stringify(gcscript), // GCScript is pure JSON code, supported on all platforms
      apiVersion: '2', //APIV2
      network: 'preprod', // mainnet or preprod
      encoding: 'gzip' //suggested, default message encoding/compression 
    });
    
    window.open(url, '_blank', 'location=yes,height=700,width=520,scrollbars=yes,status=yes');
  }

  return (
    <>
    <h1>Home</h1>
    </>
  )
};

export default Home;

```

Added here is the code needed for sending GCscript to GC as described before. 

src/pages/Data.jsx:

```
import { useSearchParams } from 'react-router-dom'
import { useEffect, useState } from 'react'

const Data = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const [resultObj, setResultObj] = useState({});

  async function decodeActionUrl(returnData) {
    const mydata = await gc.encodings.msg.decoder(returnData);
    setResultObj(mydata);
  }

  useEffect(() => {
    let returnData = searchParams.get("d");
    console.log(returnData);

    decodeActionUrl(returnData);
  }, []);

  useEffect(() => {
    console.log("results")
    
    if (Object.keys(resultObj).length !== 0) {

        console.log("Exports", resultObj.exports)
    }

  }, [resultObj])

  window.close()
  return (<h1>Results</h1>)
};

export default Data;
```

On the “Data” page we receive the data back from GC. 
First we import useSearchParams(). We use this function to extract the query string from the url. 

The extraction is done with searchParams.get(). We put this inside a useEffect code block

```
  useEffect(() => {

  }, []);
```

Notice the empty [ ] at the end. This means the code will be run only once when get redirected to this page. 

Via the decodeActionUrl() function resultObj is set with the decoded returnData. This uses the useState functionality from the React framework. So when the value of resultObj changes the next useEffect block is activated.  

```
  useEffect(() => {

  }, [resultObj]);
```

Notice [resultObj] at the end. This means the block will only be executed when resultObj changes. For now we just output the received data to the console. Press F12 to view this output in your browser. Opening the developer tools. 

In future this is the place to add functionality to store the data. For example in a database or the browsers local storage. 

### Adding Unimatrix

Hey actually we were working on Unimatrix. So let’s get back to that. We have wrapped Unimatrix into a React component. See below for how to add this. 

Add the follwing code to the services folder. 

src/services/cardanoWasm.ts:

```
import * as CardanoWasm from '@emurgo/cardano-serialization-lib-browser';

const debugMe=true;

let _CardanoWasm:typeof import ('@emurgo/cardano-serialization-lib-browser');

/**
 * CSL loader for setups where dynamic wasm imports are not allowed. 
 * @param cb 
 */
export const loadModule=async (cb?:Function)=>{
    if(_CardanoWasm)
        return Promise.resolve(_CardanoWasm);
    if(debugMe) console.log("[CardanoWasm] Loading...")
    _CardanoWasm = CardanoWasm;//await import ('@emurgo/cardano-serialization-lib-browser'); 
    if(debugMe) console.log("[CardanoWasm] Ready")
    if(cb)
        cb(_CardanoWasm);
    return Promise.resolve(_CardanoWasm);
}
const moduleGetter=()=>_CardanoWasm;

loadModule();

export default moduleGetter;
```

CSL needs some tricks to work together with Vite. 

src/services/UnimatrixListener.jsx:

```
import { useEffect } from 'react';
import { cardano as CardanoSync } from '@gamechanger-finance/unimatrix'
import CardanoWasm from './cardanoWasm';

export const UnimatrixListener = ({
    gun,
    unimatrixId,
    pubKey
}) => {

    const params = {
        CSL: CardanoWasm(),
        db: gun,
        dltTag: "cardano",
        networkTag: "preprod",
        id: unimatrixId,
        subPath: ["signTxs"],
    }

    useEffect(() => {

        if (!gun || !unimatrixId )
            return

        (async () => {

            CardanoSync.onTxHashes({
                ...params,
                cb: async ({ txHashes, validationError, userError, timeoutError, store, node, stop }) => {

                    if (validationError || userError || timeoutError)
                        console.warn(`onTxHashes(): Error. ${JSON.stringify({ validationError, userError, timeoutError, node })}`);

                    if (txHashes) {

                        txHashes.forEach(txHash => {

                            CardanoSync.getTxHex({ ...params, txHash })
                                .then(({ txHex }) => {
                                    console.log("txHash", { txHash })
                                    console.log("txHex", { txHex })
                                })
                                .catch(err => {
                                    console.warn(`Warning: Failed to fetch transaction '${txHash}'.${err || "Unknown error"}`);
                                    return {};
                                });

                            let vkHash = pubKey;

                            CardanoSync.getVkWitnessHex({ ...params, txHash, vkHash })
                                .then(({ vkWitnessHex }) => {
                                    console.log(members[memberIndex].name, vkWitnessHex)

                                })
                                .catch(err => {
                                    console.warn(`Warning: Failed to fetch witness '${txHash}'.${err || "Unknown error"}`);
                                    return {};
                                });
                        });
                    }
                },
            });
        })();

    }, [unimatrixId]);
    return null;
}

export default UnimatrixListener;
```

This is a template for receiving transaction data over Unimatrix. This code registers a callback function with onTxHashes(). That will be continuously monitoring for incoming transactions. When a transaction is received it will retrieve the txHex. Which is the complete transaction body in CBOR. And the witnesskeys (vkWitnessHex) which are the signatures. 

Now we can use this component by adding it to our “Home” page. 

```
import { useEffect, useState } from 'react'
import Gun from 'gun';
import UnimatrixListener from '../services/UnimatrixListener';

let peers = ["https://ar01.gamechanger.finance:2083/unimatrix/gun"]

const Home = () => {

  const gun = new Gun({ peers });
  let unimatrixId = "multisig_1234"
  let pubKey = "ded983764fdb27ff993ce0257e64e20cba99348ad3721a59e8c62819"

  return (
    <>
    <h1>Home</h1>
    
    <UnimatrixListener {...{
        gun,
        unimatrixId,
        pubKey }} />
    </>
  )
};

export default Home;
```

Unimatrix uses [GunDB](https://gun.eco/) to share keys. This is done through a private channel. This private channel is defined by unimatrixId. This id can then be shared under the signers. When people sign a transaction (txHex) there signing hex string will also be shared on this channel. This is done by the wallet. When all signatures are received you can submit the transaction via GC. 

You have to use the same unimatrixId in every signing transaction. So GC has access to the txHex and vkWitnessKeys in the Unimatrix channel. So you will not need to send them with GCscript transactions. GC will know what to do. And submitting is very straight forward.

See following github repo for a working template with all of the above included:
https://github.com/M2tec/gc-unimatrix-vite-template

301.4 I know how to use the Unimatrix Vite template

Great! We have all the tools we need now to build a DAO site. See the github repo for the finished product. 

https://github.com/M2tec/gc-unimatrix-tutorial.git

In this tutorial we are skipping some important parts to make this a truly great site. For example it has no logins or user management. And it has a very minimal UI. This is on purpose. To not clutter the concepts that are explained below. 

We will be using knowledge from module 201 to setup workspaces and a multisig wallet. The site will automate all the steps you need to do, to setup a DAO and sign DAO proposals. Some steps you would be able to automate further but we keep it basic for clarity. 

See https://unimatrix-dao.netlify.app/ for the finished and running site. 

![dao_overview.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/301.5/dao_overview.png)

I will not go through all the details of what make this site work. Most or all parts should be possible to follow using the knowledge from the previous SLT (202.2). 

### Using local storage

We want the site to remember it’s state so we don’t have to go through the setup process every time. Websites typically use databases to store data on a server. As this is a dApp that maybe less practical or useful. As this introduces centralization. We are in crypto, we don’t like that :). So we are using the browser local storage. 

In this site we call localStorage.getItem() on first load to populate all our data structures. When receiving new information we use localStorage.setItem(). 

src/pages/Home.jsx:

```
const Home = () => {

  const [daoInfo, setDaoInfo] = useState({})
  
	useEffect(() => {
		let getDaoInfo = JSON.parse(localStorage.getItem("daoInfo_0"));
		
		if (getDaoInfo === null) {
		  getDaoInfo = { name: "", address: "" }
		}
		
		setDaoInfo({ ...daoInfo, ...getDaoInfo })
	}, []);
	
	return (<></>)
};

export default Home;
```

Make sure it is run on first site loading using useEffect with [ ]. Parse the data into JSON from localstorage. When no data is available populate with an empty data structure. And then set the state using useState(). 

This is how the first entry works. 

![change_name.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/301.5/change_name.png)

Keep your developer tools open and see the change happen (F12 → Storage tab → Local Storage)

Data is save to localstorage using the following process. 

```
const Home = () => {

	async function handleDaoNameChange(event) {
	
	  console.log("Change name");
	
	  let changedDaoInfo = { ...daoInfo }
	
	  changedDaoInfo.name = event.target.value
	  setDaoInfo(changedDaoInfo)
	
	  localStorage.setItem("daoInfo_0", JSON.stringify(changedDaoInfo))
	
	}

return (
		<input type="text" 
					 onChange={handleDaoNameChange} 
					 defaultValue={daoInfo.name} />
)};

export default Home;	
```

As you can see here the input registers handleDaoNameChange to the onChange event. The event is passed to this function. 

The new value in the input box can now be retrieved from the “event.target.value” property. 

Before we do this we copy the current daoInfo into a new variable. 

We update this variable and then use it to set the new state with setDaoInfo(changedDaoInfo). 

Followed by updating the daoInfo_0 data in local storage. 
This same process is very similar in all the other input fields as you can see from all the functions that start with handle.
If you want to send more information you can use an arrow function when calling the handler.

```
<a onClick={(e) => getWalletData(e, index)}>Get</a>
```

### Setting up your DAO

Let’s setup our first DAO now. For example. We have the following fictional persons. 

Charlie with wallet address

addr_test1qpx2egjz2f3kknme2hymcxa46v22th5ht8t82saus228amts4jafwx022df7r4c0x9gcqcctcxd4yxtuft8yxmsjqcuqc3f5tg

Jim with wallet address

addr_test1qpcnkcq00tdrg3xj772mpsstvcmwn9t3j6v5wya67svlxs5xz4yg4r533jzl66fsnmz4r4d5eq0gjmhc6kkjmz5a5z7qnte33q

They want to setup a DAO with a shared treasury to govern the Dandelion organization. A collective that wants to promote decentralized Cardano API services. 

So we enter those values. And use the Get button to inquire GC for their Public and Stake key. Make sure to press the done button at the end. 

![get_pubkey.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/301.5/get_pubkey.png)

You see the data fields are populated automatically. There is a small extra trick you need to know for this. 

Leaving out some details but basically. The data is received on the return-data page. Which updates the local storage data. Because it is received on a different page a local storage event will be triggered automatically on the “Home” page. 

src/proposals/Data/jsx:

```
const Data = () => {
		...
    useEffect(() => {
		    ...
        localStorage.setItem("daoInfo_0", JSON.stringify(daoInfo))
    }, [resultObj])
};
export default Data;
```

To handle this event we have to register an event listener. In the event listener we can then update the site state. Causing a render event.
src/proposals/Home.jsx:

```
const Home = () => {

  const [daoInfo, setDaoInfo] = useState({})
  
	useEffect(() => {
	
    window.addEventListener('storage', () => {     
      setDaoInfo(JSON.parse(localStorage.getItem('daoInfo_0')) || {})
    });
    
	}, []);
	
	return (<></>)
};

export default Home;
```

Be aware a storage event will only be emitted when the local storage is updated on a different tab of browser window. So when the “Data” page does setItem to local storage the “Home” page will receive a storage event. It is possible to manually trigger a storage event though. So if the storage event needs to update the same page. Add this below setItem

src/services/UnimatrixListener.jsx

```

localStorage.setItem("transactions_0", JSON.stringify(daoTx))
window.dispatchEvent(new Event("storage"));
```

This trick is used in the UnimatrixListener because it is a component of the “Home” page. 

### Registering the DAO

We now have all the information we need to setup our DAO or workspace. Like we learned in module 201. Look for the function handCreateDAO() in src/pages/Home.jsx. It builds a GCscript using the data previously populated into the daoInfo data structure. An important extra step in this script. To return the wallet data it is important to select the wallet after creation. Otherwise you will remain in the current user wallet context and no information can be exported. 

```
const gcscript =
{
  "type": "script",
  ...
  "run": {
    "walletSetup": {
       ...
    },
    
    "walletSelect": {
      "type": "setCurrentWorkspace",
      "workspaceId": daoInfo.name + "_DAO"
    },
    "getAddress": {
      "type": "getAddresses",
    } 
    
  },
  "returnURLPattern": host + "/return-data?d={result}"
}
```

See wallet select followed by getAddress. 

Amazing! Your DAO is now created. And you have an address to sent the funds to. 

![dao_done.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/301.5/doa_done.png)

Press the fund button. You can select a funded wallet in the GC popup window. Funds will 

end up in the DAO address. See fundDAOWallet() function for the details. 

### Signing proposals

You are now ready to sign your first proposal using Unimatrix. 

![create_proposal.png](https://raw.githubusercontent.com/M2tec/Catalyst-F12-Gamechanger-Education/refs/heads/master/course-images/301.5/create_proposal.png)

Enter relevant information. And click on authorize. This will activate the handleAuthorizeProposal() function. In this function we build the transaction and sign it. Please note that the submit stage is absent here. As the last signer will submit the transaction with all the vkWitnessKeys stored on the Unimatix channel. 

Take note of the Charlie and Jim fields. These will color green once the vkWitnessKey is present on Unimatrix. This is handled by the UnimatrixListener component. 

Jim can now sign and submit the transaction. Done!

301.5 I know how to build a DAO site with Unimatrix

What is the default Unimatrix id we use in our examples?

Assignment 301

Module 301: UniDAO: Unimatrix treasury dApp

Gamechanger is a wallet with unique features. The biggest one being the dApp connector. This course will consist of several modules telling you all about how it works. And how to use it. 

Course explaining how to use the Gamechanger dApp connector (Alpha)

Gamechanger wallet dApp connector course.

Course Details

Level

Ratings

Modules

Lessons

Holder ADA Price

Contact Us

Documentation

Navigation