DEV Community: Jonathan Bakebwa

The new era of Gamers: Crypto Gaming

Jonathan Bakebwa — Tue, 18 Apr 2023 03:04:38 +0000

The world of gaming has always been a lucrative industry, and the advent of blockchain technology has opened up new avenues for players to earn money while playing their favorite games. Crypto gaming has emerged as a popular trend in recent years, with players using cryptocurrencies and digital assets to buy, sell, and trade in-game items and participate in play-to-earn games.

According to a recent article on our blog, the popularity of crypto gaming has been on the rise, with more players turning to these games as a way to invest in digital assets or earn money through play-to-earn games.

The article highlights some of the key benefits of crypto gaming, including the ability to earn passive income, own and trade digital assets, and participate in a more decentralized and transparent gaming ecosystem.

One of the most significant advantages of crypto gaming is the play-to-earn model, where players can earn cryptocurrencies or digital assets by playing games and achieving certain milestones or completing tasks. This model has revolutionized the gaming industry, as players can now monetize their gaming skills and turn their hobbies into profitable ventures. Play-to-earn games have become increasingly popular, with some games offering rewards worth thousands of dollars.

Another benefit of crypto gaming is the ownership of digital assets. In traditional games, players do not own the in-game items they purchase, and the game developers can revoke or delete them at any time. In crypto games, players own the digital assets they acquire, and they can sell or trade them on various marketplaces.

Crypto gaming is also a more decentralized and transparent ecosystem compared to traditional gaming, where game developers have complete control over the game's economy and regulations. With blockchain technology, crypto games are built on decentralized networks, making it more challenging for developers to manipulate the game's economy or impose unfair regulations.

In conclusion, crypto gaming has emerged as a lucrative and engaging opportunity for players to earn money while enjoying their favorite games. With the rise of blockchain technology and the play-to-earn model, crypto gaming has become an exciting and accessible way for players to monetize their gaming skills and own digital assets.

As the industry continues to evolve, it will be interesting to see how crypto gaming transforms the gaming landscape and attracts more players into the world of blockchain. Learn more about crypto gaming here: https://mirrorworld.fun/blog/crypto-game-users

The Benefits of Self-Built Marketplaces for Blockchain Game Creators

Jonathan Bakebwa — Sun, 09 Apr 2023 03:26:28 +0000

When talking about Web3 products what will come across your mind in the first place?

The focus often shifts towards prevailing trends such as story-retelling, new technologies, economic models, decentralization, or data attribution. but a key aspect of business, namely revenue, appears to be underlooked. Most applications are created for the sake of commercial purposes. This is no exception in Web3. Nevertheless, there are limited discussions about how to enhance the revenue generation of Web3 applications.

Mobile First

For mobile games, revenue is generated through in-app purchases, in-game ads, and paid downloads. In 2022, in-app purchases accounted for 53.6% of mobile game revenue, and this percentage is expected to continue to rise. The game industry is one of the most maturely commercialized application categories, and is a good example to look at for consistently generating revenue on mobile platforms.

The entire process of acquiring, engaging, retaining, and converting customers has been seamlessly integrated into a single app. While Web2 apps prioritized mobile platforms and in-game marketplaces, developers of crypto game apps have struggled to keep up with the trend.

Despite the increased availability of Web3 apps on mobile platforms, many apps still struggle to provide a seamless experience for users. This is especially true when it comes to the links between the user and the asset marketplace. Then, What are some benefits for creating an in-game marketplace?

1. Mobile game marketplace can help projects to access the appropriate user group
Mobile game apps list crypto assets such as NFTs on third-party platforms like Opensea to serve the application itself. For example, game asset NFTs can be listed on trading platforms to enable users to exchange information through asset trading. This can generate income while enhancing user engagement and encouraging longer adherence to the game.

2. In-game marketplaces can help to increase user conversion and revenue.
From the user's perspective, any app follows a closed loop of customer acquisition, activities, retention, conversion, and there will be a churn rate between any of the two steps. If a Web3 application has a poor user experience, it can lose more than 50% of users in these steps, resulting in high customer acquisition costs.

Web3 apps face a challenge when users are interested in the content and willing to pay for it, but have to leave the app and go to another website to connect their wallet or link an account to make a purchase. This leads to cumbersome and understanding costs for the user, causing disconnect and distrust that can result in a decline in willingness to pay and application revenue.

Bottom Line

Given the high costs and limited control associated with using third-party marketplaces, it is becoming increasingly clear that building a self-owned marketplace is the way to go for blockchain game creators. Fortunately, with the rise of platforms, building and customizing a crypto marketplace has never been easier.

Not only does owning a marketplace allow for greater control over transactions and revenue, but it also provides an opportunity to create a more cohesive user experience that is tailored to the specific needs of the game. As the blockchain gaming industry continues to grow and evolve, investing in a self-built marketplace will become an increasingly important strategy for staying competitive and maximizing profits.

By leveraging the power of platforms like Mirror World, blockchain game creators can take the first step towards achieving greater independence, control, and success in the world of blockchain gaming. Learn more about how to create your own in-game marketplace: https://mirrorworld.fun/blog/all-in-one-web3-game-development

Mirror World' Smart Platform: A Zero-code Blockchain Technology Solution Update

Jonathan Bakebwa — Sat, 11 Feb 2023 09:37:06 +0000

Hi Guys,

An SDK Platform product update from our Team! A Web 3 SDK that is extremely friendly to newbie developers to build their own decentralized apps is now with brand new UI and smoother low coding experience.

Mirror World as a Web 3 Infra company has been working on providing hands-on tools for developers to speed up their decentralized app-building process.

In other words, with a decentralized app project idea in mind, it would take about 30 minutes using our SDK to complete all the essential settings in the decentralized app you want to build.

We mainly focus on these three parts of the decentralized app, with multichain support such as EVM-Compatible chains like Polygon, BNB, Solana and more.

The Three Aspects are:

Authentication and Wallet
NFT Management
Marketplace building Here are some of the updates we made in smoothing the developer experience in creating and monitoring their projects: (Best experience would be achieved by following our dashboard along and checking out the new features along with the article: https://app.mirrorworld.fun/auth/login

It is important to know what you want to build.

Won’t get lost in roaming about in the documents. Starting by choosing which kind of function you want to build and start your developing journey.

Clear Dashboard for Keeping Up With All the Data.

Have a clear project overview

Monitor your project case by case, just in case you want to try out different paths at the same time.

Tack what you have done in the past, your request logs are here for you.

Zero Code Design for NFT Management

Overview of all your collections, with helpful guides to help you through each step

Create your NFT collection in a snap of a finger with no code at all

Zero Code Design for NFT Marketplace

Create your NFT Marketplace by entering basic info

Helpful Guide in Every Step You Take

Check out the “how to prepare” option and download a sample JASON file if you are not sure what to do next.

Explanations for newbie developers to check out while encountering new concepts.

Anything else unsure? Click on the question mark and get in contact with our professional support with more detailed guides.

Try building a decentralized app now in under 30 minutes

Check out our website: mirrorworld.fun

Performing Marketplace Transactions with the Mirror World Smart SDK

Jonathan Bakebwa — Sun, 15 Jan 2023 00:45:21 +0000

An SDK not only helps you create dedicated Marketplaces for your NFTs and NFT collections, but it also equips you with different ways to perform transactions in the marketplace. Here's a quick guide showing a few methods of making transactions:

1. Marketplace Methods

You can create, update, and query marketplaces using the SDK, which provides methods that make setting up your very own marketplace seamless. Go through this comprehensive guide on how to create NFT Marketplaces using the SDK to learn more.

2. NFT Transaction Methods

List NFT: This is used to list an NFT on the marketplace.

// how to list an NFT on a marketplace using the Mirror World JS SDK const listing = await mirrorworld.listNFT({ mintAddress:Hc2My3GQCQTXTjV34Pi1pQGYUeckT1mEcMRiZZaH7Ydr, price: 2, // Amount in SOL })

Update NFT Listing: You may update NFT listing details on the marketplace. e.g the price of the NFT.

// how to update an NFT listing on a marketplace using the Mirror World JS SDK const listing = await mirrorworld.updateNFTListing({ mintAddress:Hc2My3GQCQTXTjV34Pi1pQGYUeckT1mEcMRiZZaH7Ydr, price: 2, // Amount in SOL })

Cancel NFT Listing: You may also cancel an NFT listing.

// how to cancel an NFT listing on a marketplace using the Mirror World JS SDK const listing = await mirrorworld.cancelNFTListing({ mintAddress:Hc2My3GQCQTXTjV34Pi1pQGYUeckT1mEcMRiZZaH7Ydr, price: 2, // Amount in SOL })

Buy NFT: This can be used to purchase an NFT on the Mirror World marketplace.

// how to list buy an NFT on a marketplace using the Mirror World JS SDK const listing = await mirrorworld.buyNFT({ mintAddress:Hc2My3GQCQTXTjV34Pi1pQGYUeckT1mEcMRiZZaH7Ydr, price: 2, // Amount in SOL })

Transfer NFT: If you would like to transfer an NFT from a holder's wallet to another address.

// how to transfer an NFT on a marketplace using the Mirror World JS SDK const listing = await mirrorworld.transferNFT({ mintAddress:Hc2My3GQCQTXTjV34Pi1pQGYUeckT1mEcMRiZZaH7Ydr, recipientAddress:C64RkD2jnvrFF8mi9FUBwfhNHuuiPuRMzCLRSWcyJKUG, })

3. Fetch NFTs

It could also be to display NFTs in a dApp or list them on a marketplace. Whatever the reason, the Mirror World Smart SDK provides a variety of ways in which you can successfully fetch these NFTs and work with them.

There could be a number of reasons why you may want to fetch an NFT or a list of NFTs. From creating a marketplace to listing an NFT on that marketplace, there are a lot of options available to you as a developer to start building your next killer dApp. Learn more about different methods that you can make using an SDK through this guide on performing marketplace transactions: [https://docs.mirrorworld.fun/guides/marketplace-transactions-with-mirrorworld-sdk].

Bring a Game on Blockchain

Jonathan Bakebwa — Sun, 25 Dec 2022 07:35:17 +0000

Today, we are talking about if you were to bring your own game on a chain and make it a Web3 game, what the whole process looks like and what kind of problems developers might encounter.

Many great Web3 gaming startups are struggling to find a decent developer team. They are experienced with game design themselves, but building smart contracts is still a pickle.

Bringing a Web2 game on chain has many benefits. Minting an in-game asset involves creating a unique digital item that can be owned and traded within a game or other online platform. To mint an in-game asset, you will need to follow these technical steps:

1. Choose a blockchain platform: Select a blockchain platform that supports the creation and management of non-fungible tokens (NFTs), which are unique digital assets that can represent in-game items, collectibles, or other types of assets. Some popular blockchain platforms for NFTs include Ethereum, EOS, TRON, and more.

2. Set up a wallet: Create a wallet for the chosen blockchain platform. This step allows you to manage your assets and interact with the blockchain.

3. Design and create the asset: Design and create the in-game asset using digital art software or other tools.

4. Write a smart contract: Write a smart contract using the programming language of the chosen blockchain platform. The smart contract will define the properties and behavior of the in-game asset, such as its name, description, and any other relevant details.

5. Deploy the smart contract: Use the tools and processes provided by the blockchain platform to deploy the smart contract to the blockchain. It will typically involve signing the contract with your private key and submitting it to the blockchain for execution.

6. Mint the asset: Use the smart contract to mint the in-game asset. You could do so by calling a function within the contract that creates a new instance of the asset and assigns it to your wallet.

7. Integrate the asset into the game: Write code to handle the in-game asset within the game and to interact with the blockchain. This may involve implementing APIs or other interfaces to read and write data from the blockchain.

Typically, it would take a month or more for a team of 5 people to complete this process. However, by using SDK, a team can reduce the time for all these steps above to 15 minutes. Learn more about the details regarding in-game asset minting and NFT marketplace from this guide: https://blog.mirrorworld.fun/p/bring-a-game-on-blockchain-in-game

How to Mint Your Own Set of In-Game Assets

Jonathan Bakebwa — Fri, 09 Dec 2022 04:59:45 +0000

Benefits of Minting NFTs in Metaverse Games: https://blog.mirrorworld.fun/p/benefits-of-minting-nfts-metaverse

Minting in-game assets in crypto games is the process of creating unique, limited-edition digital assets that can be bought, sold, and traded on blockchain networks.

This allows players to truly own their in-game items and have full control over them, rather than simply renting them from the game developer.

As a follow-up discussing the benefits of minting NFTs, this blog will quickly walk through an example of how a developer might mint in-game assets in a crypto game:

The developer first needs to choose a blockchain platform to create the tokens on. Ethereum is a popular choice for creating in-game assets because it allows for the creation of unique tokens using its ERC-20 standard.
The developer then needs to design the in-game assets that they want to create. These assets can be anything from digital collectibles, such as non-fungible tokens (NFTs), to in-game currencies or items.
Once the assets have been designed, the developer needs to create a smart contract on the blockchain platform that will manage the minting and distribution of the assets.
The developer then needs to integrate the smart contract into their game, so that players can interact with it and obtain the in-game assets.
Once the game is launched and players start playing, the smart contract will automatically mint new tokens and distribute them to players according to the rules defined in the contract.

The process above could be a pain for a small team, but just as what's mentioned in point 4, an SDK like Mirror World Smart SDK could help a lot with the whole process.

If you were to create an NFT collection in the game, in Mirror World Smart SDK, the whole process would take less than 10 minutes to deploy, which would be significant compared to doing all the steps above all over again.

All you have to do is to enter a couple of different attributes, upload or generate the NFT pictures or any in-game asset you would like to make, and the asset would be on-chain as you wanted.

The SDK would handle the complexities of interacting with the blockchain and managing the smart contract, allowing the developer to focus on the design and gameplay of their game and users to list and sell their items using the in-game wallet.

Such a smooth, coherent in-game purchasing experience would only take 30 minutes overall to deploy, saving tremendous energy for you to focus on your own game development.

What do You Need to Start up Fast on Web3 Runway-From Tech Perspective

Jonathan Bakebwa — Fri, 25 Nov 2022 16:55:52 +0000

This article is NOT talking about tokenomics, marketing, and other insights regarding how you can start up as fast as possible, but strictly the difficulties one might encounter from a technological point of view by offering Mirror World Smart SDK as a solution.

Say I am a person who wants to build a Web3 start-up, and I have a kind of tokenomics(if any) in mind, marketing, and other things taken care of. What should I be worried about?

I guess we have to admit that a good Web3 developer is:

Not easy to find
Oftentimes you would need one that thoroughly understands how it's functioning, since if your smart contract went south, what could happen to your project is way more catastrophic than a simple website crush.

So What should I do?

Some of the General Difficulties When Building Web3 Projects Here

In the senario that if I am not someone with a great Web3 developer

Building Web3 applications natively are relatively cumbersome for developers that are new to Web3.
Furthermore, depending on the nature of the applications, Web3 dApps may need a number of services to function properly. These services could range from smart contracts for the dApps, to RPC providers, to Oracles, as well as APIs to read state from the chain. They services require the developer to learn how they independently work, thus increasing the initial cognitive load for developers who would like to build.
If solved the problems above, I will face challenges brought by using multiple tools, the maintenance cost increases with the number of tools being strung together by the developer.

If tool A updates or deprecates its API/SDK, then the developer should also keep track of tool A's change logs in order to upgrade their dApp to the latest version in order to keep their application accessible to their users, and functioning properly.

If I don't have a huge developer team, they will spend most of their time making sure nothing is going wrong, which will leave the development of the new features behind, the last thing you would want. Since the Web3 industry moves fast, I will probably be left behind.

I guess that software is the solution to the fragmented integration here, with fragmented integration, the developer would need to do this for each dependency they integrate.

However, having a single SDK that aggregates all these individual solutions into a single, well-documented, and maintained interface reduces the number of individual integration that the consumer would have to maintain.

Here, I will take Mirror World Smart SDK as an example.

If I now have a body of a product, for instance, a game ready at hand, and I want to bring it to the blockchain, with the SDK, it is a rather simple process. And as for my case, using Mirror World Smart SDK, we spent about thirty minutes to an hour bringing my game completely on chain.

In a complete set SDK like this, the overall work regarding:

Smart contracts
Interactions with the chain
fetching data and so on are all taken care of for me.

Almost all I need to do is to keep focusing on developing the product itself and working on my brand awareness.

How to Plug in?

OK, so how would I plug my game into the SDK to complete the on-chain process?

SDK stands for Sofware Development Kit, it is a whole set of APIs you I call once your product completes the first plug-in.

The first thing I would personally do is to make sure there are enough outlets left in my product so that I will later have places to plug in the related functions to it.

For example, I am building a Web3 mobile game, so I will create several places where I can later plugin my NFT as a gaming character.

Start Auth Integration

The second thing is plugging in auth. Using SDK like Mirror World Smart SDK would provide Web2 and Web3 login functions all at once, so that I can gain users from both Web2(Google, Facebook, Twitter, Email) and Web3(wallet) scenarios. I am listing some of the APIs in Mirror World Smart SDK if you would like to try out.

Token-Based Login
Transaction Approval Code
Change Email
Social Authentication
Action Authorization
Oauth2

Wallet Integration

The third part of integration is to bring Web3 wallet into full operation in our mobile game.

This part is partially done together with the login integration, but we still need to bring in the transaction, token as well as the on-ramp part of the wallet.

As a start up, I want my users to be able to perform all kinds of transaction-related actions without having to leave the dApp at all.

Not many start ups can have a good amount of traffic from the start, same for us, so we do not want any traffic leaving us in any way. An In-app-wallet in this SDK is helping us do just that.
NFT Collection Creation

This part of the development process goes deeper into the chain reactions like minting, listing and so on. And as someone who doesn't have a huge tech team, SDK would save me a lot of trouble.

Same as before, I really prioritize maintaining the traffic we are getting inside our product. Using Smart NFT Creation, minting and listing NFTs inside my mobile app would become possible, which is super useful for any kind of start ups.

For APIs on that matter, I am listing them here so that you can call them from this dashboard whenever you want for free.

Mint New NFT
Mint New Collection
Mint New NFTs on Collection
Get nft events
Get nft info
Get nft real price

NFT Marketplace Integration

Actually, most parts of the NFT Marketplace are completed in the last step, now we just need a marketplace frontend to keep everything going.

I also needn't worry about this part since there's also a template prepared in the SDK, but there's also an open-source storefront open making a completely different layout possible for any frontend engineer.

Here are some example APIs you can try out:
List NFT on the marketplace
Buy NFT on the marketplace
Update Listing of NFT on the marketplace

Final Note

Speedy development is not the only thing a start up can gain from using an SDK. For me, reliability is also an important part of the whole process. The high maintenance budget and time is what I care about, and a complete SDK would help a lot in that regard. Here's the official website and doc of Mirror World Smart SDK which is free to use for individual developers now, if you would like to check it out.

Official Website: https://mirrorworld.fun/
For our doc: https://docs.mirrorworld.fun/overview/introduction
Also, if you have any feedback to our product or questions of any kind, please let us know here:https://mirrorworld.fun/feedback

Orignally Published on: https://blog.mirrorworld.fun/p/how-to-integrate-blockchain-sdk-to

Mirror World Smart SDK - Authentication, Marketplaces/Storefronts for Web and Mobile Dapps

Jonathan Bakebwa — Fri, 18 Nov 2022 10:15:10 +0000

Today we will be using our newest Web 3 game demo as a showcase of our All-in-one Web 3 dApp SDK covers the whole process of building a dApp. We will explain how we brought our newest game on chain and fully functional within a day using our SDK, and how you can utilize the same tool to maximize productivity in your own dApps that are not limited to gaming alone.

We will have the link to APIs of a specific function ready next to every function we mention, so that you are able to have hands-on experience of building a dApp using Mirror World SDK with minimal frictions.

About Mirrors Jump

Mirrors Jump is a mobile platform-jumping game demo we made to bring developers a closer view of what our Smart SDK can do. We strongly advise developers to download our gaming demo here and check out our features while enjoying the game.

SDK and On-Chain Integration

The overall principle of bringing a game on-chain with our SDK is simple. You build a game, you plug-in our SDK, and all the functions will be there for you to use.

Build a Game First

The first step to bringing a mobile game on chain is to build a traditional game with several outlets prepared to later connect to the SDK. The outlet part varies depending on where you want the Web 3 features to take place. Take Mirrors Jump for example. We want our character, the Mirror NFT who is jumping in the game to be the interoperable asset, even independent from the game per se. That is where we leave the outlet for future connections.

Start Auth Integration

The on-chain integration of our game starts with Auth.
Being a Web 3 mobile game, we want our game to have a broader range of users. Logging in with a method people are familiar with could bring much more potential customers to your game or Dapp. So we integrated both Web 2 login methods such as Discord, Facebook, Twitter, Google and Web 3 method, crypto wallet into Mirrors Jump. We completed this whole process solely using our Smart SDK, calling the APIs below.

Here are some basic APIs we used:
Token-Based Login
Transaction Approval Code
Change Email
Social Authentication
Action Authorization
Oauth2

You can find a more detailed version in our HTTP API.
Since Mirror World Smart SDK is now open to developers for free. For different login APIs, you could just login into our creator dashboard, click the embedded link below and try them out right now. It is super easy to use and it shouldn't take more than a couple minutes to deploy.

Start In-App-Wallet Integration

The second part of integration is to bring Web 3 wallet into full operation in our mobile game. This part is partially done together with the login integration, but we still need to bring in the transaction, token as well as the on-ramp part of the wallet. Once all that is integrated, your customers will be able to perform all kinds of transaction-related actions without having to leave the dApp at all, which really drastically improves the purchasing experience.

Regarding the security considerations, we are still in the process of developing a kind of safe wallet called MPC wallet (multi-party computational wallet), which will be ready in the test environment next week.

For all of the wallet functions, feel free to login to the dashboard and try it out now.

About Our Wallet and Its Safety

This part intends to dive deeper into our wallet's safety configuration. For more information about SDK integration, you could scroll down to the next part.

In this MPC wallet, the private key is not actually stored in any form, because it doesn't exist. Whenever a new wallet is created, the public key is computed (in one direction) by a set of other trusted parties. In our case, we have multiple partners running nodes that participate in the process. We followed the EdDSA algorithm in our implementation of this TSS variant. This type of wallet is called a multi-party computational wallet.

So the user's private key is not actually stored in a database because there is actually no private key to store. However, we can prove that the user's public key has performed an action when multiple parties have signed a given transaction. The final signature generated by the transaction is an ed25519-compliant signature produced by computing the resultant signatures from all parties. So no one entity can perform an action alone on behalf of the user.

NFT Collection Creation

After the login and the transactions, we are now getting at the asset we are actually purchasing here in the dApp. In our case, it is the little jumper character——the Mirror NFT. The problem we are solving here is how to create an NFT collection, mint it so that it could exist as a digital asset independent from the game. We used our SDK to enable our in-app minting as well as creating your own NFT collection.

Below are some basic APIs we used for minting a new NFT collection and getting the NFT metadata.
Mint New NFT
Mint New Collection
Mint New NFTs on Collection
Get nft events
Get nft info
Get nft real price

They are all open to developers for free. You could try them out now by going to our dashboard by clicking here.

In-App NFT Marketplace

With the elements like NFT collection minting as well as metadata ready, we can proceed to take our final step of adding Web 3 elements onto our game——enable listing and purchasing NFT in an NFT Marketplace. Just like the wallet, our NFT marketplace and its operations are all completely inside the dApp as you can see in the Mirrors Jump demo. Users can browse, purchase, use on-ramp service and list their NFTs inside the dApp, which makes the user experience extremely smooth.

Here are some APIs we used for building our NFT Marketplace for Mirrors Jump:
List NFT on the marketplace
Buy NFT on the marketplace
Update Listing of NFT on the marketplace

For the full set of APIs, you can visit our HTTP API here: https://developer.mirrorworld.fun/#intro
Smart SDK also provides a dashboard for basic color and layout modifications, though you could always make more delicate modifications in our opensource storefront.

Final Note

Above are all the steps you need to take to better utilize our SDK. If you do have an existing game ready, it shouldn't take more than 30 minutes for you to complete the whole on-chain process, and this could take couple of months for a small developer team to build from ground up. If you have specific questions regarding the API plug in and so on, you can always contact our professional tech team for help. For more information regarding Mirror World, please visit the link below.

Orignally Published on: https://blog.mirrorworld.fun/p/how-to-integrate-blockchain-sdk-to

Build and Launch Your Web3 dApps with Speed with Mirror World Smart SDK

Jonathan Bakebwa — Fri, 04 Nov 2022 12:03:18 +0000

What is Mirror World Smart SDK?

In one sentence, the Mirror World Smart SDK stack provides seamless blockchain adoption and consumption for Web3 dApps and games. Get Authentication, Wallets, Marketplaces, and Powerful APIs in minutes.

What it does?

Mirror World Smart SDK covers basically everything you need for building a Web 3 project. Unlike many other Web 3 infrastructure services that only provide half of the APIs for a complete project, or their independent API often goes into very specific details such as how to get NFT metadata through one function, we intend to cover the whole development process for a single project.

That means everything from Web 2/Web 3 login methods to NFT Marketplace, wallet integration, and NFT launch are all covered in the SDK with minimal code required. All you need to do is plug in once, and the APIs are all yours. If all you want to build is a marketplace or a login function, you can easily do so by simply calling that API and starting to build.
Aside from these primary features, we do have other auxiliary functions such as a UI dashboard, open storefront, data monitoring tools, and so on, to minimize your development effort. Mirror World Smart SDK also has special adaptions for Mobile dApps such as In-App-Wallet, and if you intend to have your product or game published on IOS App Store, you can by pass the 30% fee charged from AppStore.
There's often a gap between an idea of a great dApp and the action of building it, and we want to reduce the friction of stepping forward.

What's inside Smart SDK?

Smart Marketplace

Accelerate your Web3 development by 10x

The general difficulties of building an NFT Marketplace could range from the front end of the user profile, transaction parsing and signing, and market layout to fetching NFT metadata, data storage as well as smart contracts. Building all these features could take a small team a long amount of time to build on Web 3 especially if they have no prior experience. If we take a look at Mirror World's newest game demo Mirrors Jump, the in-built marketplace you see in the product took about 1 DAY from zero to a marketplace in full operation.
You can visit our game Mirrors Jump here:
https://bit.ly/3hb2vAW

Improve end-user experience

For the mobile end, building marketplaces through Smart SDK also means there will be no more jumping around dApps on Mobile, the Mirrors Jump Marketplace allows users to stay in your dApps for the whole transaction process. Staying in one Dapp the whole time would also mean minimizing customer losses to other NFT Projects.

Opensource storefront

On the front end, we provide you with a solution—a UI dashboard for some simple layout and coloring customization. Mirrors Jump used the existing marketplace template, but if more delicate changes are needed, we also have an open storefront for you to make your product layout the best fit for your project.
On the front end, we provide you with a storefront template solution - a UI interface used to interact with your dApp's marketplace. We also provide a simple data monitoring tool for you to take advantage of that and improve your product through thorough data analysis.

Start Building your Web3 dApps today

For a brief tutorial on how to display user tokens, NFTs, and transactions with Smart SDK, please check out this video made by our tech team. The SDK is now free to use, so feel free to make an NFT Marketplace MVP now!

Smart Wallet

Development Difficulties

During the wallet development, showing the transaction details could be a pickle when you need to construct a front end first and find the best match on-chain data monitoring tool to feed data. As you can see in the Mirrors Jump scenario, the Smart Wallet will provide you with an interface that will save you from front-end development. The security passcode with a reliable third-party KMS will bring extra safety to your dApp. All you have to do is plug-in the SDK and you can pull out the whole function right in your dApp.

Improve customer experience

It is hard to keep the customer experience for purchasing smooth as well, especially in mobile scenarios. Along with Smart Marketplace, Smart Wallet would also help with reducing purchasing friction, limiting all purchasing actions inside your dApp. The easier the purchase brings more purchases.
And as you can see in the demonstration, other auxiliary services like on-ramp are also provided.

Try to make a Wallet MVP now

For the complete Mirror World Smart SDK Doc, please visit here and start to build your first Crypto Wallet. The whole process is free of charge.

Smart Auth

Development Difficulties

Building a Web 3 wallet login requires familiarization with the principles of crypto wallets, transaction objects, and signatures as well as private key security. Smart Auth will resolve all of that, with extra Web 2 log-in methods provided.

Social Authentication

Only one integration will bring five and more Web 2 login methods into action. Logging in with Web 2 methods(Google, Twitter, Discord, Email, Facebook, etc.) will make your product no different from a Web 2 app when it comes to user acquisition. More customers will then able to convert as a user in yout dapps/games.

Adaptable to Various Wallet, Including Your Own

For many Web 3 infra providers, one of the intentions of providing minimal-size APIs is to make various applicable use cases become possible, Mirror World's holistic SDK also has just that, but simpler. You will still be able to use either your self-developed wallet or a third-party wallet to log in and purchase, but with a less complicated developing process. With a general interface and ready-to-hand connectors provided, you can now focus on making your product special and unique.

Example: Log in to Mirror Jump

In the Mirrors Jump demonstration, the normal Web 2 login will seem the same as any Web 2 app, and the Wallet sign-in will not force you to jump out of the dApp. Just plug in the SDK and you can have the functions just like in Mirrors Jump, then feel free to make any changes as you like.

Start BUilding an All-In-One Login Today

For the User Auth tutorial, please visit this video from our tech team. For more information, you can visit our website here as well.

Smart NFT Creation

Development Difficulties

NFT creation is a complicated and repetitive task for developers when you have to thoroughly figure out a smart contract and ensure it is secure before you land it. Since almost nothing can be done once it is applied, extra cost from rigorous auditing is often needed, you can never be more discreet. Mirror World SDK provides different types of smart contracts. Every smart contract is audited to ensure security, eliminate further concerns while simplifying the development process.

In Game NFT Creation

In Mirrors Jump, you can mint your NFT inside the game, friction-less, just like the in-game purchasing. Developers can just fill out configuration info on the Mirror World dashboard, the system will be ready to go.

Try to make an NFT Minting Tool now

For the complete Mirror World Smart SDK Doc, please visit this website and start to build your first NFT Minting Tool here. The whole process is free of charge.

How to get started?

For a quick onboarding to our SDK, you can watch this tutorial video
To try out our SDK for free, please visit our dashboard here:
app.mirrorworld.fun

What's the advantage of Smart SDK?

Save cost, Improve Revenue

Saving developers months of logistic and repetitive development is our primary goal. Also, you will also have access to Web 2's user base and expand yours fast and securely.

All-in-one

Mirror World Smart SDK is All-In-One, the aforementioned features are all integrated into one SDK, no more figuring out what function you need and spending time finding the API of the best fit. The info in the Blog and Video tutorials would suffice.
We believe that developers shouldn't spend time re-inventing the wheels over and over. Almost all use cases in the Smart SDK have the most well-rounded front-end and back-end solutions on the market, all you need is to plug in.

Safe

The last thing you want in a Web 3 project is your Smart contract isn't going in the right direction or bugs susceptive to foreign attacks. Mirror World Smart SDK uses reliable third-party KMS to guarantee the private keys' safety and keep foreign attacks away.

Community and Professional Support

We have detailed Doc and Blog/Video tutorials for you to onboard the Smart SDK and will guide you through building MVPs in each use case. For additional questions and contributions, please join our discord and receive professional support from our tech team.
Use Case: Check Out Mirrors Jump Game Demo
Mirror World Smart SDK has also been powering the Web 3 gaming matrix Mirror Matrix for a long time, with three successful games rolled out from the platform. The most recent game Mirrors Jump is developed entirely using Smart SDK, implementing all of the features. Feel free to experience the game and see what Smart SDK's product looks like in action. You could also collect SDK Test Tokens by playing the game.

Official Website/Doc link

For our tech Doc please visit:
docs.mirrorworld.fun
For the Official Website please visit:
mirrorworld.fun

Question: How to test large pages in Vue/React?

Jonathan Bakebwa — Fri, 13 Mar 2020 09:56:44 +0000

Hello friends! 😄 (Long question approaching... )

I'm looking for some advice on Testing large Vue SFC pages that have lots of smaller already unit tested components.

We have a pretty big enterprise application at work, and it's pretty heavily unit tested. All the smaller atom and a few big components that consist of many parts are all pretty well tested. I feel secure about them.

The problem for me comes it when it comes to page level tests that have a lot of modules and it's very taxing to simply create mocks for each module. Some of these include Vuex store modules, and DOM APIs, WebRTC streaming libraries that we plug into the component instance, etc.

It's honestly a bit worrisome when it comes to unit-testing these pages, because technically they are no longer units, and I'm worried that testing them will require me to mock so many parts of the page and I worry that I may end up testing implementation details especially because some of the internals change a lot depending on the features we add or remove.

So I wanted to know how to go about this. I decided to write end to end tests for these pages, but this doesn't entirely cover everything that I feel should be tested. Is there a way to write these kinds of tests for big SFC pages in Vue?

On my searching journey, I've heard of integration tests, but there's very little written about this topic. Most coverage is about unit tests and E2E tests. I'd some advice and perhaps any suggestions that would guide me towards the right course of action. 🙏🏽

I might also be approaching this the wrong way! So I'm happy to gather some insight on this topic! Thanks!

Leverage `provide/inject` to avoid prop drilling in Vue.js

Jonathan Bakebwa — Wed, 29 Jan 2020 03:58:37 +0000

This post was originally posted on my personal blog. 😀

There is no absolute right way of doing things. In the end we are all just monkeys with keyboards writing software that we hope will work for other monkeys too.

Working with Props
What is provide & inject ?
- provide API
- inject API
Real World Example
When to use provide & inject
Conclusion

Working with props.

Out of the box, Vue.js gives us the ability to pass data from a parent component to it's children using props. This makes it a lot easier to share information from a parent to it's child components.

Props can be both static, and dynamic(and/or reactive). This means that when the value of a prop that is passed from a parent to a child component changes, the prop value in the child updates as well and triggers a re-render for that component.

There are also instances when you need to share some values in a parent component with a (for lack of a better word) grandchild component. To solve this, one could use props to pass them down to the child and then the child component would eventually pass them down to it's grandchild component. However this is not very elegant and results in prop drilling which can be difficult to maintain for large applications.

Vue's `provide` / `inject` API.

In order to help prevent the prop drilling phenomenon, Vue.js also allows us to expose or provide variables in the parent component, that any child component in it's component tree depth can inject into it's context.

Vue uses these two properties combined to allow an ancestor component to serve as a dependency injector for all of it's descendants in the same parent chain. This opens up some really cool possibilities. Now, regardless of how deep the component hierarchy is, any descendant component can inject variables provided by an ancestor component into it's own context.

`provide` API

In order to make an ancestor component provide some variables to it's children, we use the provide property in the said component. The provide option can be an object or a function that returns an object.


// Provider.js

export default {
  name: 'Provider',
  provide() {
    return {
      $colorMode: 'light'
    }
  }
}

`inject` API

In the Child component that we wish to use/consume the variables provided by our Provider component, we can use the inject property. The inject option can either be:

an array of strings, or
an object where the keys are the local binding name and the value is either:


// Child.js

export default {
  name: 'Child',
  inject: ['$colorMode'],
  created () {
    console.log(this.$colorMode) // => "light"
  }
}

Cool! Now we have the $colorMode available in the Child component.

Let's look at a Real World Example to illustrate this.

Themed Component Library with `provide` and `inject`.

A lot of component libraries that have themes that require that the theme object is made available any where in the Vue application. This theme can be used to determine the colors for any given color mode. We'll also need to know the color mode of the application that the users prefer.

In this example, we'll create an tiny component library in Vue that has a light and dark color modes, and we use the current color mode to determine the colors of a descendant button component which exists at a much lower location in the component tree heirarchy.

All code can be found in this codesandbox

1. `ThemeProvider` component.

We start by making a ThemeProvider.vue component to provide two variables that we will need, namely:

$theme - This is the global app theme object with color variables from our design system
$colorMode - This is the current application color mode that the user prefers.

I prefer to prefix provided variables with the $ so as to prevent namespace clashing in consumer components. It's easier for me to distinguish injected variables from local component variables.

This is what the ThemeProvider looks like:

<script lang="js">
export default {
  name: "ThemeProvider",
  props: {
    theme: {
      type: Object,
      default: () => null
    },
    colorMode: {
      type: String,
      default: "light"
    }
  },
  /*
   * Here we provide the theme and colorMode we received
   * from the props
   */
  provide() {
    return {
      $theme: () => this.theme,
      $colorMode: () => this.colorMode
    };
  },
  render() {
    return this.$slots.default[0];
  }
};
</script>

Because this component doesn't render anything in the DOM, we don't need to have a template so we make it a renderless component

2. `Button` consumer component

As the user toggles the color mode between light and dark, we need to inject the changed values in the button so as to reflect the corresponding theme styles accordingly. To do that we create a Button.vue component.


<script lang="js">
export default {
  name: "Button",
  inject: ["$theme", "$colorMode"],
  computed: {
    theme() {
      return this.$theme();
    },
    colorMode() {
      return this.$colorMode();
    }
  }
};
</script>

In our Button.vue component we use a computed variable in order to preserve the reactivity of the variables provided by the ThemeProvider.vue component.

Hooray! With any luck, you should be seeing these changes in your child component as well. For a more fully fleshed out example of how you can use provide/inject, here's a codesandbox example.

When to use `provide` & `inject`

In most applications, you will most probably not need to use the provide/inject features in Vue. A lot of the problems that it solves can be easily solved with proper state management using Vuex, or even props.

provide and inject are primarily provided for advanced plugin / component library use cases. It is NOT recommended to use them in generic application code.
~ Official Vue.js Docs

Thank you for reading!

It's my first time writing on DEV and I'd like to improve my writing as well as my knowledge. I'll be happy to receive your feedback and hopefully answer some questions about provide and inject 🖖🏽

DEV Community: Jonathan Bakebwa

The new era of Gamers: Crypto Gaming

The Benefits of Self-Built Marketplaces for Blockchain Game Creators

Mobile First

Bottom Line

Mirror World' Smart Platform: A Zero-code Blockchain Technology Solution Update

It is important to know what you want to build.

Clear Dashboard for Keeping Up With All the Data.

Zero Code Design for NFT Management

Zero Code Design for NFT Marketplace

Helpful Guide in Every Step You Take

Performing Marketplace Transactions with the Mirror World Smart SDK

1. Marketplace Methods

2. NFT Transaction Methods

3. Fetch NFTs

Bring a Game on Blockchain

How to Mint Your Own Set of In-Game Assets

What do You Need to Start up Fast on Web3 Runway-From Tech Perspective

Some of the General Difficulties When Building Web3 Projects Here

How to Plug in?

Start Auth Integration

Wallet Integration

NFT Marketplace Integration

Final Note

Mirror World Smart SDK - Authentication, Marketplaces/Storefronts for Web and Mobile Dapps

About Mirrors Jump

SDK and On-Chain Integration

Build a Game First

Start Auth Integration

Start In-App-Wallet Integration

About Our Wallet and Its Safety

NFT Collection Creation

In-App NFT Marketplace

Final Note

Build and Launch Your Web3 dApps with Speed with Mirror World Smart SDK

What is Mirror World Smart SDK?

What it does?

What's inside Smart SDK?

Smart Marketplace

Accelerate your Web3 development by 10x

Improve end-user experience

Opensource storefront

Start Building your Web3 dApps today

Smart Wallet

Development Difficulties

Improve customer experience

Try to make a Wallet MVP now

Smart Auth

Development Difficulties

Social Authentication

Adaptable to Various Wallet, Including Your Own

Example: Log in to Mirror Jump

Start BUilding an All-In-One Login Today

Smart NFT Creation

Development Difficulties

In Game NFT Creation

Try to make an NFT Minting Tool now

How to get started?

What's the advantage of Smart SDK?

Save cost, Improve Revenue

All-in-one

Safe

Community and Professional Support

Other questions

Who is Mirror World?

Why Mobile?

Official Website/Doc link

Question: How to test large pages in Vue/React?

Leverage `provide/inject` to avoid prop drilling in Vue.js

Table of Contents

Working with props.

Vue's provide / inject API.

provide API

inject API

Themed Component Library with provide and inject.

1. ThemeProvider component.

2. Button consumer component

When to use provide & inject

Vue's `provide` / `inject` API.

`provide` API

`inject` API

Themed Component Library with `provide` and `inject`.

1. `ThemeProvider` component.

2. `Button` consumer component

When to use `provide` & `inject`