index.js

function $(_) {return document.getElementById(_);}

const DATA = {
  "categories": [,
    {
      "title": "$ELITE & related",
      "tiles": [
        {
          "name": "Eliteness Bridge",
          "description": "Move any ElitenessOFT standard based tokens across chains!",
          "url": "https://eliteness.network/bridge/elite",
          "image": "https://ftm.guru/icons/1f309.svg",
          "background": "linear-gradient(45deg,#100,#011)",
          "subicons" : ["ftm", "base", "arb1","sonic", "bsc", "blast", "bera", "eth", "optimism", "avax", "pol"],
        },
        {
          "name": "Convert Original ELITE to new ELITE",
          "description": "Upgrade your original ELITE on Fantom Opera to the new Omnichain ELITE token.",
          "url": "https://eliteness.network/e3/250-10",
          "image": "https://ftm.guru/icons/eliteness.png",
          "background": "linear-gradient(45deg,#000,#012)",
          "subicons": ["ftm"]
        },
        {
          "name": "Omnichain Explorer",
          "description": "Track all Tokens running on the ElitenessOFT standard.",
          "url": "https://layerzeroscan.com/protocol/eliteness-network",
          "image": "https://ftm.guru/icons/1f309.svg",
          "background": "linear-gradient(225deg,#100,#011)",
        },
        {
          "name": "Treasury Tracker!",
          "description": "In-depth reports on treasury allocation & PnL charts.",
          "url": "https://eliteness.network/treasury",
          "image": "https://ftm.guru/icons/1f451.svg",
          "background": "linear-gradient(45deg, black, royalblue)",
        },
        {
          "name": "Explore all User Deposits",
          "description": "Discover opportunieis and people using Eliteness Network.",
          "url": "https://debank.com/protocols?q=eliteness",
          "image": "https://ftm.guru/icons/debank.svg",
          "background": "linear-gradient(45deg,#721,#012)",
          "subicons": ["ftm","sonic","bsc","arb1","base","avax","pol"]
        },
      ]
    },
    {
      "title": "Real Yield Tokens",
      "tiles": [
        {
          "name": "eTHENA",
          "description": "Liquid Wrapper & Vote Optimizer for Thena.fi's governance NFTs. <br><b>Stake eTHENA to Earn BNB.</b>",
          "url": "https://eliteness.network/ethena",
          "image": "https://ftm.guru/icons/ethena.png",
          "background": "linear-gradient(45deg, #f05,#a0f)",
          "subicons" : ["bsc"],
        },
        {
          "name": "stakeTHENA",
          "description": "Auto-compounding Staked eTHENA ERC4626 Vault. <br><b>Stake eTHENA to Earn eTHENA.</b>",
          "url": "https://eliteness.network/ethena/vault",
          "image": "https://ftm.guru/icons/ethena.png",
          "background": "linear-gradient(45deg, #7037, #3077)",
          "subicons" : ["bsc"],
        },
        {
          "name": "eliteRingsScUSD",
          "description": "Liquid Wrappers & Vote Optimizer for Rings/Trevee's governance NFTs. <br><b>Use eliteRingsScUSD to Earn Rewards.</b>",
          "url": "https://eliteness.network/rings/scusd",
          "image": "https://cdn.jsdelivr.net/gh/unified-defi/equalizer-tokens@latest/sonic/tokens/128x128/0xd4aa386bfceeedd9de0875b3ba07f51808592e22.png",
          "background": "linear-gradient(225deg, #356ff4,purple)",
          "subicons" : ["sonic"],
        },
        {
          "name": "wstkEliteRingsScUSD",
          "description": "Auto-compounding Staked eliteRingsScUSD ERC4626 Vault. <br><b>Stake & Earn eliteRingsScUSD.</b>",
          "url": "https://eliteness.network/rings/scusd",
          "image": "https://cdn.jsdelivr.net/gh/unified-defi/equalizer-tokens@latest/sonic/tokens/128x128/0xd4aa386bfceeedd9de0875b3ba07f51808592e22.png",
          "background": "linear-gradient(225deg, #000, #8088)",
          "subicons" : ["sonic"],
        },
        {
          "name": "eliteRingsScETH",
          "description": "Liquid Wrappers & Vote Optimizer for Rings/Trevee's governance NFTs. <br><b>Stake eliteRingsScETH to Earn ETH.</b>",
          "url": "https://eliteness.network/rings/sceth",
          "image": "https://cdn.jsdelivr.net/gh/unified-defi/equalizer-tokens@latest/sonic/tokens/128x128/0xdc2de2f2c0122ff7cb8482dc47da75a6a5d1a88b.png",
          "background": "linear-gradient(225deg, #356ff4,purple)",
          "subicons" : ["sonic"],
        },
        {
          "name": "El Ramses",
          "description": "Liquid Wrapper and Vote Optimizer for Ramses.Exchange's governance NFTs. <br><b>Stake ELR to Earn ETH.</b>",
          "url": "https://eliteness.network/el-ramses",
          "image": "https://ftm.guru/icons/elr.png",
          "background": "linear-gradient(225deg, goldenrod,brown)",
          "subicons" : ["arb1"],
        },
        {
          "name": "El Chronos",
          "description": "Liquid Wrapper and Vote Optimizer for Chronos.Finance's governance NFTs. <br><b>Stake elCHR to Earn ETH.</b>",
          "url": "https://eliteness.network/el-chronos",
          "image": "https://ftm.guru/icons/chr.png",
          "background": "linear-gradient(225deg, #356ff4,purple)",
          "subicons" : ["arb1"],
        },
        {
          "name": "eliteFNX",
          "description": "Liquid Wrapper and Vote Optimizer for Fenix Finance's governance NFTs. <br><b>Stake eliteFNX LP to Earn FNX.</b>",
          "url": "https://www.fenixfinance.io/liquidity/deposit?type=V2&isStable=0&token0=0x4300000000000000000000000000000000000004&token1=0xd600ec98cf6418c50ee051ace53219d95aeaa134",
          "image": "https://www.fenixfinance.io/static/images/tokens/elFNX.svg",
          "background": "linear-gradient(225deg, #f007, #f73a)",
          "subicons" : ["blast"],
        },
        {
          "name": "El Retro",
          "description": "Liquid Wrapper and Vote Optimizer for Retro.Finance's governance NFTs. <br><b>Stake elRETRO to Earn MATIC.</b>",
          "url": "https://eliteness.network/el-retro",
          "image": "https://ftm.guru/icons/elretro.png",
          "background": "linear-gradient(135deg,  black,gray)",
          "subicons" : ["pol"],
        },
        {
          "name": "El Snek",
          "description": "Liquid Wrapper and Vote Optimizer for Snek.Finance's governance NFTs. <br><b>Stake elSNEK to Earn AVAX.</b>",
          "url": "https://eliteness.network/el-snek",
          "image": "https://ftm.guru/icons/elsnek.png",
          "background": "linear-gradient(315deg, #560f5c, #b60f00)",
          "subicons" : ["avax"],
        }
      ]
    },
    {
      "title": "ElitenessOFT Bridge",
      "tiles": [
        {
          "name": "$ELITE Bridge",
          "description": "Move ELITE token across chains!",
          "url": "https://eliteness.network/bridge/elite",
          "image": "https://ftm.guru/icons/eliteness.png",
          "background": "linear-gradient(45deg,black,#fff1,black)",
          "subicons" : ["ftm", "base", "arb1","sonic", "bsc", "blast", "bera", "eth", "optimism", "avax", "pol", "linea", "fraxtal", "hyperevm", "plasma"],
        },
        {
          "name": "$MCLB Bridge",
          "description": "Move MCLB token across chains!",
          "url": "https://eliteness.network/bridge/mclb",
          "image": "https://cdn.jsdelivr.net/gh/unified-defi/equalizer-tokens@latest/sonic/tokens/128x128/0x44e23b1f3f4511b3a7e81077fd9f2858df1b7579.png",
          "background": "linear-gradient(315deg, #0e0e32,#0d7676)",
          "subicons" : ["ftm", "base", "sonic", "bsc", "blast", "avax", "arb1", "plasma"],
        },
        {
          "name": "$BOL Bridge",
          "description": "Move BOL token across chains!",
          "url": "https://eliteness.network/bridge/bol",
          "image": "https://cdn.jsdelivr.net/gh/unified-defi/equalizer-tokens@latest/sonic/tokens/128x128/0x38628cb4cc74cbdfb6ddd877b17c1f60fcae7c2c.png",
          "background": "linear-gradient(225deg, #f007, #f73a)",
          "subicons" : ["ftm", "base", "sonic", "bsc", "blast", "bera", "arb1", "linea", "plasma"],
        },
        {
          "name": "$FIERY Bridge",
          "description": "Move FIERY token across chains!",
          "url": "https://eliteness.network/bridge/fiery",
          "image": "https://cdn.jsdelivr.net/gh/unified-defi/equalizer-tokens@latest/sonic/tokens/128x128/0xf97d438bc03ad0f75b83ce5714c9619880b305bc.png",
          "background": "linear-gradient(225deg, red,brown)",
          "subicons" : ["ftm", "base", "sonic", "bsc", "blast", "plasma"],
        },
        {
          "name": "$TRENCHES Bridge",
          "description": "Move TRENCHES token across chains!",
          "url": "https://eliteness.network/bridge/trenches",
          "image": "https://ftm.guru/icons/trenches.png",
          "background": "linear-gradient(135deg, #0033,#f03)",
          "subicons" : ["base","sonic", "avax", "pol", "fraxtal", "hyperevm", "plasma"],
        },
        {
          "name": "$fMULTI Bridge",
          "description": "Move fMULTI token across chains!",
          "url": "https://eliteness.network/bridge/fmulti",
          "image": "https://cdn.jsdelivr.net/gh/unified-defi/equalizer-tokens@latest/sonic/tokens/128x128/0x39838b880ba948c49aab7253f61ce1e00c30c014.png",
          "background": "linear-gradient(235deg, black, navy)",
          "subicons" : ["ftm", "base", "sonic", "bsc", "blast", "plasma"],
        },
      ]
    },
    {
      "title": "Decentralized Exchanges",
      "tiles": [
        {
          "name": "E3",
          "description": "Zero-Slippage Liquidity Book AMM Engine with User-Customizable Liquidity Shape creator. Suitable for professional market makers seeking highest Capital Efficiency & fine-grained Order-Book control.",
          "url": "https://eliteness.network/e3",
          "image": "https://ftm.guru/icons/e3.png",
          "background": "linear-gradient(45deg, #07f7,#005)",
          "subicons" : ["ftm", "base", "arb1"],
        },
        {
          "name": "THICK",
          "description": "Thick introduced the concept of Protocol-Agnostic Concentrated Liquidity into DeFi, empowering it to Distribute shared, Flywheeled self-incentivising Liquidity across a multitude of plugged-in protocols.",
          "url": "https://eliteness.network/thick",
          "image": "https://ftm.guru/icons/thick.png",
          "background": "linear-gradient(45deg, #002,#555)",
          "subicons" : ["ftm", "base", "arb1","sonic"],
        },
        {
          "name": "2THICK",
          "description": "The Second iteration of our THICK DEX with Tick-Spacing based pool determination as well as automatable Dynamic Fees configurable for each pool individually to raise Capital Efficiency!",
          "url": "https://eliteness.network/thick",
          "image": "https://ftm.guru/icons/thick.png",
          "background": "linear-gradient(45deg, #002,#555)",
          "subicons" : ["ftm", "base", "arb1","sonic"],
        },
        {
          "name": "V.A.X.",
          "description": "<b>V</b>alue <b>A</b>dded E<b>x</b>change introduces Solidly-like Fees-Liquidity separations into a Sushi-like core.",
          "url": "https://vax.eliteness.network",
          "image": "https://ftm.guru/icons/vax.svg",
          "background": "linear-gradient(135deg, #0033,#f03)",
          "subicons" : ["mtv"],
        },
        {
          "name": "ABcDeFx.",
          "description": "<b>A</b> <b>B</b>lock<b>c</b>hain <b>D</b>ecentralized <b>E</b>xchange & <b>F</b>orE<b>x</b> is a user-friendly StableSwap AMM DEX.",
          "url": "https://abcdefx.eliteness.network",
          "image": "https://ftm.guru/icons/abcdefx.png",
          "background": "linear-gradient(135deg, black,blue)",
          "subicons" : ["ftm", "ech", "kcc", "mtv", "kava", "sonic"],
        },
        {
          "name": "Dexchelon",
          "description": "On-chain DEX Aggregator with JIT liquidity procurement and PMM pools.",
          "url": "https://ech.eliteness.network/dexch",
          "image": "https://ftm.guru/icons/ech.svg",
          "background": "linear-gradient(135deg, #0e0e32,#0d7676)",
          "subicons" : ["ech"],
        },
        {
          "name": "Solidly Extended",
          "description": "Solidly Extended adds support for Fee-on-Transfer tokens, Rebase, reflection & other exotic assets to Native Solidly.",
          "url": "https://ftm.guru/solidly",
          "image": "https://ftm.guru/icons/solidly.svg",
          "background": "linear-gradient(315deg, #0e0e32,#0d7676)",
          "subicons" : ["ftm"],
        },
        {
          "name": "Equalizer Fantom Mirror",
          "description": "Alternative UI Mirror for the Equalizer.exchange Liquidity Hub on Fantom.",
          "url": "https://equal.eliteness.network",
          "image": "https://ftm.guru/icons/equal.png",
          "background": "linear-gradient(15deg, #01011d,#076bd865)",
          "subicons" : ["ftm"],
        },
        {
          "name": "Equity Fantom Mirror",
          "description": "Alternative UI Mirror for the Equity.Equalizer.exchange Oracle-driven DEX on Fantom.",
          "url": "https://equity.eliteness.network",
          "image": "https://ftm.guru/icons/equity.png",
          "background": "linear-gradient(15deg, #01011d,#076bd865)",
          "subicons" : ["ftm"],
        },
        {
          "name": "Equalizer Base Mirror",
          "description": "Alternative UI Mirror for the Base.Equalizer.exchange (SCALE) Liquidity Hub on Base.",
          "url": "https://equal.eliteness.network",
          "image": "https://ftm.guru/icons/scale.png",
          "background": "linear-gradient(15deg, #01011d,#076bd865)",
          "subicons" : ["ftm"],
        }
      ]
    },
    {
      "title": "Lending & Borrowing",
      "tiles": [
        {
          "name": "ELMA",
          "description": "<b>Elite Lending Market Aggregator</b> can Turbocharge your Lending Market Yields by separating your Principal Tokens (PT) from its Lending Yield (virtual YT) and tapping into the Earnings Flywheel.",
          "url": "https://eliteness.network/elma",
          "image": "https://ftm.guru/icons/bank.svg",
          "background": "linear-gradient(135deg,#777,#000)",
          "subicons" : ["ftm"],
        },
        {
          "name": "venft app",
          "description": "<b>venft app</b> was world's first Lending & Borrowing platform where users could take a loan against their veNFTs such as Thena's veTHE or Retro's veRETRO.",
          "url": "https://eliteness.network/venftapp/retro",
          "image": "https://ftm.guru/icons/solidly.svg",
          "background": "linear-gradient(#604, #070a22)",
          "subicons" : ["bsc", "pol"],
        }
      ]
    },
    {
      "title": "Yield Farming & Optimization",
      "tiles": [
        {
          "name": "ERC4626 App",
          "description": "A universal UI to mint & redeem all ERC4626 assets on all chains!",
          "url": "https://eliteness.network/erc4626",
          "image": "https://ftm.guru/icons/erc4626.png",
          "background": "linear-gradient(235deg, navy, black)",
          "subicons" : [],
        },
        {
          "name": "Fertilizer v1",
          "description": "Automatic Liquidity Management (ALM) Protocol with Advanced Dynamic Liquidity-Shape Management on Fantom.",
          "url": "https://eliteness.network/fertilizer",
          "image": "https://ftm.guru/icons/1f1eb.svg",
          "background": "linear-gradient(235deg, navy, black)",
          "subicons" : ["ftm"],
        },
        {
          "name": "Fertilizer v2",
          "description": "Automatic Liquidity Management (ALM) Protocol with Advanced Dynamic Liquidity-Shape Management on Base.",
          "url": "https://eliteness.network/fertilizer/base",
          "image": "https://ftm.guru/icons/1f1eb.svg",
          "background": "linear-gradient(235deg, black, navy)",
          "subicons" : ["base"],
        },
        {
          "name": "eliteMorphexMLP",
          "description": "Wrapper on Morphex.Trade's MLP for magnified Real Yield and Automated Self-Bribing Meta-pools!",
          "url": "https://eliteness.network/elite-morphex-mlp",
          "image": "https://ftm.guru/icons/eliteMorphexMLP.png",
          "background": "linear-gradient(-45deg, #112247,#110000)",
          "subicons" : ["ftm"],
        },
        {
          "name": "Lite Farmlands",
          "description": "Farming-as-a-Service (FaaS) platform enabling anyone to create a Farming or Staking platform for their assets.",
          "url": "https://eliteness.network/farmlands",
          "image": "https://ftm.guru/icons/farmer.svg",
          "background": "linear-gradient(235deg, #0f7,#105)",
          "subicons" : ["ftm", "mtv"],
        },
        {
          "name": "XELITE",
          "description": "Interest-bearing and Fractionalized ELITE compatible with tax-free DeFi applications.",
          "url": "https://eliteness.network/xelite",
          "image": "https://ftm.guru/icons/64.png",
          "background": "linear-gradient(45deg, #fff7,#fff3)",
          "subicons" : ["ftm"],
        },
        {
          "name": "Kompound",
          "description": "First ever Immutable & Permissionless Yield Compounder & Optimization protocol.",
          "url": "https://ftm.guru/GRAIN",
          "image": "https://ftm.guru/icons/1f33e.svg",
          "background": "linear-gradient(45deg, brown, #da2)",
          "subicons" : ["ftm", "metis", "ech", "mtv"],
        },
        {
          "name": "Yield State",
          "description": "<i>Now Deprecated.</i> Yield Farming platform of ELITE liquidity providers at Sushi & Spooky!",
          "url": "https://ftm.guru/YS",
          "image": "https://ftm.guru/icons/trident.svg",
          "background": "linear-gradient(235deg, #e900f1,#0a090a)",
          "subicons" : ["ftm"],
        }
      ]
    },
    {
      "title": "Liquid Staking Derivatives",
      "tiles": [
        {
          "name": "MCLB Lockless mFTM",
          "description": "Liquid-Staking Token (LST) for FTM Locked on Millenium Club Validator Nodes 37 & 63 on Fantom Opera Blockchain.",
          "url": "https://eliteness.network/mftm",
          "image": "https://ftm.guru/icons/mftm.png",
          "background": "linear-gradient(45deg,#112,#345)",
          "subicons" : ["ftm"],
        },
        {
          "name": "Lockless SWKAVA",
          "description": "Liquid-Staking Token (LST) for KAVA Locked on our Validator Nodes for Cosmos+EVM Kava Network Mainnet.",
          "url": "https://eliteness.network/lockless",
          "image": "https://ftm.guru/icons/swkava.svg",
          "background": "linear-gradient(45deg,#320000,red)",
          "subicons" : ["kava"],
        },
        {
          "name": "Lockless SWECH",
          "description": "Liquid-Staking Token (LST) for ECH Locked on our Echelon Validator Nodes.",
          "url": "https://ech.eliteness.network/lockless",
          "image": "https://ftm.guru/icons/lockless.svg",
          "background": "linear-gradient(45deg, #360036, #b0f)",
          "subicons" : ["ech"],
        }
      ]
    },
    {
      "title": "Financial NFTs & veNFTs",
      "tiles": [
        {
          "name": "eLOCKS",
          "description": "Revolutionizing Protocol-owned Liquidity with Tokenizing Gauged Principal & Yields using On-chain Fully Dynamic Financial NFTs.",
          "url": "https://eliteness.network/elocks",
          "image": "https://ftm.guru/icons/1f510.svg",
          "background": "linear-gradient(-180deg,#00F,#00f7)",
          "subicons" : ["ftm", "base"],
        },
        {
          "name": "VeNFT A.M.M.",
          "description": "veN AMM is a DEX for trading EQUAL veNFTs permissionlessly, 24x7 against Fungible + Non-fungible Hybrid Liquidity pool on Fantom.",
          "url": "https://ftm.guru/equalizer",
          "image": "https://ftm.guru/icons/equal.png",
          "background": "linear-gradient(135deg, #77f3, #7ff7)",
          "subicons" : ["ftm", "base"],
        },
        {
          "name": "veLiquidity.xyz",
          "description": "veLiquidity is a modern veN AMM implementation for trading SCALE veNFTs permissionlessly, 24x7 against Fungible + Non-fungible Hybrid Liquidity pool on Base.",
          "url": "https://veLiquidity.xyz",
          "image": "https://ftm.guru/icons/veliquidity.svg",
          "background": "linear-gradient(135deg, #0d0f15, #1d2432)",
          "subicons" : ["ftm", "base"],
        }
      ]
    },
    {
      "title": "GameFi",
      "tiles": [
        {
          "name": "DeGam",
          "description": "The first ever Casino on Fantom, born in 2021! First Telegram-to-Blockchain GameFi Dapp on Fantom.",
          "url": "https://ftm.guru/degam",
          "image": "https://ftm.guru/icons/m2.png",
          "background": "linear-gradient(45deg, #000, #022627)",
          "subicons" : ["ftm"],
        },
        {
          "name": "Kucino Casino",
          "description": "12+ Gaming Titles for immersive GambleFi experience on the Kucoin Chain!",
          "url": "https://kcc.eliteness.network/kucino",
          "image": "https://ftm.guru/icons/kucino.png",
          "background": "linear-gradient(to bottom,rgba(0,255,127,1),rgba(1,240,255,1))",
          "color": "#000",
          "subicons" : ["kcc"],
        }
      ]
    },
    {
      "title": "Comparative Analytics and more",
      "tiles": [
        {
          "name": "Compare Solidly Forks",
          "description": "In-depth side-by-side comparision of the Top Solidly Forks",
          "url": "https://eliteness.network/compare-solidly",
          "image": "https://ftm.guru/icons/solidly.svg",
          "background": "linear-gradient(45deg,#320000,red)"
        },
        {
          "name": "Compare Liquid Wrappers",
          "description": "Exit Liquidity Charts for Liquid Wrappers for Solidly Forks!",
          "url": "https://eliteness.network/compare-wrappers",
          "image": "https://ftm.guru/icons/solidly.svg",
          "background": "linear-gradient(45deg,#320000,red)"
        }
      ]
    },
    {
      "title": "Upcoming Projects",
      "tiles": [
        {
          "name": "3ur0",
          "image": "https://ftm.guru/icons/1f914.svg",
          "background": "linear-gradient(45deg,#999,#555)"
        },
        {
          "name": "Buckets",
          "image": "https://ftm.guru/icons/1f914.svg",
          "background": "linear-gradient(45deg,#999,#555)"
        },
        {
          "name": "Optional",
          "image": "https://ftm.guru/icons/1f914.svg",
          "background": "linear-gradient(45deg,#999,#555)"
        }
      ]
    },
    {
      "title": "And more!",
      "tiles": [
        {
          "name": "Explore more on our previous homepage!",
          "url": "https://eliteness.network/old",
          "image": "https://ftm.guru/icons/64.png",
          "background": "linear-gradient(45deg,#0af,#0fa)",
          "color": "#000",
        },
        {
          "name": "Deep dive into our Documentation Site to learn more!",
          "url": "https://ftm.guru/docs",
          "image": "https://ftm.guru/icons/docs.svg",
          "background": "linear-gradient(45deg,#000,#012)",
        },
        {
          "name": "Treasury Tracker!",
          "url": "https://eliteness.network/treasury",
          "image": "https://ftm.guru/icons/1f451.svg",
          "background": "linear-gradient(45deg,#fff,#7af)",
          "color": "#000",
        },
        {
          "name": "Interact with our community on Discord!",
          "url": "https://discord.gg/QpyfMarNrV",
          "image": "https://ftm.guru/icons/discord.svg",
          "background": "linear-gradient(45deg,#fff,#5865f2)",
          "color": "#000",
        },
        {
          "name": "Follow our latest adventures on Twitter!",
          "url": "https://twitter.com/ftm1337",
          "image": "https://ftm.guru/icons/twitter.svg",
          "background": "linear-gradient(45deg,#fff,#7af)",
          "color": "#000",
        }
      ]
    }
  ]
}







const ICONS = {
  //[
	"eth" : "https://ftm.guru/icons/eth.svg",
	"bsc" : "https://ftm.guru/icons/bnb.svg",
	"arb1" : "https://ftm.guru/icons/arb1.svg",
	"ftm" : "https://ftm.guru/icons/ftm.svg",
	"ech" : "https://ftm.guru/icons/ech.svg",
	"kava" : "https://ftm.guru/icons/kava.svg",
	"mtv" : "https://ftm.guru/icons/mtv.png",
	"kcc" : "https://ftm.guru/icons/kcs.svg",
	"sonic" : "https://ftm.guru/icons/sonic.png",
	"pol" : "https://ftm.guru/icons/matic.svg",
	"avax" : "https://ftm.guru/icons/avax.svg",
	"base" : "https://ftm.guru/icons/base.svg",
	"metis" : "https://ftm.guru/icons/metis.svg",
	"blast" : "https://ftm.guru/icons/blast.svg",
	"bera" : "https://ftm.guru/icons/bera.svg",
	"optimism" : "https://ftm.guru/icons/optimism.svg",
	"hyperevm" : "https://ftm.guru/icons/hype.png",
	"linea" : "https://ftm.guru/icons/linea.png",
	"fraxtal" : "https://ftm.guru/icons/frax.svg",
	"plasma" : "https://ftm.guru/icons/plasma.svg"
  //]
}



document.addEventListener('DOMContentLoaded', function() {
    paintTiles(DATA);
    dexstats();
});

async function dexstats() {
	console.log("ll")
	llama = await (await fetch("https://api.llama.fi/tvl/guru-network-dao")).json();
	$("topstat-tvl").innerHTML = "$" + llama.toLocaleString(undefined,{maximumFractionDigits:0}) + " in TVL";

	return;
}

function paintTiles(data) {
  const container = document.createElement('div');

  data.categories.forEach(category => {
    const categoryTitle = document.createElement('h2');
    categoryTitle.className = 'cat-h2';
    categoryTitle.textContent = category.title;
    container.appendChild(categoryTitle);

    const tilesWrapper = document.createElement('div');
    tilesWrapper.className = 'wrapper-tiles';

    category.tiles.forEach(tile => {
      const tileDiv = document.createElement('div');
      tileDiv.className = 'wrapper-tile';

      const tileColor = (tile.color) ? tile.color : "white";
      tileDiv.style.background = tile.background;
      tileDiv.style.color = tileColor;

      if(tile.url) {
        tileDiv.onclick = () => window.open(tile.url);
      }

      const tileTitle = document.createElement('div');
      tileTitle.className = 'wrapper-tile-title';


      if(tile.image) {
        const tileImage = document.createElement('img');
        tileImage.src = tile.image;
        tileImage.alt = tile.name;
        tileTitle.appendChild(tileImage);
      }

      const titleText = document.createElement('div');
      titleText.innerHTML = tile.name ? `<div class="subhead-big" style="color:${tileColor};">${tile.name}</div>` : "";


	  const chainsWrapper = document.createElement('div');
      if(tile.subicons) {
		chainsWrapper.className = 'subhead-small wrapper-chains';
        tile.subicons.forEach(i => {
          const chainImg = document.createElement('img');
          chainImg.src = ICONS[i];
          chainsWrapper.appendChild(chainImg);
        });
        titleText.appendChild(chainsWrapper);
      }

      tileTitle.appendChild(titleText);


      tileDiv.appendChild(tileTitle);


      const tileDesc = document.createElement('div');
      tileDesc.className = 'wrapper-desc';
      tileDesc.style.color = tileColor;
      tileDesc.innerHTML = tile.description ? tile.description : "" ;

      tileDiv.appendChild(tileDesc);
      tilesWrapper.appendChild(tileDiv);
    });

    container.appendChild(tilesWrapper);
  });

  document.getElementById('mainstage').appendChild(container);
}