From 4a09d3c62d0388dc32e3b29ceadfdf986e7a52dc Mon Sep 17 00:00:00 2001
From: lza_menace <lza_menace@protonmail.com>
Date: Sun, 9 Jan 2022 09:18:53 -0800
Subject: [PATCH] updating javascript with latest contract funcs, starting ux
 improvements

---
 suchwowx/config.py                    | 871 ++++++++++++++------------
 suchwowx/templates/includes/web3.html |   3 +
 suchwowx/templates/meme.html          | 215 +++++--
 3 files changed, 638 insertions(+), 451 deletions(-)

diff --git a/suchwowx/config.py b/suchwowx/config.py
index 8468944..c9d10f6 100644
--- a/suchwowx/config.py
+++ b/suchwowx/config.py
@@ -22,661 +22,736 @@ TEMPLATES_AUTO_RELOAD = getenv('TEMPLATES_AUTO_RELOAD', True)
 
 # Contract
 CONTRACT_TESTNET = getenv('TESTNET', True)
-CONTRACT_ADDRESS = '0x9797afc5d0258704109f71109188fdcba19c24c2'  # Fuji
+if CONTRACT_TESTNET:
+    WOWX_ADDRESS = '0xc6B039b1e0be1ba0B433f319898438E782E5dEBA'      # WOWX testnet
+    CONTRACT_ADDRESS = '0xE1b6483729557E539cfD9c3Bdb754C54c16cFCe7'  # SWX testnet
+else:
+    WOWX_ADDRESS = '0xba5dc7e77d150816b758e9826fcad2d74820e379'      # WOWX mainnet
+    CONTRACT_ADDRESS = ''  # SWX mainnet
 CONTRACT_ABI = [
   {
-    'inputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'constructor'
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "wowxAddress",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
   },
   {
-    'anonymous': False,
-    'inputs': [
+    "anonymous": False,
+    "inputs": [
       {
-        'indexed': True,
-        'internalType': 'address',
-        'name': 'owner',
-        'type': 'address'
+        "indexed": True,
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
       },
       {
-        'indexed': True,
-        'internalType': 'address',
-        'name': 'approved',
-        'type': 'address'
+        "indexed": True,
+        "internalType": "address",
+        "name": "approved",
+        "type": "address"
       },
       {
-        'indexed': True,
-        'internalType': 'uint256',
-        'name': 'tokenId',
-        'type': 'uint256'
+        "indexed": True,
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
       }
     ],
-    'name': 'Approval',
-    'type': 'event'
+    "name": "Approval",
+    "type": "event"
   },
   {
-    'anonymous': False,
-    'inputs': [
+    "anonymous": False,
+    "inputs": [
       {
-        'indexed': True,
-        'internalType': 'address',
-        'name': 'owner',
-        'type': 'address'
+        "indexed": True,
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
       },
       {
-        'indexed': True,
-        'internalType': 'address',
-        'name': 'operator',
-        'type': 'address'
+        "indexed": True,
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
       },
       {
-        'indexed': False,
-        'internalType': 'bool',
-        'name': 'approved',
-        'type': 'bool'
+        "indexed": False,
+        "internalType": "bool",
+        "name": "approved",
+        "type": "bool"
       }
     ],
-    'name': 'ApprovalForAll',
-    'type': 'event'
+    "name": "ApprovalForAll",
+    "type": "event"
   },
   {
-    'anonymous': False,
-    'inputs': [
+    "anonymous": False,
+    "inputs": [
       {
-        'indexed': True,
-        'internalType': 'address',
-        'name': 'previousOwner',
-        'type': 'address'
+        "indexed": True,
+        "internalType": "address",
+        "name": "previousOwner",
+        "type": "address"
       },
       {
-        'indexed': True,
-        'internalType': 'address',
-        'name': 'newOwner',
-        'type': 'address'
+        "indexed": True,
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
       }
     ],
-    'name': 'OwnershipTransferred',
-    'type': 'event'
+    "name": "OwnershipTransferred",
+    "type": "event"
   },
   {
-    'anonymous': False,
-    'inputs': [
+    "anonymous": False,
+    "inputs": [
       {
-        'indexed': True,
-        'internalType': 'address',
-        'name': 'from',
-        'type': 'address'
+        "indexed": True,
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
       },
       {
-        'indexed': True,
-        'internalType': 'address',
-        'name': 'to',
-        'type': 'address'
+        "indexed": True,
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
       },
       {
-        'indexed': True,
-        'internalType': 'uint256',
-        'name': 'tokenId',
-        'type': 'uint256'
+        "indexed": True,
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
       }
     ],
-    'name': 'Transfer',
-    'type': 'event'
+    "name": "Transfer",
+    "type": "event"
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'address',
-        'name': 'to',
-        'type': 'address'
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
       },
       {
-        'internalType': 'uint256',
-        'name': 'tokenId',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
       }
     ],
-    'name': 'approve',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "name": "approve",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'address',
-        'name': 'owner',
-        'type': 'address'
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
       }
     ],
-    'name': 'balanceOf',
-    'outputs': [
+    "name": "balanceOf",
+    "outputs": [
       {
-        'internalType': 'uint256',
-        'name': '',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [],
-    'name': 'contractCreator',
-    'outputs': [
+    "inputs": [],
+    "name": "contractCreator",
+    "outputs": [
       {
-        'internalType': 'string',
-        'name': '',
-        'type': 'string'
+        "internalType": "string",
+        "name": "",
+        "type": "string"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [],
-    'name': 'contractTipCutPercent',
-    'outputs': [
+    "inputs": [],
+    "name": "contractTipCutPercent",
+    "outputs": [
       {
-        'internalType': 'uint256',
-        'name': '',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [],
-    'name': 'contractVersion',
-    'outputs': [
+    "inputs": [],
+    "name": "contractVersion",
+    "outputs": [
       {
-        'internalType': 'string',
-        'name': '',
-        'type': 'string'
+        "internalType": "string",
+        "name": "",
+        "type": "string"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'uint256',
-        'name': 'tokenId',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
       }
     ],
-    'name': 'getApproved',
-    'outputs': [
+    "name": "getApproved",
+    "outputs": [
       {
-        'internalType': 'address',
-        'name': '',
-        'type': 'address'
+        "internalType": "address",
+        "name": "",
+        "type": "address"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'address',
-        'name': 'owner',
-        'type': 'address'
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
       },
       {
-        'internalType': 'address',
-        'name': 'operator',
-        'type': 'address'
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
       }
     ],
-    'name': 'isApprovedForAll',
-    'outputs': [
+    "name": "isApprovedForAll",
+    "outputs": [
       {
-        'internalType': 'bool',
-        'name': '',
-        'type': 'bool'
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'string',
-        'name': '',
-        'type': 'string'
+        "internalType": "string",
+        "name": "",
+        "type": "string"
       }
     ],
-    'name': 'metadataTokenId',
-    'outputs': [
+    "name": "metadataTokenId",
+    "outputs": [
       {
-        'internalType': 'uint256',
-        'name': '',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [],
-    'name': 'name',
-    'outputs': [
+    "inputs": [],
+    "name": "name",
+    "outputs": [
       {
-        'internalType': 'string',
-        'name': '',
-        'type': 'string'
+        "internalType": "string",
+        "name": "",
+        "type": "string"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [],
-    'name': 'owner',
-    'outputs': [
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
       {
-        'internalType': 'address',
-        'name': '',
-        'type': 'address'
+        "internalType": "address",
+        "name": "",
+        "type": "address"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'uint256',
-        'name': 'tokenId',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
       }
     ],
-    'name': 'ownerOf',
-    'outputs': [
+    "name": "ownerOf",
+    "outputs": [
       {
-        'internalType': 'address',
-        'name': '',
-        'type': 'address'
+        "internalType": "address",
+        "name": "",
+        "type": "address"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [],
-    'name': 'publisherTipCutPercent',
-    'outputs': [
+    "inputs": [],
+    "name": "publisherTipCutPercent",
+    "outputs": [
       {
-        'internalType': 'uint256',
-        'name': '',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [],
-    'name': 'renounceOwnership',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "inputs": [],
+    "name": "renounceOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'address',
-        'name': 'from',
-        'type': 'address'
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
       },
       {
-        'internalType': 'address',
-        'name': 'to',
-        'type': 'address'
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
       },
       {
-        'internalType': 'uint256',
-        'name': 'tokenId',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
       }
     ],
-    'name': 'safeTransferFrom',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "name": "safeTransferFrom",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'address',
-        'name': 'from',
-        'type': 'address'
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
       },
       {
-        'internalType': 'address',
-        'name': 'to',
-        'type': 'address'
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
       },
       {
-        'internalType': 'uint256',
-        'name': 'tokenId',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
       },
       {
-        'internalType': 'bytes',
-        'name': '_data',
-        'type': 'bytes'
+        "internalType": "bytes",
+        "name": "_data",
+        "type": "bytes"
       }
     ],
-    'name': 'safeTransferFrom',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "name": "safeTransferFrom",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'address',
-        'name': 'operator',
-        'type': 'address'
+        "internalType": "address",
+        "name": "operator",
+        "type": "address"
       },
       {
-        'internalType': 'bool',
-        'name': 'approved',
-        'type': 'bool'
+        "internalType": "bool",
+        "name": "approved",
+        "type": "bool"
       }
     ],
-    'name': 'setApprovalForAll',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "name": "setApprovalForAll",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'bytes4',
-        'name': 'interfaceId',
-        'type': 'bytes4'
+        "internalType": "bytes4",
+        "name": "interfaceId",
+        "type": "bytes4"
       }
     ],
-    'name': 'supportsInterface',
-    'outputs': [
+    "name": "supportsInterface",
+    "outputs": [
       {
-        'internalType': 'bool',
-        'name': '',
-        'type': 'bool'
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [],
-    'name': 'symbol',
-    'outputs': [
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [
       {
-        'internalType': 'string',
-        'name': '',
-        'type': 'string'
+        "internalType": "string",
+        "name": "",
+        "type": "string"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'uint256',
-        'name': '',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
       }
     ],
-    'name': 'tokenMeme',
-    'outputs': [
+    "name": "tokenMeme",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "publisherTipsAVAX",
+        "type": "uint256"
+      },
       {
-        'internalType': 'uint256',
-        'name': 'publisherTipsAVAX',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "creatorTipsAVAX",
+        "type": "uint256"
       },
       {
-        'internalType': 'uint256',
-        'name': 'creatorTipsAVAX',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "contractTipsAVAX",
+        "type": "uint256"
       },
       {
-        'internalType': 'uint256',
-        'name': 'contractTipsAVAX',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "publisherTipsWOWX",
+        "type": "uint256"
       },
       {
-        'internalType': 'address',
-        'name': 'publisherAddress',
-        'type': 'address'
+        "internalType": "uint256",
+        "name": "creatorTipsWOWX",
+        "type": "uint256"
       },
       {
-        'internalType': 'address',
-        'name': 'creatorAddress',
-        'type': 'address'
+        "internalType": "uint256",
+        "name": "contractTipsWOWX",
+        "type": "uint256"
       },
       {
-        'internalType': 'string',
-        'name': 'metadataIPFSHash',
-        'type': 'string'
+        "internalType": "address",
+        "name": "publisherAddress",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "creatorAddress",
+        "type": "address"
+      },
+      {
+        "internalType": "string",
+        "name": "metadataIPFSHash",
+        "type": "string"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'address',
-        'name': 'from',
-        'type': 'address'
+        "internalType": "address",
+        "name": "from",
+        "type": "address"
       },
       {
-        'internalType': 'address',
-        'name': 'to',
-        'type': 'address'
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
       },
       {
-        'internalType': 'uint256',
-        'name': 'tokenId',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
       }
     ],
-    'name': 'transferFrom',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "name": "transferFrom",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'address',
-        'name': 'newOwner',
-        'type': 'address'
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
       }
     ],
-    'name': 'transferOwnership',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "name": "transferOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'address',
-        'name': '',
-        'type': 'address'
+        "internalType": "address",
+        "name": "",
+        "type": "address"
       }
     ],
-    'name': 'userProfile',
-    'outputs': [
+    "name": "userProfile",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "wowneroAddress",
+        "type": "string"
+      },
       {
-        'internalType': 'string',
-        'name': 'wowneroAddress',
-        'type': 'string'
+        "internalType": "string",
+        "name": "userHandle",
+        "type": "string"
       },
       {
-        'internalType': 'string',
-        'name': 'userHandle',
-        'type': 'string'
+        "internalType": "string",
+        "name": "metadataIPFSHash",
+        "type": "string"
       },
       {
-        'internalType': 'string',
-        'name': 'metadataIPFSHash',
-        'type': 'string'
+        "internalType": "uint256",
+        "name": "tippedAVAX",
+        "type": "uint256"
       },
       {
-        'internalType': 'uint256',
-        'name': 'tippedAVAX',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "tippedWOWX",
+        "type": "uint256"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
+  },
+  {
+    "inputs": [],
+    "name": "withdraw",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [],
-    'name': 'withdraw',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "percent",
+        "type": "uint256"
+      }
+    ],
+    "name": "setContractTipCut",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'uint256',
-        'name': 'percent',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "percent",
+        "type": "uint256"
       }
     ],
-    'name': 'setContractTipCut',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "name": "setPublisherTipCut",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
       {
-        'internalType': 'uint256',
-        'name': 'percent',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
       }
     ],
-    'name': 'setPublisherTipCut',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   },
   {
-    'inputs': [],
-    'name': 'totalSupply',
-    'outputs': [
+    "inputs": [
       {
-        'internalType': 'uint256',
-        'name': '',
-        'type': 'uint256'
+        "internalType": "string",
+        "name": "wowneroAddress",
+        "type": "string"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "name": "setUserWowneroAddress",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'string',
-        'name': 'wowneroAddress',
-        'type': 'string'
+        "internalType": "string",
+        "name": "handle",
+        "type": "string"
       }
     ],
-    'name': 'setUserWowneroAddress',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "name": "setUserHandle",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'string',
-        'name': 'handle',
-        'type': 'string'
+        "internalType": "string",
+        "name": "metadataIPFSHash",
+        "type": "string"
       }
     ],
-    'name': 'setUserHandle',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "name": "setUserMetadata",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [
+      {
+        "internalType": "string",
+        "name": "metadataIPFSHash",
+        "type": "string"
+      },
       {
-        'internalType': 'string',
-        'name': 'metadataIPFSHash',
-        'type': 'string'
+        "internalType": "address",
+        "name": "creatorAddress",
+        "type": "address"
       }
     ],
-    'name': 'setUserMetadata',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "name": "mint",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'string',
-        'name': 'metadataIPFSHash',
-        'type': 'string'
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
       },
       {
-        'internalType': 'address',
-        'name': 'creatorAddress',
-        'type': 'address'
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
       }
     ],
-    'name': 'mint',
-    'outputs': [],
-    'stateMutability': 'nonpayable',
-    'type': 'function'
+    "name": "tipAVAX",
+    "outputs": [],
+    "stateMutability": "payable",
+    "type": "function",
+    "payable": True
   },
   {
-    'inputs': [
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
+      },
       {
-        'internalType': 'uint256',
-        'name': 'tokenId',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "amount",
+        "type": "uint256"
       }
     ],
-    'name': 'tipAVAX',
-    'outputs': [],
-    'stateMutability': 'payable',
-    'type': 'function'
+    "name": "tipWOWX",
+    "outputs": [],
+    "stateMutability": "payable",
+    "type": "function",
+    "payable": True
   },
   {
-    'inputs': [
+    "inputs": [
       {
-        'internalType': 'uint256',
-        'name': 'tokenId',
-        'type': 'uint256'
+        "internalType": "uint256",
+        "name": "tokenId",
+        "type": "uint256"
       }
     ],
-    'name': 'tokenURI',
-    'outputs': [
+    "name": "tokenURI",
+    "outputs": [
       {
-        'internalType': 'string',
-        'name': '',
-        'type': 'string'
+        "internalType": "string",
+        "name": "",
+        "type": "string"
       }
     ],
-    'stateMutability': 'view',
-    'type': 'function'
+    "stateMutability": "view",
+    "type": "function",
+    "constant": True
   }
 ]
+WOWX_ABI = [
+{"inputs":[],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":False,"inputs":[{"indexed":True,"internalType":"address","name":"owner","type":"address"},{"indexed":True,"internalType":"address","name":"spender","type":"address"},{"indexed":False,"internalType":"uint256","name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":False,"inputs":[{"indexed":True,"internalType":"address","name":"delegator","type":"address"},{"indexed":True,"internalType":"address","name":"fromDelegate","type":"address"},{"indexed":True,"internalType":"address","name":"toDelegate","type":"address"}],"name":"DelegateChanged","type":"event"},{"anonymous":False,"inputs":[{"indexed":True,"internalType":"address","name":"delegate","type":"address"},{"indexed":False,"internalType":"uint256","name":"previousBalance","type":"uint256"},{"indexed":False,"internalType":"uint256","name":"newBalance","type":"uint256"}],"name":"DelegateVotesChanged","type":"event"},{"anonymous":False,"inputs":[{"indexed":True,"internalType":"address","name":"previousOwner","type":"address"},{"indexed":True,"internalType":"address","name":"newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"},{"anonymous":False,"inputs":[{"indexed":True,"internalType":"address","name":"from","type":"address"},{"indexed":True,"internalType":"address","name":"to","type":"address"},{"indexed":False,"internalType":"uint256","name":"value","type":"uint256"}],"name":"Transfer","type":"event"},{"inputs":[],"name":"DOMAIN_SEPARATOR","outputs":[{"internalType":"bytes32","name":"","type":"bytes32"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"owner","type":"address"},{"internalType":"address","name":"spender","type":"address"}],"name":"allowance","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"approve","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"}],"name":"balanceOf","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"burn","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"burnFrom","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"},{"internalType":"uint32","name":"pos","type":"uint32"}],"name":"checkpoints","outputs":[{"components":[{"internalType":"uint32","name":"fromBlock","type":"uint32"},{"internalType":"uint224","name":"votes","type":"uint224"}],"internalType":"struct ERC20Votes.Checkpoint","name":"","type":"tuple"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"decimals","outputs":[{"internalType":"uint8","name":"","type":"uint8"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"subtractedValue","type":"uint256"}],"name":"decreaseAllowance","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"delegatee","type":"address"}],"name":"delegate","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"delegatee","type":"address"},{"internalType":"uint256","name":"nonce","type":"uint256"},{"internalType":"uint256","name":"expiry","type":"uint256"},{"internalType":"uint8","name":"v","type":"uint8"},{"internalType":"bytes32","name":"r","type":"bytes32"},{"internalType":"bytes32","name":"s","type":"bytes32"}],"name":"delegateBySig","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"}],"name":"delegates","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"uint256","name":"blockNumber","type":"uint256"}],"name":"getPastTotalSupply","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"},{"internalType":"uint256","name":"blockNumber","type":"uint256"}],"name":"getPastVotes","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"}],"name":"getVotes","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"addedValue","type":"uint256"}],"name":"increaseAllowance","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"mint","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"name","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"owner","type":"address"}],"name":"nonces","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"}],"name":"numCheckpoints","outputs":[{"internalType":"uint32","name":"","type":"uint32"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"owner","type":"address"},{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"value","type":"uint256"},{"internalType":"uint256","name":"deadline","type":"uint256"},{"internalType":"uint8","name":"v","type":"uint8"},{"internalType":"bytes32","name":"r","type":"bytes32"},{"internalType":"bytes32","name":"s","type":"bytes32"}],"name":"permit","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"renounceOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"symbol","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"totalSupply","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"recipient","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"transfer","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"sender","type":"address"},{"internalType":"address","name":"recipient","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"}],"name":"transferFrom","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"}]
 
 
 # Logging
diff --git a/suchwowx/templates/includes/web3.html b/suchwowx/templates/includes/web3.html
index 226e88c..2df7ab9 100644
--- a/suchwowx/templates/includes/web3.html
+++ b/suchwowx/templates/includes/web3.html
@@ -16,8 +16,11 @@
   // Web3 and smart contract details
   let contractABI = {{ config.CONTRACT_ABI | tojson }};
   let contractAddress = "{{ config.CONTRACT_ADDRESS }}";
+  let wowxABI = {{ config.WOWX_ABI | tojson }};
+  let wowxAddress = "{{ config.WOWX_ADDRESS }}";
   const w3 = new Web3(Web3.givenProvider);
   const contract = new w3.eth.Contract(contractABI, contractAddress);
+  const wowxContract = new w3.eth.Contract(wowxABI, wowxAddress);
 
   async function getMetamaskAccount() {
     const accounts = await window.ethereum.request({
diff --git a/suchwowx/templates/meme.html b/suchwowx/templates/meme.html
index 1bec73e..de1c018 100644
--- a/suchwowx/templates/meme.html
+++ b/suchwowx/templates/meme.html
@@ -30,33 +30,23 @@
             {% endif %}
             {% endif %}
             <br/>
-            <p>Title: <strong>{{ meme.title }}</strong></p>
-            <p>Description: <strong>{{ meme.description }}</strong></p>
-            <p>Poster Address: <a href="{{ url_for('user.show', handle=meme.user.handle) }}">{{ meme.user.handle }}</a></p>
+            <p><strong>Meme ID:</strong> <code>{{ meme }}</code></p>
+            <p><strong>Title:</strong> {{ meme.title }}</p>
+            <p><strong>Description:</strong> {{ meme.description }}</p>
+            <p><strong>Poster Address:</strong> <a href="{{ url_for('user.show', handle=meme.user.handle) }}">{{ meme.user.handle }}</a></p>
             {% if meme.user.wownero_address %}
-            <p>Wownero Address: <strong><span style="word-wrap: break-word">{{ meme.user.wownero_address }}</strong></p>
+            <p><strong>Wownero Address:</strong> <span style="word-wrap: break-word">{{ meme.user.wownero_address }}</p>
             {% endif %}
             {% if meme.meta_ipfs_hash %}
-            <p>Meta IPFS: <a href="{{ meta_url }}" target=_self up-preload up-follow=".container">{{ meme.meta_ipfs_hash }}</a></p>
+            <p><strong>Meta IPFS:</strong> <a href="{{ meta_url }}" target=_self>{{ meme.meta_ipfs_hash }}</a></p>
             {% endif %}
             {% if meme.meme_ipfs_hash %}
-            <p>Meme IPFS: <a href="{{ meme_url }}" target=_self up-preload up-follow=".container">{{ meme.meme_ipfs_hash }}</a></p>
+            <p><strong>Meme IPFS:</strong> <a href="{{ meme_url }}" target=_self>{{ meme.meme_ipfs_hash }}</a></p>
             {% endif %}
-            <p>Meme ID: <code>{{ meme }}</code></p>
-            <div id="profileModal" class="modal">
-              <div class="modal-background"></div>
-              <div class="modal-card">
-                <header class="modal-card-head">
-                  <p class="modal-card-title">Tip meme in WOW</p>
-                  <button class="delete" aria-label="close" onclick="closeModal('profileModal')" id="closeModal"></button>
-                </header>
-                <section class="modal-card-body">
-                  <p style="word-wrap: break-word;">Wownero Address: <span id="wowneroAddress">{{ meme.user.wownero_address | default('?') }}</span></p>
-                </section>
-                <footer class="modal-card-foot">
-                </footer>
-              </div>
-            </div>
+            <p><strong>WOW Tips:</strong> <span id="wowTips">?</span></p>
+            <p><strong>WOWX Tips:</strong> <span id="wowxTips">?</span></p>
+            <p><strong>AVAX Tips:</strong> <span id="wowxTips">?</span></p>
+
             {% if not meme.approved %}
             <br/>
             <div class="columns">
@@ -69,23 +59,80 @@
             </div>
             {% else %}
             <br/>
-              <div id="tipButtons" class="columns" style="display:none;">
-                <!-- <div class="column">
-                  <a class="button is-info is-12 column" onclick="tipAVAX()">Tip AVAX</a>
-                </div>
-                <div class="column">
-                  <a class="button is-info is-12 column" onclick="tipWOWX()">Tip WOWX</a>
-                </div> -->
-                <div class="column">
-                  <a class="button is-info is-12 column" onclick="tipWOW()">Tip</a>
-                </div>
+            <div id="tipButtons" class="columns" style="display:none;">
+              <div class="column">
+                <a class="button is-info is-12" onclick="tipWOW()" id="tipWOWButton" style="width:100%;">Tip WOW</a>
+              </div>
+              <div class="column">
+                <a class="button is-info is-12" onclick="tipAVAX()" id="tipAVAXButton" style="width:100%;">Tip AVAX</a>
+              </div>
+              <div class="column">
+                <a class="button is-info is-12" onclick="tipWOWX()" id="tipWOWXButton" style="width:100%;">Tip WOWX</a>
               </div>
-              <div id="mintButton" class="columns" style="display:none;">
-                <div class="column">
-                  <a class="button is-danger is-12 column" onclick="mint()" id="mintButtonLoading">Mint</a>
-                </div>
+            </div>
+            <div id="mintButtons" class="columns" style="display:none;">
+              {% if meme.user.wownero_address %}
+              <div class="column is-one-third">
+                <a class="button is-info" onclick="tipWOW()" id="tipWOWButton" style="width:100%;">Tip WOW</a>
               </div>
+              {% endif %}
+              <div class="column">
+                <a class="button is-danger" onclick="mint()" id="mintButton" style="width:100%;">Mint</a>
+              </div>
+            </div>
             {% endif %}
+
+            <div id="tipWOWModal" class="modal">
+              <div class="modal-background"></div>
+              <div class="modal-card">
+                <header class="modal-card-head">
+                  <p class="modal-card-title">Tip meme in WOW</p>
+                  <button class="delete" aria-label="close" id="closeWOWModal"></button>
+                </header>
+                <section class="modal-card-body">
+                  <p style="word-wrap: break-word;">
+                    <strong>Wownero Address (p2p):</strong>
+                    <span id="wowneroAddress">{{ meme.user.wownero_address | default('?') }}</span>
+                  </p>
+                  </br>
+                  <p>
+                    Funds sent to this address will not be tracked as they are a direct,
+                    p2p transaction on the anonymous, private Wownero network.
+                    Nobody will have visibility into these and will not be shown.
+                  </p>
+                </section>
+                <footer class="modal-card-foot">
+                </footer>
+              </div>
+            </div>
+
+            <div id="tipWOWXModal" class="modal">
+              <div class="modal-background"></div>
+              <div class="modal-card">
+                <header class="modal-card-head">
+                  <p class="modal-card-title">Tip meme in WOWX</p>
+                  <button class="delete" aria-label="close" id="closeWOWXModal"></button>
+                </header>
+                <section class="modal-card-body">
+                  <!-- <p style="word-wrap: break-word;">
+                    <strong>Wownero Address (p2p):</strong>
+                    <span id="wowneroAddress">{{ meme.user.wownero_address | default('?') }}</span>
+                  </p>
+                  </br>
+                  <p>
+                    Funds sent to this address will not be tracked as they are a direct,
+                    p2p transaction on the anonymous, private Wownero network.
+                    Nobody will have visibility into these and will not be shown.
+                  </p> -->
+                  sending a WOWX tip
+                </section>
+                <footer class="modal-card-foot">
+                  <button class="button is-success">Save changes</button>
+                  <button class="button">Cancel</button>
+                </footer>
+              </div>
+            </div>
+
           </div>
         </div>
       {% endif %}
@@ -100,38 +147,99 @@
       if (minted) {
         document.getElementById('tipButtons').style.display = "flex";
       } else {
-        document.getElementById('mintButton').style.display = "flex";
-      }
-      try {
-        _walletAddress = w3.utils.toChecksumAddress('{{ meme.user.public_address }}');
-        const userProfile = await contract.methods.userProfile(_walletAddress).call();
-        console.log(userProfile)
-        if (userProfile.wowneroAddress){document.getElementById('wowneroAddress').innerHTML = userProfile.wowneroAddress};
-      } catch(e) {
-        console.log(e);
+        document.getElementById('mintButtons').style.display = "flex";
       }
+      // try {
+      //   _walletAddress = w3.utils.toChecksumAddress('{{ meme.user.public_address }}');
+      //   const userProfile = await contract.methods.userProfile(_walletAddress).call();
+      //   console.log(userProfile)
+      //   if (userProfile.wowneroAddress){document.getElementById('wowneroAddress').innerHTML = userProfile.wowneroAddress};
+      // } catch(e) {
+      //   console.log(e);
+      // }
     });
 
     async function tipWOW() {
-      document.getElementById('profileModal').classList.add('is-active');
-      document.getElementById('closeModal').onclick = () => {
-        document.getElementById('profileModal').classList.remove('is-active');
+      document.getElementById('tipWOWButton').classList.add('is-loading');
+      document.getElementById('tipWOWModal').classList.add('is-active');
+      document.getElementById('closeWOWModal').onclick = () => {
+        document.getElementById('tipWOWModal').classList.remove('is-active');
+        document.getElementById('tipWOWButton').classList.remove('is-loading');
       }
     }
 
     async function tipAVAX() {
+      document.getElementById('tipAVAXButton').classList.add('is-loading');
       const tokenId = await getTokenID('{{ meme.meta_ipfs_hash }}');
       const walletAddress = await getMetamaskAccount();
+      const tipAmountWei = w3.utils.toWei('.2');
       const gasPrice = await w3.eth.getGasPrice();
-      const gasLimit = await contract.methods.tipAVAX(tokenId).estimateGas({from: walletAddress}, function(err, gas){
+      const gasLimit = await contract.methods.tipAVAX(tokenId, tipAmountWei).estimateGas({from: walletAddress, value: tipAmountWei}, function(err, gas){
         return gas;
       });
-
       try {
         notif(`Tipping meme "{{ meme.id | shorten_address }}" by "{{ meme.user.handle }} ({{ meme.user.public_address | shorten_address }})" to the Avalanche blockchain.`, 'info');
-        let res = await contract.methods.tipAVAX(tokenId).send({
+        let res = await contract.methods.tipAVAX(tokenId, tipAmountWei).send({
+          from: walletAddress,
+          value: tipAmountWei,
+          gasPrice: gasPrice,
+          gas: gasLimit
+        });
+        console.log(res);
+        window.location.href = "";
+      } catch(e) {
+        notif(e.message, 'warning');
+        document.getElementById('tipAVAXButton').classList.remove('is-loading');
+      }
+    }
+
+    async function approveWOWX() {
+      const walletAddress = await getMetamaskAccount();
+      const allowanceWei = await wowxContract.methods.allowance(walletAddress, contractAddress).call();
+      const allowance = await w3.utils.fromWei(allowanceWei);
+      console.log(`Current allowance is ${allowance} WOWX`);
+      const tipAmount = w3.utils.toWei('.2');
+      if (tipAmount <= allowanceWei) {
+        return true;
+      }
+      const gasPrice = await w3.eth.getGasPrice();
+      const gasLimit = await wowxContract.methods.approve(contractAddress, tipAmount).estimateGas({from: walletAddress}, function(err, gas){
+        return gas;
+      });
+      try {
+        notif(`Approving usage of WOWX token.`, 'info');
+        let res = await wowxContract.methods.approve(contractAddress, tipAmount).send({
+          from: walletAddress,
+          gasPrice: gasPrice,
+          gas: gasLimit
+        });
+        console.log(res);
+        return true;
+      } catch(e) {
+        notif(e.message, 'warning');
+      }
+    }
+
+    async function tipWOWX() {
+      document.getElementById('tipWOWXButton').classList.add('is-loading');
+      let approved = await approveWOWX();
+      if (!approved) {
+        document.getElementById('tipWOWXButton').classList.remove('is-loading');
+        return false;
+      }
+      const tokenId = await getTokenID('{{ meme.meta_ipfs_hash }}');
+      const walletAddress = await getMetamaskAccount();
+      const tipAmount = '.2';
+      const tipAmountWei = await w3.utils.toWei('.2');
+      const gasPrice = await w3.eth.getGasPrice();
+      const gasLimit = await contract.methods.tipWOWX(tokenId, tipAmountWei).estimateGas({from: walletAddress}, function(err, gas){
+        return gas;
+      });
+
+      try {
+        notif(`Tipping ${tipAmount} WOWX to meme "{{ meme.id | shorten_address }}" by "{{ meme.user.handle }} ({{ meme.user.public_address | shorten_address }})".`, 'info');
+        let res = await contract.methods.tipWOWX(tokenId, tipAmountWei).send({
           from: walletAddress,
-          value: 1,
           gasPrice: gasPrice,
           gas: gasLimit
         });
@@ -139,6 +247,7 @@
         window.location.href = "";
       } catch(e) {
         notif(e.message, 'warning');
+        document.getElementById('tipWOWXButton').classList.remove('is-loading');
       }
     }
 
@@ -147,7 +256,7 @@
         notif('Already minted!', 'warning');
         return
       }
-      document.getElementById('mintButtonLoading').classList.add('is-active');
+      document.getElementById('mintButton').classList.add('is-loading');
       const walletAddress = await getMetamaskAccount();
       const gasPrice = await w3.eth.getGasPrice();
       const gasLimit = await contract.methods.mint("{{ meme.meta_ipfs_hash }}", "{{ meme.user.public_address }}").estimateGas({from: walletAddress}, function(err, gas){
@@ -162,10 +271,10 @@
           gas: gasLimit
         });
         console.log(res);
-        document.getElementById('mintButtonLoading').classList.remove('is-active');
         window.location.href = "";
       } catch(e) {
         notif(e.message, 'warning');
+        document.getElementById('mintButton').classList.remove('is-loading');
       }
     }
   </script>