zoz.eth

The goal was always to automate, The reality is closer than imagined

Learning to be Artificial

0 - 1 setup instructions to get to have a Sui/Move/React base application to build upon

Set Up a Move Developer Environment[SUI]

Why the next time you hear about Crypto/Web3/[insert next narrative], it will be the last.

Boomer | Woke | Up

Deploy and provision a Sui full node with a one line command

Automate Sui Full Node Deployment

What will some of the roles within our systems look like in 5, 10, 20 years

the-future-of-work-with-zoz

Contributing time and attention as a resource

**op·por·tu·ni·ty  cap·i·tal·ist**

/ˌäpərˈt(y)o͞onədē/  /ˈkapədləst/

*noun*

noun: **opportunity** **capitalist**; plural noun: **opportunity** **capitalists**

An individual who, instead of working a traditional job, spends time contributing to decentralized protocols/projects/products to gain equity/skills/relationships. An iteration of the VC but at a smaller meaningful scale that is not purely return motivated.


---

## Venture Capitalists Sowed the Seeds

There is no doubt that Venture Capital fueled the industrial age allocating Captial to long shots that have reaped rewards, changed the fabric of society and shaped our day-to-day lives. Let’s dive into how we got to the present-day Venture Firm, how it differs from the original implementation and a brief timeline. This will lead us to some of the next questions and predictions.

\
**What is Venture Capital?**

It’s a form of private equity. The equity is secured from liquidity providers(wealthy individuals and corporations) and used to fund early-stage projects(start-ups) after the seed stage. These ventures are usually high risk and high reward with a low efficacy rate. It is a mutual agreement between the founders of the project and the VC firm, the founders would often not be able to scale without the funding and support. The VC firms business is based on a certain percentage of its bets will be extremely successful and go to the IPO stage where they can exit to secure the gains. Rinse and repeat.

\
**History of Venture Capital**

Originating in the early 1900’s it was nothing like it is today. The majority of the population did not have the capital, information or resources to participate in the above description. It was the very wealthy individuals and families who created these investments. The next cohort of Venture Capital came after World War II(\~1945). [Georges Doriot](https://en.wikipedia.org/wiki/Georges_Doriot), is termed the "father of venture capitalism" and  founded ARDC in 1946 to encourage private-sector investment in businesses run by soldiers returning from World War II. This kicked off the next era of innovation, although the structure was more like a public company compared to the VC firms that exist today. This cohort fertilized the seeds that grew into separate spin-offs and morphed into a variety of different models.

\
**Timeline**

```javascript
├── Early 1900's : Wealthy inividuals & familys
│   ├── J.P. Morgan
│   └── the Rockefellers
│
├── 1945 : American Research and Development Corporation
│   ├── Georges Doriot
│   ├── Ralph Flanders
│   └── Karl Compton (former president of MIT)
│
├── 1958 : Small Business Investment Act of 1958
│   └── The Small Business Investment Act of 1958 provided tax breaks that helped contribute 
│       to the rise of private-equity firms
│
├── 1960s : venture capital came to be almost synonymous with technology finance.
│   └── The Firms were primarily focused on companies were exploiting breakthroughs in electronic, 
│       medical, or data-processing technology 
│
├── 1970s : growth of the venture capital industry was fueled by the emergence of the independent investment firms 
│   ├── Kleiner Perkins
│   └── Sequoia Capital
│
├── 1973 : leading venture capitalists formed the National Venture Capital Association (NVCA)
│
├── 1980's : From just a few dozen firms at the start of the decade, there were over 650 firms by the end of the 1980s
│
├── 1990's : World Wide Web
│   ├── Netscape and Amazon (company) were founded in 1994, and Yahoo! in 1995. Each funded with venture capital
│   └── The Exit: Internet IPOs—AOL in 1992; Netcom in 1994; UUNet, Spyglass and Netscape in 1995; Lycos, Excite, Yahoo!, 
│       CompuServe, Infoseek, C/NET, and E*Trade in 1996; and Amazon, ONSALE, Go2Net, N2K, NextLink, and SportsLine 
│       in 1997
│   
└── 2000 : The Dot Com Crash
```

\
**Today**

As you can see, reading this now and being a part of the network of networks. The internet did not die, it grew into a vast luscious forest where any person could become a VC with a LinkedIn profile and acronyms that a PHD has never heard of

 ![](https://storage.googleapis.com/papyrus_images/51bca9ae6f1a8e8cf6e09dcf1cd3f94b)What originally was the gasoline for the fire may have sucked the oxygen from the room. Arguably the model just changes, or there may be room for a subset of Venture Capital. The argument is that Capital is no longer the scarce resource that a product/protocol/project needs.

\
## Is a Network a Business?


---

Why was the preceding section so important to the concept we introduced in the title? Without knowing how our lives were built by a sea of capital, the most valuable resource at the time. Our eyes may be closed to what lies ahead. From wealthy elites to tens of thousands to around a million today, this shows the idea of venture capital scaled to the masses, and it scaled because there was an ever-growing amount of companies being built. Mostly due to technological innovation as we saw from the 90s until now. With every stage of innovation, there is a cross-over from the old to the new that overlaps and is not as efficient as it could be but with time, it is optimized.

As we are seeing by the information barrier being removed with the internet coming of age, there are coordination abilities sprouting to life that couldn’t have been possible only a decade before. While networks have always existed, the internet taught us that they could be managed at a global scale by clusters of nodes.

Companies, in general, operate very well with their hierarchical structure and processes. For the majority of the last couple of centuries, this has been the most efficient way a business operation could exist. Notwithstanding the downfall of bureaucracies today(a story for another time) and the bloat they now endure, Companies have their place in the world of today and yesteryear but will a better option be available soon? It depends on the context.

Networks were missing one key attribute to become a vehicle for groups to coordinate in the same way that a company operates. While they were much more nimble and resilient than a company, they lacked the important necessary ingredient ‘value’. Particularly natively packaged trustless transfer of value between the different nodes within the system. In the last 10 years, this has became increasing availble. First with Bitcoin, then with smart contracts and now the products being built around these valuable primatives.

This is now the golden era of experimentation, iteration and invention of what is possible with these new tools to coordinate and operate between nodes or entities spanning continents. We have only just touched the surface of what is possible. We now have a large number of Venture Capitalists, debatably the majority of them merely providing capital coupled with an explosion of ideas from an ever-growing pool of entrepreneurs. If a network is now suitable to be a vehicle for a business and there is an abundant supply of the former two. What is the real scarce resource?

\
## We don’t need Loggers and Logging, We need Fertilizers


---

There’s now a gap dividing the end user and the business vessel that we call a network. Let’s start with what a network needs; First and foremost, it needs a reason to exist. Be it a decentralized state machine, a more efficient way to distribute value trustlessly or simply to exchange dog pictures(or coins). It needs infrastructure, it needs people using it, and it needs a community of individuals with a purpose. Money can only buy a certain amount of this for a limited amount of time before reality starts to seep through the cracks.

What will not be as obvious today as in hindsight is when the fog clears that the ecosystem within a network, the roots, the passionate individuals and the presence is what fuels it. Without it, there is just a piece of technology left by the wayside after the funds are extracted. Like a hole in the ground of a decommissioned gold mine. Speaking of such.

A story comes to mind of a small gold mining town. On Alta Mountain within the Little Cottonwood Canyon in Salt Lake City, Utah, During the early days, the sawmills operating at Alta required vast amounts of logs. Trees were felled in such great numbers that the slopes were practically denuded of timber by 1884. With the removal of the trees, there was little to hold back the accumulated snow. During the winter of 1873-74, a disastrous snow slide swept down from the mountain and destroyed about one-half of the town. Sixty persons reportedly lost their lives in the main blocks of the town. A fire followed the avalanche, and between the two destroyers, the town was almost completely wiped out. Other avalanches and fires swept through the town in the following years. In 1885 a slide swept down from Rustler Mountain, partially destroying the town. This history acts as a metaphor, a story about greed, unfamiliarity and lack of thoughtful foresight that resembles what we might be seeing now within these networks. This is for good reason, what seemed like fiction only a couple of years ago is now a small ecosystem within the forest VC created. What this means is there is an opportunity to fill the gap between the extreme event of failure and death that is resonant in the early days of the venture as it grew away from wealthy elites and before it became what it is today.

## The Opportunity

Opportunity exists in this gap. We are now seeing a shift where a role is emerging out of necessity. After the dust began to settle in 2019 after the crash of early 2018, to the foreign bystanders it looked like “that whole crypto thing” had been a fad. Undeniably it even looked that way to lots of passengers still aboard the 2015,16,17 bus as the seats emptied during 18/19. But many seeds were starting to sprout with one thing missing - believers, skills, and passionate individuals to use those skills. While the majority of the initial building was done by regular employees and founders, similar to existing early-stage ventures. They needed new roles like Validators, Community Mods and Builders to build upon the networks that were being designed and constructed.  During that time, Zaki Manian designed one of the few ecosystem growth campaigns designed to recruit, train and eventually employ(not in the traditional sense) - The Incentivized Testnet. It would allow any individual to permissionlessly enrol and join a game based on the operation of running validator nodes to protect the network being built. It may seem strange reading this now but similar to mining Bitcoin way back in the day, you could barely find enough people to join the testing phase. Because now, with the hindsight of seeing the value of the networks(In physical, philosophical and by value), it is a no-brainer. The equity earned by participating in these early games allowed the participants to own a meaningful stake in the network.

This was the beginning of these types of opportunities. We started to see other such examples, like early digital art collecting with the narrative of unique scarce timestamped sealed packets of data(NFT’s) and Working Group roles within DAO’s. Notably missing is farming. While an innovation in mechanism design for the time, this does not fall into the same category as above because it was a somewhat different breed of user who ultimately extracted value with this endeavour. It was one who was versed in the knowledge barrier of the next participants.

\
**The Opportunity Capitalist** is what a network needs. They are defined by values and are involved in jumpstarting these networks for learning, ideals, equity share and for the improvements they provide compared to previous and current systems.  Monetary gain is a secondary motive, most value accrues from the journey. Networking and training are just as valuable due to these skills not being defined or available when acquired. This insight gives skills and knowledge that compound and leads to future opportunities. It should be noted though that this is not scalable by design. To give meaningful value back to the network, like any social network, is the capability for a single person to nourish relationships and provide their most valuable assets - attention and time.  Realistically the individual becomes ineffective after around 5 networks and neutralizes the value for each one added to the attention list, at worst, it is destructive to their presence within the other networks.

 ![](https://storage.googleapis.com/papyrus_images/c9d2f49e18b7dad22006fe9bc0ae18a3)Due to the value being time and attention instead of capital. These networks naturally grow and overlap these opportunity capitalists even though the immediate breath is small, have an exponential effect due to the overlap between nodes within the multi-layered mesh

 ![The inner pentagon represents 0% of the OCs time and attention increasing to the outer pentagon at 100%. We can see these OCs overlap creating a trunk in the middle.](https://storage.googleapis.com/papyrus_images/48f74d09f68dc29d629f3177507406dc)This is the real hyperstructure being built. The one that will sew the fabric of our digital lives, products and relationships together. While this role was essentially created in 2019 while the ecosystem is a very unique subset of participants, over the last few years we have had a change within the idealogy of new participants. They come from the traditional finance, and startup world and bring with them the processes and organization. Trying to inadvertently coerce these networks to fit a mould of familiarity. This may not be the approach that will drive these networks forward and could be detrimental to Opportunity Capitalists.

We now enter the do-or-die stage of the OC, do traditional values overthrow the progress being made using traditional resumes filled with buzzwords and political correctness OR do we step outside our comfort zone and have anons with a track record of soul-bound achievements to take the reign? Likely somewhere in the middle.

\


Opportunity Capitalist

## Walk through Web3 pull requests to get a better understanding of products, projects and protocols


---

## What is pull-requests-with-zoz

This series is for the curious potential web3 coders out there. I, like you, started with a vision that blockchain and web3 will change the world, yet I didn’t have the skill set to actively help build that world we so long for.

pull-requests-with-zoz will help anyone of any skill set learn about a product, project or discipline in a new content form I felt would benefit others. It consists of two complementary pieces:


1. A pull request that was contributed to an open source crypto project
2. An article explaining the what, why and how.....

## Articles

* __[Intro and How to Send a Pull Request](https://paragraph.xyz/@0xZOZ/how-to-send-pull-request)__
* Wallet Series
  * __[Easy: Injected Provider - Web3Modal <> Tally Ho Integration](https://paragraph.xyz/@0xZOZ/easy-wallet-integration)__
  * Medium: Non-Library Integration - TBD (Coming Soon)
  * [Hard: Wallet Package - Web3Modal <> Tally Ho Integration](https://paragraph.xyz/@0xZOZ/hard-wallet-integration)
* __[Ceramic x Superfluid Integration](https://paragraph.xyz/@0xZOZ/intergrate-a-ceramic-datamodel-to-superfluid)__

\
### About


---

*Twitter:*  @0xzoz

*GitHub:*  @0xzoz

*Mirror:* @0xzoz

*Discord:* @zoz.eth#6952


---

**ENS:        zoz.eth**

\


pull-requests-with-zoz

\
## Wallet Series


---

This is a three-part series in the larger `pull-requests-with-zoz` series:

**Easy** - Adding an injected provider to an existing library

**Medium** - *Adding an integration of a wallet*

**Hard**(this) - *Adding a wallet as a package to an existing library*

## Motivation


---

When starting to contribute to the open-source community-run browser wallet Tally Ho by integrating it with products, I didn’t know much about how a crypto wallet is integrated with dApps. Having spent numerous hours helping the team and community, I now have a better understanding of what is technically happening and how it can be done in the best way possible to help with not only connecting to an application but also strategically providing the tools for others to help brand awareness and visibility.

This article breaks down how to integrate a wallet with a wallet library by creating a separate package that’s loosely coupled to the library to provide more composability. Tally Ho had originally been integrated into Web3Modal as an add-on to the injected provider slot, which the library uses to bundle the common wallet type together. Generally, this works by identifying the current extension browser and connecting to that. For example, if you have MathWallet installed instead of Metamask, the injected option would show the MathWallet logo and name on the button, and it would connect seamlessly.

Due to the early stage nature of Tally Ho as a project and the roll out of features compared to other more established wallets, it was generally used alongside another wallet. This did not provide the best user experience. To remedy this, we change the current implementation and implemented it as a package. I went over the first integration in the [Wallet Integration: Easy](https://paragraph.xyz/@0xZOZ/easy-wallet-integration) article in this series if you would like to check it out.

## PR


---

<https://github.com/WalletConnect/web3modal/pull/571>

\
## Tech/Product


---

### Tally Ho

[Tally Ho](https://tally.cash) is an Open Source Community run Web Browser Extension Wallet. Wow, that's a mouthful! What exactly does that mean?

**Necessary Backstory**: The largest wallet in space is Metamask. While once a grassroots endeavour, with the growth of crypto as an industry, MM’s user base also grew - massively! MM is owned by Consensus, and they have investors who they have to please. This led to the wallet creating a revenue-generating feature: the ability to do token swaps natively in the wallet(for a generous fee, of course). Around this time, MM also changed their license so others could not use their code(not very web3-like).

Tally Ho is an initiative to do exactly the opposite. Create a wallet that is built, owned and used by its users. It’s open source so you can fork the crap out of it, but most importantly, the value accrues back to the users. It is the essence of web3 and proves that we can do good!

### Web3Modal

This is one of the most used wallet libraries within the industry. Web3Modal is an easy-to-use library to help developers add support for multiple providers in their apps with a simple, customizable configuration.

By default, Web3Modal Library supports injected providers like ( **Metamask**, **Brave Wallet**, **Dapper**, **Frame**, **Gnosis Safe**, **Tally**, Web3 Browsers, etc) and **WalletConnect**. You can also easily configure the library to support **Coinbase Wallet**, **Torus**, **Portis**, **Fortmatic** and many more.

## Scope


---

To change the existing Tally Ho wallet integration from an add-on to the injected provider package and separate it out into its own package. The reasoning for this is 3 fold:


1. Due to a change in the Tally Ho code injecting Web3 into the browser, the original integration broke, and the Tally Ho logo would no longer show. The wallet would still connect, but this didn’t really jive with us.
2. You needed to set Tally Ho as the default wallet in settings if you had other browser wallets alongside Tally Ho. Again, this is a really bad UX, and we could do better
3. Due to the collaborative nature of the Tally Ho story and being a community-run open-source wallet, products want to have Tally Ho as an option, even if the user does not have it installed, to create brand awareness.

With a new understanding of the best way to implement this and the above user issues, we wanted to address them. Let’s break down what we did. You can always look through the other articles in this wallet series for higher-level explanations if some of the points below don’t quite make sense.

## Commits


---


1. [Renaming for latest brand change](https://github.com/WalletConnect/web3modal/pull/571/commits/dc568b4537e441565dbabc9df6e1b18d803a2f60)

Since the initial PR integrating Tally Ho there was a name change due to some conflicts with the name *Tally* instead of *Tally Ho.* This commit corrects the naming to represent Tally Ho before we make further changes.


1. [Add additional check to capture Tally Ho instead of fallback wallet](https://github.com/WalletConnect/web3modal/pull/571/commits/316669985cc90f69e8857c0362f4d6515e7644ee)

Because of changes within the Tally Ho codebase and injecting Web3 into the window(see 1. above), we need to factor in that Tally wants to be noticed instead of being overridden by the fallback wallet(web3). A simple check is added to the logic that checks if Tally Ho is identified and if Web3 is identified. This will give Tally Ho precedence over the default.


1. [Use window.tally to make Tally Ho dominant wallet when installed](https://github.com/WalletConnect/web3modal/pull/571/commits/33a60825bdd7b67689df62f183d1e1d5a056925f)

Tally Ho uses two different methods to inject into the window object. Firstly injecting  Tally(eg `window.Tally`) directly into the window object allows it to be detected and used at all times. Secondly, if the ‘*set as default’* option is checked in the settings. Then Tally Ho mimicks Metamask by also injecting it into the Ethereum object in the window object (eg `window.ethereum`) and can be checked via `window.ethereum.isTally` field. Because we want to allow Tally Ho to be recognized and used alongside other extension browsers. We refactor the package to use the `window.tally` method.


1. [Add Tally Ho provider](https://github.com/WalletConnect/web3modal/pull/571/commits/a273c58530c7850217cd1a1a731f215806d8c186)

We need to add a custom provider for Tally Ho to be able to use a couple of Tally Ho specific packages:

\- `tallyho-detect-provider` - `tallyho-onboarding`

This new provider will make sure that Tally Ho is not using the standard injected provider if the product using Web3Modal specifically sets Tally Ho as a separate slot.


1. [Allow Tally Ho to be interchangeable either as injected or as a provider option](https://github.com/WalletConnect/web3modal/pull/571/commits/d562a02fb36f1603616318fe4ab04353b518f538)

Because we want this change to be backwards compatible and also allow products that do not add Tally Ho as a package to be able to have Tally Ho as an injected provider. This requires a couple of changes.

\- A check in `src/helpers/utils.ts` (L182) to set the injected value to Tally Ho if the package is not installed and if Tally Ho is installed

\-  Change the name of the Tally Ho injected instance to be able to be used for the package as well

\- Change logic ordering in `src/providers/connectors/injected.ts`

\- Instead of just console logging in `src/providers/connectors/tallyho.ts` throw an error to exit the operation.


1. [Add documentation](https://github.com/WalletConnect/web3modal/pull/571/commits/df574c17bc6f43ea5dd4e17548dd4c3b43d7f1b4)

Add the relevant documentation to capture the changes that were incorporated into this PR.

## Conclusion


---

We end our wallet series here by adding a wallet package into a library. The skills you have learnt over the last 3 articles more than provide you with the ability to contribute to a DAO and open source protocol. Hopefully, this gave an understanding of wallets and their interaction with the browser and web applications.

We at Tally Ho need contributors to help integrate with other projects. If you would like to join the pawdnership team, please reach out. We are also happy to help mentor keen enthusiast individuals!

### Cover Image


---

The image above(like my PP) is created with [abraham.ai](https://abraham.ai/) - an AI artwork generator **SEED:** zoz.eth integrating a dog wallet with a blockchain network using hard mode

### About


---

*Twitter:*  @0xzoz

*GitHub:*  @0xzoz

*Mirror:*    @0xzoz

*Discord:* @zoz.eth#6952


---

**ENS:        zoz.eth**

Wallet Integration: Hard

\
By the end of the post, you should be equipped with the knowledge of what Ceramic is, what the Superfluid Console is and how to integrate Ceramic into your favourite applications. The following breaks down a pull request of integrating Ceramic into an application.

\
## Motivation


---

I had originally heard about [Ceramic](https://ceramic.network/) from a podcast. The concept of having a data model standard within Web3 made a lot of sense. This concept took a while for me to grasp technical concepts of how to make that magic actually happen but I documented it [here](https://mirror.xyz/zoz.eth/V5P5ogJTsmfDWMB4uTiW1FD9BKzuYwQuuFSAkEMYyBw) so it is easier for you. When I saw a Gitcoin bounty to integrate this tech with [Superfluid](https://www.superfluid.finance/) I knew it was the best opportunity of learning firsthand if there was substance to my intuition.

## PR


---

<https://github.com/superfluid-finance/superfluid-console/pull/93/commits/b1ac01fb3c866ddc7442059d0f566fdfe92482c8>

\
## Tech/Product


---

### Ceramic

The website describes it as: “Ceramic is a decentralized data network that brings unlimited data composability to Web3 applications.” but what does that mean exactly, and why should you care?

Ceramic acts as a platform to store your user’s data and create standardized data models that, once adopted and reused by the industry, will allow the next layer of composability within Web3 and Defi. It uniquely allows the user to own their data using their DID(persistent decentralized identifier) that can be generated in many ways, but in this case, using the user’s crypto wallet.

It works by creating streams for data models that are then available for users using their DID. You can think of it as a data table, your DID is the row, and each stream created is a column. An example might look like the one below:

 ![](https://images.mirror-media.xyz/publication-images/hVtDN6gKT6k02vP2oKtQL.png?height=317&width=628)

### Superfluid

Imagine a world where value can be distributed in real-time at any interval and determined individually for the use case. Powerful, easy and one of the simplest product market fit for blockchain and crypto. Well, Superfluid is just that, a streaming service building block that can be used modularly with other products. But what good is this without a way to visualize that data in real-time across each of the networks superfluid is deployed to? In comes [superfluid console](https://console.superfluid.finance/) - A way for users to do just that. It would be nice if this was using a common framework for the data so it could be even more composable in the ever-growing Defi ecosystem, wouldn’t it?

## Scope


---

What we wanted to do in this PR is marry the two technologies while incubating the design of an Address Book Data Model to track a user’s connected wallets and their streams. Creating this would allow it to be packaged and stored decentrally on Ceramic while accessible to other applications that could leverage the existing model.

There are two parts to getting this completed.


1. Creating the Data Model and deploying it to the Ceramic registry. We covered this in a previous blog [post](https://mirror.xyz/zoz.eth/V5P5ogJTsmfDWMB4uTiW1FD9BKzuYwQuuFSAkEMYyBw).
2. Using the already available DID on ceramic to connect with Superfluid. Then creating the ability to add, edit and retrieve Address Book data to be used within the Super Fluid console.

## Commits


---

> Unfortunately this PR was completed before the concept of `pull-requests-with-zoz` was conceived and it was done with one large commit(Im now starting to expose just how little I knew🤦🏼). For purposes of this article we will breakdown this large commit into steps like it should have been done.

Let’s first break down what needed to done. I had no previous exposure to either Ceramic or Superfluid so I had to get a grasp of how these applications work. Ceramic was a large learning curve and my first post breaks it down for a dummy like me. Secondly, I really didn’t know how Address Books worked in the console and it took me a long time to even find where to add an entry(not a great user experience, but its Web3 so we will give it a pass - *for now*). With that said and maaannnny more hours than I should have spent. I determined I needed 4 pieces added:

* Add the necessary packages, and references to the data models and wrap the app in a provider.
* A button to connect to ceramic and recognize the user’s identity
* A neat way to package the interactions a keep them separately contained - maybe a React hook
* Replace the existing interactions with the applications state and use the newly created methods in the above step to instead use the new Data Model and interact with Ceramic.

Don’t worry the next steps will help describe and allow you to visualize this better if it doesn’t make sense.

*1.* **Determining where the changes need to be made**

This is always the biggest hurdle when trying to grasp a new concept and multiple products with different codebases. There is no shortcut. You must read the code, break things, and insert a billion console logs(well at least I do). I usually create a separate branch just to do this and use it as a messy draft of what I will actually submit as my final PR.

*2.* **Add the necessary packages, and references to the data models and wrap the app in a provider**

I suggest reading the first Ceramic post as this explanation will be briefer(with the assumption you have a little more knowledge than I did when I started). We will need two packages:

\- `@glazed/types`: This will be used to give a defined structure and connect Data Models with aliases - `@self.id/framework`: This is a powerful wrapper that encaptures all the functionality of the Ceramic protocol into a neat package.

We want to wrap the application in the Provider(`src/pages/_app.tsx` - L66) and add our references to our Data Models(`src/utils/ceramicModel.json` to use later on. Where did we get these references from? We created and published them to the Ceramic network. We also could have got them from the [Data Model Registry](https://github.com/ceramicstudio/datamodels) if they had been published previously.

*3.* **A button to connect to ceramic and recognize the user’s identity**

We will go ahead and create a new React component of a Button(`src/components/CeramicConnect.tsx`) that will allow us to log in and get our identity. \*Note: the button will be using our React hook we create in the next step

The button performs a couple of functions: Connect, Disconnect with the `@selfId` framework(L11 - L28) and also gets our DID. It is using our Ethereum address from our injected wallet to recognize us.

4\. **Package the interactions in a React hook**

Let’s first understand what a React hook is. A hook is a collection of functions that isolate the stateful logic to use within other components. That is any variables that need to be changed and managed. In this instance we would like to manage the Ceramic state. [This](https://www.freecodecamp.org/news/react-hooks-fundamentals/#:\~:text=React%20Hooks%20are%20simple%20JavaScript,useState%20%3A%20To%20manage%20states.) article is helpful to give a more in depth explanation of hooks.

Here we create the `useAddressBook` hook and it is found in the `src/hooks/useAddressBook.ts` file. This hook is to manage the addressBook state within the Superfluid Console application so we want to bring in some other dependancies here like:

* `useViewerConnection` from the `@self.id/framework.`We want to use this as it will get our current connection to Ceramic
* Standard `useAppDispatch` and `useAppSelector` react hooks. Also the `useCallback` hook. These will help us interact with our application state and the app
* `useViewerRecord` from the `@self.Id/react` library. This will help us pull data from Ceramic by giving it an alias

Now we just want to create reusable functions within the hook that will help us achieve our task of creating, updating and deleting the data within ceramic. The functions between lines 29-87. The two functions below that are just a way to massage and transform the data in and out.

5\. **Replace the existing interactions with the applications state and use the newly created methods**

Wow… Not really that much to it when its broken down and explained is there? On to our final boss… Connecting it in to the existing application and wiring it all up. This happens in the `src/components/AddressBook.tsx` file. This file was already doing much of the functions we need but it was using the state in react and on the client. So essentially we just refactor these existing functions. We need to bring in the following items:

* `useViewerConnection` and `useViewerRecord` from `@self.id/framework`
* And of course our new `useAddressBook` hook

When we bring in `addAddressBookEntry` and `removeAddressBookEntry` from `useAddressBook` we can now replace actions with these.

We also want to let the user know they need to connect to Ceramic to use this new functionality if they have not already. This is done by checking if we are connected and showing a warning if not. This happens between lines 111-120.

**There we go!!!** *YOU* now have the knowledge to integrate Ceramic with your favourite applications

## Conclusion


---

This post first serves as an example to what not to do in a PR by showing a poor monolithic approach of using one large commit. But also providing a solution to how it could be done better. These are the commits I would do now if I was to integrate another application

Ceramic is a powerful tool that will only get better as more integrations use the network. How I view it is like an interoperable data service that is blockchain agnostic. A new model for any application, not even blockchain to leverage. The intention of this post is empower even a novice like myself to integrate and use Ceramic. It also breaks down just how easy it is!


---

## This is one of many articles based on the concept of pull-requests-with-zoz

<https://paragraph.xyz/@0xZOZ/pull-requests-with-zoz>

\
### Cover Photo


---

The image above(like my PP) is created with [abraham.ai](https://abraham.ai/) - an AI artwork generator 

**SEED:** zoz.eth integrating a Ceramic Data Model into the Superfluid console

\
### About


---

*Twitter:*  @0xzoz

*GitHub:*  @0xzoz

*Mirror:*    @0xzoz

*Discord:* @zoz.eth#6952


---

**ENS:        zoz.eth**

Integrate a Ceramic  DataModel to Superfluid

## 

## Sub Series

This is a three-part series in the larger `pull-requests-with-zoz` series:

**Easy**(this) - Adding an injected provider to an existing library

**Medium** - Adding an integration of a wallet

**Hard** - Adding a wallet as a package to an existing library

## Motivation

This is where my journey started 😁. I was a wannabe blockchain developer that lacked knowledge and had never written a single line of open source code. I was inspired by a user(@commstark) on the Tally Ho Discord who had started contributing to the project and created a team of helpers doing non-technical tasks. Tally Ho had just started their Pawdnership Pack initiative to get developers helping to integrate the wallet with as many products as possible. I thought, why not, what did I have to lose? This is not that actual first PR, in fact, that was very simple(one line of code lol) but from that, I was able to piggyback on the success and the knowledge it gave me. I want to make this public to help others take the first step.

## PR

**<https://github.com/WalletConnect/web3modal/pull/389>**

## Tech/Product

**Tally Ho**

Tally Ho is an Open Source Community run Web Browser Extension Wallet. Wow, that's a mouthful! What exactly does that mean?

Necessary Backstory: The largest wallet in space is Metamask, while once a grassroots endeavour, with the growth of crypto as an industry, MM’s user base also grew - massively! MM is owned by Consensus and they have investors who they have to please. This led to the wallet creating a revenue-generating feature: the ability to do token swaps natively in the wallet(for a generous fee of course). Around this time, MM also changed their license so others could not use their code(not very web3-like).

Tally Ho is an initiative to do exactly the opposite. Create a wallet that is built, owned and used by its users. It’s open source so you can fork the crap out of it but most importantly, the value accrues back to the users. It is the essence of web3 and proves that we can do good!

**Web3Modal**

This is one of the most used wallet libraries within the industry, Web3Modal is an easy-to-use library to help developers add support for multiple providers in their apps with a simple customizable configuration.

By default, Web3Modal Library supports injected providers like ( Metamask, Brave Wallet, Dapper, Frame, Gnosis Safe, Tally, Web3 Browsers, etc) and WalletConnect. You can also easily configure the library to support Coinbase Wallet, Torus, Portis, Fortmatic and many more.

## Scope

To allow Tally Ho to connect to applications when they are using the Web3Modal library. It is important that the Tally Ho logo shows as we want users to have a familiar experience when connecting to the app. This is a pretty simple addition seeing as the wallet library treats all injected providers as a single package and is compostable. Lets spend some time discussing how this actually works to better understand how a wallet is interacting with our browser

## The What and How of a Provider

A provider is an API the wallet injects into the window object on your local browser. Once installing a wallet like Tally Ho it does this by default. Tally Ho is different from other wallets but we will get into that below. Let’s use Metamask as this example to help build the concept. MM and most web3 wallets inject a global API in the `window.ethereum` object and this allows websites and dapps to do the following:

* Detect the Ethereum provider (`window.ethereum`)
* Detect which Ethereum network the user is connected to
* Get the user's Ethereum account(s)

Here is a snippet of code to help you visualize the above statement

```javascript
// usually this is encompassed in a if statement checking we have a wallet installed

if(window.ethereum){

const provider = window.ethereum;
startApp(provider); // initialize your app

} else {

console.log('Please install Wallet!');

}The presence of the provider object indicates an Ethereum user. We won’t go too deep but this global object acts as a gateway. Some highlights of the features:
```

* `provider.isMetaMask` - Each wallet has its own variation(`provider.isTally`) but this allows you to check the wallet currently installed and active.
* `provider.isConnected()` - Check if the application is already connected.
* send events - eg `provider.on('connect', handler: (connectInfo: ConnectInfo) => void);`

Hopefully, this should help with the basic building blocks to understanding how an injected wallet is interacting with your browser.

**How is Tally Ho Different?**

> Unrelated to the overarching concept but provides some context for future pieces in the wallet integration series.

Tally Ho knows they are the underdog(pun intended lol). They need to be able to allow devs to connect in any way possible. While also not impeding the experience of having multiple browsers installed as it scales and before it has the full war chest of features we Web3 natives need.

The wallet does this in two ways:

* Allowing users to set the wallet as default in the settings. This then injects the `window.ethereum` object that you could use `window.ethereum.isTally` and it would return `true`. If it is not set to default and another wallet was installed, that wallet would now take precedence. This helps provide Tally with ease of integration while leveraging existing infrastructure.

Tally Ho also injects the `window.Tally` object to allow it to act as a stand-alone wallet alongside other injected providers and empowers developers to be able to use say Tally Ho and Metamask and connect separately.

## Commits


1. [Add Tally as an injected option](https://github.com/WalletConnect/web3modal/pull/389/commits/79f3395a86fcd6cabf9301ac62024675d296b568)

This adds a couple of items. An image to use when the library recognizes Tally Ho as an injected provider. Also added is the standard `IProviderInfo` type into the `src/providers/injected/index.ts` file with the Tally configs set. The `/injected/index.ts` file houses all of the injected providers and some other logic loops through to see what one is connected. The logic is not necessary to dive into now but post 3(Wallet Integration: Hard) in this wallet integration series explains it more in depth


2. [Add Tally to documentation](https://github.com/WalletConnect/web3modal/pull/389/commits/79f3395a86fcd6cabf9301ac62024675d296b568)

This commit simply updates the documentation to allow devs to know that Tally Ho is integrated within Web3Modal.

## Conclusion

While helping work on Web3 apps may seem daunting at first. This wallet integration helps to break down how easy some of these features can be to add. An integration like this is a great way for a relatively small piece of work to provide an exponential amount of value due to the library already being integrated with numerous DApps. Every time one of the DApps updates to the version this change was introduced Tally Ho is able to connect.


---

## This is one of many articles based on the concept of pull-requests-with-zoz

\
<https://paragraph.xyz/@0xZOZ/pull-requests-with-zoz>

\
**Cover Image**


---

The image above(like my PP) is created with [abraham.ai](https://abraham.ai/) - an AI artwork generator **SEED:** zoz.eth integrating a dog wallet with a blockchain network using easy mode

**About**


---

*Twitter:*  @0xzoz

*GitHub:*  @0xzoz

*Mirror:*    @0xzoz

*Discord:* @zoz.eth#6952


---

**ENS:        zoz.eth**