🚀 RELEASE: v1.0.3

README.md

@@ -4,7 +4,7 @@
 
 ![screenshot](src/assets/screenshot.png)
 
-Matuto is a simple chromium-based browser extension that provides a glossary of terms and definitions related to web3, blockchain and cryptocurrencies when every time you open a new tab from your browser.
+Matuto is a simple browser extension that provides a glossary of terms and definitions related to web3, blockchain and cryptocurrencies when every time you open a new tab from your browser.
 
 It's a Filipino word which means "to learn". Which is the goal of this project, to help people learn more about web3, blockchain and cryptocurrencies. 💜💙📖
 
@@ -14,6 +14,7 @@ Browser | Download | Info
 --- | --- | ---
 **Chrome** | [Get Now](https://chrome.google.com/webstore/detail/matuto-learn-web3-in-ever/gbdkfpagopdnedcmmohlpmogekmfpobp) | For chromium-based browsers such as Brave, Opera, etc.
 **Edge** | [Get Now](https://microsoftedge.microsoft.com/addons/detail/matuto/djbnlpmjbdflnjdcphaofhifcgigdbbe) | For Microsoft Edge browser.
+**Firefox** | [Get Now](https://addons.mozilla.org/en-US/firefox/addon/matuto/) | For Firefox browser.
 
 ## ⚡ Demo
 
@@ -42,8 +43,6 @@ Please visit the official documentation here: [docs.web3philippines.org/matuto](
 > **Note**: Everytime you made changes please run `yarn rebuild` to update the extension. Go to extension management page in your browser and reload the extension.
 >
 > We'll think of a better way to automate this process in the future.
->
-> Firefox is not yet supported, test it only on chromium based browser such as Edge or Chrome.
 
 ## 📖 Source
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matuto-extension",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A simple chromium-based browser extension for learning web3 in every new tab.",
   "scripts": {
     "start": "parcel watch src/manifest.json --host localhost",

src/data.js

@@ -58,6 +58,38 @@ const glossary = [
         term: "Ethereum Name Service (ENS)",
         definition: "The Ethereum Name Service (ENS) is a decentralized naming service that allows users to register human-readable domain names for their Ethereum addresses. ENS names can be used to send and receive transactions, interact with smart contracts, and resolve decentralized websites."
     },
+    {
+        term: "Non-Fungible Token (NFT)",
+        definition: "A non-fungible token (NFT) is a unique digital asset that is stored on a blockchain. NFTs are used to represent real-world items like art, music, in-game items, and videos."
+    },
+    {
+        term: "Decentralized Finance (DeFi)",
+        definition: "Decentralized finance (DeFi) is a blockchain-based form of finance that does not rely on central financial intermediaries such as brokerages, exchanges, or banks to offer traditional financial instruments, and instead utilizes smart contracts on blockchains, the most common being Ethereum."
+    },
+    {
+        term: "ERC-20",
+        definition: "ERC-20 is a technical standard used for smart contracts on the Ethereum blockchain for implementing tokens (fungible). ERC stands for Ethereum Request for Comment, and 20 is the number that was assigned to this request."
+    },
+    {
+        term: "ERC-721",
+        definition: "ERC-721 is a technical standard used for smart contracts on the Ethereum blockchain for implementing non-fungible tokens (NFTs). ERC stands for Ethereum Request for Comment, and 721 is the number that was assigned to this request."
+    },
+    {
+        term: "ERC-1155",
+        definition: "ERC-1155 is a technical standard used for smart contracts on the Ethereum blockchain for implementing both fungible and non-fungible tokens (NFTs). ERC stands for Ethereum Request for Comment, and 1155 is the number that was assigned to this request."
+    },
+    {
+        term: "ERC-4907",
+        definition: "ERC-4907 is a proposed Ethereum standard that extends ERC-721 to introduce \"owner\" and \"user\" roles. It streamlines NFT rentals with an automated \"expires\" function that enforces time-limited user roles, ending usage terms automatically without a second transaction."
+    },
+    {
+        term: "ERC-6551",
+        definition: "ERC-6551 is a new token standard for non-fungible tokens (NFTs) that enhances the functionality and value of NFTs by giving them smart contract capabilities. It suggests creating a dedicated cryptocurrency wallet for each ERC-721 token, effectively transforming NFTs into Token Bound Accounts (TBAs). With smart contract capabilities, NFTs can now hold other assets, interact with smart contracts, and have their own on-chain identity."
+    },
+    {
+        term: "ERC-4337",
+        definition: "ERC-4337 is an Ethereum standard that achieves account abstraction on the protocol without any consensus-layer changes. It makes it possible to transact and create contracts in a single contract account. ERC-4337 is a standard for Ethereum that aims to make user accounts work more like smart contracts, a phenomenon called \"account abstraction.\""
+    },
 ];
 
 // get id of term and definition

src/index.html

@@ -50,6 +50,9 @@ <h2>Partners:</h2>
             <a href="https://ossph.org" target="_blank" class="partner__item">
                 <img src="assets/ossph.png" alt="OSSPH Logo" class="partner__logo">
             </a>
+            <a href="https://www.bitskwela.com" target="_blank" class="partner__item">
+                <img src="assets/bitskwela.png" alt="Bitskwela Logo" class="partner__logo">
+            </a>
             <a href="https://facebook.com/groups/pinas.crypto" target="_blank" class="partner__item">
                 <img src="assets/cryptopinas.png" alt="Crypto Pinas Logo" class="partner__logo">
             </a>

src/manifest.json

@@ -1,7 +1,7 @@
 {
-  "name": "Matuto | Learn Web3 in every new tab",
+  "name": "Matuto | Learn web3 in every new tab",
   "description": "A simple chromium-based browser extension for learning web3 in every new tab.",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Web3 Philippines",
   "icons": {
     "16": "assets/icon16.png",

src/popup.html

@@ -1,24 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <style>
         body {
-            min-width: 200px;
+            min-width: 250px;
             background-color: #1b1b23;
             color: #fff;
             padding: 10px;
         }
-
         a {
             color: #fff;
             text-decoration: none;
         }
         a:hover {
             text-decoration: underline;
         }
+        .title, .version, .description, .links, #download {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
         .title {
             font-size: 18px;
             font-weight: bold;
@@ -29,34 +33,67 @@
             color: #c1c1c1;
             font-weight: normal;
         }
-        .img-wrapper, .sponsor {
+        .img-wrapper,
+        .sponsor {
             text-align: center;
         }
-        .img-wrapper > img {
+        .img-wrapper>img {
             width: 50px;
         }
         .links {
             font-size: 14px;
             text-align: center;
         }
+        #download {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 20px;
+        }
+        #download > span {
+            margin-right: 10px;
+            font-size: 12px;
+        }
+        #download > a {
+            margin-right: 10px;
+            font-size: 16px;
+        }
     </style>
     <title>Matuto</title>
 </head>
+
 <body>
     <div class="img-wrapper">
-        <img src="assets/icon.png" alt="Icon"/>
+        <img src="assets/icon.png" alt="Icon" />
     </div>
-    <div class="title">Matuto <span class="version">v0.1.2</span></div>
-    <p>By <a href="https://web3philippines.org" target="_blank" rel="noopener">Web3 Philippines</a></p>
-    <p class="description">A simple chromium-based browser extension for learning web3 in every new tab. 💜💙📖</p>
+    <div class="title">Matuto <span class="version">v0.1.3</span></div>
+    <p class="description">By <a class="description" href="https://web3philippines.org" target="_blank"
+            rel="noopener">Web3 Philippines®</a></p>
+    <p class="description">A simple browser extension for learning web3 in every new tab. It's a Filipino word which means "to learn". Which is the goal of this project, to help people learn more about web3, blockchain and cryptocurrencies. 💜💙📖</p>
     <div class="links">
         <a href="https://github.com/web3phl/matuto" target="_blank" rel="noopener">
-            Contribute 🤝
+            🤝 Contribute
         </a>
         <span>|</span>
         <a href="https://github.com/sponsors/web3phl" target="_blank" rel="noopener">
-            Sponsor 💖
+            💖 Sponsor
+        </a>
+    </div>
+    <div id="download">
+        <span>Available In:</span>
+        <a href="https://chrome.google.com/webstore/detail/matuto-learn-web3-in-ever/gbdkfpagopdnedcmmohlpmogekmfpobp"
+            target="_blank" rel="noopener">
+            <i class="fab fa-chrome"></i>
+        </a>
+        <a href="https://microsoftedge.microsoft.com/addons/detail/matuto/djbnlpmjbdflnjdcphaofhifcgigdbbe"
+            target="_blank" rel="noopener">
+            <i class="fab fa-edge"></i>
+        </a>
+        <a href="https://addons.mozilla.org/en-US/firefox/addon/matuto/" target="_blank" rel="noopener">
+            <i class="fab fa-firefox"></i>
         </a>
     </div>
+
 </body>
+
 </html>

src/styles.css

@@ -5,7 +5,7 @@ body {
 #logo {
     position: relative;
     left: 10px;
-    width: 150px;
+    width: 125px;
 }
 .nav {
     position: absolute;
@@ -42,7 +42,7 @@ body {
 #glossary .glossary__container {
     background-color: rgba(0, 0, 0, 0.5);
     border-radius: 0.5rem;
-    padding: 20px;
+    padding: 5px 20px;
     margin: 0 auto;
     max-width: 600px;
 }
@@ -140,5 +140,5 @@ body {
     margin-left: 10px;
 }
 .partner__logo {
-    width: 60px;
+    width: 70px;
 }