DEV Community: rike

A Beginner's Guide to Smart Contracts: Exploring the Simple Storage Contract on Ethereum in 2023

rike — Sat, 18 Mar 2023 17:52:19 +0000

Dive into the world of Solidity and smart contracts with this beginner-friendly tutorial.

Ethereum has taken the world by storm, revolutionizing the way we interact with decentralized applications and giving birth to the concept of smart contracts. You might be eager to dive into the world of smart contract development, but contracts can be wildly complex. Taking a step back, I want to focus on dialing simple smart contracts to get familiar with syntax. This article will guide you to writing a simple storage contract that demonstrates how to store and retrieve data on the Ethereum blockchain.

note: this smart contract does nothing of value lol

Introducing the Simple Storage Contract

A Simple Storage contract is a basic Solidity contract that showcases the fundamentals of smart contracts by storing a value on the Ethereum blockchain and allowing users to retrieve it. This tutorial is perfect for those who are new to Ethereum development or looking to solidify their understanding of smart contracts.

Building the Simple Storage Contract

Let's start by breaking down the Simple Storage contract code:

pragma solidity ^0.8.0;

contract SimpleStorage {
    uint256 private storedData;

    function set(uint256 value) public {
        storedData = value;
    }

    function get() public view returns (uint256) {
        return storedData;
    }
}

Here, we've defined a contract named SimpleStorage with a state variable storedData to hold a uint256 value. The contract has two functions, set and get, which allow users to store and retrieve the value, respectively.

Deploying and Interacting with the Simple Storage Contract

To deploy and interact with the Simple Storage contract, I recommend using the Remix IDE, an online development environment for Ethereum smart contracts, but in the future I'll introduce you to deploying and testing locally!

Visit Remix IDE.
Create a new file named "SimpleStorage.sol" and paste the contract code.
Compile the contract by navigating to the "Solidity Compiler" tab in the left panel and clicking "Compile SimpleStorage.sol."
Switch to the "Deploy & Run Transactions" tab.
Select the "Injected Web3" environment to connect Remix to your MetaMask wallet.
Click "Deploy" to deploy the contract, and confirm the transaction in MetaMask.
Once deployed, the contract will appear under "Deployed Contracts," and you can interact with the set and get functions.

Next Steps in Your Web3 Journey

Congratulations on creating, deploying, and interacting with a simple storage contract on the Ethereum blockchain! This foundational knowledge will serve as a stepping stone for more complex smart contract development and interactions.

As you continue your journey as a Web3 developer, explore more advanced contract functionality and experiment with different use cases. With a vast world of decentralized applications waiting to be built, the possibilities are endless. Keep learning, experimenting, and growing your skills, and soon you'll be creating your own innovative smart contracts and decentralized applications. Good luck, and happy coding!

Building a Full-Stack App With t3 [2023]

rike — Mon, 09 Jan 2023 01:32:40 +0000

Hi everyone! Recently I was recommended to look into full-stack t3 to bootstrap my next project. I've already been exposed to most of these tech individually but I figured it'd be good practice to stay fresh with what's trending.

I decided to dive in and create a sample project by following some tutorials on dev.to only to notice that some tutorials created within the past year are already outdated.

So let's get start the new year right and create a full-stack blog where this article can live.

Getting Started

The t3 docs provide us npm, yarn, and pnpm installations, it doesn't matter which one you use but I'll be using yarn create t3-app

titled: blog
TypeScript
nextAuth, prisma, tailwind, trpc

We're given the next steps:

cd blog
yarn prisma db push
yarn dev

but wait! I plan on creating this project using postgresql, so I will be changing some settings first.

change the provider to postgresql
uncomment db.Text where listed (3 sections for next Auth)

// prisma/schema.prisma

datasource db {
    provider = "postgresql"
    // NOTE: When using postgresql, mysql or sqlserver, uncomment the @db.Text annotations in model Account below
    // Further reading:
    // https://next-auth.js.org/adapters/prisma#create-the-prisma-schema
    // https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#string
    url      = env("DATABASE_URL")
}

model Example {
    id        String   @id @default(cuid())
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt
}

// Necessary for Next auth
model Account {
    id                String  @id @default(cuid())
    userId            String
    type              String
    provider          String
    providerAccountId String
    refresh_token     String? @db.Text
    access_token      String? @db.Text
    expires_at        Int?
    token_type        String?
    scope             String?
    id_token          String? @db.Text
    session_state     String?
    user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)

    @@unique([provider, providerAccountId])
}

Next we want to determine whether we want to work on a local database or create one on something like Railway.

For the sake of developing locally - I'll be creating a local db until it's time for deployment (Railway creation will be included at the bottom).

The final step before we run yarn prisma db push is to change our .env DATABASE_URL= to our local postgres database.
DATABASE_URL=postgres://[USER]:[PASSWORD]@localhost:5432/blog
(I created a database titled blog)

Now we can finally run yarn prisma db push

Okay, that seemed like a lot, but there's a few more things we need to set up before we're able to get to the good stuff!

I'm not sure when Discord became the standard for auth - but it seems like the default for NextAuth - and we'll be sticking to it for this tutorial.

Navigate to Discord Developer Portal and create a new application.

Navigate to the newly created application and click OAuth2 on the left tab

copy the Client Id and Client Secret (click on reset secret to show the secret key) into our .env

Set the redirect link as so - this is to let Discord know where the login requests are coming from

Lastly, we'll need to set NEXT_AUTH_SECRET to a random string (I just followed the openssl command provided in the .env file).

Alright, we're good to start coding now! 😅

Database Setup

One of the tech I really wanted to get experience with was Prisma, so I wanted to approach this in the most thorough way possible.

First thing I did was remove the example entry and include a Post entry for a blog

For a blog post - the only thing I'll really need are the body and title, but we'll need to create a one-to-many relation where a user can have many posts

We'll run npx prisma migrate dev --name removeExampleAddPostField in order to create the migration file and apply it to our database.

Frontend

The goal is to get a full-stack application working, not make it look beatiful, so I'm just going to focus on getting the app up and running.

Let's get the application started by running yarn dev

I deleted the excess from /index.tsx and added some login tools

import { type NextPage } from "next";

import { signIn, signOut, useSession } from "next-auth/react";

const Home: NextPage = () => {
  const { data: session } = useSession();
  return (
    <main>
      <div className="flex justify-center pt-10">
        <div className="text-xl">Rikes Blog Powered by t3</div>
      </div>
      <div className="flex justify-end pr-10">
        {session?.user ? (
          <button onClick={() => signOut()}>
            Log Out of {session.user.name}
          </button>
        ) : (
          <button onClick={() => signIn()}>Login with Discord</button>
        )}
      </div>
    </main>
  );
};

export default Home;

Now navigate to http://localhost:3000/ and check out our amazing website - go ahead and give it a shot and you should be able to login 😏

If you want to see what the backend is doing - navigate to your terminal (make sure you're in your project directory) and in a new window enter npx prisma studio. Click on user and you should be able to see your newly created account!

Routes

Now that our frontend is working and we're able to login, let's start working with some route creation. For some basic CRUD operations, we need to be able to get all posts and create posts, so two major routes.

Create a new file called 'Post.ts' under the routers folder /server/api/routers/Post.ts
Create an initial getAll function

import { createTRPCRouter, publicProcedure } from "../trpc";

export const postRouter = createTRPCRouter({
  getAll: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.post.findMany();
  }),
});

Create a newPost function

import { z } from "zod";
import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";

export const postRouter = createTRPCRouter({
  getAll: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.post.findMany();
  }),

  newPost: protectedProcedure
    .input(
      z.object({
        user: z.string(),
        title: z.string(),
        body: z.string(),
      })
    )
    .mutation(async ({ ctx, input }) => {
      try {
        await ctx.prisma.post.create({
          data: {
            userId: input.user,
            title: input.title,
            body: input.body,
          },
        });
      } catch (error) {
        console.log(error);
      }
    }),
});

Note: we use zod as a validator so our data is clean :)

Navigate to root.ts server/api/root.ts

import { createTRPCRouter } from "./trpc";
import { postRouter } from "./routers/Post";

/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here
 */
export const appRouter = createTRPCRouter({
  post: postRouter,
});

// export type definition of API
export type AppRouter = typeof appRouter;

And voila, we've created functions to get all posts and create new posts! Time to plug them in.

Let's create some React components so that we're able to store and create new posts. Here's the simple way I did it to handle a text area, title input and submit

import { type NextPage } from "next";
import { signIn, signOut, useSession } from "next-auth/react";
import { useState } from "react";
import { api } from "../utils/api";

const Home: NextPage = () => {
  const { data: session } = useSession();
  return (
    <main>
      <div className="flex justify-center pt-10">
        <div className="text-xl">Rikes Blog Powered by t3</div>
      </div>
      <div className="flex justify-end pr-10">
        {session?.user ? (
          <button onClick={() => signOut()}>
            Log Out of {session.user.name}
          </button>
        ) : (
          <button onClick={() => signIn()}>Login with Discord</button>
        )}
      </div>
      <Blog />
      {session?.user ? (
        <Entry user={session.user} />
      ) : (
        <div>Please Login to make a new entry</div>
      )}
    </main>
  );
};

const Blog: NextPage = () => {
  const { data: blogPosts } = api.post.getAll.useQuery();
  return (
    <div className="p-20">
      {blogPosts?.map((post, indx) => (
        <div className="rounded-lg border p-10" key={indx}>
          <div className="flex justify-center pb-10 font-bold">
            {post.title}
          </div>
          <div>{post.body}</div>
        </div>
      ))}
    </div>
  );
};

const Entry: NextPage<{ user: any }> = ({ user }) => {
  // const session = useSession()
  const [post, setPost] = useState("");
  const [title, setTitle] = useState("");
  const newPost = api.post.newPost.useMutation();

  return (
    <div>
      <form
        className="flex gap-2"
        onSubmit={(event) => {
          event.preventDefault();
          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
          newPost.mutate({ user: user.id, body: post, title: "yo" });
          setTitle("");
          setPost("");
        }}
      >
        <input
          type={"text"}
          value={title}
          placeholder="title.."
          onChange={(e) => setTitle(e.target.value)}
          className="rounded-md border-2 border-zinc-800 bg-neutral-900 px-4 py-2 focus:outline-none"
        />
        <textarea
          value={post}
          placeholder="Blog Here..."
          onChange={(event) => setPost(event.target.value)}
          className="w-full rounded-md border-2 border-zinc-800 bg-neutral-900 px-4 py-2 focus:outline-none"
        />
        <button
          type="submit"
          className="rounded-md border-2 border-zinc-800 p-2 focus:outline-none"
        >
          Submit
        </button>
      </form>
    </div>
  );
};

export default Home;

You should have something like this and you're good to go!

That's pretty much it - thank you to the legend @nexxeln for his initial tutorial as this was just modified for the most updated version of trpc/t3.

I wanted to include how to connect to railway but you can check out @nexxeln tutorial to plug in quicker.

Leave any questions you may have below and I'll get around to them!

Picking a New Language

rike — Wed, 28 Sep 2022 05:00:03 +0000

It's surreal that I've been working as a software developer for more than a year and that I've been working towards this goal for three. In that time span, I've gone through the typical semi-self taught cycle: basic Python tutorials, to tutorial hell, and ultimately (and regretfully) a bootcamp. The past two years have been strictly JavaScript/TypeScript (mixed in with light Solidity here and there) and I've finally reached the point where I'm comfortable with my skillsets and that I want more. So that leads me here, picking a new language to learn and ideally get really really good at.

1. Go (golang?)

Go
Everyone knows what Go is right? That's why until today I never really bothered looking into what the language is really capable of. Yes, I'm embarrassed, but I'm going to go ahead and blame my bootcamp for not putting me on. I was pretty much told that I could achieve everything with JS code but maybe they could've mentioned that things could be done with better efficiency through other means. But upon my 3 minute research, it seems like there are perks in using the language to create API's and I'm assuming servers... And to be fair, I've always enjoyed doing backend work. Idk, something about getting the connection through is like a shot of dopamine.

2. Rust

Rust
(I honestly expected the Rust site to be futuristic looking but it's so meh)
Okay, this one is kind of cheating since I've actually done deep dives into Rust previously. The biggest issue was that I was thrown into an established Rust repository and could never figure it out from there - so I bailed. But lo and behold, there's uses to Rust outside of blockchain (sarcasm, I promise). But to be fair, if I do go back to Rust, it's going to be for blockchain development - maybe sprinkle in some compiler code for funsies.

3. C++

C++
(I'm sure they don't need care, but you could really tell the age of this language through the site design)
The only reason I'm considering this is because of how much video games I play. Well actually it's not like an unhealthy amount, but it definitely holds a share of my time. It's also such an old language that learning it could probably benefit my overall understanding of languages in general? I'm not sure. But do I really want to work for Riot?

4. CSS

(Is there even an official CSS website?)
Yes, this is a joke. Partially. I couldn't think of a fourth language so why not continue improving my skills in the areas I'm already working in. There's always room to try and become the next coming of Kevin Powell. And I hate it when I'm working right now and spamming a bunch of random things into my classes and praying that one of them works out.

These are just my thoughts out loud. I promise I'll document whatever path I decide to go down and if I don't I'll pay you in my social token.

Solana Development Personal Roadmap

rike — Wed, 23 Mar 2022 15:37:43 +0000

Introduction

Initially, I wanted to continue working on deploying an NFT project on an Ethereum Virtual Machine, but I was just informed that I would need to focus on building out smart contracts for the Solana Network for work. It's a given that I won't be able to provide a production-ready smart contract by next week or by this month, but I need to be able to be comfortable in that environment.

One of the most daunting parts about learning Rust for Solana or any other Alternative Layer-1's is the lack of resources. The team at Solana has done a great job developing their environments, but it's not too welcoming just yet. I'm sure we're not far from having more resources, but the information is relatively scarce.

Challenges

There are a few challenges that a newbie like myself faces when trying to develop on Solana.

From a JavaScript background - learning TypeScript was the best preparation I did before learning Solidity, and it's looking like it'll pay dividends for Rust as well, but as a backstory, I never learned a language like C/C++, Go, Ruby, etc. I felt like learning Solidity wasn't too difficult since the language is relatively young, but learning Rust might be a different experience since it's not a language developed solely for Blockchain development.
Packages - This goes back to the lack of resources, but with developing on Ethereum, you have packages like Truffle and Hardhat that make the development experience enjoyable. With Anchor CLI being so young, the onboarding experience has been difficult to grasp. This isn't meant to shade the team at Anchor whatsoever, this goes back to understanding how Solana programs operate in comparison to Ethereum Smart Contracts.
Leaders - When picking up Solidity and Ethereum, there were clear influencers in the space that you could always look up if you wanted to learn something. With Solana being relatively young, it's not exactly easy finding information when you hit a roadblock.
Educational Materials - A large contribution to my understanding of Solidity was crafted behind resources like CryptoZombies, Ethernaut, and Scaffold-Eth, etc. I've yet to find anything anywhere near those for Solana development.

The next step(s)?

So now that I've laid out all the challenges that I face, we can build out the steps to take to overcome them.

Learn Rust
- Rust has some great resources to learn the languages, which is what I need to approach first. I plan on learning through The Rust Programming Language Book.
Learn Solana
- Coming from an EVM background, I need to understand how Solana works under the hood and the core differences between them and Ethereum.
- I plan on looking through their official docs and playing with their RPC API's.
Learn Anchor
- Being a major tool in Solana app development, I need to understand how to use Anchor and start developing small programs and deploying them to the devnet.

That's it for now! I'll keep you updated during this journey!

Building An NFT Project: Part 1 - Getting Started With Hardhat

rike — Sun, 13 Mar 2022 00:56:55 +0000

NOTE: we are not coding a smart contract just yet. We are getting familiar with the capabilities of Hardhat so I don’t overwhelm you when we began our full-stack dapp.

If you’re looking to get started with building out Solidity Smart Contracts, I’m sure you’ve dealt with the countless environments that you can go through. From Hardhat to Truffle, to Brownie (although this is a python environment) it’s hard to find the “right” one - and rightfully so, there’s no clear cut winner - but I firmly believe that Hardhat is the most beginner-friendly one out there so we’ll be starting with that.

Setting Up

Prerequisites: make sure you have NodeJS installed.

Let’s get our environment set-up. Make a folder - this is going to be the sandbox that we’re working in - and cd into this folder (I’m assuming you’re using terminal).

mkdir hardhat-sandbox
cd hardhat-sandbox

Initialize a package.json file and we’re going to install hardhat as a dev dependency. (for our testing purposes, it doesn’t matter if we save it as a dev dependency or global, but it will matter later on when we’re actually publishing our work).

npm install --save-dev hardhat

Now we have hardhat downloaded! Our basic setup is almost complete.

npx hardhat

`
888 888 888 888 888
888 888 888 888 888
888 888 888 888 888
8888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888
888 888 "88b 888P" d88" 888 888 "88b "88b 888
888 888 .d888888 888 888 888 888 888 .d888888 888
888 888 888 888 888 Y88b 888 888 888 888 888 Y88b.
888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888

Welcome to Hardhat v2.9.1

? What do you want to do? …
▸ Create a basic sample project
Create an advanced sample project
Create an advanced sample project that uses TypeScript
Create an empty hardhat.config.js
Quit
`

We’ll be prompted with a few questions now:
Create a basic sample project
Leave the file path as is
Do you want to add a .gitignore? Yes.
Yes

Do you want to install this sample project's dependencies with npm (hardhat @nomiclabs/hardhat-waffle Ethereum-waffle chai @nomiclabs/hardhat-ethers ethers)? Yes - these dependencies all play a role and we’ll go over their uses as we get familiar with our environment.

Your file structure should look like this:

├── README.md ├── contracts ├── hardhat.config.js ├── node_modules ├── package-lock.json ├── package.json ├── scripts └── test

Congratulations! Our sandbox is officially set up and now we can really start messing around with what we can really do.

Understanding the file structure

Depending on your developer level, the files in here can be a bit overwhelming (If you’ve been a dev on a team then this might seem relatively standard). The four main components that we need to understand are contracts, scripts, test and hardhat.config.js.

Understanding the Configuration File

If you’re anything like me, config files somehow always give you issues. Not to fear! I’m going to do my best to introduce it in it’s most digestible way. We’re not going to mess and edit our config just yet - we just want to see what we get from Hardhat.

`task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
const accounts = await hre.ethers.getSigners();

for (const account of accounts) {
console.log(account.address);
}
});
`
What are tasks you might be asking. Because I was asking the same question. In our terminal - if we type npx hardhat we’ll see a section representing global sections and tasks available. So in simplest terms. tasks are going to be these global functions that we can call from our terminal to check various things. The one provided to us provides a list of accounts that our local network will spin up (don’t worry if this doesn’t make sense yet).

And remember when we spun up our initialization of hardhat? We installed a few dependencies that we didn’t really know. Well here we see our first example of it being use require("@nomiclabs/hardhat-waffle");. Without getting into the nitty gritty, this is giving us access to the getSigners() function. (hre.ethers is already injected to this file).

Contracts

This is where all our smart contract files will stay. We’re defaulted with a basic Greeter.sol contract but this folder can hold as many smart contracts as your dapp would need.

Scripts

Okay no need to be overwhelmed when we’re looking at the sample-script.js file inside the scripts folder! So the main thing to understand is that this is going to be our script that deploys our smart contract. That may seem confusing for now, but once we look at our sample-script, it’ll began to make more sense.

`async function main() {
const Greeter = await hre.ethers.getContractFactory("Greeter");
const greeter = await Greeter.deploy("Hello, Hardhat!");

await greeter.deployed();
console.log("Greeter deployed to:", greeter.address);
}
`
I removed their comments so that we can observe a little more clearly:

Calling getContractFactory(“Greeter”), let’s our script understand where to look for the compiled smart contract code.

We call a built in function deploy to…deploy our contract(passing in “Hello, Hardhat” as the argument).

await greeter.deployed() gives use the time needed to deploy the contract - this is a concept I’m sure you may be familiar with, but working on the Ethereum mainnet, transactions take some time to process. So we need to wait until they’re done.

greeter.address will be some sort of 32 digit address indicating where we can find the smart contract.

Testing, testing, testing

The best part, testing! Before we dive in, let’s run: npx hardhat test and see what happens.

It’s like any other testing framework! So the magic happens through hardhats ability to understand where to find our test files and run them. The concept of what happens is nearly identical with our scripts file so I don’t think I need to go into much more detail on what the sample-test.js file is doing, but I do want to specify what happens when we call npx hardhat test.

Hardhat will spin up a private local blockchain on your machine - deploy the contract - run whatever tests we give it - and then shut off the local blockchain. Neat huh?!

Conclusion

I hope I was able to give you an introduction to Hardhat in an easy and digestible way. I am going to go more into depth on how we are able to use Hardhat for our own development later, but don’t be shy and start messing around with it. If you have any questions, you can always find my on Twitter @yeeckin.

Relearning Data Structures and Algorithms

rike — Sun, 06 Mar 2022 06:40:31 +0000

As a product of a bootcamp, my lectures on data structures and algorithms spanned two days - one day for lectures, one day for practice problems. A huge issue was that this was the first lesson that we had but instead of building on these fundamentals, we navigated towards web development which to be honest uses hardly any data structure (on the front-end). It wasn't till towards the end of the program where it dawned on all of us that we need to actually understand data structures a little bit more, not just for interview preparation but for building a strong foundation.

It's really easy to complain about how tech interviews aren't really applicable to say a React developers day-to-day, but I'm a believer that having a strong basis in understanding how data flows can help you write more inefficient code. Or it'll at least help you think in a specific way.

Now that we've addressed my issue of not having a strong foundation in computer science, it's become my priority to improve this, now I'm come to an intersection on how I need to approach this.

Here are my options:

Read through Cracking the Coding Interview from front to back.
Pay for AlgoExpert and take their crash course
Sign up for a free tutorial on Coursera/Udemy and take that. (I've heard great things about Colt Steeles course)
Idk...

I'll continue to update this list as I approach this, but for the time being, I'll take these approaches one step at a time and document my thoughts. If you have any resources to share, be sure to let me know and I'll give my thoughts on those too!