“I am not interested in hearing ridiculous Utopian rants.”

said one reader of yesterday’s Finxter newsletter on my note on declining cost curves and the implied disruptions.

I’ll include a screenshot of the email here:

Info: Declining cost curves refer to the trend of production costs decreasing over time as technology and production processes improve. This trend leads to more affordable and accessible products and services, creating new opportunities and disrupting traditional industries and jobs. Think of it like a “cost savings snowball” that gets bigger and bigger as technology advances.

I got a lot of positive comments, too, but let’s focus for a moment on this one because it demonstrates how not to behave in the upcoming years of radical change and transformation.

Let’s recap my note on the declining cost curves for AI training:

ChatGPT and a ~60% annual reduction of AI training costs. The cost of average intelligence is now 10,000x lower, disrupting white-collar labor markets, logistics, universities, law, coding, artists, secretaries, and many other industries.

In this article, allow me to give you more data on this. Feel free to skip ahead if you’re convinced the previous statement is not “ridiculous”.

The following chart from ARK’s research shows the 10x decline in AI costs in only two years.

Declining by 70% twice is represents a total decline of 91%, i.e., slightly more than 10x!

This steep decline in AI training costs combines software and hardware training costs. Both sit on independently declining cost curves in their own right:

Grasping exponentials is tough for our biological brains.

With abundant intelligence, we’ll integrate super-human AI into more and more apps and devices. Everything will become more intelligent all around us.

Your coding IDE, Excel spreadsheet, heating system, car, glasses, clothes. Very soon, all of them will possess super-human intelligence due to the declining AI training costs.

As a researcher, I learned that I needed to look at the evidence rather than letting my biases cloud my view—facts, not opinions.

I am puzzled that billions of people today still don’t believe the evident, apparent, mind-boggling disruptions. Your job is as unsafe as mine. I could sugarcoat it, but what’s the use?

Look at the productivity improvement of AI-assisted coding:

Wow, just like that, an organization like Google, Tesla, Facebook, OpenAI can double their coding productivity. But what about graphical design?

If I write that the costs of intelligence decreased by 10,000x, I mean that literally:

Genuine valuable content that would cost $100 in 2020 can now be purchased for less than $0.01 with ChatGPT.

And ChatGPT today – at IQ 147 reportedly – is the dumbest it will ever be. From here on out, it will become more and more intelligent and be at our service at a lower and lower price.

Yes, it will reach super-human level performance in coding. Yes, it will create beautiful content, music, art, stories, sales pages, research practically for free.

What is left for us humans to do?

Well, your guess is as good as mine. At least, let’s try to remain open-minded and use the technology daily so you won’t get left behind.

For example, you could use ChatGPT to create advanced apps that were previously impossible for a one-person coding startup. Now, you can disrupt the big guys with a small ChatGPT API call.

~~~

If you’re interested in learning how to integrate ChatGPT in your own Python web apps, feel free to check out our new academy course:

[Course] ChatGPT at the Heart – Building a Movie Recommendation Python Web App in 2023

As with all our courses, this course comes with a personalized PDF certificate with your name to showcase your skills to clients or your future employer.

~~~

I’ll close today’s article with this concluding thought: humans tend to adapt very quickly if forced to. Just two months ago, most people would have pushed back on the thought that AI is able to create super-human-level art, code, or content.

Now, only a few people do.

In only two years, AI training costs will have been reduced by another 10x, and we’ll see generative videos and whole books being written in seconds.

We will see peer-reviewed ChatGPT research papers that managed to pass double-blind journal review systems.

Throughout human history, intelligence has been a limiting factor for our economy. It no longer is. You can choose to ignore this or you can choose to embrace change. The world, however, will move on either way.

I’m sending you much love, my friend!

In the first part, we connected the front end with Metamask but couldn’t fetch the balance. Let’s try to fetch the balance from the wallet this time. But first, install the ether.js library to communicate with the smart contract.

npm install --save ethers

Import ether.js library to App.js.

import {ethers} from "ethers";

Now we need to import the contract ABI.

The contract ABI is the JSON format of the contract that saves the bytecode of the deployed contract.

Create a contracts folder inside the source folder. Inside this contracts folder, create a JSON file called SilverToken.json.

Copy the ABI of the contract from the Remix IDE and paste it inside the JSON file. Now import the ABI from the JSON file to the app.js.

import contractABI from "./contracts/SilverToken.json";

Create a variable for the contract address.

const contractAddress = "0xC16322799f2645D5b7a1287392072aA668F8144B";

We need to create a contract instance to get access to the methods of our deployed smart contract. We need three things to create an instance of the contract. Those are the provider, signer, and contract ABI.

We already imported the ABI. So, let’s create state variables for the provider, signer, and contract and initially keep all the values null.

const [provider, setProvider] = useState(null);

const [signer, setSigner] = useState(null);

const [contract, setContract] = useState(null);

Inside the connectMetamask button define provider, signer, and contract.

const provider = new Web3Provider(window.ethereum);

const signer = provider.getSigner();

const contract = new ethers.Contract( contractAddress, contractABI, signer);

setProvider(provider);

setContract(contract);

setSigner(signer);

We defined the provider with the help of the Web3Provider method of the ethers library. In our case, the provider would be Metamask.

I was unable to access the providers library of ethers for some unknown reason. That’s why I imported the providers library from the npm Ethereum providers. You can use this link if you need it.

First, install and then import the providers library.

npm i @ethersproject/providers

since we will use the Web3Provider from the providers library, we will import this only.

import { Web3Provider } from "@ethersproject/providers";

We are committing a transaction, so we must need a signer. We called the signer by using the getSigner() method of the provider.

Then we created an instance of our smart contract with the contract() method of the ethers library.

This contract() method takes the contract address, ABI, and the signer as the parameters.

Now the provider, signer, and contract are defined. So, we need to change the state of these three that we have defined as null earlier.

Now let’s console.log the contract to check if all changes occurred.

console.log(contract);

As you can see in my console, the contract’s state was initially null. But now it returns the contract address that we are connected to.

Get Wallet Balance

Create a getBalance() method to get the balance from the address.

 const getBalance = async () => { const balanceInBig = await contract.balanceOf(activeAccount); const balanceInNum = Number(balanceInBig) / 100; setTokenBalance(balanceInNum); };

We are using the balanceOf method of the contract to get the balance of our address. The balance will be returned as a bigInteger number. Read more about BigInt here.

In the 2nd line, we converted the big integer number to a readable format.

To initiate the getBalance() function, we can use React‘s useEffect() hook.

useEffect(() => { if (contract != null) { getBalance(); } }, [contract]);

The useEffect() hook will trigger the getBalance method if a contract is available. The useEffect() hook will render the page again whenever the contract is changed.

Transfer the Balance

Now to transfer the balance, we need a form where we will input the address of the account to which we will be transferring the amount. Let’s do this part in a separate functional component.

Let’s create a components folder inside the source folder and create a new file called Transaction.js.

Inside this file, create a component structure by pressing “rsc” on the keyboard. If the autocompletion doesn’t work, no need to worry. Write the code manually.

I will create a simple form using custom codes from flowbite. You can check it out or make your own custom one. Inside the return function, paste the following.

 return ( <div className="w-1/2 mx-auto bg-slate-600 mt-10 p-5 border rounded-lg"> <form on‌Submit={transactionHandler}> <div className="mb-6"> <label for="address" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white" > Receiver Address </label> <input type="text" id="address" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Enter Receiver Address" required /> </div> <div className="mb-6"> <label for="amount" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white" > Transfer Amount </label> <input type="number" id="amount" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required /> </div> <button type="submit" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" > Send Token </button> <div className="mt-5"> <h3 className="text-slate-100">{transactionHash}</h3> </div> </form> </div> );

We created two input fields inside the form. One is text type for the receiver address, and another is a number type for the amount that would be sent to the receiver.

The id of each input filed is changed to “address” and “amount” respectively.

A transactionHandler() function will be triggered whenever you click on the send button. This function will collect the info from the input fields and do something further.

Let’s define the transactionHandler() function.

const transactionHandler = async (event) => { event.preventDefault(); let receiverAddress = event.target.address.value; let sendAmount = event.target.amount.value; let transferAmount = sendAmount * 100; let trans = await contract.transfer(receiverAddress, transferAmount); console.log(trans); setTransactionHash("Transaction confirmed with hash:" + trans.hash); };

The transactionHandler() is an async await function that will trigger an event. The preventDefault() method will prevent the function from reloading automatically for changes.

The transferAmount and receiverAddress variables will collect the info from the input fields. “event.target” will access the input fields by using the id of the input field “amount” and “address.”

We need to use the transfer method of the contract to commit the transaction. To access the contract state, we need to pass it as a prop from the app.js file.

Call the transaction.js component from the app.js file and pass the contract as props.

<Transaction contract={contract}></Transaction>

We are using the “contract.transfer” method to commit the transaction. This method will take the receiver address and the send amount as parameters.

We will get a transaction hash as a transfer confirmation when the transaction is done. We can store this transaction hash as a state variable to display it on the user interface.

Let’s create a new account on the Goerli testnet. This will be our receiver account.

Now use this address and send an amount of 50 tokens from the main wallet. We need to multiply the amount by 100 to get the exact value, as we used a two-digit return in the decimals function of the smart contract.

Now if you check this transaction hash on the Etherscan website, you will get the complete transaction details. You will also receive the token balance on the Metamask receiver wallet.

This is the screenshot of my recent transaction. To get your transaction details, just use the transaction hash in the search bar. Make sure you choose the Goerli testnet as the network.

That’s all for today. Thanks for the reading!

Github: https://github.com/finxter/silver_wallet