<style>
.reveal {
font-size: 2.5em;
}
</style>
## Tezos Dapp demo
-
#### (with wallet interaction)
---
<img style="float: left;height:25vh" src="https://c.tenor.com/T1ehudBJ0EYAAAAd/nfts-nft.gif">
We have a collaborative session
<br/>
<br/>
<br/>
<br/>
<br/>
please prepare :computer: laptop or :iphone: smartphone to join!
---
#### Who am I?
<img style="height:20vh" src="https://hackmd.io/_uploads/S1bCGool5.png">
Tech Lead @ Marigold
Tezos lover <img style="height:15vh" src="https://media1.giphy.com/media/Q5pVd08X8G5IqztOum/200w.gif?cid=82a1493by2fhf9178h11nipihb1hcvxu3ayrqlsrscn2yeah&rid=200w.gif&ct=g">
<img style="height:20vh" src="https://thebytenews.com/wp-content/uploads/2022/02/Microsoft-Warns-of-039Ice-Phishing039-Threat-on-Web3-and-Decentralized.gif"> @benji_fuentes
---
#### Choose your wallet
<img style="height:60vh" src="https://hackmd.io/_uploads/r1Dok9wuc.png">
---
#### Get some free Tz
<img style="height:40vh" src="https://hackmd.io/_uploads/SyC-LjEt5.png">
https://faucet.marigold.dev
---
#### Tombola (lottery game)
<img style="height:40vh" src="https://hackmd.io/_uploads/r118yaVY9.png">
https://tombola.gcp.marigold.dev
---
#### About Tezos
<img style="position:absolute;float:left;height:30vh;left:-10vw" src="https://lh3.googleusercontent.com/ALdGKE7FInsc986r-8p5rnXB18FFYifi7sneKntG56c7czRDLbnb1EAwzCk44E4V6E3F_0EkiBZzqkJS52-SST4TY8Q5iAXRnB7Tng=w600" />
```diff
+ decentralized open-source blockchain
+ Smart contracts (on several languages)
+ XTZ native cryptocurrency (pronounced "Tez" or "Tezzies")
+ eco-friendly proof-of-stake consensus
+ on-chain governance model
+ smart contract formal verification
+ NFT top ranking crypto
- no hard forks, done with protocol amendments
- no centralized governance
- no stoppable
- no high fees
```
---
#### Tezos Dapp structure
<img style="position:absolute;float:left;left:-8vw" src="https://hackmd.io/_uploads/SkFqbjvuc.png" />
<img style="position:absolute;float:right;height:20vh;right:-10vw" src="http://pa1.narvii.com/6176/7b65a0cce90d11fd9b93e0be4ce7910a2fbff149_00.gif" />
```diff
- smart contract files
-- *.*ligo : source files (to compile/transpile to Michelson)
-- *.tz : generated Michelson files (to deploy to tezos)
+ client app
++ any web application
++ preference for Typescript frameworks (to include Taquito library)
```
---
#### Smart contract code
```jsligo [40|13-17|40|19|41|42|2-6|43|21-26|22|23-23|24]
type parameter =
| ["Participate",string ] //optional email
| ["Reset"]
| ["Close"]
;
type Status =
| ["OPEN"]
| ["CLOSE"]
;
type storage = {
participants : map<address,string>,
admin : address,
status : Status
};
type return_ = [list<operation>, storage];
const participate = ([email,store]:[string,storage]) : return_ => {
return match(store.status, {
CLOSE : () => failwith("Tombola is closed, come back later"),
OPEN : () => [list([]),{...store,participants : Map.add(Tezos.source,email,store.participants)}]
});
};
const reset = (store:storage) : return_ => {
if(store.admin != Tezos.sender) failwith("Only admin can reset Tombola");
return [list([]),{...store,participants : Map.empty as map<address,string>,status:OPEN()}];
};
const close = (store:storage) : return_ => {
if(store.admin != Tezos.sender) failwith("Only admin can close Tombola");
return [list([]),{...store,status:CLOSE()}];
};
// MAIN
const main = (params:[parameter , storage]): return_ => {
let [action , store] : [parameter , storage] = params;
return match (action, {
Participate : (email : string) => participate([email,store]),
Reset : () => reset(store),
Close : () => close(store)
})
};
```
---
#### Compile to Michelson
```bash [1|3]
ligo compile contract tombola.jsligo -o tombola.tz
ligo compile storage tombola.jsligo '{participants : Map.empty as map<address,string>,admin : "tz1VApBuWHuaTfDHtKzU3NBtWFYsxJvvWhYk" as address,status : OPEN() }' -o tombolaStorage.tz
```
<img style="height:10vh" src="https://cdn.shopify.com/s/files/1/0257/0436/6125/files/NFT...gif?v=1636542849">
#### Deploy to Ithaca testnet
```bash
tezos-client originate contract tombolaIthaca transferring 0 from tz1VApBuWHuaTfDHtKzU3NBtWFYsxJvvWhYk running tombola.tz --init "$(cat tombolaStorage.tz)" --burn-cap 1 --force
```
---
#### Client side
<img style="position:absolute;float:right;height:20vh;right:-10vw" src="http://pa1.narvii.com/6176/7b65a0cce90d11fd9b93e0be4ce7910a2fbff149_00.gif" />
Import taquito
```bash
yarn add @taquito/taquito @taquito/beacon-wallet
```
Init
```javascript= [1-5|6|7]
// creates a wallet instance if not exists
if(!wallet){wallet = new BeaconWallet({
name: "Tombola",
preferredNetwork: NetworkType[network.toUpperCase() as keyof typeof NetworkType],
});}
const Tezos = new TezosToolkit(tezosUrl);
Tezos.setWalletProvider(wallet);
```
---
#### Connect / disconnect wallet
```javascript= [3-7|10]
const connectWallet = async (): Promise<void> => {
try {
await wallet.requestPermissions({
network: {
type: NetworkType[network.toUpperCase() as keyof typeof NetworkType],
rpcUrl: tezosUrl
}
});
// gets user's address
const userAddress = await wallet.getPKH();
...
```
```javascript=
const disconnectWallet = async (): Promise<void> => {
...
if (wallet) {
await wallet.client.removeAllAccounts();
await wallet.client.removeAllPeers();
await wallet.client.destroy();
}
```
---
#### Interact with the smart contract
```javascript= [1|2|3]
const op = await contract!.methods.participate(userEmail?userEmail:"").send();
await op.confirmation(1);
refreshStorage();
```
#### Fetch storage
```javascript= [3]
const refreshStorage = async() => {
if(Tezos && wallet){
let c = await Tezos!.wallet.at(process.env["REACT_APP_CONTRACT"]!);
setContract(c);
if(c)setContractStorage(await c.storage());
}
}
```
---
#### Closing tombola
<img style="height:60vh" src="https://c.tenor.com/tpa9FG-3PuQAAAAC/closing-time.gif"/>
---
### Q & A
<img style="height:60vh" src="https://thumbs.gfycat.com/JoyousAnyEastsiberianlaika-max-1mb.gif"/>
---
{"metaMigratedAt":"2023-06-17T00:47:48.779Z","metaMigratedFrom":"YAML","title":"Tezos Dapp demo with wallet interaction","breaks":true,"description":"30+15 min slides to discover Tezos DAPP development","slideOptions":"{\"theme\":\"blood\",\"transition\":\"convex\",\"parallaxBackgroundSize\":\"100vw 100vh\",\"parallaxBackgroundImage\":\"https://wallpaperaccess.com/full/6959400.jpg\"}","contributors":"[{\"id\":\"18f573e4-2b21-4446-a1ef-99e1328c1bab\",\"add\":10066,\"del\":3501}]"}