Forem: Amy's Vue on this

Creating a New Nuxt 3 Application with Pinia and TailwindCSS

Amy's Vue on this — Sat, 24 Dec 2022 00:25:19 +0000

First of all: I'm not saying that it's been too long since I last posted on here, but I am saying that I had to google options for developer blogs to remember which site I was using -.-'

Creating a Nuxt3 application

I had a really rough time because I didn't have nvm installed before. I vaguely remembered it being fairly difficult on my Mac M1 laptop, but I powered through 🥳

But I am using v18.12.1.

They changed the startup script that we are supposed to use. It's located in the documentation

npx nuxi init <project-name>

Then I started following this blog with its instructions.

I DO NOT USUALLY ALLOW YARN ANYWHERE NEAR MY PERSONAL PROJECTS. IT IS REALLY UNNECESSARY.

However, there is a bug and you cannot currently install Pinia without forever errors without using it so just this time

yarn add pinia
yarn add @pinia/nuxt

then go to the nuxt.config.ts file

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
})

and then finally, we'll import this into a page/component:

// stores/images.js

import { defineStore } from 'pinia'

export const useImagesStore = defineStore({
  id: 'image-store',
  state: () => {
    return {
      images: [
        {src: 'https://upload.wikimedia.org/wikipedia/commons/b/bc/Juvenile_Ragdoll.jpg'}, 
        {src: 'https://cdn.hpm.io/wp-content/uploads/2018/04/26174519/Roger-H-Goun.jpg'}
      ],
    }
  },
  actions: {},
  getters: {
    ImageList: state => state.images,
  },
})

NOW ONTO TAILWIND!

There is now going to be forever problems due to using yarn that one time to install Pinia. For the most part followed the github instructions

npm install --save-dev --legacy-peer-deps @nuxtjs/tailwindcss

Then add the following to the modules section in the nuxt.config.js

{
  modules: [
    '@nuxtjs/tailwindcss'
  ]
}

The basic Nuxt application is now setup!

Day 1 of getting back into Solidity Course

Amy's Vue on this — Thu, 18 Aug 2022 19:26:30 +0000

Timeline until: 02:12:12

The worst part about starting over is actually having to admit and confess that you have to start over. However, this is like the 100 days of code like you go, I needed two months, basically, of just not doing this. And now I'm back. Fun fact, I had to change my password on my work computer. And now I'm giving myself 179 days to get through this course and find a job in web three, let's see if I can make the self imposed deadline.

It's been a month and a half since I watched any of the Solidity course video, so I decided to restart the solidity coding section.

So, thankfully we were able to skip the first 2 hours of the video.

I was able to refamiliarize myself with Remix, and I have a new goal of having a job in web3 by 174 days (February 8th, 2023) from today!

Stripe No signatures found matching the expected signature for payload.

Amy's Vue on this — Mon, 25 Jul 2022 01:03:27 +0000

I've been working on this error for more than a week:

No signatures found matching the expected signature for payload. Are you passing the raw request body you received from Stripe?

For some reason, it was erroring because I was defining bodyParser before routes in my express server.

This has been virtually impossible to debug, and I even asked an outside developer for help. Hopefully this helps someone when debugging their Stripe implementation.

Web3 Solidity + JavaScript 32 hour course recap #14

Amy's Vue on this — Tue, 21 Jun 2022 01:51:36 +0000

timestamps 4:33:33 - 4:50:26

As an aside, I applied for the gitcoin grant program, and then pretty much immediately had to put this training on hiatus. I was launching my new website (Banned Books Art)[https://www.bannedbooks.art]. It's a VR art gallery that advocates for free speech, and I decided to make the VR from scratch using the A-Frame library. It was a lot of work, and there's still some cleanup, but overall the launch went well.

So this is more of a review than usual for me....

Anyways, the first thing we did was go to a previous version of Solidity to demonstrate what safe numbers are. It's a little wild that we could accidentally reset everything to zero before Solidity 8.

The unchecked keyword makes our code a little bit more gas efficient.

We instantiated a pretty standard for loop to reset the funders after we withdraw the funds.

for (uint256 i = 0; i < funders.length; i++) {}

which, I know how to do from basic javascript, but that's a little old school for JS, and we now favor forEach, entries, and mappings.

We also reset the array like this: funders = new address[](0);

Arrays can be tricky when you don't actually assign them as new objects, so this makes sense that we're setting it to a new array with 0 elements - which makes it empty.

Apparently we went over 3 ways to Ethereum to a wallet, but the third way is to use the call statement. Which is the preferred method in version 8+.

(bool callSuccess, ) = payable(msg.sender).call{value: address(this).balance}("");
require(callSuccess, "Call Failed");

I'm going to wind up rewatching this portion because I'm pretty sure the ("") is because we don't actually have a callback function that we want to use. We're only checking on the balance.

Web3 Solidity + JavaScript 32 hour course recap #13

Amy's Vue on this — Thu, 09 Jun 2022 18:53:10 +0000

timestamps: 4:20:00 - 4:33:33

This is a recap of me making my way through the 32 hour course by Patrick Collins posted on FreeCodeCamp.

I started off by reviewing mapping vs arrays, because we're going through this material rather quickly and needed the refreshers. Mappings are hashes (key/value pair), and arrays are arrays.

Then we reviewed interfaces, which define which functions are available in a contract, and can be imported and used as the ABI since we need the ABI and the contract address to interact with 3rd part contracts.

Here is the Global Variable Cheatsheet from the Solidity documentation. It lists all of the variables that are available to us "for free" globally.

Solidity by Example was mentioned as a good resource yesterday, but we specifically went to the library lesson.

It turns out that Solidity libraries are like contracts except they're defined as library instead of contract and the functions should be internal instead of public. They also cannot have any state variables, and they cannot handle Ethereum.

It was also a cool trick to import the library, and then define a type as that, so that we could then just chain it on uint256. In a library function, the thing that's changed on that is that result is the first parameter inside that goes to that library function.

import "./PriceConverter.sol";

using PriceConverter for uint256;

msg.value.getConversionRate()

the PriceConverter.sol has the getConversionRate defined as:

function getConversionRate(uint256 ethAmount) internal view returns (uint256){

As an aside: if you have a section collapsed in Remix, and you try to search for a term; it will not find it.

I did not learn for a full hour tonight, but I did learn about libraries, so I've got that going for me - which is nice.

Web3 Solidity + JavaScript 32 hour course recap #12

Amy's Vue on this — Thu, 09 Jun 2022 02:12:13 +0000

timestamps: 4:11:11 - 4:22:02

This is a recap of me making my way through the 32 hour course by Patrick Collins posted on FreeCodeCamp.

There was a lot of user error this time -.-;

However, we made a lot of progress in our "FundMe" SmartContract.

Basically, to have $50 in ethereum, we have to use 50 and set it to 10e18:

uint256 public minimumUsd = 50 * 1e18;

This is because WEI is 18 decimal places.

Then we completed the getBlockchainPrice function. Which connects to the Aggregator with the address provided in Chainlink.

AggregatorV3Interface priceFeed = AggregatorV3Interface(ethToUsdAddress);

This function also taught us about Solidity destructing, which is possible as long as you leave in the commas to account for the values that you don't need to use.

(, int256 price, , ,) = priceFeed.latestRoundData();

One of the variables lets you know about the decimal place, but in order for it to display the correct currency amount is is only e10.

return uint256(price * 1e10);

Next, the getConversionRate method takes in the global value that was sent with the transaction, and converts it to the correct amount of Ethereum, by getting the current price of Ethereum:
uint256 ethPrice = getBlockchainPrice();

and then

uint256 ethAmountInUsd = (ethPrice * ethAmount) / 1e18;

With solidity, you have to multiply first and then divide so basically 101/100 to get 1%. Something Something floating point math, and we want to be accurate when it comes to money.

I didn't get terribly far today, but we made good progress in the app. If I had to guess, we'll be getting to the meat of the fund method soon!

Web3 Solidity + JavaScript 32 hour course recap #11

Amy's Vue on this — Wed, 08 Jun 2022 17:55:01 +0000

timestamps: 3:57:00 - 4:11:11

This is a recap of me making my way through the 32 hour course by Patrick Collins posted on FreeCodeCamp.

The first thing that we talked about is the fact that Oracle networks take ERC-20.

I then took it up on myself to look up the different Ethereum protocols (the gemini resource)[https://www.gemini.com/cryptopedia/ethereum-token-standards-erc777-erc1155-erc223-erc1337#section-what-is-erc-1155]

I'm pretty sure that ERC-20, ERC-721, and ERC-1155 are the only ones that I need to be aware of for now.

Chainlink is a technology for getting external data in a decentralized manner.

When interacting with another contract; you need both the address and the ABI. The address can be found in the chainlink documentation, but the ABI is found as an interface in the chainlink npm package. Solidity apparently is "smart enough" to be able to make calls to npm the find files.

import "@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol";

and

address ethToUsdAddress = 0x8A753747A1Fa494EC906cE90E9f37563A8AF630e;
AggregatorV3Interface(ethToUsdAddress).version();

are both pretty much what I would expect this to look like.

One side note: I was in Kovan when running the test, but we had copied the Rinkeby wallet address. So make sure that your metamask token selection matches what you're wanting to use.

Web3 Solidity + JavaScript 32 hour course recap #10

Amy's Vue on this — Tue, 07 Jun 2022 20:02:00 +0000

timestamps: 3:30:30 - 3:57:00

This is a recap of me making my way through the 32 hour course by Patrick Collins posted on FreeCodeCamp.

The first few minutes went over what had been learned in the previous lesson. Which is always a convenient place to stop.

Let's take a moment to emphasize that in order to override a function from a child contract, the parent function has to have the keyword virtual, and the child function has to have override.

I also spent some time trying to figure out a good way to export the desktop remix workspace to my local machine. The best bet is to either export it into a gist, and/or create a new workspace as soon as you start a new project.

Patrick Collins explained really well how chainlink and things like that work to allow decentralized apps have access to real-world information in a decentralized way. It involved pretty graphs, and I recommend that you watch that part if you're interested in the specifics.

tl;dr use Chainlink.

In order to make a function payable, you have to add the keyword... payable.

function fund() public payable {}

It also has the added benefit of making the button in the deploy section of remix red.

The value of the etherium (or whatever currency) is at the top level of the request, so the value can be accessed through msg.value

When you have a function that has a revert function (payable), put the stuff that has the option to fail at the top of the function to help the user save on gas fees if the transaction is cancelled.

I also went on a bit of a tangent to get the revert message to show a concatenated message that was descriptive with the proper amount that was expected:

function uint2str(uint _i) internal pure returns (string memory _uintAsString) { if (_i == 0) { return "0"; } uint j = _i; uint len; while (j != 0) { len++; j /= 10; } bytes memory bstr = new bytes(len); uint k = len; while (_i != 0) { k = k-1; uint8 temp = (48 + uint8(_i - _i / 10 * 10)); bytes1 b1 = bytes1(temp); bstr[k] = b1; _i /= 10; } return string(bstr); }

string public insufficientFundsMessage = string.concat("A minimum of $", uint2str(minimumUsd), " is required");

Web3 Solidity + JavaScript 32 hour course recap #9

Amy's Vue on this — Sun, 05 Jun 2022 19:28:59 +0000

timestamps: 3:00:00 - 3:30:30

This is a recap of me making my way through the 32 hour course by Patrick Collins posted on FreeCodeCamp.

Today revolved around learning how to import other contracts into a master contract, and to extend the functionality of contracts with inheritance.

pragma solidity ^0.8.0;

import "./SimpleStorage.sol";

contract ExtraStorage is SimpleStorage{
// overrides the function called 'store'
function store(uint256 _favoriteNumber) public override{
favoriteNumber = _favoriteNumber +/ 5;
}
}

When importing contracts and/or extending them it is important to keep the versioning compatible. So a pragma of 0.7.0 will not be compatible with ^0.8.0

In order to interact with any contract you need two things: contract address, and its ABI (application binary interface). The ABI lets you know what inputs and outputs the contract has.

Things that I learned: EVM stands for Ethereum Virtual Machine, which is what the Solidity code compiles down to. Polygon, Avalanche, and Fantom are all EVM compatible. Solona uses Rust.

Web3 Solidity + JavaScript 32 hour course recap #8

Amy's Vue on this — Fri, 03 Jun 2022 18:45:12 +0000

timestamps: 2:44:10-3:00:00

This is the recap of my sixth day of making my way through the 32 hour course by Patrick Collins posted on FreeCodeCamp.

Today we celebrate the milestone of completing 3 hours of the course! We're almost 10% of the way through!

We went over how to define an object, and how to call it from an external source.

We also went over how to connect (remix)[https://remix.ethereum.org/] to our Metamask test wallet.

There are six places where memory can be stored in a SmartContract: stack, memory, storage, calldata, code, and logs. However, memory and calldata are the only places where the storage can be specified. Calldata and memory are both temporary pieces of data. However calldata is like declaring a const, while memory is like declaring a let. By that I mean that calldata is read only and the information cannot be changed within the SmartContract, but memory can be reassigned a value within the SmartContract.

One thing that I found out was that the metamask extension doesn't like for you to switch accounts, and if you have 0 eth in your wallet the 2+ accounts won't reconnect automatically. But you can manually add them back, and they will have the original amount that existed before. This happened in a dev account, but I still did not like the fact that all of my accounts didn't appear right away.

Web3 Grant Opportunity with the Sherwood Project

Amy's Vue on this — Fri, 03 Jun 2022 00:45:29 +0000

The other day, someone that knew about my quest to find and apply to Web3 grants let me know about The Sherwood Project.

I'm going to share about why I was excited about this, and then ultimately decided that I was not going to pursue this particular grant at this time.

A part of this is, well, everything about this project reads like a scam.

The introductory text is very convoluted, and the Visionary Grant description is not much better. Earning a $50-60k commission doesn't sound like a bad deal on the surface, but there is a lot of work involved in this, and the community building is mostly for the Sherwood Project. On the plus-side, they claim that there is additional funding for the engineering for actually implementing the project. On the con-side, there are no actual mentions of amounts dedicated for additional resources.

The creators had a podcast episode, but I only made it about 1/4 of the way through it.

One of the factors of judging whether something is a scam or not is figuring out who are is in leadership. In this case it is Luke Dale and Matt Silverman. They both seem to have a lot of experience with film, but this is their first major NFT project (or at least that is how it seems to be through their LinkedIn Bio.)

The Treehouse Grants seems like a better deal because it is a request for funding for your own project. However, that definitely struck me as being scammy due to needing to be an NFTree NFT holder to be eligible for the program. However, there are definitely non-scam organizations that have scholarships for only members of the organization - so maybe it's just a soft red flag (?)

Their podcast introducing the project was very convincing, at least what I heard. Overall, it's really hard to figure out what is the Web3 Hype Way vs a transparent scam.

One other thing that I'll touch on: The Sherwood Project is an official partner of Polygon DAO. I assumed that being a partner with a large DAO like Polygon meant that the company had done their due diligence.

I don't know people in their network. I am a member of their discord, and I am going to purchase a $160 NFT tomorrow in their pre-sale. I'm curious about whether it is a scam, and less than $200 to find out is certainly one way to do it while keeping the possibility of applying for the Treehouse grant open.

I tried to convince my night job to submit an application for the Visionary Artist grant, with myself and one other person being the face of the night job project. However, we decided that it would benefit the Sherwood Project too much for us to delay our own product and all of that community building is better off done with our own branding.

For the "Visionary Artist" grant, they really should be paying the artist an amount of money, probably closer to $100k, or an amount of equity of the project, and then the commission for incentivisation for the completion of the project. The artist will have a lot of responsibility in coordinating so many artists in order to complete the vision of making 8,333 NFTs.

So, is it a scam? Maybe.
Is the amount of work that goes along with the grant outsized compared to the compensation? yes.
Am I applying to be a visionary? no.
Am I going to purchase an NFT? one.
Will I apply to the Treehouse grant? We'll see once it gets opened up.

What are your thoughts on The Sherwood Project? What Web3 grants are you aware of?

EDIT: the first Visionary Artist Grant application is open until June 15th, 2022.

Web3 Solidity + JavaScript 32 hour course recap #7

Amy's Vue on this — Thu, 02 Jun 2022 23:54:18 +0000

timestamps: 2:23:32-2:44:10

This is the recap of my sixth day of making my way through the 32 hour course by Patrick Collins posted on FreeCodeCamp.

I really like the more hands-on portions of these tutorials.

I learned that there are 4 ways to set the visibility specifiers: internal, external, public, and private. If it is not specified, then it is internal. External functions are only available externally, internal functions are only available to the contract and the contract's children.

We learned more about arrays and structures. The naming convention of person vs Person vs people vs People is rather confusing. But, in general, the definition of what a Person object looks like feels like a typescript interface. Then you can define Person[], as an array that contains the objects of single a single person.

It was a good day, and I learned a lot!