Introduction

Web3 app implementations sometimes present their own dilemma: whether to interact directly with smart contracts or use API wrappers. In this talk, we’ll cover both approaches, using a real-world example to illustrate their implications for developers and end-users alike.

Hybrid Decentralisation vs Centralisation 

The idea of hybrid decentralisation is the ability to mirror the user experience of regular centralised apps, but implemented using decentralised technologies. Let’s explore an example to implement off-ramp logic.

Smart contact Integration

Wallet infra (Privy): Using privy ensures that contract interactions on the front-end are gasless through it’s paymaster, and users don’t have to manually approve token spend from their wallet or sign transactions. It just happens in the background, similar to the way transactions happen on a centralised exchange.

 const createOrder = async () => {

    try {
        // Smart wallet

        if (!client) {

          throw new Error("Smart wallet not found");

        }




        await client.switchChain({

          id: selectedNetwork.chain.id,

        });




        const params = await prepareCreateOrderParams();

        setCreatedAt(new Date().toISOString());




        await client.sendTransaction({

          calls: [

            // Approve gateway contract to spend token

            {

              to: tokenAddress,

              data: encodeFunctionData({

                abi: erc20Abi,

                functionName: "approve",

                args: [

                  getGatewayContractAddress(

                    selectedNetwork.chain.name,

                  ) as 0x${string},

                  parseUnits(amountSent.toString(), tokenDecimals ?? 18),

                ],

              }),

            },

            // Create order

            {

              to: getGatewayContractAddress(

                selectedNetwork.chain.name,

              ) as 0x${string},

              data: encodeFunctionData({

                abi: gatewayAbi,

                functionName: "createOrder",

                args: [

                  params.token,

                  params.amount,

                  params.rate,

                  params.senderFeeRecipient,

                  params.senderFee,

                  params.refundAddress ?? "",

                  params.messageHash,

                ],

              }),

            },

          ],

        });

      




      await getOrderId();




      toast.success("Order created successfully");




      refreshBalance();




      trackEvent("Swap started", {

        "Entry point": "Transaction preview",

        "Wallet type": "Smart wallet",

      });

    } catch (e) {

      const error = e as BaseError;

      setErrorMessage(error.shortMessage || error.message);

      setIsConfirming(false);

      trackEvent("Swap Failed", {

        Amount: amountSent,

        "Send token": token,

        "Receive currency": currency,

        "Recipient bank": getInstitutionNameByCode(

          institution,

          supportedInstitutions,

        ),

        "Wallet balance": balance,

        "Swap date": createdAt,

        "Reason for failure": error.shortMessage || error.message,

        "Transaction duration": calculateDuration(

          createdAt,

          new Date().toISOString(),

        ),

      });

    }

  };

Code source:  https://github.com/paycrest/noblocks/blob/main/app/pages/TransactionPreview.tsx

API

APIs serve as a connecting layer that simplifies interactions between applications and underlying systems. In the context of web3, APIs enable developers to interact with smart contracts while abstracting the complexity of protocols. This abstraction layer enhances usability, reduces development time, and ensures a more seamless integration of functionalities into applications.

// First, fetch the current rate

const rate = await fetchRate("USDT", 100, "NGN", "base");




// Then create the payment order with the fetched rate

const orderData = {

  amount: 100,

  token: 'USDT',

  network: 'base',

  rate: rate, // Use the fetched rate

  recipient: {

    institution: 'GTB',

    accountIdentifier: '1234567890',

    accountName: 'John Doe',

    currency: 'NGN',

    memo: 'Salary payment for January 2024' // Optional: Purpose/narration for the payment

  },

  reference: 'payment-123',

  returnAddress: '0x1234567890123456789012345678901234567890'

};




const response = await fetch("https://api.paycrest.io/v1/sender/orders", {

  method: "POST",

  headers: {

    "API-Key": "YOUR_API_KEY",

    "Content-Type": "application/json"

  },

  body: JSON.stringify(orderData)

});




const order = await response.json();

console.log('Order created:', order);




// The response includes important information

const {

  id,              // Order ID for tracking

  receiveAddress,  // Address to send tokens to

  validUntil,      // Expiration time

  senderFee,       // Fee amount

  transactionFee   // Network transaction fee

} = order;

Code source: https://docs.paycrest.io/implementation-guides/sender-api-integration

Community

A builders' community  with the goal is to make crypto usable for everyone.

Over the last few years, successful applications in web3 have primarily focused on DeFi protocols, largely due to heavy incentivization and hyper-financialization. This had a ripple effect in terms of wealth transfer, scams, and smart contract hacks (check out: https://www.web3isgoinggreat.com/). 

This led to people calling it the “wild wild west”.  

Out of this entire defi protocol chaos, we found winners. These winners include protocols we are all conversant with today, like:  

1. Aave

2. Compound

3. Uniswap

4. Cowswap

5. Curve Finance

6. Morpho

7. 1inch

8. Balancer

9. Euler

10. Tether

11. Circle

Technical Scope 

What does this mean technically?

For engineers and founders, this means the winners have sort of emerged. There are always exceptions to the rule, but the meta has now moved from smart contract protocols to the application stack. Meaning there’s no point battling against time-tested protocols that have gained the trust of defi users, and it’s time to compete on the application stack.

This means we need to develop app use cases on top of existing protocols and create an experience similar to regular fintech apps. This means we have to use the existing UX tooling that makes this possible.

For instance, users should be able to log in using privy, dynamic, thirdweb, or any other wallet infra tooling that helps users authenticate and authorize transactions. These infras allow the users to log in with Google, provide them a wallet with social recovery, keep all interaction gasless, while the users might not even know they’re on-chain.

For defi protocols, we have to abstract and combine the functionality of existing protocols to create features that are usable to regular users. A good way to think about app use-cases this from first principles and accessibility.

What does this mean? This means you have to take the protocols that you need and water it down to build apps that solve basic financial alternatives to what currently exists. This means you should think about features from the POV of outcomes rather than technology.

So, when you think about lending, for example, don’t just ask your users to bring whatever crypto asset collateral and give them stablecoins or fiat. Think about it from the POV of how lending is done currently for SMEs and individuals, and how I can adopt that into the app use-case. This includes using tooling like ramps, off-chain verification, disbursement, and funds collection through open banking.

This same thing applies to things like yield-bearing protocols. Can you create features like flash loans that allow regular people to fulfil individual on/off ramp transactions, after which, their funds are returned with a little profit. After an entire year, all that profit comes together to form the APY.

So, we have to build a hybrid system that’s better and can be replicated across regions because crypto is global by default.

Distribution Scope

One thing about apps is that your users are what make it relevant. This is where distribution comes into play. The hack is creating interoperability between regular fintechs and defi protocols through APIs, NPM packages, etc. Besides building the app and serving customers directly, we have to enable web2-inclined integration points. Plus, the API product categories must be similar.

Use cases

• Dialect Blinks

• Blockradar and stablecoins

• Maplerad

Now, with the advancement of UX tooling in crypto, including smart accounts and identity infrastructure (ENS), as well as DX tooling like simulation engines and virtual testnets, the EVM is poised to accommodate apps that can solve real-life problems. 

Public goods organisations like Gitcoin and Giveth have funded hundreds if not thousands of open-source and regenerative projects. The EVM space has experimented with multiple allocation methodologies, retrofunding, quadratic funding, and streamable tokens and this is just the beginning. There’s so much more value to capture. From DAOs to on-chain organizations, from finance to coordination, verification, privacy, etc. 

Stablecoins has shown us a taste of what crypto and PMF can feel like when we solve the day-to-day problems of regular people living around the world with varying levels of opportunities and access. 

With the right guidance and thought process, builders can build everyday products that users can use without struggle, and not reinforce CT echo chambers. This is an attempt to provide builders with the right thought framework to come up with great app ideas and distribute applications to actual users. 

To start with, we'll be highlighting projects that are more inclined to onboard not just web3 natives, but the masses and new developers with better UX/DX. Think folks like Polymarket, Privy, Glider, etc. 

This is not just another attempt to market Ethereum. It's us creating a melting pot for apps, protocols, and UX/DX tooling providers to build the right products for global users. This is home for EVM builders.

Come home: https://x.com/builtonEVM