DAPPCON 2024: Circles Code Quest - Daniel Janz

Transcript

well welcome everyone to dcon uh and to the circles Workshop Daniel will be leading the charge but I will give a short introduction um presumably most of you are already familiar with circles uh maybe some aren't uh maybe if you already have a circles account or could you raise your hand um or or the invers okay so everyone I think maybe has already so then we already know a little bit um I will run quickly over some Essentials but because this is a workshop also feel free to in dropped and ask questions and um and it's not meant to be a talk uh for a

talk Martin will speak tomorrow on Thursday uh so you should definitely go there uh yeah let's just kick it off um so as I was saying I will just quickly go over some Essentials and then um maybe the other part getting everyone on boarded is not necessary because we already are but we'll do just a quick check uh also maybe with some quick tricks on how to uh Dev experience setup but uh and then and then I will hand it over to Daniel who will talk about how you build your own wallet on circles um what is circles so probably you already know it but um

we we want to say now that circles is a social money um many of you know circles as circles Ubi which is a very ambitious goal and so by Framing it as a social money we emphasize that it's built together on this Social Web of trust um and so any anyone can join there's no questions asked there's no kyc anyone can then also Mint one Circle per hour um but the critical part that's not easy to understand or novel to circles as a money is that you can't just arbitrarily spend your circles normally if you have a dollar or a Euro you go like okay I can spend this anywhere but uh with circles we need to find a social path

from you over your trust relations to the person you want to uh pay and and that can limit how much you can spend and so that's also where then the foundation of circles is based like you might arbitrarily be able to Mint as many circles as you want but if you can't spend them then fine have your excessive circles balance um and so that's that's uh the the root of it and so that also is where where where the value of circles is because people will ask if I can just mint arbitrary circles then why does it have any value we we will go later in a little bit into uh sort of the that that it's not just a an unlimited amount of circles that can

exist but there is also real value that you create when you maintain this social trust Network because especially it's more acute now and in going to be in the future we have these very real lifelike bot systems that can talk and write texts before but now they can talk and generate video so it's very hard on internet to know who's an authentic human being where versus some AI generated but and so it will be increasingly valuable that people that you know that you're interacting with a real human not with some AI bot and so this trust graph will become an increasingly valuable uh data asset and so what we actually want to convey to people is

that you're doing valuable work because if you don't trust anyone you might have your circles but they're not spendable if you just on the internet go trust any account you find you might hold your circles but you will hold them in balances of BTS that are also not spendable because they will swap your spendable tokens out with um with their bought uh account balances and so the analogy is a little bit like water like if you don't trust enough your water is Frozen uh and and it's not moving anywhere but if you just carelessly go around trusting accounts then it's like a gases State and it will just just fly out of your wallet it's also not usable

but if you just go trust the people that you actually know that you keep in touch with also if you fall out of contact with people you should prune your trust relations um in this liquid state your your money is actually liquid right um and so that then also creates a social graph and so just very quickly um what that means is that we because this is a workshop we want to go a little bit more in depth so what that means is that we need to find paths between Alice and Bob and so that also requires that you uh we will see this in in the demo that that you need to

go you can just sign a transaction that Alice needs to send five circles to Bob you need to sign a transaction over which path Alice sends those five circles to Bob and to go a little bit more in detail so imagine that these other uh intermediary nodes are other people that each have a trust relation with each other then what what what a path transfer is is that Alice actually gives five circles to her friend then that friend under the hood moves those five circles forward to their friend and ultimately we reach Bob um and so that's something that we need to account for in the architecture and and also solve for um maybe if you have questions like

happy to go into details also like what we're doing now and in the future okay mention that trust connection right PR so I'll for the recording also I'll I'll quickly repeat so and for myself um so you're saying that if if if one person would trust a bot that and doesn't that now harm uh the whole network and so you can think of these edges between the people having a

certain capacity and it will dry out so so say that Alice trusts a bot account then then now this bot can pay Bob over Alice and so say that Alice has 100 circles for the amount of 100 circles this bot can actually buy something from Bob but Bob still just re receives circles from people that were honest and so for him it's fine the only one person that actually loses the damage here is Alice because she had 100 Alice circles that she could spend to Bob but now she has 100 bot circles that she can't spend anywhere well to the bot but like so so she loses the spend ability of her 100 circles because she indeed trusted this bot and so she's the one impacted but

also it's limited to that 100 circles because now she doesn't have any circles anymore and the bot also cannot buy more from Bob so so there is a natural capacity that drains out uh in the system um other questions um I don't have so many slides so we'll go very quickly over this um the other aspect maybe is uh coming back to this every person receives one Circle per hour no questions asked so like that's roughly 8,700 something circles per year if everyone just does this doesn't it keep increasing the amount of circles that that there are in the world um and so there is actually a balance to this that we don't often talk about

because it gets uh more difficult to talk about and and so we we we want to refine these stories but but there is a temporal discounting or demage of 7% per year so you could think of it as a tax of 7% of the circles you have per year but now have these two um and so normally like this sounds bad right like oh 7% of my value gets uh taxed or or disappears um we don't like this but it's very different from when we have this with Euros or dollars which also arguably are at 7% if not more uh inflated but the inflation happens in the Central Bank like your

bank account doesn't get minted new dollars when the Central Bank mints new dollars they meant it for them but you lose the 7% on dollars or Euros but here you lose the 7% on circles but you also get the new circles in your own account which is a very different Dynamic to start with um and if you then take those two terms out you actually get uh as an illustration this curve they they max out or they balance each other rather around 125,000 circles uh because if you have no circles then zero 7% of zero is zero but at 125,000 7% is this 8,700 circles that you get per year

so then you have a natural balance point uh and so if you start minting your circles then you will increase first sort of get those 8,700 but as you have more you pay more 7% tax so it actually starts flattening out and and you you have this balance point uh if you then stop minting circles you only have the 7% so it will go down as in the second part of this curve but what this really means and what I think is a really interesting story is that it's effectively a more honest distribution system because if you're a human you get negatively taxed until you have under 125,000 circles because you have this constant mint that happens and so the

less money you have the more you receive and then up to uh this this this balance point and then if you earn circles because you're active within the community you will slightly get taxed more but the yeah if I send out my circles to another they also beex yes like because it's part of the protocol so it doesn't matter where you yeah there's no escaping this taxation system um but also for like AIS or Bots or companies they can earn circles but they don't have a Min because we don't we wouldn't trust them to to as as a human we would go like no you're you're I know you're a bot I know that I mean in a onetoone relation and so they have um

they have a flat tax of 7% so humans get this negative tax but companies and and Bots get a flat tax of 7% also I Bri it out um so I mean it's a workshop so let's go a little bit more depth right so um there's two ways that you can implement this um with an onchain demor or with an inflationary model so typically dollars or Euros we have an inflationary model because you have the same amount of Euros in your bank account tomorrow but they're just like in the Central Bank printed more Euros

so your actual purchasing power of your Euros went down right that's the inflationary model the demage model is is where we rebalance we re re readjust all the numbers everywhere to actually go down and so your con your your purchasing power is more stable um which which is the the default model we have here if you'd want to bridge it over you would want to use circles in the form of the inflationary unit and then the answer is still the same the only way you could Bridge it over sensibly is in this inflationary uh representation and then you will move five circles over but they they will be less because the total

amount has grown on the nosis Chain as well so so yeah you will still have exactly the same uh uh 7% effect so when you come back with those say five circles that you bridged out you will find that they are now worthless in the original system uh yeah sorry um so anyway yeah so so this also just answers this question like Bitcoin originally was very utopian and and it was a nice story back in the day for having a hard currency that wasn't debas but now we have roughly 21 million Bitcoin in the world and we also know who has those 21 million Bitcoin like

it's definitely not me um and so I'm not very motivated to build a system on bitcoin because I'm not I mean yeah well let's leave it there um uh whereas here like it's there's a more sensible long-term Dynamics to to the system it doesn't matter when you join circles it doesn't matter whether you were there long you just you I don't know if I can go back one slide yeah it doesn't this this curve starts at an arbitrary point that doesn't matter if you are born three generations in the future you have the same Dynamics and there's not like a wealthy older class

that already just has all the coins because they they keep rebalancing over time uh oh now I moved in Reverse anyway I'm at the end of my uh slides I think already um so I do want to acknowledge we we we started as a small team uh more recently and and we'll propose some both on the technical side but also try to help move forward the story and invite more people to to build on circles and that's really something that we want to enable is like how do we also have more Digital

Services being built on circles not just real life vendors but also um build it into our protocols um but having said that we really want to see ourselves as ambassadors because there's many groups and actively actually many different groups around the world we we keep discovering them um by chance of people that that have engaged and are engaging with these IDs and and um want to to to help build them forward so so if you have your own IDs it's a very open space uh happy to collaborate or independently work on things or uh just to to Mo move this Vision forward um I don't know if I had more slides I no I I did not so I I don't

know if people um have questions maybe first um and then second question would be does anyone not have a circles account set up and then does do people have a laptop or something ready because in the coming section we'll try to code a little bit together or at least go through how how you could go about it um okay I'm asking the questions too fast does everyone have a circles account Set uh yeah yeah it's okay I this is just to make sure that like we don't have people leave here without having a circles account this is disconnected from this is just pure me trying to be a good marketer and and having sign up um but

so any yeah if you have questions on setting it up or need trust connections like this is obviously a place where you can ask them um but then I'll uh I'll I'll hand it over to Daniel um and so maybe before I do that if you scan this am I right about this URL is that public now yeah it is okay yeah so if you scan this QR code then uh or just go to the URL if you prefer typing um then then that's a giup repository that has a whole code of where we want to get to in it so if you miss steps you can find it there um but we'll try to go

through it step by step together uh and then we'll see how far we get uh uh yeah that that's that's that's me cool so um I will take over the next section uh of the workshop um and we will do some Hands-On coding um yeah I will give you a little bit of time to all arrive at this URL I have to go there myself um it's github.com about circles and then here in the repository list it's the first entry circuit

codequest and our objective for the workshop is to build a simple circus wallet um circus needs much more Integrations in other products web shops and whatnot and we're currently building an SDK to allow people to easily integrate circuits into their own software and I would will give you a brief tour of the SDK so far in in this Workshop so we we have some prerequisites um we will have metamask installed in in the browser you will need node.js and npm and since the application will be built with SW um a SW plug-in for your IDE your code editor

uh I think is a really nice to have um further you will need some die because um we will not use a relayer and pay for the transactions ourselves so there is a faucet for nois chain um if that doesn't work for any reason I set up a pad where you can add your uh wallet address and that might take a while but I would would send you a a small amount of xile just to get started um maybe anyone who doesn't have any XA yet um raise their hands so that I know how many people okay there's already one it's one

okay so um for you in the um read me of the repository um I added a link to the pet just add your um metamask address there and then I will send you some okay so give you a little bit of time to make sure that you have the um prerequisites set up um y oh sure um so yeah um how how do we start um I already created a UI M mock up and

linked the routes with each other so that we can click through the single rout routes and get a feeling of uh what we are going to build I also have a um finished finished application here um it all starts from from the homepage it's just a getting where comes scream to get started um then we can connect our metamask and once we did that we see our wallet address our current circuits balance a transaction list um have the possibility to Mint our personal circuit which is basically our one Circle per hour um we will have a screen to send circles um a list of our trust

connections because circuits is all about trust and a small setting screen that just shows our circuits address and our personal toking address um to get started I will ask you to um check out the circuit codest rep repository um there are nine branches Within um we will start with the create UI mockup Branch so once you have cloned the repository um please check out the corresponding Branch I hope this is large enough um okay so once you're in the

branch we need to run npm install uh and after that we can run npm run Def and bring up the browser with the bare bones application so that's already clickable um but it doesn't contain any logic as you can see everything here is uh empty and um we're going going to implement the single features now step by step so maybe a short introduction about uh into repos repository contents oh yeah looks

good um so for those who are not familiar with with swell kit um a really brief introduction on how the routing Works um so the routing is folder based um we have this routes folder and basically any subfolder I connect in this will I add to this will form a route so to access the dashboard um I just go to/ dashboard and will be at the dashboard Rod um so there is a layout um with just an oh I have to increase the size in okay so um there is a header when we

are not signed in um it's a default header that just shows the circus logo uh once we are signed in um we want to show the Avatar info which we've seen previously which contains the the circuit address and the balance uh and then here's the slot where the main page will be inserted so we start with the start page it only contains a button um that brings us to the connect wallet page so if we want to switch Pages uh in in spell kit uh we can use this goto function and just specify the route uh as an argument um let's see if that works going to the

homepage click get started and we will get to the connect wallet page so so far we haven't implemented anything um next step is to add and initialize the circles SDK so um we're going to the package Json and we'll add that here it's at circles SDK so that's the npm organization and um we want to in include the SDK package current version is 0.043 um my IDE will install that okay so now that's installed

everybody installed a um dependencies already give a minute so after installing the dependencies we should restart our development server um go back to the page and verify that everything is still working looks good okay um so now we need to initialize the SDK and we want to do that on the connect wallet page where we connect our metamask account um yeah so I already prepared some SW

Stores um sweat stores for those who don't know it are like Global variables um so we will put an SDK instance into a global variable just that we have it on every page and once we connected the wallet we will also put um the wallet provider on a global object so that we can uh access it from from the other Pages um let's change the type or just remove it so um on the connect wallet page there is already some code that will connect to the window ethereum object um which is metamask in my case um once we have that we get designer from from uh

the W browser provider and assign it to This Global variable and after that with designer um we want to initialize the circuits SDK so I have a template method here that uh needs to be implemented um and we just import the SDK from the circuit package and immediately have an error oh

yeah okay so once we have the import we can just create a new instance by creating new and um we see that it requires a chain config so um we need to configure the circuits SDK because maybe we want to run it on chiato nor test chain or on a local chain in this case we uh want to go for um know this main net so let's see if I already have settings no okay so what it will need is a circuit RPC URL um that's basically just ajacent RPC

endpoint um but W with the circus plugin installed so that we can access um the transaction history trust relations and whatnot and we have such a thing installed at RPC Doh helsinky do about circuit.com um the next step is we will need the Hub address um let's Google that yeah that's the right one um and another service um

that we will need later is the Pathfinder so um Pathfinder finds the trust path to through the to the trust graph and allows us to to do transactions um we installed one at Pathfinder about circus.com [Music] and the rest is not relevant for now but we just set a value to make typescript happy and then the second argument is the signer we just got from metamask and which we stored to the um Global wallet variable oh yeah shouldn't be null so

okay um yeah once we initialize the SDK we can just return it and see how it's used so let's go back to the start page an error 28 did we miss a comma oh where's

that interesting okay so um if we check our metamask um I was already connected that's why it didn't pop up on on your side if you connect for the first time metamask should pop up and um yeah you have to enter your your password and then we have this FF icon here to indicate that we connected actually to the application are there any questions so far or any problems no okay then I uh right now we are working on the ADD and initialize circles SDK Branch um so

if we want to skip ahead you can just check out that Branch uh directly so that's that one and I also added a link to the um diff so that you can follow along what changed between the steps so the branch is the complete the the branch is the complete thing yeah so we are currently in create UI mockup and um are working on ADD and initialize circuits SDK okay actually um we finished that step more or less there's only one thing to do um since it could happen that our wallet was already signed up or is already

signed up at circuits um we don't want to bring the user to the sign up page if the user is already signed up so uh we have to add one check to see if the connected wallet is actually already a circuits uh wallet uh and since we added the SDK instance here to the circuits Global variable I can just use that to check uh if if the Avatar [Music] exists it's the wrong type uh yeah we have to replace the mock type that was in in in the store uh with

the actual STK um so we get rid of the type error and yeah so this is the first time we have a look at the um SDK object itself um that has some properties currently we are interested in the data because we want to query for an address if that address is already signed up so we access the data property and um call get Avatar info pass in the address and store the result in a variable let's call it Avatar info that's aing function to be awaited and once we have the Avatar info

we can be sure okay there is already an avatar signed up um because get Avatar info will return undefined if it can't find the Avatar so with this to do out of the way um let's see if that works so the effect we are expecting here is um if the Avatar is already initialized then we go to the dashboard and if it's not we go to the register page let's see if that works um I have my account already registered here at least with that one so I would expect to get to the dashboard

page which looks like it works um now we can also test the opposite case um I just create a new account and use that that's not connected interesting we still got got to the dashboard which is not

expected um okay we have some time to Deb back oh maybe it's working and that's already registered no try a new one

oh interesting so I hope you have some time to catch up while I'm debugging um so actually is that the address okay yeah that's the right one um okay in this case I would expect a response that I'm actually signed up which I'm not

getting so this is not correct yeah I think that's the issue we return undefined and I did a type save check for n yeah okay so um yeah with that out of the way uh we can go back to our page and um at the last line of code for the step um so if we already have the Avatar um then we want to add that to our Global

variable um yeah that we need to use the next SDK function which is actually if we already have an avatar there's a get Avatar function where we can supply um the wallet address and it will return an avatar instance um if we don't have have an avatar we will go to the register page where we will create a new one so um that's it for that step I will go and check out the same Branch as you guys have actually I can do it

here so okay let go back so everything is implemented and continue with the register page so here on the register page we only have one thing to do we need to sign up uh a new Avatar at circles uh with the connected wallet um in circuits there are two different account types today we will only uh care about the personal circuits account um as Ben mentioned before there are also organization accounts which are intended for companies or whatnot um today we are going with a personal account so in order to create a new Avatar we have to access our circuit

SDK again on our Global variable and instead of get avatar for an existing one we call register human the other option would be register organization both return a so-called Avatar interface uh and they behave more or less the same with the difference that an organization cannot Mint personal tokens while a human can it's an Asin method so we have to await it and let's try that so here you will need some XI on your wallet um so if you don't have any yet um you should transfer that

[Music] now I will just send 10x I sent and also have a look here so okay let's wait a bit until all the

transactions went through okay and with our account now funded um let's switch back to the right one 29 yeah so 10 cents on this account with the account now funded um I should be able to register as a person there's an error wallet is not connected yeah always have to start from the front page and let's try it now okay metamask opens get a signing request Um send a sign up to the hub

contract um um and it's the right account so let's do that okay the transaction is confirmed and yeah so that worked or at least seemed like um we now have an avatar instance um created by register human and after that we're going straight to the dashboard uh where we will in the next step uh Implement a transaction list um because personal tokens personal accounts get a signup

bonus so we will immediately see one transaction after sign up um let's see if if we get this to show up um the next branch is register at circuit or actually it's yeah check out okay so we move on to the dashboard page where we want to show um uh first our current balance not the transaction list

of course so yeah um here in the header we have currently balance Shan of zero circuits which doesn't seem to be right let's fix that first um the header is in lip components and we have an account info header um yeah so here are just two hardcoded properties that need to be set we have we should by now have our um Global Avatar instance which we got from from the register page so it's sted on this Avatar Store um and we hope that we can utilize it here to

get the actual balance of our Avatar um first we have to remove the mock interface and replace it with the real one so that's in the other but hastor um now we get the right fields and we want to get the total balance of that Avatar and so we can just call the get total balance method uh

actually that's a promise um so yes SP has this nice Syntax for uh um variables that auto update uh they they just are introduced to the dollar sign and we will use that one um so what this does is um the balance variable will be updated whenever the Avatar is updated so initially we don't have an avatar after sign up um or registering we have one so this variable will be set and in turn the get total balance method will be called on on on that Avatar instance let's do the same for for the

address um okay and since this is a promise um we have to await the promise here swelter also has some nice helpers to do that we say await balance um while we are awaiting it we say ah balance is loading and then once we have the balance we show it uh we don't care about errors right now so let's keep it like that okay so what we have now is um our promise from from the Avatar um we awaited here in our template show a loading message once we have the balance

we show it so we would expect that to work now let's start again from the start page connect our wallet and actually now we can see the balance of our Avatar and the address Avatar address matches the one in metamask yep okay that's a first step um yeah now we want to show the transaction history now that we have the balance and let's check out that state and go back to the dashboard page

where we will Implement getting the transaction list um so very much like with the balance um we get our transaction list from from the Avatar again and there is a method called get transaction history um this is meant to be paginated so it expects us to set a page size we just go with 25 for now and don't implement the pagination um just show the first

page um okay so yeah it will return a circuit query let's call it okay so the query is already executed once we

get it from from the get transaction history call so we can just um show the current page if we would have multiple Pages we can just call Cur next page and then the current page would have the contents of the next page we for this example just display the first page and to do that we just assign the rows from the current page um to our Rose array here um there we have an type issue let's remove that be undefined okay and that also should be

typed to actual result type which is a transaction history role oh okay uh in the meantime uh our packages changed um we initially only added the circles SD package um but there are more so we have the circus SDK data package where um all the row types are in uh and there are the utilities

where we come to later so please if you checked out the branch run npm install again to also fetch uh the missing two packages once we have that we should be able to import it here yeah okay it that's weird okay I see what I'm missing

language tag um it's thought it's JavaScript but it's typescript um now it compiles so if we done everything correctly we should get our first 25 transactions um actually the newly created account will only have one um so far let's start our app again connect the wallet and we see our first transaction which is the so-called signup bonus um directly after registering a human Avatar um the circuit sub will pay out um in this case 117 um circles as a

signup bonus and this is what's displayed here so uh cool now we have the balance and the transaction history displayed um I think it's nice to add more transactions to it um one easy way to do that would be to do another personal token minting which is currently not implemented and which we will just do in The Next Step so um please check out the short transaction history Branch to get to the same state any questions so far or anyone laging behind

okay fine um okay um yeah why 11 uh 117 um why 117 sign up bonus uh yeah we will come to that point a little later when we invoke the Pathfinder um there's a little history of circuits and time circuits so circuits started out as an inflationary unit um just as Ben explained previously we have this demor representation where basically your balance loses value over time and we have this INF inflationary representation where um the total Supply is raised and your balance stays the

same so circuit started out in the inflationary system and then um at one point we decided to make it a Dem morage based system so um actually how the demage is implemented in circuits V1 is just it's a display method so we calculate the demaged value based on the current time and um we do that in the SDK or in the front end basically it's not onchain demor with the next version of circles um the default mode will be onchain demor and your balance will really demage on chain and there is an inflationary reer token if you for instance want to add your tokens to a

liquidity pool or whatnot and that can't handle the Dem Rush then you can WRA your token to an inflationary token and use that but um for version one of circles everything is inflationary and the demage is just a display option so um that's why the factor currently yields 17050 circuits which was originally 50 um inflationary circuits so that's why it's not a round number um okay so let's Implement minting personal tokens that will be a very quick step um we go back to the dashboard page

where we have the mint button um can see here mint circles and Todo to do mint to personal circuits so um again we can just access our Global Avatar object and it already gives me the completion uh and call personal mint this is of course also as so we need to await it and um yeah let's give it a try okay we get the signing request transaction confirmed so since we

haven't updated uh haven't implemented any update Logic for ouri yet we have to switch the page one time to see the new transaction and as we can see uh new tokens have been minted to our account so that's already pretty good we verified that our transaction list is working we can Mint personal Circuit of which we get one per hour so looks like a few minutes have have passed since our account creation if that would be one hour we would have exactly one talking here now it's 0.21 um yeah with the minting in place we should go to our next point which is

adding trust so circles cannot be transferred without any trust relations so we need a way to trust other people um and for other people to trust us and obviously also a way to show who we are trusting and who's trusting us um let's check out the Mint personal talking Branch to get on the same page and start implementing the trust part um yeah we have that on the contexts page and um since we don't have any relations right now this is a new account um maybe

we should first Implement adding trust to other people so um we have a sub route contacts at and in this page there's a trust method which we want to implement um maybe let's have a look at the form first if we click here at trust um we are expected to add another circus address and we just hit the trust button and see what happens so we are using our Global Avatar object again and this time the trust method and we already used The spta Binding from from this input element to

the Trust address variable um we also have a small validation logic using esjs checking if if the address is actually an address and that will set the Trust address as valid variable which in turn enables and disables our button So currently it's disabled if we were going to trust ourself we see it's enabled um yeah ASN method again um we want to trust the trust TR Trust address needs to await that too and once our trust call was successful uh we are going back to the context page

so now we need a different address to trust um I will trust my other circles Garden wallet you could trust your wallet or basically any other wallet okay let's see if that works okay I think we successfully added the

trust relation uh now page still empty we need to show it so um let's move back to the contexts page and find the on Mount function and um yeah Implement getting the trust lists so just as before in the dashboard um we we have a list here and the list has rows and on loading of the page we just add the result to the rows so let's do the same here but um for the trust relation use our Global avator and ask it for the trust relation

so this will give us all trust relations of the Avatar trust relations can be incoming outgoing or mutually trusting um let's see how it looks like in in the result didn't way it that's not a page result it will just give us a list um so yeah and I also had this mock type here which we need to remove in order to

import the correct [Music] one for the other term there all there need to be more go here in the store uh okay um yeah maybe a quick look at the stores which are the global variables so we have this Avatar which we are initializing in Connect wallet or on sign up then we have uh the balance which we used in the um header and are initializing um yeah in the header uh circuits is the instance of

the circuit SDK and we have wallet which contains um just our signer so that's an e signer circuit contains our circuit SDK instance um Avatar contains the Avatar interface which okay um okay I think we have another type issue here let's cast that empty array to to some trust relation rows okay okay with the loading of the trust relations in place we should see something and indeed we are just not

what we were expecting uh and the issue is uh we're using the wrong row template so we still using the transaction Row for trust relation so it has wrong properties so let's change that contact row and see if that works yeah that looks better so we have this Arrow which signifies that it's an outgoing trust um we see who we are trusting and when that happened um as you can see we have some quick action buttons uh one should remove the trust relation if we don't

want to trust this person anymore and uh another one will bring us to the transfer page uh in case we want to send some circles to that person let's check if the trust removal Works no it doesn't so um we need to implement that next uh for that we go to the contact row because these buttons are defined here um here we Supply a row um that should import the right type import a row which contains uh subject Avatar which is basically me

uh an object Avatar which is the other Avatar and then the relation between the two which can be I'm am trusting that other Avatar that other Avatar is trusting me um we are mutually trusted and self trust is a special case um let's continue with uh removing the trust because that's the button we can see right now here in order to remove a trust relation we again go to our Avatar and not call remove trust but untrust and then we need to specify who we want to unrust so in this case this is the Avatar we were showing in in the list item this is an asnc function again

we need to await it so let's see if it works okay so we need to change the page just to reload it um and we see our trust relation is gone [Music] um

let's check that in our wallet here okay let's let's try the opposite direction um we previously trusted from this wallet um to this wallet and now I I want to change the direction and Trust from my circle Garden account to my newly created um wallet and see if it shows up that might take a while ah actually there it is so this time the direction of the arrow changed signifying that this is an incoming trust relation we have a different button here this time um because previously we added a trust relation to the other party so we were able to

remove it in this case they trusted us um so we should be able to trust this person back this is not yet implemented um let's go back to the contact row to do that and again use our Avatar object um and this time instead of untrusting we are trusting that object Avatar in our row let's see if that works okay we have to reload the page so now

we can see we have a mutual trust relation um and that should be also shown in Circus Garden yeah cool so now that we have mutual trust relations um we have a Target where we can actually send two um this is not yet implemented but this will be the next and final step uh in the wallet implementation um so in order to follow along please check out the show and at trust um Branch

okay so yeah um next is implementing the transfer transfer is interesting it's the point where the Pathfinder comes into play um because we need to find a route to our destination um so in order to implement it let's switch to the transfer page or send page how I called it um okay and um here at this position we want to invoke the Pathfinder to find a path for the maximum transferable amount um depending

on your trust relations it might happen that you cannot always send the full amount so in this case we have 117 circles but um depending on our trust Network and the distance to our uh recipient um it could happen that our capacity is limited so what we need to do before sending the transaction is to notify the user about the maximum amount that he can send um um and um in a direct trust relation usually it should be that the recipient can receive all your tokens but actually

there are some limitations hardcoded in the contract um which are by some considered as a buck by others as a feature which limit um limit your uh capacity based on your own balance so it in the current implementation it could happen that uh if you run out of your own tokens you might not be able to to receive new tokens this a known buck and um we to work around it a little bit um but yeah your capacity of CC that you can can receive depends on your own balance and

also on on the trust limit that you can send uh set when you establish a trust relation so we established our trust relation or the SDK establishes the trust relation by default with 100% but um older wallet implementations by default used only 50% which also limits the flow between uh the different accounts so in version two uh we got rid of that trust percentage and um replaced it with a binary trust relation so you either trust or you not trust um and also it's not Balan dependent anymore um but this will be for version two right

now we have to live with the trust limitations uh it's a limit per Edge basically so between two different accounts or multiple accounts um on each Edge is an indiv digital limit which is based on your current balance and the trust limit but we will see how much we can transfer uh just in a moment I think here in this case since we trusted 100% and both accounts have a balance we should be able to send the full amount let's see um move back to the transfer page and we check out our Avatar object

uh where we find a get Max transferable amount method we need to specify where we want to sent to um in this case it's the recipient and this will return a promise um so we need to await the promise here in SW again show a loading text and um yeah format the amounts just with two decimal places um yeah let's check if that worked and it looks like it does so now we see maybe let's go back to our trust relations and try that again so now we

see um this is loading and internally invoking the Pathfinder and we now get a max amount that we can send of 50.9 circles which is a bit susic ises um because I think here um the time circles component comes into play so the Pathfinder by default Returns the inflationary value and if we remember that our initial transaction here um is actually 50 circles in inflationary values and 117 in De morage values it is very likely that um we show the inflationary value here and this will

happen sometimes because um the inflationary values are the values that are stored on chain and whenever you do an RPC call or get that from an indexer you will need to convert that to time circles in order to show it to a user because else users will be very confused about the deferring balances for instance that they can see in in in the um circuits Garden app versus your app so we need to convert this value into um time circuits and there should be a method to do so in the SDK it's called CRC to TC which stand for circles two time

circles we need to import that it's from the utils package um and since time circuits are a Time dependent unit uh we will need to supply the current time stamp which we do as a date object and then we want to at the max amount which uh in this case is not a promise okay

big uh yeah we we need to do some passing Fu because the max amount that we are getting is In inflationary units in by uh and we want to display that as a decimal value so we use ether format ether method um to convert y to Ether then this method oh actually we don't need that sorry I changed the SDK last minute let's just pass in the big in okay

nice could could be undefined okay then let's go with a default okay we need to connect the wallet again go to our contacts press send and now we can see the value is um actually our balance so we are able to send our whole balance to that user because we have this Mutual trust relation with 100% and both accounts are funded let's go with 10 and okay we haven't implemented the send functionality yet let's do

that um oh there's an issue okay to send circuits from A to B we also go to our Avatar object and call The Transfer method we need to specify where we want to transfer to which is the recipient and we also need to pass in a value um which is also again an inflationary unit so our value string will need to be converted to time circuits uh from time circuits to inflationary

circuits where we have a helper method um cc to TC which also takes the current date and this value is a number as far as I know uh oh that's the wrong we need to use TC to CC sorry and that expects a number um and since we have a text we have to pass that first I think method

wait okay so let's recap we call the transfer function on the Avatar Supply the recipient um since we are working in the front end with the time circles units and display them everywhere we also expect the user to enter time circles so we need to convert the time circles to inflationary circles because that's what's used on chain therefore we pass our string to a float uh Supply it there and then we get back our inflationary units let's see if that worked we should be able to s 10 circles confirm and let's see if that arrives

here let's reload oh oh yeah okay we we got our 10 circuits and we should also be able to send them back let's try that send our 10 circuits back oh interesting that that doesn't work okay let let's see uh in our transaction history if it's actually shown yeah okay

we see our personal mint and um 10 circles sent out to this address um actually I want to receive some now let's yeah in order to receive circuits um I need to trust the other account so in in in that case I did that but let's let's try a different account um maybe my real personal circus account who's now trusting my fake account

oh uh uh we discover some issues um as you noticed we don't have a username or a profile picture in um our wallet application um this is because currently there's only one database in circuits Garden which actually manages the user accounts and um that's not available VI the SDK right now so we are just going with the addresses here um yeah unfortunately that doesn't seem to work like expected but um at least we can send from our wallet uh to other accounts that works

and is actually the last step in our implementation so um we we can continue a little bit with auto updating the UI maybe we we do that because um it yeah is not a nice uxx if we need to reload the page whenever we do a transaction um and it also displays a few features of D SDK um regarding event handling so maybe let's start with the trust relations um but first any questions so far so to recap um we initialized the circus SDK registered a new account um show the balance and

transaction history we minted personal tokens um we allowed to add and display trust relations and we calculated the transfer paths and transferred circles from A to B um are there any questions at that point no okay um yeah then let's have another look into the event handling of the SDK um so the goal for that is um if we remove this trust relation here for instance we want to auto update our UI to reflect that change and um to do that we need to listen to the events that are um emitted by by the circuits

Hub contract um and the SDK provides a few methods to do so so um let's go to the trust page contacts uh And subscribe in on Mount to the necessary events so actually our Avatar is an events property um and that contains an observable which we can subscribe to and um it will yield events Avatar events to be precise and now the idea is whenever we

receive an event um we want to update our UI so um an avatar event can have multiple types and in this case we are looking for trust events so these are the same names that um the smart contract uses so you can look them up in either the code or in uh block Cod uh right now I'm doing this all of my head I know it's the trust event so I just filter for trust events and um what we want to do if we receive a trust event is we want to update the UI let's see if that worked so we would

now expect after establishing trust that the ion changes and signifies that we now have a mutual trust relation and that worked and yeah maybe we want the same for the transaction list and that should be actually the last step of our journey um let's go to the dashboard add the same logic

here here we are looking for multiple events one is called transfer and this personal minting or it could be uh Hub transfer event which is a personto person transfer and we want to refresh the transaction history in that case so we just copy and paste that code here and see if it works by minting okay that worked a little time has

passed so we got some some new uvi and um that's it for the workshop so I think you have seen um the basic functionality of circles wrapped in the SDK please note this that the SDK is still a preview and subject to change so if you plan to do substantial work with circles and need a more stable SDK you either need to wait for the official release or uh just approach me um or anyone else from the team um to to to get in touch and talk about how to handle your needs and other than

that that's it for now I hope um I could show you how to integrate circuits into your applications and we hope to see shop Integrations uh and further wallets soon um thank you very much any any [Applause] questions this is um yeah the the question was uh if the SDK will also work with circuits 2.0 which is the upcoming circuits version um which is near completion um yes so there will will be an update to the SDK and the interface

will remain largely the same so there will be some minor differences for instance circles V2 um adds a new account type which is the group type additionally to to the personal and organization account so these will be added but um minting transferring and all the other stuff uh will stay the same interface wise so also there will be a migration method to migrate your V1 accounts to V2 um so everything you start building with the V1 SDK right now um will continue to work um with minor modifications also with the V2 contracts Noob question um obviously all that you

showed us it's happening on noses um yeah it's everything on noses chain um so we can configure it to use other chains but since the deployment of um of of the circus contracts is on no this chain it doesn't make too much sense to use other chains other than for testing reasons so for instance while developing the SDK I I used a local ganach chain and then you can uh I don't know if the screen is still shared but yeah you can basically specify other contract addresses and other RPC end points for the SDK but usually in most cases you would just stick to nosis I'll here this

again um so let's go back to the configuration that was in Connect wallet what was it here uh in in in this thing it's yeah in an object so yeah you have this chain config object and you can specify different Pathfinder instances uh RPC URLs and also the contract addresses but this is mainly mainly meant for local testing on a local chain and is there any hope that we see circles for example on coin market cap who actually see a token um the C token itself since it's a personalized token and everybody can

create their own it's uh not really listable on on on dexus or anywhere else um but there will be group currencies in the upcoming version so how these work is um people can use their personal tokens as a collateral and mint group group tokens in exchange for that so if I deposit one token at a group contact I can get one group token and an exchange and these tokens since they just have one address um and can group multiple persons can very well be listed on dexus Etc so I I hope we will see quite some tokens emerging why the new group

feature but what's an example of a group token um this could for instance here in Berlin are um many alternative coops and for instance if you have kind of a circular economy within your Co-op so you have Freelancers that are working with each other or whatnot and um they can pay themselves in in in circles then you have basically a group of many people using circles but if they want to transact with people outside that group um you will most likely want to do that via Fiat money so the idea would be um that the group lists their group tokens uh on a de and people would buy the group tokens with euros and use these

group tokens to pay people in the collective um so this way you get a backing for the group tokens and if the group accepts the group tokens as internal currency then you can have really nice economic activity around that okay that sounds like bootstrapping the thing but should it could it not be another way where the circle like you guys make it so that I don't know how by incentivizing so the the spreading of the tokens so that it becomes off because when I look now as coin Market company and I don't see CC I wonder I have many questions and I is this legit or know so I understand it this is really coming bottom up but I yeah yeah so it's it's really really

bottom up and since everybody can create their own tokens and mint basically as many as they want so if they have a botn net the only thing that protects you against that is is the web of trust um yeah it's it's not practical to to use the individual tokens in in in deex scenarios but for groups that's very well possible and um I think we will create some circuit groups as well um but it's really meant as a feature for the people out there to create their own groups um so I think we will have a group for our wallet development for instance and maybe for other Associated Parts last sorry last input I um there's another token it has to what's it called

like Pro Mo it time to human of of nosis or ah humans of nosis was the relation with is that the right name and was the relation um that's actually a group currency so version one of circuits which is the version I shot today um also has a group feature already but it's an additional contract um that registers as an organization in the trust graph so it's not very well integrated into circles but it was a first test group that was created and um was actually backed with G and O tokens or is still and um yeah that's the very first uh asset backed grp human of nois

and token it's not easy to rub your head around it but yeah I understand that we are building it so thank you um I just wanted to add to your question but you already brought up the humans of nosis and and I think that's definitely a group we want to continue um I don't and and and it might have valuation on dexes but I don't think it will feature soon in coin market cap because it's not going to have a market capitalization of hundreds of billions of dollars so I I mean I I don't know how many humans of noes are going to yeah I I I I would just not I I don't think that's the expectation we're trying to build

for is to reach the top 10 of coin Market market cap with any particular group like I mean yeah even if all groups together are significant maybe then but they wouldn't add up necessarily together um so so I I think you will see circles in dexas um but not listed in coin market cap so that's inevitably I think an expectation that we should try to work with here Never Say Never but just to finish can it not be a a world where one angel investor of some sort say okay this is actually really cool I want to bring visibility from Berlin to the world let's let's put some angel or I and I think

CES circles was not meant to be like that I think it was really more thought from the community side of it like instead of an speculating coin it was more to be a tool to use for communities to do transactions rather than than just being in a market and create a market of specialization but it's very difficult to get to the global per because you will have to have a lot a lot of communities first like ideally Circle will get popular in the communities and eventually the communities will decide where will circles go rather than the other way around at least that's how circles has been s for the beginning

really really Community Driven I I think also for the um grp group part of circuits um Martin will give a talk tomorrow where where he will um bring up some more ideas what can be done with the groups so I don't know the contents of the talk yet but I'm I'm pretty sure it will have have groups in it any more questions um did everybody um manage to to to finish the code code Quest or um should I come around and do some debugging session so I think we have plenty of

time left um so oh okay do do you have a error message from from [Music] M oh sometimes eventually it should maybe to repeat the question for the stream um um she had an issue where um the button was just spinning at the sign up stage and I think eventually it should settle um so sometimes it's like the fees are not not enough when chain might be congested but I'm sure you have tried it again and the same happened

oh interesting um let's check which Step that was uh can you check out the register at circuits oh yeah true okay so um if there are no more questions then I would stop the workshop here and and see you outside and talk in person [Applause]