devpanther

{ 
  "name": "CryptoPunk #5",
  "image": "https://lh3.googleusercontent.com/t47woktG_21Nr36PtChzSX6AiEzkucNHT0r3YoSwEwyVF_UXH_haiiTycMm0x2QxnMQXy_wTJnLO8b0x9Du-BmCWSVhSQsTE1siI",
  "attributes": [
    {
      "trait_type": "type",
      "value": "Female"
    },
    {
      "trait_type": "accessory",

devpanther

{ 
  "name": "CryptoPunk #4",
  "image": "https://lh3.googleusercontent.com/IpaqZNyXpL0Ql9ej0ZW5cgSelhIGHvaYthGd37qV2DIEL3B2D4g3MFhfxZG_n_k_8cHvbE7X_0O6_lgXwT1GHpTrHQ",
  "attributes": [
    {
      "trait_type": "type",
      "value": "Male"
    },
    {
      "trait_type": "accessory",

devpanther

{ 
  "name": "CryptoPunk #3",
  "image": "https://lh3.googleusercontent.com/OmXil2nPEsMedFRhoVoO0EBplIzo_mj5gb6BYTvyPsVlPkslwWcvbaWuazBJayQFnFL7h-y7R8YU9NjiGm5gAtuS",
  "attributes": [
    {
      "trait_type": "type",
      "value": "Male"
    },
    {
      "trait_type": "accessory",

devpanther

{ 
  "name": "CryptoPunk #2",
  "image": "https://lh3.googleusercontent.com/gQVReAQUyMTunZeK23dkOdAQvOsGXqueqrODFdiZfn41D6djlx4ujimVN-Q4NsR4_DJ5OLEFi0znwca_hasSi8wI=s500",
  "attributes": [
    {
      "trait_type": "type",
      "value": "Female"
    },
    {
      "trait_type": "accessory",

devpanther

{ 
  "name": "CryptoPunk #1",
  "image": "https://lh3.googleusercontent.com/BdxvLseXcfl57BiuQcQYdJ64v-aI8din7WPk0Pgo3qQFhAUH-B6i-dCqqc_mCkRIzULmwzwecnohLhrcH8A9mpWIZqA7ygc52Sr81hE=s500",
  "attributes": [
    {
      "trait_type": "type",
      "value": "Male"
    },
    {
      "trait_type": "accessory",

devpanther

[{"name":"Azuki","address":"QmfGTsSGzANhQhsYwXMKHS2yoKXjeToNzEgeaD3E5QzzJq"}]

devpanther

/*! NOTE: These are just recommended default global styles, edit as required */

@import ('Import reset stylesheet here, (I recommend modern-normalize) or even better, import the reset stylesheet in the HTML as the first imported stylesheet');

::selection { /* Optional */
  /* It can be really hard to read highlighted text with a text-shadow, it should be removed when selected */
  text-shadow: none;
  
  /* NOTE: Using this means the color and background-color are set to transparent for selected text... */
  /* So you can customise your styles below */

devpanther

import {useCallback, useEffect, useState} from 'react';

export const useStateStorage = <TType extends any>(
    key: string,
    defaultValue: TType
) => {
    const [value, setState] = useState(defaultValue);

    useEffect(() => {
        const store = localStorage.getItem(key);

devpanther

The new ES2021 features are already supported by recent versions of major browsers like Chrome 85, Firefox 79, and Safari 14. 
However, to enable your code to run in older browsers, you need to set up your project with the Babel complier.

Install the following packages:

npm install --save-dev @babel/core @babel/cli @babel/preset-env 
npm install core-js
Create a babel.config.json file at the root of your project:

{

devpanther

window.ononline = (event) => {
  console.log("You're connected to the internet");
};

window.onoffline = (event) => {
  console.log("You appear to be offline. Please check your connection.");
};

/* Following code will works the same way as the above code