Tutorials:Connect Account

Website Interaction / Connect Account

In the following exercise we will use Seasonal Tokens website to illustrate how Metamask connects the website to a blockchain and displays different information depending on the blockchain.

1. Open Metamask.
2. Click on Expand view.
3. With your Metamask extension connected to the Ethereum Mainnet visit this website:

Buy Tokens / Trade

Metamask Tip:

Sometimes, if Metamask doesn't want to connect to a website, it helps disconnecting the Extension

and connecting it back again, to "flush" all previous connection data.

1. Go to Manage Extensions
2. Click on Metamask Disconnect Extension
3. Turn the Extension back on.

Connect Account

Scroll down to the section: Buy Tokens. Underneath the red warning.

(to know more about the red warning visit the Front Running Bot quest.)

If it is the first time you connect with the website it will not show the price of the tokens.

Click on connect account.

• Metamask informs you of the permissions requested by the website.
• Click "connect" to connect the website to your account.

Exercise

After you gave permissions to connect with this site it will show the token prices in USD.

Notice that the buttons in the right hand side column say ETH/SPRING, ETH/SUMMER, ETH/AUTUMN, ETH/WINTER

The website is displaying information pertaining to the Ethereum blockchain.

Task:

Now that you have connected your wallet, what are the words hidden by the rectangle in the image above? Use the same Upper/Lower case as it appears in the website.

Core Technology of Web3: Connecting Websites to Blockchains

At the heart of Web3 technology is the ability for websites to connect directly to blockchains, enabling decentralized applications (dApps) to interact with smart contracts and provide trustless services. This is achieved through specific tools and technologies, which form the backbone of Web3 development.

Key Components

1. JavaScript Libraries (Web3.js / Ethers.js)

These libraries enable web applications to communicate with blockchains. They allow developers to:

• Read blockchain data.
• Interact with smart contracts.
• Send transactions.

2. Blockchain Node Providers

Node providers like Infura, Alchemy, and QuickNode offer access to blockchain nodes, allowing dApps to interact with the blockchain without requiring users to run a full node themselves.

3. Wallet Integration (MetaMask)

Browser wallets such as MetaMask act as bridges between users and dApps. They enable:

• Secure key management.
• Transaction signing.
• Seamless connection to dApps via browser extensions or mobile apps.

4. Smart Contracts

Smart contracts are self-executing programs on the blockchain. Websites connect to these contracts to provide decentralized services, such as swaps, lending, and trading, without intermediaries.

---

This technology stack is what allows Web3 to provide decentralized, permissionless, and trustless services directly through websites.