## Welcome to GC PPBL 2024!
### 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)

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.3: 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

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.

201.1: I know what a Workspace is

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

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

201.4: I can sign and send a transaction from my multisig wallet and Unimatrix

201.5: I understand how to use Unimatrix for a DAO website

Assignment 201: Create your own DAO site using GC and Unimatrix

Module 201: Workspaces, Multisig wallets and Unimatrix Sync

202.1: I understand the basics of Helios language

202.2: I understand the basics of Inception contract dev environment

202.3: I can setup my own dev environment using helios contracts

Assignment 202: Run a token lock unlock contract using Inception

Module 202: Basic contracts

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

Similar Courses

Contact Us

Navigation