aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-11-21 15:19:29 +0800
committerAugust Skare <post@augustskare.no>2018-11-21 15:19:29 +0800
commit592e1a3e6ff974d357aff02f1c170d6624895b7e (patch)
tree8b8c519206b8921356b4491ca3fa6bf9d82d222d /packages/instant/src
parent99176c2d5482b6eb2d2e223ac6cbdae5fc3e42ce (diff)
parent15f05733be45e05974972c80c4fa8437a62633e2 (diff)
downloaddexon-sol-tools-592e1a3e6ff974d357aff02f1c170d6624895b7e.tar
dexon-sol-tools-592e1a3e6ff974d357aff02f1c170d6624895b7e.tar.gz
dexon-sol-tools-592e1a3e6ff974d357aff02f1c170d6624895b7e.tar.bz2
dexon-sol-tools-592e1a3e6ff974d357aff02f1c170d6624895b7e.tar.lz
dexon-sol-tools-592e1a3e6ff974d357aff02f1c170d6624895b7e.tar.xz
dexon-sol-tools-592e1a3e6ff974d357aff02f1c170d6624895b7e.tar.zst
dexon-sol-tools-592e1a3e6ff974d357aff02f1c170d6624895b7e.zip
Merge branch 'development' into dev-tools-pages
Diffstat (limited to 'packages/instant/src')
-rw-r--r--packages/instant/src/assets/icons/ae.svg4
-rw-r--r--packages/instant/src/assets/icons/agi.svg5
-rw-r--r--packages/instant/src/assets/icons/ant.svg5
-rw-r--r--packages/instant/src/assets/icons/ast.svg4
-rw-r--r--packages/instant/src/assets/icons/bat.svg3
-rw-r--r--packages/instant/src/assets/icons/cvc.svg4
-rw-r--r--packages/instant/src/assets/icons/dai.svg5
-rw-r--r--packages/instant/src/assets/icons/dgd.svg5
-rw-r--r--packages/instant/src/assets/icons/dgx.svg4
-rw-r--r--packages/instant/src/assets/icons/dnt.svg4
-rw-r--r--packages/instant/src/assets/icons/fun.svg4
-rw-r--r--packages/instant/src/assets/icons/gno.svg6
-rw-r--r--packages/instant/src/assets/icons/gnt.svg3
-rw-r--r--packages/instant/src/assets/icons/knc.svg6
-rw-r--r--packages/instant/src/assets/icons/link.svg6
-rw-r--r--packages/instant/src/assets/icons/lpt.svg8
-rw-r--r--packages/instant/src/assets/icons/mana.svg8
-rw-r--r--packages/instant/src/assets/icons/mkr.svg4
-rw-r--r--packages/instant/src/assets/icons/mln.svg4
-rw-r--r--packages/instant/src/assets/icons/omg.svg3
-rw-r--r--packages/instant/src/assets/icons/powr.svg6
-rw-r--r--packages/instant/src/assets/icons/ren.svg12
-rw-r--r--packages/instant/src/assets/icons/rep.svg7
-rw-r--r--packages/instant/src/assets/icons/req.svg3
-rw-r--r--packages/instant/src/assets/icons/salt.svg3
-rw-r--r--packages/instant/src/assets/icons/snt.svg4
-rw-r--r--packages/instant/src/assets/icons/spank.svg6
-rw-r--r--packages/instant/src/assets/icons/wax.svg4
-rw-r--r--packages/instant/src/assets/icons/zil.svg3
-rw-r--r--packages/instant/src/assets/icons/zrx.svg3
-rw-r--r--packages/instant/src/assets/powered_by_0x.svg17
-rw-r--r--packages/instant/src/components/erc20_asset_amount_input.tsx12
-rw-r--r--packages/instant/src/components/erc20_token_selector.tsx31
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx13
-rw-r--r--packages/instant/src/components/zero_ex_instant_provider.tsx14
-rw-r--r--packages/instant/src/constants.ts3
-rw-r--r--packages/instant/src/containers/selected_erc20_asset_amount_input.ts18
-rw-r--r--packages/instant/src/data/asset_meta_data_map.ts4
-rw-r--r--packages/instant/src/globals.d.ts6
-rw-r--r--packages/instant/src/index.umd.ts3
-rw-r--r--packages/instant/src/redux/analytics_middleware.ts59
-rw-r--r--packages/instant/src/redux/store.ts7
-rw-r--r--packages/instant/src/types.ts2
-rw-r--r--packages/instant/src/util/analytics.ts64
-rw-r--r--packages/instant/src/util/heap.ts113
-rw-r--r--packages/instant/src/util/provider_state_factory.ts2
46 files changed, 492 insertions, 22 deletions
diff --git a/packages/instant/src/assets/icons/ae.svg b/packages/instant/src/assets/icons/ae.svg
new file mode 100644
index 000000000..592400d1a
--- /dev/null
+++ b/packages/instant/src/assets/icons/ae.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.7499 13.7657H17.0782V12.215H21.1376C20.7961 10.7612 19.5062 9.6757 17.9887 9.6757C16.6799 9.6757 15.5038 10.4704 14.9916 11.711L14.6692 12.3506L13.588 11.1101C14.3467 9.28802 16.0729 8.125 17.9887 8.125C20.6064 8.125 22.7499 10.3154 22.7499 12.9903V13.7657V13.7657Z" fill="white"/>
+<path d="M17.9888 17.8556C15.8453 17.8556 14.6882 16.5375 13.7777 15.3164L13.1707 14.5022C12.2792 13.3004 11.3497 12.0405 10.4202 10.8193C9.88911 10.1215 8.95963 9.6757 8.01119 9.6757C6.22811 9.6757 4.76751 11.1682 4.76751 12.9903C4.76751 14.8124 6.22811 16.3049 8.01119 16.3049C9.62354 16.3049 10.7806 14.793 11.2169 14.1339L11.4446 13.6881L12.4689 15.0062C11.2738 16.8283 9.64251 17.875 7.99222 17.875C5.39348 17.8556 3.25 15.6846 3.25 12.9903C3.25 10.296 5.39348 8.125 8.01119 8.125C9.45282 8.125 10.7996 8.78405 11.6153 9.86953C12.5447 11.0907 13.4742 12.3506 14.3658 13.5718L14.9728 14.3859C15.8833 15.6071 16.661 16.3049 17.9698 16.3049C19.2218 16.3049 20.1892 15.7428 20.7203 14.5992L22.4275 14.6573L22.2758 15.0644C21.517 16.7701 19.8288 17.8556 17.9888 17.8556Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/agi.svg b/packages/instant/src/assets/icons/agi.svg
new file mode 100644
index 000000000..9ed9784a4
--- /dev/null
+++ b/packages/instant/src/assets/icons/agi.svg
@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.325 5C10.8394 6.11774 9.74739 8.04279 10.0509 9.9134C10.6651 13.7056 16.5341 13.6813 16.6503 17.6773C16.7037 19.5213 15.62 20.7213 14.413 22" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M14.1626 5C14.1626 5 18.2507 7.50998 15.551 12.0307" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M12.311 21.9988C12.311 21.9988 8.22279 19.4888 10.9225 14.9681" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/ant.svg b/packages/instant/src/assets/icons/ant.svg
new file mode 100644
index 000000000..ed7e1491a
--- /dev/null
+++ b/packages/instant/src/assets/icons/ant.svg
@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.7939 9.45381C18.9889 6.11086 14.2089 4.40315 13.2906 4.09626L12.9929 4L12.7017 4.09512C11.7813 4.40315 6.99477 6.11312 3.18976 9.4606L3 9.62707L3.04689 9.89999C3.12542 10.3439 3.58127 12.6858 4.85288 15.2847C5.66972 16.9505 6.66868 18.4114 7.82251 19.6287C9.22826 21.1077 10.8696 22.205 12.7028 22.8902L13.0005 23L13.1936 22.9219L13.2961 22.8845C15.1184 22.2039 16.7587 21.1066 18.1742 19.6231C19.3215 18.4193 20.3205 16.9573 21.1449 15.2791C22.4242 12.6711 22.904 10.2544 22.9531 9.87734H22.9542L23 9.60782L22.7939 9.45381ZM14.6004 9.48891C15.6223 9.48212 16.546 9.73352 17.2211 10.1582C17.1992 10.1514 16.8448 10.0347 16.4849 9.98492C16.2984 10.1842 16.3964 10.0845 16.151 10.2986C15.9839 10.4444 15.963 10.46 15.963 10.46C14.8778 10.2222 14.6004 9.48891 14.6004 9.48891ZM20.3619 14.8691C20.0151 15.5769 19.6356 16.2416 19.2266 16.8633C19.0467 17.1374 18.8613 17.4012 18.6704 17.6572C17.3781 17.5609 16.7118 17.1363 16.3704 16.7025C15.9636 16.1873 16.0138 15.6618 16.0138 15.6618C16.0138 15.5905 16.0138 15.5203 16.0258 15.4489C16.0258 15.4489 16.0323 15.3866 16.052 15.2881C16.0803 15.1534 16.1359 14.9507 16.2417 14.7479C16.4217 14.3992 16.7499 14.0504 17.3356 14.0458H17.3465C17.5013 14.039 17.6562 14.0719 17.7871 14.1489C18.4065 14.4965 18.0041 15.1466 18.0041 15.1466C18.051 15.1386 18.0979 15.1284 18.1459 15.1149C18.8907 14.9065 19.7305 14.0221 19.5854 12.5397C19.5527 12.2034 19.4436 11.9021 19.2931 11.6349C18.9136 10.9611 18.2669 10.5126 17.8983 10.2986C17.7304 10.2012 17.6202 10.1514 17.6202 10.1514C17.6387 10.0314 17.6453 9.93736 17.6453 9.86602C17.6453 9.85243 17.6453 9.83997 17.6442 9.82751C17.6409 9.71314 17.6202 9.66897 17.6202 9.66897C13.777 7.25462 10.7823 7.77667 10.7823 7.77667L11.5261 8.54899C11.5228 8.54899 11.5206 8.54786 11.5174 8.54786C11.4454 8.5422 11.368 8.5422 11.2971 8.5422C10.2447 8.58183 9.26425 8.9159 8.42669 9.47193C6.78101 10.5625 5.68717 12.5023 5.68717 14.7151C5.68717 14.8193 5.69044 14.9189 5.6948 15.0152C5.67299 14.971 5.65118 14.9269 5.62828 14.8816C5.51377 14.6494 5.40689 14.4184 5.30547 14.1931C4.54643 12.4865 4.16037 10.9871 3.99351 10.2182C7.76471 7.07569 12.3538 5.49368 12.9951 5.28645C13.175 5.3442 13.6625 5.50954 14.3539 5.78698C15.1392 6.10067 16.1872 6.5593 17.3476 7.16629C18.8209 7.93748 20.4742 8.94988 21.9967 10.2148C21.8069 11.0823 21.3358 12.884 20.3619 14.8691ZM22.6172 10.3111C22.6216 10.2929 22.6248 10.2748 22.6292 10.2578C22.6336 10.2612 22.6368 10.2646 22.6412 10.2692L22.6717 10.2952L22.6172 10.3111Z" fill="white"/>
+<path d="M22.672 10.2941L22.6164 10.311C22.6208 10.2929 22.6241 10.2748 22.6284 10.2578C22.6328 10.2612 22.6361 10.2646 22.6404 10.2691L22.672 10.2941Z" fill="white"/>
+<path d="M22.641 10.268C22.6366 10.2646 22.6333 10.2612 22.629 10.2567C22.6257 10.2736 22.6213 10.2918 22.617 10.3099L22.6726 10.2929L22.641 10.268Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/ast.svg b/packages/instant/src/assets/icons/ast.svg
new file mode 100644
index 000000000..8136fb688
--- /dev/null
+++ b/packages/instant/src/assets/icons/ast.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5404 20.9375C13.4799 20.9375 13.3589 20.8844 13.2983 20.8844L11.483 19.2906C11.4225 19.2375 11.3619 19.1312 11.4225 19.025C11.483 18.8656 11.5435 18.8125 11.6645 18.8125H12.0276C13.2378 18.7594 14.4481 18.4406 15.5373 17.9094C15.8399 17.75 16.7476 17.2719 16.7476 17.2719C16.8081 17.2188 16.8686 17.2188 16.9291 17.2188C16.9896 17.2188 17.1106 17.2719 17.1712 17.325C17.2922 17.4312 17.2922 17.5375 17.1712 17.6437C16.9291 17.9625 16.6265 18.2813 16.2634 18.6L13.7219 20.8844C13.6614 20.8844 13.6009 20.9375 13.5404 20.9375Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.56975 16.2045C10.636 16.5909 11.8546 16.7455 12.9971 16.7455C13.911 16.7455 14.825 16.5909 15.6628 16.3591C16.9575 16.05 18.1761 15.5091 19.3185 14.7364C19.5582 14.5743 19.7429 14.4225 19.9518 14.2507C19.9927 14.2172 20.0345 14.1828 20.0778 14.1475C20.1218 14.1116 20.1642 14.0774 20.2057 14.0439C20.3315 13.9426 20.4492 13.8477 20.5776 13.7318L20.8418 13.5C20.918 13.4227 20.9733 13.3464 20.9941 13.1909C21.0106 13.0678 20.9941 12.9591 20.9179 12.8818L13.3017 5.07727C13.2636 5.07727 13.2065 5.05796 13.1494 5.03865C13.0923 5.01933 13.0352 5 12.9971 5C12.9209 5 12.7686 5.07727 12.6924 5.15455L5.07616 12.9591C5 13.0364 5 13.1909 5 13.2682C5 13.3454 5.07605 13.4226 5.15215 13.4998L5.15232 13.5L5.38082 13.7318L5.6093 13.9636C5.83779 14.1955 6.14244 14.4273 6.37093 14.5818C7.36104 15.2773 8.42731 15.8182 9.56975 16.2045ZM14.444 14.4272C14.5046 14.4878 14.5618 14.4878 14.6379 14.4878C15.7804 14.2559 16.7288 13.8863 17.7189 13.2681L17.7951 13.1909C17.8713 13.1136 17.9474 12.9591 17.9474 12.8818C17.9474 12.8045 17.9004 12.7264 17.8243 12.6491L17.7189 12.5727C16.348 11.8 14.7486 11.3363 13.1492 11.3363C11.7783 11.3363 10.4074 11.6454 9.18874 12.1863L8.88409 12.3409C8.78592 12.3835 8.73177 12.5727 8.73177 12.7272C8.73177 12.8818 8.88409 12.9591 9.03642 12.9591H9.41723C11.169 12.9591 12.9207 13.5 14.444 14.4272Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/bat.svg b/packages/instant/src/assets/icons/bat.svg
new file mode 100644
index 000000000..9b69ddf9d
--- /dev/null
+++ b/packages/instant/src/assets/icons/bat.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 4L5 18M13 4L21 18M13 4V9.59695M5 18H21M5 18L9.96552 15.1024M21 18L16.0345 15.1024M13 9.59695L9.96552 15.1024M13 9.59695L16.0345 15.1024M9.96552 15.1024H16.0345" stroke="white" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/cvc.svg b/packages/instant/src/assets/icons/cvc.svg
new file mode 100644
index 000000000..bddc90e16
--- /dev/null
+++ b/packages/instant/src/assets/icons/cvc.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.2594 11.7495C15.2594 12.6029 14.7567 13.3438 14.0266 13.6875V16.2004H12.1715V13.6994C11.4294 13.3556 10.9148 12.6148 10.9148 11.7495C10.9148 10.5582 11.8902 9.59806 13.0871 9.59806C14.2839 9.59214 15.2594 10.5582 15.2594 11.7495Z" fill="white"/>
+<path d="M19.6575 14.7602C18.8736 17.6288 16.2285 19.7446 13.0868 19.7446C9.33464 19.7446 6.28266 16.722 6.28266 13C6.28266 9.27802 9.33464 6.26131 13.0868 6.26131C16.1926 6.26131 18.8257 8.33567 19.6336 11.1568H21.9195C21.0578 7.10884 17.4254 4.0625 13.0868 4.0625C8.11385 4.0625 4.0625 8.07489 4.0625 13C4.0625 17.931 8.11385 21.9375 13.0868 21.9375C17.4553 21.9375 21.1117 18.8437 21.9375 14.7602H19.6575Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/dai.svg b/packages/instant/src/assets/icons/dai.svg
new file mode 100644
index 000000000..901d522ca
--- /dev/null
+++ b/packages/instant/src/assets/icons/dai.svg
@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="13.0001" y="6.41421" width="9.3138" height="9.3138" transform="rotate(45 13.0001 6.41421)" stroke="white" stroke-width="2"/>
+<rect x="13.0001" y="10.3334" width="3.77125" height="3.77125" transform="rotate(45 13.0001 10.3334)" fill="white"/>
+<path d="M21.0001 13.0001L13.0001 21.0001L5 13.0001H21.0001Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/dgd.svg b/packages/instant/src/assets/icons/dgd.svg
new file mode 100644
index 000000000..371f89584
--- /dev/null
+++ b/packages/instant/src/assets/icons/dgd.svg
@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.75 10.5H5V9H9.75V10.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 9V16H5V11.6552H11V9H12.5ZM11 14.5V13.1552H6.5V14.5H11Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 9H13.5V16H21V11.6552H16.25V13.1552H19.5V14.5H15V10.5H21V9Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/dgx.svg b/packages/instant/src/assets/icons/dgx.svg
new file mode 100644
index 000000000..2e4a90a5d
--- /dev/null
+++ b/packages/instant/src/assets/icons/dgx.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 5L21 13.0578L19.1416 14.9029L13 8.71696L6.85844 14.9029L5 13.0578L13 5Z" fill="white"/>
+<path d="M12.9489 10.9281L17.9487 15.9641L12.9489 21L7.94915 15.9641L12.9489 10.9281Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/dnt.svg b/packages/instant/src/assets/icons/dnt.svg
new file mode 100644
index 000000000..7d5459343
--- /dev/null
+++ b/packages/instant/src/assets/icons/dnt.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7258 15.5161C21.4223 16.9902 20.8862 18.3613 19.9804 19.5672C18.6743 21.3155 16.9101 22.2664 14.8021 22.6148C13.9495 22.7573 13.0934 22.7813 12.2337 22.7142C12.125 22.7046 12.0058 22.7142 11.916 22.628C11.7991 22.7178 11.6645 22.6879 11.5405 22.6675C10.4789 22.4879 9.44911 22.1933 8.47841 21.7167C7.08967 21.0281 5.95718 20.0366 5.13645 18.7014C5.05497 18.5661 4.93334 18.4332 4.93806 18.2536C4.47397 17.2932 4.21299 16.2765 4.10907 15.2167C3.85281 12.5427 4.67 10.1825 6.16974 8.02577C6.75783 7.18154 7.4463 6.42593 8.18909 5.71701C9.94627 4.04411 11.9739 3.69923 14.2259 4.41534C14.5305 4.51473 14.8305 4.63807 15.1281 4.75902C15.2037 4.78895 15.304 4.79494 15.3335 4.90152C15.0301 5.12665 14.9391 5.44518 14.9391 5.80323C14.9391 7.24022 14.9391 8.67482 14.9368 10.1106C14.9368 10.1825 14.9793 10.2687 14.8919 10.3298C14.0074 9.85554 13.0816 9.64359 12.0766 9.76932C9.49989 10.0903 7.66595 12.605 8.13949 15.1892C8.71695 18.323 12.0731 19.9636 14.8376 18.4559C14.9875 18.3733 15.056 18.3733 15.1635 18.523C15.5615 19.0738 16.2641 19.1852 16.8026 18.7912C17.1628 18.5266 17.2998 18.1542 17.2998 17.7123C17.2974 13.8192 17.2998 9.9238 17.3021 6.02836C18.5987 6.92528 19.7088 8.01859 20.6582 9.28194C21.1873 9.98727 21.5215 10.7764 21.7199 11.6314C21.8332 11.8829 21.8403 12.1619 21.8734 12.4266C22.0009 13.4624 21.9313 14.4934 21.7258 15.5161Z" fill="white"/>
+<path d="M14.5209 15.0703C14.3237 16.0858 13.5715 16.6031 12.5724 16.3828C11.682 16.1864 11.0042 15.7026 10.7704 14.7614C10.4563 13.498 11.5285 11.9197 13.0991 12.1999C14.0722 12.3736 14.528 12.9879 14.5788 14.1243C14.5823 14.2033 14.5788 14.2824 14.5788 14.3614C14.5882 14.5997 14.5658 14.8368 14.5209 15.0703Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/fun.svg b/packages/instant/src/assets/icons/fun.svg
new file mode 100644
index 000000000..bb4347df2
--- /dev/null
+++ b/packages/instant/src/assets/icons/fun.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.6631 15.9533L23.4018 15.428C23.5825 14.6503 23.6786 13.8378 23.6786 13C23.6786 12.1622 23.5825 11.3497 23.4018 10.572L25.6631 10.0467C25.8835 10.9955 26 11.9841 26 13C26 14.0159 25.8835 15.0045 25.6631 15.9533ZM24.0412 6.13431L22.071 7.36203C21.2049 5.97222 20.0278 4.79506 18.638 3.92901L19.8657 1.9588C21.5565 3.01239 22.9876 4.44354 24.0412 6.13431ZM15.9533 0.336931L15.428 2.59815C14.6503 2.41747 13.8378 2.32143 13 2.32143C12.1622 2.32143 11.3497 2.41747 10.572 2.59815L10.0467 0.336932C10.9955 0.116523 11.9841 0 13 0C14.0159 0 15.0045 0.116523 15.9533 0.336931ZM6.13431 1.9588L7.36203 3.92901C5.97222 4.79506 4.79506 5.97222 3.92901 7.36203L1.9588 6.13431C3.01239 4.44354 4.44354 3.01239 6.13431 1.9588ZM0.336932 10.0467C0.116523 10.9955 0 11.9841 0 13C0 14.0159 0.116523 15.0045 0.336931 15.9533L2.59815 15.428C2.41747 14.6503 2.32143 13.8378 2.32143 13C2.32143 12.1622 2.41747 11.3497 2.59815 10.572L0.336932 10.0467ZM1.9588 19.8657L3.92901 18.638C4.79506 20.0278 5.97222 21.2049 7.36203 22.071L6.13431 24.0412C4.44354 22.9876 3.01239 21.5565 1.9588 19.8657ZM10.0467 25.6631C10.9955 25.8835 11.9841 26 13 26C14.0159 26 15.0045 25.8835 15.9533 25.6631L15.428 23.4018C14.6503 23.5825 13.8378 23.6786 13 23.6786C12.1622 23.6786 11.3497 23.5825 10.572 23.4018L10.0467 25.6631ZM19.8657 24.0412C21.5565 22.9876 22.9876 21.5565 24.0412 19.8657L22.071 18.638C21.2049 20.0278 20.0278 21.2049 18.638 22.071L19.8657 24.0412Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8446 17.7331L17.9417 17.0037C18.1478 16.7486 18.3371 16.4737 18.507 16.1794C18.6769 15.8852 18.8203 15.5838 18.9382 15.2777L20.0213 15.695C19.8818 16.0571 19.7124 16.4131 19.5122 16.7598C19.3121 17.1065 19.0885 17.4312 18.8446 17.7331ZM20.4291 14.1765L19.2826 13.9952C19.3876 13.3314 19.385 12.66 19.281 12.0059L20.4273 11.8237C20.5502 12.5964 20.5534 13.3905 20.4291 14.1765ZM20.0204 10.305L18.9365 10.7204C18.6996 10.1019 18.3661 9.51917 17.9433 8.99682L18.8455 8.26657C19.3462 8.88513 19.7405 9.57446 20.0204 10.305ZM17.7331 7.15543L17.0038 8.05835C16.7486 7.85225 16.4737 7.66288 16.1795 7.49301C15.8852 7.32313 15.5838 7.17973 15.2777 7.06183L15.695 5.97871C16.0572 6.11822 16.4132 6.28764 16.7598 6.4878C17.1065 6.68796 17.4312 6.91155 17.7331 7.15543ZM14.1765 5.57091L13.9952 6.71738C13.3315 6.6124 12.6601 6.615 12.006 6.719L11.8237 5.57268C12.5964 5.44983 13.3905 5.4466 14.1765 5.57091ZM10.3051 5.9796L10.7204 7.06347C10.102 7.30044 9.51921 7.63389 8.99686 8.05669L8.2666 7.15447C8.88516 6.65381 9.57449 6.25955 10.3051 5.9796ZM7.15546 8.26687C6.91159 8.56877 6.68799 8.89349 6.48783 9.24017C6.28768 9.58686 6.11826 9.94285 5.97874 10.305L7.06186 10.7223C7.17977 10.4162 7.32316 10.1148 7.49304 9.82053C7.66292 9.52629 7.85229 9.25138 8.05838 8.99625L7.15546 8.26687ZM5.57095 11.8235L6.71742 12.0048C6.61244 12.6686 6.61504 13.34 6.71903 13.994L5.57272 14.1763C5.44987 13.4036 5.44664 12.6095 5.57095 11.8235ZM5.97964 15.6949L7.06351 15.2796C7.30048 15.8981 7.63393 16.4808 8.05672 17.0032L7.15451 17.7334C6.65384 17.1149 6.25958 16.4255 5.97964 15.6949ZM8.26691 18.8446L8.99629 17.9416C9.25142 18.1477 9.52633 18.3371 9.82057 18.507C10.1148 18.6769 10.4163 18.8202 10.7223 18.9381L10.305 20.0213C9.94289 19.8818 9.58689 19.7123 9.24021 19.5122C8.89353 19.312 8.56881 19.0884 8.26691 18.8446ZM11.8235 20.4291L12.0048 19.2826C12.6686 19.3876 13.34 19.385 13.9941 19.281L14.1763 20.4273C13.4036 20.5501 12.6095 20.5534 11.8235 20.4291ZM15.695 20.0204L15.2797 18.9365C15.8981 18.6995 16.4808 18.3661 17.0032 17.9433L17.7334 18.8455C17.1149 19.3462 16.4256 19.7404 15.695 20.0204Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/gno.svg b/packages/instant/src/assets/icons/gno.svg
new file mode 100644
index 000000000..ebf6290cf
--- /dev/null
+++ b/packages/instant/src/assets/icons/gno.svg
@@ -0,0 +1,6 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.3571 7.40046L20.5979 8.165C21.2029 9.12068 21.3926 10.3213 20.9775 11.4701C20.2875 13.4173 18.1463 14.4426 16.195 13.7478C15.9182 13.6442 15.6592 13.5208 15.4358 13.3655L13 15.8184L10.8747 13.6602C9.89011 14.3212 8.62874 14.5123 7.43855 14.0942C5.43579 13.3635 4.39981 11.1555 5.12539 9.15453C5.2282 8.84194 5.38439 8.5632 5.55639 8.30238L4.64101 7.38254L4.46901 7.67721C3.51804 9.24413 3.00005 11.052 3.00005 12.9135C2.98226 18.4605 7.47216 23 12.9822 23H13C18.5081 23 22.9822 18.4963 23 12.9474C23 11.1037 22.4998 9.29589 21.5488 7.71304L21.3571 7.40046Z" fill="white"/>
+<path d="M6.67956 9.43533C6.42056 9.78376 6.26437 10.2178 6.26437 10.6877C6.26437 11.8186 7.17975 12.7404 8.30272 12.7404C8.76931 12.7404 9.20031 12.5831 9.54629 12.3064L6.67956 9.43533Z" fill="white"/>
+<path d="M16.5982 12.2518C16.9285 12.4786 17.3105 12.6 17.7463 12.6C18.8765 12.6 19.7978 11.6786 19.7978 10.5483C19.7978 10.1304 19.6765 9.73037 19.4496 9.40002L16.5982 12.2518Z" fill="white"/>
+<path d="M13.0465 14.2L5.39969 6.4646L5.70373 6.14176C7.59026 4.1272 10.1673 3 12.9348 3H12.9513C15.7518 3 18.4387 4.20837 20.3106 6.3041L20.5981 6.62695L13.0465 14.2ZM6.647 6.4646L13.0465 12.9271L19.3655 6.59374C17.6713 4.88542 15.3671 3.90213 12.9659 3.90213H12.9495C10.5666 3.90213 8.34304 4.80425 6.647 6.4646Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/gnt.svg b/packages/instant/src/assets/icons/gnt.svg
new file mode 100644
index 000000000..7315ce459
--- /dev/null
+++ b/packages/instant/src/assets/icons/gnt.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1123 6.80392L18 5.08032L17.0723 4L15.1809 5.72692C14.5328 5.20821 13.7184 4.89855 12.8343 4.89855C10.7151 4.89855 9 6.67359 9 8.85971C9 10.7993 10.3501 12.4153 12.1346 12.7551L12.1346 14.1434C10.3501 14.4833 9 16.0993 9 18.0388C9 20.225 10.7151 22 12.8343 22C14.9534 22 16.6685 20.225 16.6685 18.0388C16.6685 16.0993 15.3185 14.4833 13.534 14.1434V12.7551C15.3185 12.4153 16.6686 10.7993 16.6686 8.85971C16.6686 8.10751 16.4651 7.40334 16.1123 6.80392ZM12.8343 6.34151C11.491 6.34151 10.3994 7.46738 10.3994 8.85971C10.3994 10.252 11.491 11.3779 12.8343 11.3779C14.1775 11.3779 15.2692 10.252 15.2692 8.85971C15.2692 8.2138 15.035 7.62639 14.6488 7.18047C14.2018 6.66426 13.5548 6.34151 12.8343 6.34151ZM12.8343 15.5206C11.491 15.5206 10.3994 16.6465 10.3994 18.0388C10.3994 19.4312 11.491 20.557 12.8343 20.557C14.1775 20.557 15.2692 19.4312 15.2692 18.0388C15.2692 16.6465 14.1775 15.5206 12.8343 15.5206Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/knc.svg b/packages/instant/src/assets/icons/knc.svg
new file mode 100644
index 000000000..70d35bc2f
--- /dev/null
+++ b/packages/instant/src/assets/icons/knc.svg
@@ -0,0 +1,6 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4391 13L18.514 16.2448C18.7327 16.3582 19 16.2221 19 15.9952V10.0049C19 9.77795 18.7327 9.64181 18.514 9.75526L12.4391 13Z" fill="white"/>
+<path d="M18.4066 7.87359L14.4048 5.06338C14.2176 4.92849 13.9603 5.01841 13.9134 5.24323L12.4391 11.5156L18.3597 8.36819C18.5704 8.25578 18.5704 8.00848 18.4066 7.87359Z" fill="white"/>
+<path d="M14.4011 20.9357L18.3951 18.0966C18.582 17.9614 18.5586 17.7135 18.3718 17.6009L12.4391 14.4688L13.8872 20.778C13.934 20.9808 14.2142 21.0709 14.4011 20.9357Z" fill="white"/>
+<path d="M10.6638 12.9938L12.4279 6.3505C12.5093 6.08826 12.1293 5.89159 11.8579 6.06641L7.35281 8.84172C7.1357 8.99469 7 9.21322 7 9.4536V16.5339C7 16.7743 7.1357 16.9928 7.35281 17.1458L11.8579 19.943C12.1293 20.0959 12.4822 19.9211 12.4279 19.6589L10.6638 12.9938Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/link.svg b/packages/instant/src/assets/icons/link.svg
new file mode 100644
index 000000000..2fddf7ef1
--- /dev/null
+++ b/packages/instant/src/assets/icons/link.svg
@@ -0,0 +1,6 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 3L21 7.68346V17.3165L13 22L5 17.3165V7.68346L13 3ZM6.28 9.19243V16.5278L12.36 20.0872V12.5645L6.28 9.19243ZM13.64 12.5645V20.0872L19.72 16.5278V9.19243L13.64 12.5645ZM19.0191 8.06188L13 11.4002L6.9809 8.06188L13 4.53811L19.0191 8.06188Z" fill="white"/>
+<path d="M18.2282 13.1079V12.615C18.2282 11.9957 17.8033 11.7385 17.2759 12.0514L16.648 12.4222C15.8306 12.7915 15.6957 13.4916 15.6957 14.113V14.606C15.4529 14.7817 15.2645 15.1396 15.2645 15.4353V17.377C15.2645 17.6963 15.4843 17.8313 15.7543 17.6706L18.1654 16.2454C18.4396 16.0847 18.6593 15.6904 18.6593 15.371V13.4273C18.6614 13.1337 18.4751 12.9944 18.2282 13.1079ZM16.3173 13.7466C16.3173 13.5301 16.4659 13.2665 16.6501 13.1572L17.278 12.7865C17.46 12.6772 17.6107 12.7672 17.6107 12.9836V13.468L16.3194 14.2309V13.7466H16.3173Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4906 14.3533L7.25223 12.4824L7.56089 11.894L10.7993 13.7649L10.4906 14.3533Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.30744 15.2854L7.24664 14.0381L7.56639 13.4564L9.62719 14.7036L9.30744 15.2854Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/lpt.svg b/packages/instant/src/assets/icons/lpt.svg
new file mode 100644
index 000000000..cbe4f2202
--- /dev/null
+++ b/packages/instant/src/assets/icons/lpt.svg
@@ -0,0 +1,8 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="8" y="6" width="2.60007" height="2.72222" fill="white"/>
+<rect x="8" y="11.4445" width="2.60007" height="2.72222" fill="white"/>
+<rect x="8" y="17.2778" width="2.60007" height="2.72222" fill="white"/>
+<rect x="13.2002" y="14.1667" width="2.60007" height="2.72222" fill="white"/>
+<rect x="13.2002" y="8.72223" width="2.60007" height="2.72222" fill="white"/>
+<rect x="18.3999" y="11.4445" width="2.60007" height="2.72222" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/mana.svg b/packages/instant/src/assets/icons/mana.svg
new file mode 100644
index 000000000..45be622e4
--- /dev/null
+++ b/packages/instant/src/assets/icons/mana.svg
@@ -0,0 +1,8 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49637 17.2106C5.66831 17.0504 3.6051 17.0501 2.21785 17.0997L2.18216 16.1003C3.59491 16.0499 5.7017 16.0495 7.58364 16.2144C8.52311 16.2967 9.42302 16.4215 10.1582 16.6074C10.5258 16.7004 10.8652 16.8118 11.1529 16.9476C11.4351 17.0807 11.7032 17.2536 11.8904 17.4876C12.1548 17.8181 12.1951 18.1947 12.0685 18.544C11.9575 18.8502 11.7282 19.1116 11.5056 19.3215C11.2752 19.5389 11.0004 19.7477 10.7412 19.938C10.666 19.9932 10.5926 20.0465 10.5212 20.0984C10.3369 20.2322 10.1657 20.3566 10.0104 20.4795C9.8313 20.6213 9.71009 20.7335 9.63807 20.8195C9.70045 20.8513 9.8027 20.8944 9.9652 20.9413C10.3024 21.0386 10.8117 21.1286 11.5498 21.2025C13.7635 21.4238 15.3373 21.8324 16.3972 22.2626C16.9266 22.4775 17.3363 22.7012 17.6356 22.916C17.916 23.1172 18.1597 23.353 18.2642 23.6143L17.3358 23.9857C17.3364 23.9873 17.3359 23.9866 17.3338 23.9837C17.3216 23.9665 17.2559 23.8744 17.0525 23.7284C16.8328 23.5707 16.4971 23.3823 16.0212 23.1892C15.0705 22.8033 13.5943 22.4119 11.4503 22.1975C10.6883 22.1213 10.1101 22.0239 9.68794 21.9021C9.2949 21.7886 8.9238 21.6242 8.72365 21.329C8.60977 21.161 8.56362 20.9686 8.58639 20.7737C8.60754 20.5927 8.68431 20.4391 8.76413 20.3198C8.91883 20.0886 9.1609 19.8766 9.38966 19.6955C9.56253 19.5586 9.75948 19.4156 9.94983 19.2774C10.0177 19.2281 10.0847 19.1794 10.1494 19.1319C10.4059 18.9437 10.6374 18.7658 10.8194 18.5941C11.0093 18.415 11.0988 18.2849 11.1284 18.2032L11.1284 18.2031C11.1424 18.1646 11.1452 18.1569 11.1096 18.1123C11.0568 18.0464 10.9418 17.9537 10.7263 17.852C10.5164 17.753 10.2436 17.6605 9.91304 17.5769C9.25199 17.4097 8.4119 17.2908 7.49637 17.2106Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 24C19.0751 24 24 19.0751 24 13C24 6.92487 19.0751 2 13 2C6.92487 2 2 6.92487 2 13C2 19.0751 6.92487 24 13 24ZM13 25C19.6274 25 25 19.6274 25 13C25 6.37258 19.6274 1 13 1C6.37258 1 1 6.37258 1 13C1 19.6274 6.37258 25 13 25Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 8C12.1046 8 13 7.10457 13 6C13 4.89543 12.1046 4 11 4C9.89543 4 9 4.89543 9 6C9 7.10457 9.89543 8 11 8ZM11 9C12.6569 9 14 7.65685 14 6C14 4.34315 12.6569 3 11 3C9.34315 3 8 4.34315 8 6C8 7.65685 9.34315 9 11 9Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3544 10.0971C19.3932 10.1466 19.4365 10.2061 19.484 10.2774C19.7893 10.7353 20.1742 11.2747 20.5255 11.7041C20.7 11.9173 20.8758 12.1154 21.0359 12.2644C21.1152 12.3383 21.2026 12.4114 21.2933 12.4689C21.369 12.5169 21.5161 12.6 21.7 12.6C21.8593 12.6 21.948 12.6024 22.0287 12.6226C22.0927 12.6386 22.1619 12.669 22.2464 12.7536L23.7114 14.2186L24.084 14.7774L24.916 14.2226L24.4886 13.5815L22.9536 12.0465C22.5427 11.6356 22.1032 11.6027 21.7954 11.6002C21.7757 11.5847 21.7497 11.5627 21.7173 11.5325C21.6055 11.4284 21.4625 11.2702 21.2995 11.0709C20.9758 10.6753 20.6107 10.1647 20.316 9.72267C20.151 9.47514 19.989 9.28275 19.8263 9.14716C19.6693 9.01633 19.4649 8.90002 19.225 8.90002C18.956 8.90002 18.7546 9.04494 18.6402 9.21642C18.6195 9.24747 18.6015 9.27935 18.586 9.31166C18.4752 9.29075 18.3533 9.2574 18.2581 9.22568L18.1 9.17298L17.9419 9.22568C17.7542 9.28825 17.4747 9.41143 17.2033 9.58944C16.9388 9.76293 16.6298 10.0223 16.4528 10.3764C16.404 10.4739 16.2853 10.643 16.101 10.8746C15.9414 11.075 15.7554 11.2948 15.5674 11.5168C15.5469 11.541 15.5263 11.5653 15.5058 11.5896C15.3014 11.8311 15.0953 12.0762 14.9402 12.2813C14.8986 12.3363 14.8582 12.3918 14.8209 12.4462C14.6897 12.3856 14.5305 12.3063 14.3486 12.2153L14.341 12.2115C14.0837 12.0829 13.7913 11.9366 13.5241 11.8228C13.3886 11.7651 13.2507 11.7119 13.12 11.6724C12.9957 11.6348 12.8473 11.6 12.7 11.6C12.4003 11.6 12.1295 11.7423 11.9357 11.868C11.7287 12.0023 11.527 12.1737 11.3553 12.3263C11.2877 12.3864 11.2265 12.442 11.1698 12.4933C11.0709 12.583 10.9858 12.6602 10.9047 12.7273C10.8738 12.7528 10.8485 12.7727 10.828 12.7879C10.8082 12.7835 10.7855 12.7778 10.7597 12.7708C10.6725 12.747 10.5738 12.7143 10.4581 12.6757L10.4514 12.6734C10.3437 12.6375 10.2201 12.5963 10.1034 12.5645C9.99107 12.5339 9.84438 12.5 9.7 12.5C9.60264 12.5 9.44615 12.5174 9.29251 12.5368C9.12592 12.5577 8.92301 12.5865 8.71141 12.618C8.45081 12.6567 8.17344 12.7002 7.92827 12.7397L6.75021 9.50002H4.34269L4.19313 9.70941C3.93832 10.0661 3.54237 10.6448 3.1784 11.2277C2.82473 11.7941 2.46725 12.4172 2.32566 12.8419C2.30699 12.8979 2.2892 12.9377 2.27458 12.9652C2.26708 12.9592 2.25993 12.9528 2.25355 12.9465L1.54645 13.6536C1.68989 13.797 1.98689 14.0164 2.36436 13.9942C2.82326 13.9672 3.12157 13.6165 3.27434 13.1581C3.37276 12.8629 3.66528 12.336 4.0266 11.7574C4.31329 11.2983 4.62201 10.8397 4.85912 10.5H6.04979L7.27216 13.8616L7.6822 13.7932C7.98028 13.7435 8.44228 13.669 8.8586 13.6071C9.06699 13.5761 9.26158 13.5486 9.41749 13.5289C9.49557 13.5191 9.5616 13.5115 9.61358 13.5065C9.63952 13.504 9.66035 13.5023 9.6764 13.5012C9.69349 13.5001 9.70038 13.5 9.7 13.5C9.69972 13.5 9.69976 13.5 9.7 13.5C9.70169 13.5001 9.71319 13.5008 9.73706 13.5051C9.76371 13.5098 9.79778 13.5177 9.84032 13.5293C9.9275 13.5531 10.0262 13.5858 10.1419 13.6244L10.1487 13.6266C10.1569 13.6294 10.1652 13.6321 10.1735 13.6349L9.55279 14.8764L10.4472 15.3236L11.2599 13.6982C11.2739 13.6904 11.2862 13.6832 11.2968 13.6768C11.383 13.6249 11.4675 13.5596 11.5422 13.4977C11.6399 13.4169 11.7547 13.3129 11.8657 13.2123C11.9186 13.1644 11.9707 13.1173 12.0197 13.0737C12.1855 12.9264 12.3401 12.7977 12.4799 12.707C12.5488 12.6623 12.6044 12.6333 12.6473 12.6163C12.6806 12.603 12.6975 12.6005 12.7008 12.6001C12.7041 12.6003 12.7144 12.6012 12.733 12.6047C12.7575 12.6094 12.7899 12.6173 12.8308 12.6296C12.9134 12.6546 13.0146 12.6927 13.1322 12.7428C13.3686 12.8435 13.6355 12.9768 13.9014 13.1097L13.919 13.1185C14.1676 13.2429 14.427 13.3726 14.6258 13.451C14.7176 13.4873 14.8503 13.5352 14.9809 13.5458C15.0399 13.5506 15.1837 13.5565 15.3295 13.4724C15.4868 13.3817 15.5667 13.2365 15.5914 13.0969C15.5929 13.0943 15.5945 13.0915 15.5963 13.0884C15.6234 13.0423 15.6697 12.9746 15.7379 12.8844C15.8734 12.7051 16.0611 12.4814 16.2692 12.2355C16.2898 12.2112 16.3105 12.1867 16.3314 12.162C16.5175 11.9423 16.7138 11.7105 16.8834 11.4973C17.0647 11.2695 17.246 11.0261 17.3472 10.8236C17.4102 10.6977 17.5512 10.5571 17.7517 10.4256C17.8805 10.3412 18.0123 10.2745 18.1191 10.2283C18.2692 10.2699 18.4485 10.3097 18.616 10.3254C18.7277 10.3358 18.8928 10.342 19.0508 10.2925C19.1347 10.2663 19.2496 10.2142 19.3459 10.1069C19.3487 10.1037 19.3516 10.1004 19.3544 10.0971Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 16.5C16.1407 16.5 15.5 17.1455 15.5 17.875C15.5 18.1442 15.5796 18.2392 15.652 18.294C15.7592 18.3752 15.9562 18.4423 16.2977 18.4749C16.5049 18.4948 16.7388 18.5 17 18.5C17.2612 18.5 17.4951 18.4948 17.7023 18.4749C18.0438 18.4423 18.2408 18.3752 18.348 18.294C18.4204 18.2392 18.5 18.1442 18.5 17.875C18.5 17.1455 17.8593 16.5 17 16.5ZM14.5 17.875C14.5 16.5334 15.6502 15.5 17 15.5C18.3498 15.5 19.5 16.5334 19.5 17.875C19.5 18.3927 19.3211 18.8115 18.9517 19.0912C18.6171 19.3446 18.1892 19.4329 17.7977 19.4704C17.5416 19.4949 17.2692 19.5 17 19.5C16.7308 19.5 16.4584 19.4949 16.2023 19.4704C15.8108 19.4329 15.3829 19.3446 15.0483 19.0912C14.6789 18.8115 14.5 18.3927 14.5 17.875Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 18.5C19.8585 18.5 19.5 18.9173 19.5 19.25C19.5 19.3192 19.5125 19.3478 19.516 19.3548C19.5185 19.3596 19.5226 19.3674 19.5418 19.3803C19.5975 19.4177 19.7245 19.4618 19.9799 19.4836C20.1319 19.4965 20.3046 19.5 20.5 19.5C20.6954 19.5 20.8681 19.4965 21.0201 19.4836C21.2755 19.4618 21.4025 19.4177 21.4582 19.3803C21.4774 19.3674 21.4815 19.3596 21.484 19.3548C21.4875 19.3478 21.5 19.3192 21.5 19.25C21.5 18.9173 21.1415 18.5 20.5 18.5ZM18.5 19.25C18.5 18.202 19.4847 17.5 20.5 17.5C21.5153 17.5 22.5 18.202 22.5 19.25C22.5 19.6602 22.335 19.9955 22.0166 20.2098C21.7409 20.3954 21.3993 20.4549 21.1049 20.48C20.9095 20.4966 20.7025 20.5 20.5 20.5C20.2975 20.5 20.0905 20.4966 19.8951 20.48C19.6007 20.4549 19.2591 20.3954 18.9834 20.2098C18.665 19.9955 18.5 19.6602 18.5 19.25Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/mkr.svg b/packages/instant/src/assets/icons/mkr.svg
new file mode 100644
index 000000000..e09d47444
--- /dev/null
+++ b/packages/instant/src/assets/icons/mkr.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7553 7.98947C20.5802 7.37761 21.75 7.96641 21.75 8.99342V17.6154C21.75 18.0296 21.4142 18.3654 21 18.3654C20.5858 18.3654 20.25 18.0296 20.25 17.6154V9.49013L15.5278 12.9929V18C15.5278 18.4142 15.192 18.75 14.7778 18.75C14.3636 18.75 14.0278 18.4142 14.0278 18V12.867C14.0278 12.4713 14.2153 12.0989 14.5331 11.8631L19.7553 7.98947Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.24471 7.98947C5.41985 7.37761 4.25001 7.96641 4.25001 8.99342V17.6154C4.25001 18.0296 4.58579 18.3654 5.00001 18.3654C5.41422 18.3654 5.75001 18.0296 5.75001 17.6154V9.49013L10.4722 12.9929V18C10.4722 18.4142 10.808 18.75 11.2222 18.75C11.6364 18.75 11.9722 18.4142 11.9722 18V12.867C11.9722 12.4713 11.7847 12.0989 11.4669 11.8631L6.24471 7.98947Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/mln.svg b/packages/instant/src/assets/icons/mln.svg
new file mode 100644
index 000000000..a0b821c57
--- /dev/null
+++ b/packages/instant/src/assets/icons/mln.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6085 3.10634C12.8511 2.96455 13.1489 2.96455 13.3915 3.10634L20.6021 7.32038C20.8482 7.46417 21 7.73183 21 8.02174V16.6605C21 16.9353 20.8635 17.1912 20.6376 17.3399L15.6215 20.6409C15.2549 20.8822 14.7665 20.7736 14.5306 20.3984C14.2948 20.0233 14.4009 19.5235 14.7676 19.2822L19.4213 16.2197V9.41321L13.7894 12.7046V23C13.7894 23.4461 13.436 23.8077 13 23.8077C12.564 23.8077 12.2106 23.4461 12.2106 23V12.7046L6.57873 9.41321V16.2197L11.2324 19.2822C11.5991 19.5235 11.7052 20.0233 11.4694 20.3984C11.2335 20.7736 10.7451 20.8822 10.3785 20.6409L5.36237 17.3399C5.13652 17.1912 5 16.9353 5 16.6605V8.02174C5 7.73183 5.15184 7.46417 5.39787 7.32038L12.6085 3.10634ZM7.38094 8.02174L13 11.3056L18.6191 8.02174L13 4.73784L7.38094 8.02174Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.737 4.33268V3.80768H13.2632V4.33268H12.737ZM12.737 6.43268V5.38268H13.2632V6.43268H12.737ZM12.737 8.53268V7.48268H13.2632V8.53268H12.737ZM12.737 10.6327V9.58268H13.2632V10.6327H12.737ZM12.737 12.0604V11.6827H13.2632V12.0536L13.6037 12.2582L13.3371 12.7225L13.0061 12.5235L12.711 12.717L12.4271 12.2637L12.737 12.0604ZM15.2181 13.8533L14.2776 13.2879L14.5442 12.8236L15.4847 13.389L15.2181 13.8533ZM11.8489 13.2824L10.9867 13.8478L10.7028 13.3945L11.5649 12.8291L11.8489 13.2824ZM16.1586 14.4187L16.4252 13.9544L17.3657 14.5198L17.0992 14.984L16.1586 14.4187ZM10.1246 14.4132L9.26245 14.9786L8.97849 14.5252L9.84063 13.9599L10.1246 14.4132ZM18.9802 16.1148L18.0397 15.5494L18.3062 15.0852L19.2468 15.6505L18.9802 16.1148ZM8.40031 15.544L7.53817 16.1093L7.25421 15.656L8.11635 15.0906L8.40031 15.544ZM20.391 16.9629L19.9207 16.6802L20.1873 16.2159L20.6575 16.4986L20.391 16.9629ZM6.67603 16.6747L6.24496 16.9574L5.961 16.5041L6.39207 16.2214L6.67603 16.6747Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/omg.svg b/packages/instant/src/assets/icons/omg.svg
new file mode 100644
index 000000000..a906509af
--- /dev/null
+++ b/packages/instant/src/assets/icons/omg.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.41177 13.7682C9.91234 13.7682 10.3879 13.8687 10.8384 14.0697C11.2789 14.2607 11.6643 14.522 11.9947 14.8536C12.325 15.1853 12.5853 15.5722 12.7755 16.0144C12.9758 16.4667 13.0759 16.9441 13.0759 17.4466C13.0759 17.9592 12.9808 18.4365 12.7906 18.8788C12.5903 19.321 12.325 19.7104 11.9947 20.0471C11.6643 20.3838 11.2788 20.6476 10.8384 20.8386C10.3879 21.0295 9.91234 21.125 9.41177 21.125C8.90118 21.125 8.4257 21.0295 7.98515 20.8386C7.54465 20.6476 7.15671 20.3838 6.82135 20.0471C6.48598 19.7104 6.22318 19.321 6.03296 18.8788C5.84274 18.4365 5.74764 17.9592 5.74764 17.4466C5.74764 16.9441 5.84275 16.4666 6.03296 16.0144C6.22318 15.5722 6.48598 15.1852 6.82135 14.8536C7.15673 14.522 7.54467 14.2556 7.98515 14.0546C8.42565 13.8637 8.90118 13.7682 9.41177 13.7682ZM9.41177 19.8437C10.0625 19.8437 10.6206 19.61 11.0862 19.1427C11.5517 18.6753 11.7844 18.11 11.7844 17.4466C11.7844 16.7933 11.5517 16.2331 11.0862 15.7657C10.6206 15.2984 10.0625 15.0647 9.41177 15.0647C8.75101 15.0647 8.18786 15.2984 7.72233 15.7657C7.2568 16.233 7.02403 16.7934 7.02403 17.4466C7.02403 18.11 7.25679 18.6753 7.72233 19.1427C8.18785 19.61 8.75094 19.8437 9.41177 19.8437ZM17.4609 5.6875C17.9715 5.6875 18.4469 5.78298 18.8875 5.97394C19.328 6.1649 19.7159 6.42872 20.0513 6.7654C20.3867 7.10209 20.6495 7.49154 20.8397 7.93373C21.0299 8.37595 21.125 8.85334 21.125 9.36592C21.125 9.86844 21.0299 10.3459 20.8397 10.7981C20.6495 11.2403 20.3867 11.6273 20.0513 11.9589C19.7159 12.2905 19.328 12.5569 18.8875 12.7579C18.447 12.9488 17.9715 13.0443 17.4609 13.0443C16.9603 13.0443 16.4847 12.9488 16.0343 12.7579C15.5938 12.5569 15.2083 12.2905 14.878 11.9589C14.5477 11.6272 14.2823 11.2403 14.0821 10.7981C13.8919 10.3458 13.7968 9.86844 13.7968 9.36592C13.7968 8.85334 13.8919 8.376 14.0821 7.93373C14.2823 7.49152 14.5476 7.10207 14.878 6.7654C15.2084 6.42872 15.5938 6.1649 16.0343 5.97394C16.4848 5.78298 16.9603 5.6875 17.4609 5.6875ZM17.4609 11.7479C18.1216 11.7479 18.6848 11.5142 19.1503 11.0469C19.6159 10.5795 19.8486 10.0192 19.8486 9.36593C19.8486 8.7026 19.6159 8.13726 19.1503 7.66991C18.6848 7.20256 18.1217 6.96889 17.4609 6.96889C16.8101 6.96889 16.252 7.20255 15.7865 7.66991C15.321 8.13725 15.0882 8.70254 15.0882 9.36593C15.0882 10.0192 15.3209 10.5795 15.7865 11.0469C16.252 11.5142 16.8102 11.7479 17.4609 11.7479ZM8.94623 5.6875H13.1209V6.96897H12.1899C12.4602 7.29058 12.6729 7.65239 12.8281 8.05438C12.9833 8.4564 13.0609 8.88354 13.0609 9.33585V9.366C13.0609 9.87858 12.9607 10.3559 12.7605 10.7982C12.5703 11.2505 12.3075 11.6449 11.9721 11.9816C11.6367 12.3183 11.2488 12.5821 10.8083 12.7731C10.3578 12.9641 9.87727 13.0595 9.36666 13.0595C8.85607 13.0595 8.38059 12.964 7.94004 12.7731C7.48953 12.5821 7.09909 12.3183 6.76872 11.9816C6.43835 11.6449 6.17305 11.2505 5.97282 10.7982C5.7826 10.356 5.6875 9.87858 5.6875 9.366C5.6875 8.88358 5.78261 8.43132 5.97282 8.00918C6.16304 7.58706 6.41081 7.21268 6.71617 6.88608C7.02151 6.55944 7.3694 6.2906 7.75984 6.07954C8.15028 5.86848 8.54572 5.74285 8.94621 5.70265L8.94623 5.6875ZM11.7844 9.36597C11.7844 8.70264 11.5517 8.1373 11.0861 7.66994C10.6206 7.2026 10.0624 6.96893 9.41173 6.96893C8.75097 6.96893 8.18782 7.20259 7.72229 7.66994C7.25676 8.13729 7.02399 8.70258 7.02399 9.36597C7.02399 10.0192 7.25675 10.5795 7.72229 11.0469C8.18781 11.5142 8.75091 11.7479 9.41173 11.7479C10.0625 11.7479 10.6206 11.5142 11.0861 11.0469C11.5516 10.5795 11.7844 10.0192 11.7844 9.36597Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/powr.svg b/packages/instant/src/assets/icons/powr.svg
new file mode 100644
index 000000000..eb48342e1
--- /dev/null
+++ b/packages/instant/src/assets/icons/powr.svg
@@ -0,0 +1,6 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.77072" y="8.24185" width="13.4376" height="13.4376" transform="rotate(-14.9496 4.77072 8.24185)" stroke="white" stroke-width="1.5"/>
+<rect x="8.24472" y="4.77117" width="13.4376" height="13.4376" transform="rotate(15 8.24472 4.77117)" stroke="white" stroke-width="1.5"/>
+<rect x="13" y="3.49816" width="13.4376" height="13.4376" transform="rotate(45 13 3.49816)" stroke="white" stroke-width="1.5"/>
+<path d="M12.1932 9.98888L15.2043 10.7957L16.0111 13.8068L13.8068 16.0111L10.7957 15.2043L9.98887 12.1932L12.1932 9.98888Z" stroke="white" stroke-width="1.5"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/ren.svg b/packages/instant/src/assets/icons/ren.svg
new file mode 100644
index 000000000..fe563dee2
--- /dev/null
+++ b/packages/instant/src/assets/icons/ren.svg
@@ -0,0 +1,12 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0587 19.5805C12.827 19.7307 12.761 20.0403 12.9112 20.272C13.0614 20.5037 13.371 20.5698 13.6027 20.4195L13.0587 19.5805ZM19.2281 15.5804L13.0587 19.5805L13.6027 20.4195L19.7722 16.4195L19.2281 15.5804Z" fill="white"/>
+<path d="M11.5033 18.8023C11.2625 18.9375 11.1769 19.2423 11.3121 19.4831C11.4473 19.7239 11.7521 19.8095 11.9928 19.6743L11.5033 18.8023ZM14.6687 17.025L11.5033 18.8023L11.9928 19.6743L15.1583 17.8969L14.6687 17.025Z" fill="white"/>
+<path d="M9.92058 17.7866C9.6798 17.9218 9.5942 18.2265 9.7294 18.4673C9.8646 18.7081 10.1694 18.7937 10.4102 18.6585L9.92058 17.7866ZM13.086 16.0092L9.92058 17.7866L10.4102 18.6585L13.5756 16.8811L13.086 16.0092Z" fill="white"/>
+<path d="M8.33788 16.7709C8.09709 16.9061 8.0115 17.2109 8.1467 17.4517C8.28189 17.6925 8.58669 17.7781 8.82747 17.6429L8.33788 16.7709ZM11.5033 14.9936L8.33788 16.7709L8.82747 17.6429L11.9929 15.8655L11.5033 14.9936Z" fill="white"/>
+<path d="M6.7552 15.7554C6.51442 15.8906 6.42883 16.1954 6.56402 16.4362C6.69922 16.677 7.00401 16.7626 7.2448 16.6274L6.7552 15.7554ZM9.92065 13.9781L6.7552 15.7554L7.2448 16.6274L10.4102 14.85L9.92065 13.9781Z" fill="white"/>
+<path d="M6.7552 13.978C6.51442 14.1132 6.42883 14.4179 6.56402 14.6587C6.69922 14.8995 7.00401 14.9851 7.2448 14.8499L6.7552 13.978ZM9.92065 12.2006L6.7552 13.978L7.2448 14.8499L10.4102 13.0725L9.92065 12.2006Z" fill="white"/>
+<path d="M6.7552 12.2006C6.51442 12.3358 6.42883 12.6406 6.56402 12.8814C6.69922 13.1222 7.00401 13.2078 7.2448 13.0726L6.7552 12.2006ZM9.92065 10.4233L6.7552 12.2006L7.2448 13.0726L10.4102 11.2952L9.92065 10.4233Z" fill="white"/>
+<path d="M6.7552 10.4233C6.51442 10.5585 6.42883 10.8633 6.56402 11.104C6.69922 11.3448 7.00401 11.4304 7.2448 11.2952L6.7552 10.4233ZM9.92065 8.6459L6.7552 10.4233L7.2448 11.2952L10.4102 9.51785L9.92065 8.6459Z" fill="white"/>
+<path d="M6.7552 8.64587C6.51442 8.78107 6.42883 9.08586 6.56402 9.32664C6.69922 9.56742 7.00401 9.65302 7.2448 9.51782L6.7552 8.64587ZM9.92065 6.8685L6.7552 8.64587L7.2448 9.51782L10.4102 7.74045L9.92065 6.8685Z" fill="white"/>
+<path d="M19.9808 9.06392L19.9999 16.5253L15.5436 19.0019L8.83997 15.2553L8.84 7.47653L13.2964 5L19.9808 9.06392Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/rep.svg b/packages/instant/src/assets/icons/rep.svg
new file mode 100644
index 000000000..1be1a6a88
--- /dev/null
+++ b/packages/instant/src/assets/icons/rep.svg
@@ -0,0 +1,7 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.88881 13.8359C9.79999 12.913 10.7758 11.694 11.8001 11.2609C12.8245 10.8278 13.0773 9.78797 13.0773 9.78797L12.9999 4.5" stroke="white" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M13.0775 21.6833V19.5653C13.0775 19.5653 12.7758 18.3027 13.8001 17.8696C14.3952 17.618 15.0001 17.8696 15.8152 16.5078" stroke="white" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M5.92307 17.2448L7.96301 15.9141C7.96301 15.9141 9.37674 15.4762 10.2 16.2174C10.7522 16.7152 10.9111 17.3133 11.8 17.4565" stroke="white" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M20.3846 16.9333C20.3846 16.9333 18.3583 16.2297 17.6791 15.7898C16.9999 15.35 16.5712 15.2674 16.2 13.7391C15.9411 12.6734 15.1184 11.7896 14.2 11.7251" stroke="white" stroke-miterlimit="10" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9245 4.56536C13.5449 3.88115 12.5621 3.87822 12.1784 4.56015L5.48413 16.4599C5.21577 16.9369 5.38078 17.5411 5.85439 17.8154L12.571 21.7067C12.8837 21.8879 13.2698 21.8863 13.5809 21.7025L20.162 17.8154C20.6284 17.5399 20.7907 16.9431 20.5279 16.4693L13.9245 4.56536Z" stroke="white" stroke-miterlimit="10" stroke-linecap="round"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/req.svg b/packages/instant/src/assets/icons/req.svg
new file mode 100644
index 000000000..d9eb89634
--- /dev/null
+++ b/packages/instant/src/assets/icons/req.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9149 7.02062H8.125V4.875H14.9149C15.6706 4.875 16.7813 5.10159 17.7327 5.81283C18.7294 6.55795 19.4796 7.78688 19.4905 9.586C19.545 10.4331 19.377 11.6685 18.6624 12.7308C17.8941 13.873 16.5803 14.6836 14.6197 14.6836H13.7989L17.8646 21.6365L16.0982 22.75L10.1267 12.5379H14.6197C15.9654 12.5379 16.6197 12.0203 16.9683 11.5022C17.3586 10.9219 17.4628 10.1886 17.4272 9.7083C17.4252 9.68092 17.4242 9.65348 17.4242 9.62602C17.4242 8.50439 16.9972 7.90691 16.5252 7.55408C16.0006 7.16185 15.34 7.02062 14.9149 7.02062Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/salt.svg b/packages/instant/src/assets/icons/salt.svg
new file mode 100644
index 000000000..f2892c981
--- /dev/null
+++ b/packages/instant/src/assets/icons/salt.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5702 18L13 6.36471L18.4298 18H7.5702Z" stroke="white" stroke-width="2"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/snt.svg b/packages/instant/src/assets/icons/snt.svg
new file mode 100644
index 000000000..34b2c432b
--- /dev/null
+++ b/packages/instant/src/assets/icons/snt.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8917 13.922C17.1192 14.2276 17.022 14.443 16.9848 14.6496C16.3229 18.189 12.8267 20.5565 9.4926 19.8948C7.99515 19.5981 7.12853 18.6198 7.01477 17.1051C6.88861 15.4344 7.56983 14.4738 9.08383 13.9396C9.98354 13.623 10.9122 13.5966 11.8429 13.6494C13.5514 13.7483 15.2412 14.1682 16.8917 13.922Z" fill="white"/>
+<path d="M10.0068 12.1724C10.1723 8.91011 12.9198 6.18159 16.0533 6.01452C16.5683 5.98594 17.0833 5.99034 17.5921 6.11344C19.1123 6.48276 19.9396 7.50279 19.9976 9.08999C20.0534 10.6134 19.3824 11.6426 17.9388 12.1637C17.1487 12.4494 16.3275 12.544 15.5002 12.5C13.6884 12.4077 12.5508 11.9564 10.0068 12.1724Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/spank.svg b/packages/instant/src/assets/icons/spank.svg
new file mode 100644
index 000000000..1d7320770
--- /dev/null
+++ b/packages/instant/src/assets/icons/spank.svg
@@ -0,0 +1,6 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.3039 18.5295L20.535 19.8495L16.1251 21.5978L15.5923 22.7836L11.0368 21.732L10.0483 23C10.0483 23 6.706 19.5963 6.47705 18.8779C6.06194 18.8779 5.22531 18.8779 4.75029 18.8779C4.75029 18.073 4.67754 14.0071 4.67754 14.0071L3 13.4272L5.07981 9.12767C5.07981 9.12767 4.37584 8.07604 4.22606 7.61947C4.86798 7.35549 8.04119 5.14405 8.04119 5.14405L7.92564 3.53199L12.4512 3.73539L13.2386 2L17.1521 5.21113L18.5002 4.30448L20.5843 8.56291L22.1227 8.59969L22.0307 13.6241L23 14.6281L20.3039 18.5295ZM10.0076 20.6393L10.4591 19.8949L14.6208 21.0893L14.7706 20.4835C14.7706 20.4835 18.1343 19.3085 18.834 19.1354C18.6949 18.813 18.4788 18.311 18.4788 18.311L21.1213 14.9073L20.488 14.4615L20.7875 9.98671L19.7369 10.0884L18.008 6.2476L17.1714 7.11747L13.949 4.3456L13.2621 5.35611L9.5069 5.0813L9.67594 5.92303L6.0705 7.96352L6.6846 9.07141L4.97497 12.6049L6.14539 12.9966L6.31229 17.1944H7.11469L10.0076 20.6393Z" fill="white"/>
+<path d="M14.9588 9.84174C14.5758 10.1793 14.2099 10.4995 13.8248 10.8393C13.3176 10.3978 12.772 10.1815 12.1322 10.2702C11.5973 10.3437 11.1415 10.7029 11.0538 11.1379C10.9597 11.6074 11.0966 11.9601 11.5459 12.1938C12.0402 12.4513 12.5687 12.6439 13.0651 12.8949C13.6429 13.187 14.0772 13.6025 14.2891 14.2603C14.5908 15.1929 14.2142 16.4934 13.0544 17.1274C11.6337 17.9063 9.57312 17.7765 8.3171 16.7292C8.22937 16.6556 8.16304 16.5583 8.04108 16.422C8.44121 16.0779 8.82208 15.7512 9.21578 15.4136C9.42976 15.5521 9.61377 15.6495 9.77211 15.7793C10.3113 16.225 10.9383 16.2164 11.5673 16.1298C12.0702 16.0606 12.4489 15.6711 12.5174 15.2189C12.5944 14.7104 12.3419 14.3598 11.9375 14.1088C11.7599 13.9985 11.5652 13.9141 11.3726 13.834C11.1801 13.7539 10.9746 13.702 10.7821 13.6241C9.96469 13.2931 9.29496 12.8084 9.21151 11.8346C9.12164 10.809 9.50679 9.96724 10.3777 9.43494C11.6914 8.63216 13.0566 8.60403 14.4196 9.34406C14.5416 9.40897 14.6485 9.50418 14.7534 9.59723C14.8176 9.65781 14.8689 9.73571 14.9588 9.84174Z" fill="white"/>
+<path d="M16.7369 15.1691C16.7369 15.1691 16.0073 15.1691 15.5922 15.1691C15.7869 13.0442 16.0394 10.9669 16.2555 8.85937C16.8632 8.85937 17.4066 8.85937 17.9758 8.85937C17.9951 9.02382 18.0165 9.24669 18.0165 9.24669L16.7369 15.1691Z" fill="white"/>
+<path d="M15.2669 15.7403C15.8361 15.8507 16.8781 16.0562 16.8781 16.0562L16.6748 18.1076C16.6748 18.1076 15.6135 17.8436 15.0273 17.6964C15.1064 17.0451 15.1835 16.4154 15.2669 15.7403Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/wax.svg b/packages/instant/src/assets/icons/wax.svg
new file mode 100644
index 000000000..8bcb73015
--- /dev/null
+++ b/packages/instant/src/assets/icons/wax.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8566 15.9922L13.0585 13.0958L14.0716 15.9922H16.4376L18.2404 11.0395H16.3999L15.1617 14.1781L13.9221 11.0395H11.9321L10.1293 15.9922H11.8566ZM9.61222 15.5L10.5002 13.0958L9.61222 11.0395H7.76192L9.61222 15.5Z" fill="white"/>
+<path d="M23.3998 11.4139C23.0267 10.378 22.3098 9.45197 21.973 8.43159C21.5691 7.21137 21.263 5.85744 20.2554 4.97781C19.4113 4.24173 18.4317 3.68721 17.3472 3.40854C16.4766 3.18617 15.5277 3.24247 14.7087 2.83432C12.3009 1.6352 10.3248 3.45499 8.1377 4.31773C6.57948 4.93136 4.74736 5.30996 3.89908 6.97915C3.34567 8.06989 3.50778 9.03678 3.27579 10.2035C3.03822 11.3928 2.31012 12.4765 2.45686 13.7319C2.64133 15.3195 3.7174 16.6143 3.83759 18.2708C3.96755 20.0878 5.40698 19.9301 6.53197 20.8337C7.05044 21.2503 7.32156 21.9343 7.87776 22.296C8.25509 22.5395 8.70229 22.4945 9.11036 22.6394C9.50026 22.7773 9.82727 23.0659 10.1976 23.2474C11.8299 24.0482 13.4775 23.0602 15.1629 23.1405C16.812 23.2179 17.9831 22.1327 19.2492 21.0068C20.0807 20.2679 21.0786 19.9681 21.8891 19.2081C22.7807 18.3721 22.7835 17.2561 22.8688 16.0992C22.8953 15.7347 22.954 15.3687 23.0197 15.0028C23.2517 13.7375 23.8484 12.6651 23.3998 11.4139ZM12.9996 21.2024C8.50943 21.2024 4.85497 17.5221 4.85497 13.0001C4.85497 8.47663 8.50943 4.79766 12.9996 4.79766C17.4898 4.79766 21.1442 8.47663 21.1442 13.0001C21.1442 17.5221 17.4898 21.2024 12.9996 21.2024Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/zil.svg b/packages/instant/src/assets/icons/zil.svg
new file mode 100644
index 000000000..1a9218201
--- /dev/null
+++ b/packages/instant/src/assets/icons/zil.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6598 10.9663L8 6.74312V5H11.0169L19 9.41624V12.4183L11.0169 16.0592L16.548 18.0682V14.7788L19 13.517V19.1048C19 20.5231 17.5402 21.4375 16.3161 20.7859L8 17.3024V14.4787L15.6598 10.9663Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/icons/zrx.svg b/packages/instant/src/assets/icons/zrx.svg
new file mode 100644
index 000000000..07518f551
--- /dev/null
+++ b/packages/instant/src/assets/icons/zrx.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.6726 18.5002L22.6787 18.5063L22.625 18.5868C22.641 18.558 22.6569 18.5291 22.6726 18.5002V18.5002H22.6726ZM22.7893 18.5002L21.3866 17.0053L17.9692 12.9131L19.6779 11.0919L17.1249 7.89955L18.8337 6.07835L20.0599 4.74999C20.663 5.26419 21.2058 5.83552 21.6882 6.46394C22.1707 7.09242 22.5828 7.77444 22.9245 8.5101C23.2663 9.2457 23.5309 10.0206 23.7186 10.8347C23.9062 11.6489 24 12.4916 24 13.3628C24 14.3055 23.8928 15.216 23.6784 16.0945C23.4703 16.9468 23.174 17.7487 22.7893 18.5L22.7893 18.5002ZM6.74427 15.3604L8.87512 18.1019L7.20654 19.8795L5.94009 21.2502L5.91999 21.2288C5.3169 20.7291 4.77415 20.1651 4.29169 19.5368C3.80923 18.9086 3.39714 18.2268 3.05539 17.4915C2.71365 16.7562 2.45567 15.9816 2.28144 15.1677C2.09382 14.3539 2 13.5114 2 12.6405C2 11.6981 2.10721 10.7913 2.32164 9.92041C2.53608 9.04943 2.83091 8.24276 3.20615 7.50025L4.61334 8.99943L8.45293 13.54L6.7442 15.3605L6.74427 15.3604ZM7.89849 8.87512L6.12088 7.20654L4.75015 5.94009L4.77157 5.91999C5.27132 5.3169 5.83531 4.77415 6.46352 4.29169C7.09178 3.80923 7.77357 3.39714 8.50886 3.05539C9.2442 2.71365 10.0188 2.45567 10.8326 2.28144C11.6465 2.09382 12.489 2 13.3599 2C14.3023 2 15.209 2.10721 16.08 2.32164C16.9509 2.53608 17.7576 2.83091 18.5001 3.20615L17.0866 4.55302L12.9101 8.0307L11.0896 6.32197L7.89835 8.87496L7.89849 8.87512ZM18.1019 17.1252L19.8795 18.7938L21.2503 20.0602L21.2288 20.0803C20.7291 20.6834 20.1651 21.2262 19.5369 21.7086C18.9086 22.1911 18.2268 22.6032 17.4916 22.9449C16.7562 23.2867 15.9817 23.5447 15.1678 23.7189C14.3539 23.9065 13.5114 24.0003 12.6405 24.0003C11.6981 24.0003 10.7914 23.8931 9.92046 23.6787C9.04952 23.4643 8.2428 23.1694 7.50029 22.7942L8.91381 21.4473L13.54 17.5474L15.3606 19.6782L18.1021 17.1252L18.1019 17.1252Z" fill="white"/>
+</svg>
diff --git a/packages/instant/src/assets/powered_by_0x.svg b/packages/instant/src/assets/powered_by_0x.svg
new file mode 100644
index 000000000..e3d007d0b
--- /dev/null
+++ b/packages/instant/src/assets/powered_by_0x.svg
@@ -0,0 +1,17 @@
+<svg width="108" height="18" viewBox="0 0 108 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.17959 10.0032V13.5455H0V4.49716H3.29917C4.27807 4.49716 5.04398 4.74988 5.59692 5.25533C6.15395 5.76077 6.43246 6.42986 6.43246 7.26261C6.43246 8.14092 6.16009 8.8183 5.61535 9.29474C5.0747 9.76705 4.29855 10.0032 3.28688 10.0032H1.17959ZM1.17959 9.02752H3.29917C3.92992 9.02752 4.41323 8.87837 4.74909 8.58008C5.08494 8.27764 5.25287 7.84263 5.25287 7.27504C5.25287 6.73645 5.08494 6.30558 4.74909 5.98242C4.41323 5.65927 3.95245 5.49148 3.36675 5.47905H1.17959V9.02752Z" fill="#777777"/>
+<path d="M7.37245 10.1213C7.37245 9.46254 7.49942 8.87009 7.75336 8.34393C8.01139 7.81777 8.36773 7.41175 8.82236 7.12589C9.28109 6.84002 9.80331 6.69709 10.389 6.69709C11.2942 6.69709 12.0253 7.01403 12.5823 7.6479C13.1434 8.28178 13.424 9.12488 13.424 10.1772V10.258C13.424 10.9126 13.2991 11.5009 13.0492 12.0229C12.8035 12.5408 12.4492 12.9447 11.9864 13.2347C11.5276 13.5247 10.9993 13.6697 10.4013 13.6697C9.50022 13.6697 8.76912 13.3528 8.20799 12.7189C7.65096 12.085 7.37245 11.2461 7.37245 10.2021V10.1213ZM8.51518 10.258C8.51518 11.0037 8.68515 11.6024 9.02511 12.054C9.36915 12.5056 9.82788 12.7314 10.4013 12.7314C10.9788 12.7314 11.4375 12.5035 11.7775 12.0478C12.1174 11.5879 12.2874 10.9457 12.2874 10.1213C12.2874 9.38382 12.1133 8.78723 11.7652 8.3315C11.4212 7.87163 10.9624 7.64169 10.389 7.64169C9.82788 7.64169 9.3753 7.86748 9.03125 8.31907C8.6872 8.77066 8.51518 9.41696 8.51518 10.258Z" fill="#777777"/>
+<path d="M20.735 11.9608L22.0129 6.82138H23.1495L21.2142 13.5455H20.2927L18.6769 8.44957L17.1041 13.5455H16.1825L14.2534 6.82138H15.3838L16.6925 11.8551L18.2407 6.82138H19.1561L20.735 11.9608Z" fill="#777777"/>
+<path d="M27.0692 13.6697C26.1681 13.6697 25.4349 13.3714 24.8697 12.7749C24.3045 12.1741 24.0219 11.3725 24.0219 10.3699V10.1586C24.0219 9.49154 24.1468 8.89702 24.3967 8.375C24.6506 7.84884 25.0028 7.43868 25.4534 7.14453C25.908 6.84624 26.3995 6.69709 26.9279 6.69709C27.7921 6.69709 28.4638 6.98503 28.943 7.5609C29.4222 8.13678 29.6618 8.96123 29.6618 10.0343V10.5128H25.1585C25.1749 11.1757 25.3653 11.7122 25.7298 12.1223C26.0985 12.5283 26.5654 12.7314 27.1306 12.7314C27.532 12.7314 27.872 12.6485 28.1505 12.4828C28.429 12.3171 28.6727 12.0975 28.8816 11.824L29.5758 12.3709C29.0188 13.2368 28.1832 13.6697 27.0692 13.6697ZM26.9279 7.64169C26.4691 7.64169 26.0841 7.81155 25.7729 8.15128C25.4616 8.48686 25.2691 8.95916 25.1953 9.56818H28.5252V9.48118C28.4925 8.89702 28.3368 8.44543 28.0583 8.12642C27.7798 7.80327 27.403 7.64169 26.9279 7.64169Z" fill="#777777"/>
+<path d="M34.1959 7.85298C34.0238 7.82398 33.8375 7.80948 33.6368 7.80948C32.8914 7.80948 32.3855 8.13056 32.1193 8.77273V13.5455H30.9827V6.82138H32.0886L32.107 7.59819C32.4797 6.99746 33.0081 6.69709 33.6921 6.69709C33.9133 6.69709 34.0812 6.72609 34.1959 6.78409V7.85298Z" fill="#777777"/>
+<path d="M37.8821 13.6697C36.981 13.6697 36.2479 13.3714 35.6826 12.7749C35.1174 12.1741 34.8348 11.3725 34.8348 10.3699V10.1586C34.8348 9.49154 34.9597 8.89702 35.2096 8.375C35.4635 7.84884 35.8158 7.43868 36.2663 7.14453C36.7209 6.84624 37.2124 6.69709 37.7408 6.69709C38.605 6.69709 39.2767 6.98503 39.7559 7.5609C40.2351 8.13678 40.4747 8.96123 40.4747 10.0343V10.5128H35.9714C35.9878 11.1757 36.1782 11.7122 36.5428 12.1223C36.9114 12.5283 37.3783 12.7314 37.9435 12.7314C38.3449 12.7314 38.6849 12.6485 38.9634 12.4828C39.2419 12.3171 39.4856 12.0975 39.6945 11.824L40.3887 12.3709C39.8317 13.2368 38.9962 13.6697 37.8821 13.6697ZM37.7408 7.64169C37.2821 7.64169 36.8971 7.81155 36.5858 8.15128C36.2745 8.48686 36.082 8.95916 36.0083 9.56818H39.3382V9.48118C39.3054 8.89702 39.1497 8.44543 38.8712 8.12642C38.5927 7.80327 38.2159 7.64169 37.7408 7.64169Z" fill="#777777"/>
+<path d="M41.5192 10.1275C41.5192 9.09588 41.7608 8.26728 42.2441 7.64169C42.7274 7.01196 43.3602 6.69709 44.1425 6.69709C44.9207 6.69709 45.5372 6.96638 45.9918 7.50497V4H47.1284V13.5455H46.0839L46.0287 12.8246C45.574 13.388 44.9412 13.6697 44.1302 13.6697C43.3602 13.6697 42.7315 13.3507 42.2441 12.7127C41.7608 12.0747 41.5192 11.242 41.5192 10.2145V10.1275ZM42.6558 10.258C42.6558 11.0203 42.8114 11.6169 43.1227 12.0478C43.434 12.4786 43.864 12.6941 44.4129 12.6941C45.1337 12.6941 45.66 12.3668 45.9918 11.7122V8.62358C45.6518 7.9897 45.1296 7.67276 44.4251 7.67276C43.8681 7.67276 43.434 7.89027 43.1227 8.32528C42.8114 8.7603 42.6558 9.40453 42.6558 10.258Z" fill="#777777"/>
+<path d="M57.6464 10.258C57.6464 11.2855 57.4129 12.112 56.946 12.7376C56.4791 13.359 55.8524 13.6697 55.066 13.6697C54.2264 13.6697 53.5772 13.3694 53.1185 12.7686L53.0632 13.5455H52.0188V4H53.1553V7.5609C53.6141 6.98503 54.2469 6.69709 55.0538 6.69709C55.8606 6.69709 56.4934 7.00574 56.9522 7.62305C57.415 8.24035 57.6464 9.08552 57.6464 10.1586V10.258ZM56.5098 10.1275C56.5098 9.34446 56.3603 8.73958 56.0613 8.31285C55.7623 7.88613 55.3323 7.67276 54.7711 7.67276C54.0216 7.67276 53.483 8.02492 53.1553 8.72923V11.6376C53.5035 12.3419 54.0462 12.6941 54.7834 12.6941C55.3282 12.6941 55.7521 12.4807 56.0552 12.054C56.3583 11.6272 56.5098 10.9851 56.5098 10.1275Z" fill="#777777"/>
+<path d="M61.1852 11.8613L62.7334 6.82138H63.9498L61.2773 14.5833C60.8637 15.7019 60.2063 16.2612 59.3052 16.2612L59.0902 16.2425L58.6663 16.1618V15.2296L58.9734 15.2544C59.3584 15.2544 59.6574 15.1757 59.8704 15.0183C60.0875 14.8609 60.2657 14.5729 60.4049 14.1545L60.6568 13.4709L58.2853 6.82138H59.5264L61.1852 11.8613Z" fill="#777777"/>
+<path d="M72.7808 11.3763L74.178 9.93067L72.441 7.58664L70.2293 4.45722C69.448 5.79067 69 7.34287 69 9C69 11.7452 70.2293 14.203 72.1682 15.8537L74.9755 13.8697C74.0206 13.2748 73.2514 12.4087 72.7808 11.3763Z" fill="#777777"/>
+<path d="M75.6237 3.78081L77.0693 5.17803L79.4134 3.44099L82.5428 1.22933C81.2093 0.447982 79.6571 0 78 0C75.2548 0 72.797 1.22933 71.1463 3.16816L73.1303 5.97552C73.7252 5.02063 74.5913 4.25139 75.6237 3.78081Z" fill="#777777"/>
+<path d="M81.822 8.06933L83.559 10.4134L85.7707 13.5428C86.552 12.2093 87 10.6571 87 9C87 6.2548 85.7707 3.79695 83.8318 2.14628L81.0245 4.13031C81.9794 4.7252 82.7486 5.5913 83.2192 6.62368L81.822 8.06933Z" fill="#777777"/>
+<path d="M84.8537 14.8318L82.8697 12.0245C82.2748 12.9794 81.4087 13.7486 80.3763 14.2192L78.9307 12.822L76.5866 14.559L73.4572 16.7707C74.7907 17.552 76.3429 18 78 18C80.7452 18 83.203 16.7707 84.8537 14.8318Z" fill="#777777"/>
+<path d="M95.7487 3.89648C93.6141 3.89648 92.2419 5.54671 92.2419 8.8651C92.2419 12.1566 93.6231 13.8247 95.7487 13.8247C97.8742 13.8247 99.2733 12.1566 99.2733 8.8651C99.2733 5.57361 97.8742 3.89648 95.7487 3.89648ZM93.4348 8.87406C93.4348 6.41666 94.1971 4.97272 95.7397 4.97272C96.2061 4.97272 96.6097 5.10725 96.9594 5.38527L93.928 11.5826C93.6052 10.9279 93.4348 10.031 93.4348 8.87406ZM95.7487 12.7664C95.2823 12.7664 94.8877 12.6319 94.5469 12.3718L97.5783 6.18348C97.9101 6.85613 98.0715 7.74402 98.0715 8.87406C98.0715 11.3135 97.2913 12.7664 95.7487 12.7664Z" fill="#777777"/>
+<path d="M104.96 10.085L106.915 6.7666H105.704L104.09 9.50203H103.596L102.018 6.7666H100.78L102.708 10.1298L100.565 13.6545H101.838L103.587 10.7666H104.072L105.785 13.6545H107.094L104.96 10.085Z" fill="#777777"/>
+</svg>
diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx
index 520ac33d5..b825255c4 100644
--- a/packages/instant/src/components/erc20_asset_amount_input.tsx
+++ b/packages/instant/src/components/erc20_asset_amount_input.tsx
@@ -22,7 +22,8 @@ export interface ERC20AssetAmountInputProps {
onSelectAssetClick?: (asset?: ERC20Asset) => void;
startingFontSizePx: number;
fontColor?: ColorOption;
- isDisabled: boolean;
+ isInputDisabled: boolean;
+ canSelectOtherAsset: boolean;
numberOfAssetsAvailable?: number;
}
@@ -50,14 +51,15 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
);
}
private readonly _renderContentForAsset = (asset: ERC20Asset): React.ReactNode => {
- const { onChange, ...rest } = this.props;
- const amountBorderBottom = this.props.isDisabled ? '' : `1px solid ${transparentWhite}`;
+ const { onChange, isInputDisabled, ...rest } = this.props;
+ const amountBorderBottom = isInputDisabled ? '' : `1px solid ${transparentWhite}`;
const onSymbolClick = this._generateSelectAssetClickHandler();
return (
<React.Fragment>
<Container borderBottom={amountBorderBottom} display="inline-block">
<ScalingAmountInput
{...rest}
+ isDisabled={isInputDisabled}
textLengthThreshold={this._textLengthThresholdForAsset(asset)}
maxFontSizePx={this.props.startingFontSizePx}
onAmountChange={this._handleChange}
@@ -74,11 +76,11 @@ export class ERC20AssetAmountInput extends React.Component<ERC20AssetAmountInput
fontSize={`${this.state.currentFontSizePx}px`}
fontColor={ColorOption.white}
textTransform="uppercase"
- onClick={onSymbolClick}
+ onClick={this.props.canSelectOtherAsset ? onSymbolClick : undefined}
>
{assetUtils.formattedSymbolForAsset(asset)}
</Text>
- {this._renderChevronIcon()}
+ {this.props.canSelectOtherAsset && this._renderChevronIcon()}
</Flex>
</Container>
</React.Fragment>
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx
index e4d8749a9..1b1921acb 100644
--- a/packages/instant/src/components/erc20_token_selector.tsx
+++ b/packages/instant/src/components/erc20_token_selector.tsx
@@ -78,6 +78,7 @@ interface TokenSelectorRowProps {
class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
public render(): React.ReactNode {
const { token } = this.props;
+ const circleColor = token.metaData.primaryColor || 'black';
const displaySymbol = assetUtils.bestNameForAsset(token);
return (
<Container
@@ -93,11 +94,9 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
<Container marginLeft="5px">
<Flex justify="flex-start">
<Container marginRight="10px">
- <Circle diameter={30} rawColor={token.metaData.primaryColor}>
- <Flex height="100%">
- <Text fontColor={ColorOption.white} fontSize="8px">
- {displaySymbol}
- </Text>
+ <Circle diameter={26} rawColor={circleColor}>
+ <Flex height="100%" width="100%">
+ <TokenSelectorRowIcon token={token} />
</Flex>
</Circle>
</Container>
@@ -117,3 +116,25 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> {
this.props.onClick(this.props.token);
};
}
+
+interface TokenSelectorRowIconProps {
+ token: ERC20Asset;
+}
+
+const TokenSelectorRowIcon: React.StatelessComponent<TokenSelectorRowIconProps> = props => {
+ const { token } = props;
+ const iconUrlIfExists = token.metaData.iconUrl;
+ const TokenIcon = require(`../assets/icons/${token.metaData.symbol}.svg`);
+ const displaySymbol = assetUtils.bestNameForAsset(token);
+ if (!_.isUndefined(iconUrlIfExists)) {
+ return <img src={iconUrlIfExists} />;
+ } else if (!_.isUndefined(TokenIcon)) {
+ return <TokenIcon />;
+ } else {
+ return (
+ <Text fontColor={ColorOption.white} fontSize="8px">
+ {displaySymbol}
+ </Text>
+ );
+ }
+};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 698bfef17..47c938472 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -1,5 +1,7 @@
import * as React from 'react';
+import PoweredByLogo from '../assets/powered_by_0x.svg';
+import { ZERO_EX_SITE_URL } from '../constants';
import { AvailableERC20TokenSelector } from '../containers/available_erc20_token_selector';
import { ConnectedBuyOrderProgressOrPaymentMethod } from '../containers/connected_buy_order_progress_or_payment_method';
import { CurrentStandardSlidingPanel } from '../containers/current_standard_sliding_panel';
@@ -64,6 +66,17 @@ export class ZeroExInstantContainer extends React.Component<{}, ZeroExInstantCon
</SlidingPanel>
<CurrentStandardSlidingPanel />
</Container>
+ <Container
+ display={{ sm: 'none', default: 'block' }}
+ marginTop="10px"
+ marginLeft="auto"
+ marginRight="auto"
+ width="140px"
+ >
+ <a href={ZERO_EX_SITE_URL} target="_blank">
+ <PoweredByLogo />
+ </a>
+ </Container>
</Container>
</React.Fragment>
);
diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx
index 8be53ee20..9435d8c7c 100644
--- a/packages/instant/src/components/zero_ex_instant_provider.tsx
+++ b/packages/instant/src/components/zero_ex_instant_provider.tsx
@@ -12,6 +12,7 @@ import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer';
import { store, Store } from '../redux/store';
import { fonts } from '../style/fonts';
import { AccountState, AffiliateInfo, AssetMetaData, Network, OrderSource } from '../types';
+import { analytics, disableAnalytics } from '../util/analytics';
import { assetUtils } from '../util/asset';
import { errorFlasher } from '../util/error_flasher';
import { gasPriceEstimator } from '../util/gas_price_estimator';
@@ -36,6 +37,7 @@ export interface ZeroExInstantProviderOptionalProps {
additionalAssetMetaDataMap: ObjectMap<AssetMetaData>;
networkId: Network;
affiliateInfo: AffiliateInfo;
+ shouldDisableAnalyticsTracking: boolean;
}
export class ZeroExInstantProvider extends React.Component<ZeroExInstantProviderProps> {
@@ -121,6 +123,18 @@ export class ZeroExInstantProvider extends React.Component<ZeroExInstantProvider
gasPriceEstimator.getGasInfoAsync();
// tslint:disable-next-line:no-floating-promises
this._flashErrorIfWrongNetwork();
+
+ // Analytics
+ disableAnalytics(this.props.shouldDisableAnalyticsTracking || false);
+ analytics.addEventProperties({
+ embeddedHost: window.location.host,
+ embeddedUrl: window.location.href,
+ networkId: state.network,
+ providerName: state.providerState.name,
+ gitSha: process.env.GIT_SHA,
+ npmVersion: process.env.NPM_PACKAGE_VERSION,
+ });
+ analytics.trackInstantOpened();
}
public componentWillUnmount(): void {
if (this._accountUpdateHeartbeat) {
diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts
index 5bd2349b3..be6077ca9 100644
--- a/packages/instant/src/constants.ts
+++ b/packages/instant/src/constants.ts
@@ -16,6 +16,7 @@ export const BUY_QUOTE_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 15;
export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6);
export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = ONE_MINUTE_MS * 2;
export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info';
+export const HEAP_ANALYTICS_ID = process.env.HEAP_ANALYTICS_ID;
export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2';
export const PROGRESS_STALL_AT_WIDTH = '95%';
export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200;
@@ -31,6 +32,7 @@ export const ETHEREUM_NODE_URL_BY_NETWORK = {
[Network.Mainnet]: 'https://mainnet.infura.io/',
[Network.Kovan]: 'https://kovan.infura.io/',
};
+export const ZERO_EX_SITE_URL = 'https://www.0xproject.com/';
export const BLOCK_POLLING_INTERVAL_MS = 10000; // 10s
export const NO_ACCOUNT: AccountNotReady = {
state: AccountState.None,
@@ -47,4 +49,5 @@ export const PROVIDER_TYPE_TO_NAME: { [key in ProviderType]: string } = {
[ProviderType.Mist]: 'Mist',
[ProviderType.CoinbaseWallet]: 'Coinbase Wallet',
[ProviderType.Parity]: 'Parity',
+ [ProviderType.Fallback]: 'Fallback',
};
diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
index 2c2661e1a..a39bc46a2 100644
--- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
+++ b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts
@@ -23,9 +23,10 @@ interface ConnectedState {
assetBuyer: AssetBuyer;
value?: BigNumber;
asset?: ERC20Asset;
- isDisabled: boolean;
+ isInputDisabled: boolean;
numberOfAssetsAvailable?: number;
affiliateInfo?: AffiliateInfo;
+ canSelectOtherAsset: boolean;
}
interface ConnectedDispatch {
@@ -43,21 +44,27 @@ type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps;
const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => {
const processState = state.buyOrderState.processState;
- const isEnabled = processState === OrderProcessState.None || processState === OrderProcessState.Failure;
- const isDisabled = !isEnabled;
+ const isInputEnabled = processState === OrderProcessState.None || processState === OrderProcessState.Failure;
+ const isInputDisabled = !isInputEnabled;
const selectedAsset =
!_.isUndefined(state.selectedAsset) && state.selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20
? (state.selectedAsset as ERC20Asset)
: undefined;
const numberOfAssetsAvailable = _.isUndefined(state.availableAssets) ? undefined : state.availableAssets.length;
+ const canSelectOtherAsset =
+ numberOfAssetsAvailable && numberOfAssetsAvailable > 1
+ ? isInputEnabled || processState === OrderProcessState.Success
+ : false;
+
const assetBuyer = state.providerState.assetBuyer;
return {
assetBuyer,
value: state.selectedAssetUnitAmount,
asset: selectedAsset,
- isDisabled,
+ isInputDisabled,
numberOfAssetsAvailable,
affiliateInfo: state.affiliateInfo,
+ canSelectOtherAsset,
};
};
@@ -102,8 +109,9 @@ const mergeProps = (
onChange: (value, asset) => {
connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset, connectedState.affiliateInfo);
},
- isDisabled: connectedState.isDisabled,
+ isInputDisabled: connectedState.isInputDisabled,
numberOfAssetsAvailable: connectedState.numberOfAssetsAvailable,
+ canSelectOtherAsset: connectedState.canSelectOtherAsset,
};
};
diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts
index 6ecb9af85..b24c9c83d 100644
--- a/packages/instant/src/data/asset_meta_data_map.ts
+++ b/packages/instant/src/data/asset_meta_data_map.ts
@@ -2,8 +2,6 @@ import { AssetProxyId, ObjectMap } from '@0x/types';
import { AssetMetaData } from '../types';
-// Map from assetData string to AssetMetaData object
-// TODO: import this from somewhere else.
export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
'0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498': {
assetProxyId: AssetProxyId.ERC20,
@@ -85,7 +83,7 @@ export const assetMetaDataMap: ObjectMap<AssetMetaData> = {
'0xf47261b0000000000000000000000000e0b7927c4af23765cb51314a0e0521a9645f0e2a': {
assetProxyId: AssetProxyId.ERC20,
decimals: 9,
- primaryColor: '#BC9952',
+ primaryColor: '#DEB564',
symbol: 'dgd',
name: 'DigixDao',
},
diff --git a/packages/instant/src/globals.d.ts b/packages/instant/src/globals.d.ts
index 94e63a32d..1b5fa443d 100644
--- a/packages/instant/src/globals.d.ts
+++ b/packages/instant/src/globals.d.ts
@@ -1,3 +1,9 @@
+declare module '*.svg' {
+ const content: any;
+ /* tslint:disable */
+ export default content;
+ /* tslint:enable */
+}
declare module '*.json' {
const json: any;
/* tslint:disable */
diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index 0274db30c..5010347b3 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -35,6 +35,9 @@ export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFA
if (!_.isUndefined(props.provider)) {
assert.isWeb3Provider('props.provider', props.provider);
}
+ if (!_.isUndefined(props.shouldDisableAnalyticsTracking)) {
+ assert.isBoolean('props.shouldDisableAnalyticsTracking', props.shouldDisableAnalyticsTracking);
+ }
assert.isString('selector', selector);
const appendToIfExists = document.querySelector(selector);
assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`);
diff --git a/packages/instant/src/redux/analytics_middleware.ts b/packages/instant/src/redux/analytics_middleware.ts
new file mode 100644
index 000000000..f971dbd33
--- /dev/null
+++ b/packages/instant/src/redux/analytics_middleware.ts
@@ -0,0 +1,59 @@
+import { Web3Wrapper } from '@0x/web3-wrapper';
+import * as _ from 'lodash';
+import { Middleware } from 'redux';
+
+import { ETH_DECIMALS } from '../constants';
+import { Account, AccountState } from '../types';
+import { analytics } from '../util/analytics';
+
+import { Action, ActionTypes } from './actions';
+
+import { State } from './reducer';
+
+const shouldTriggerWalletReady = (prevAccount: Account, curAccount: Account): boolean => {
+ const didJustTurnReady = curAccount.state === AccountState.Ready && prevAccount.state !== AccountState.Ready;
+ if (didJustTurnReady) {
+ return true;
+ }
+
+ if (curAccount.state === AccountState.Ready && prevAccount.state === AccountState.Ready) {
+ // Account was ready, and is now ready again, but address has changed
+ return curAccount.address !== prevAccount.address;
+ }
+
+ return false;
+};
+
+export const analyticsMiddleware: Middleware = store => next => middlewareAction => {
+ const prevState = store.getState() as State;
+ const prevAccount = prevState.providerState.account;
+
+ const nextAction = next(middlewareAction) as Action;
+
+ const curState = store.getState() as State;
+ const curAccount = curState.providerState.account;
+
+ switch (nextAction.type) {
+ case ActionTypes.SET_ACCOUNT_STATE_READY:
+ if (curAccount.state === AccountState.Ready && shouldTriggerWalletReady(prevAccount, curAccount)) {
+ const ethAddress = curAccount.address;
+ analytics.addUserProperties({ ethAddress });
+ analytics.trackWalletReady();
+ }
+ break;
+ case ActionTypes.UPDATE_ACCOUNT_ETH_BALANCE:
+ if (
+ curAccount.state === AccountState.Ready &&
+ curAccount.ethBalanceInWei &&
+ !_.isEqual(curAccount, prevAccount)
+ ) {
+ const ethBalanceInUnitAmount = Web3Wrapper.toUnitAmount(
+ curAccount.ethBalanceInWei,
+ ETH_DECIMALS,
+ ).toString();
+ analytics.addUserProperties({ ethBalanceInUnitAmount });
+ }
+ }
+
+ return nextAction;
+};
diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts
index 20710765d..11bba3876 100644
--- a/packages/instant/src/redux/store.ts
+++ b/packages/instant/src/redux/store.ts
@@ -1,7 +1,8 @@
import * as _ from 'lodash';
-import { createStore, Store as ReduxStore } from 'redux';
-import { devToolsEnhancer } from 'redux-devtools-extension/developmentOnly';
+import { applyMiddleware, createStore, Store as ReduxStore } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
+import { analyticsMiddleware } from './analytics_middleware';
import { createReducer, State } from './reducer';
export type Store = ReduxStore<State>;
@@ -9,6 +10,6 @@ export type Store = ReduxStore<State>;
export const store = {
create: (initialState: State): Store => {
const reducer = createReducer(initialState);
- return createStore(reducer, initialState, devToolsEnhancer({}));
+ return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(analyticsMiddleware)));
},
};
diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts
index 67f21a396..999d50fed 100644
--- a/packages/instant/src/types.ts
+++ b/packages/instant/src/types.ts
@@ -51,6 +51,7 @@ export interface ERC20AssetMetaData {
primaryColor?: string;
symbol: string;
name: string;
+ iconUrl?: string;
}
export interface ERC721AssetMetaData {
@@ -164,4 +165,5 @@ export enum ProviderType {
Mist = 'MIST',
CoinbaseWallet = 'COINBASE_WALLET',
Cipher = 'CIPHER',
+ Fallback = 'FALLBACK',
}
diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts
new file mode 100644
index 000000000..2ffaac1dd
--- /dev/null
+++ b/packages/instant/src/util/analytics.ts
@@ -0,0 +1,64 @@
+import { ObjectMap } from '@0x/types';
+
+import { heapUtil } from './heap';
+
+let isDisabled = false;
+export const disableAnalytics = (shouldDisableAnalytics: boolean) => {
+ isDisabled = shouldDisableAnalytics;
+};
+export const evaluateIfEnabled = (fnCall: () => void) => {
+ if (isDisabled) {
+ return;
+ }
+ fnCall();
+};
+
+enum EventNames {
+ INSTANT_OPENED = 'Instant - Opened',
+ WALLET_READY = 'Wallet - Ready',
+}
+const track = (eventName: EventNames, eventData: ObjectMap<string | number> = {}): void => {
+ evaluateIfEnabled(() => {
+ heapUtil.evaluateHeapCall(heap => heap.track(eventName, eventData));
+ });
+};
+function trackingEventFnWithoutPayload(eventName: EventNames): () => void {
+ return () => {
+ track(eventName);
+ };
+}
+// tslint:disable-next-line:no-unused-variable
+function trackingEventFnWithPayload<T extends ObjectMap<string | number>>(
+ eventName: EventNames,
+): (eventDataProperties: T) => void {
+ return (eventDataProperties: T) => {
+ track(eventName, eventDataProperties);
+ };
+}
+
+export interface AnalyticsUserOptions {
+ ethAddress?: string;
+ ethBalanceInUnitAmount?: string;
+}
+export interface AnalyticsEventOptions {
+ embeddedHost?: string;
+ embeddedUrl?: string;
+ networkId?: number;
+ providerName?: string;
+ gitSha?: string;
+ npmVersion?: string;
+}
+export const analytics = {
+ addUserProperties: (properties: AnalyticsUserOptions): void => {
+ evaluateIfEnabled(() => {
+ heapUtil.evaluateHeapCall(heap => heap.addUserProperties(properties));
+ });
+ },
+ addEventProperties: (properties: AnalyticsEventOptions): void => {
+ evaluateIfEnabled(() => {
+ heapUtil.evaluateHeapCall(heap => heap.addEventProperties(properties));
+ });
+ },
+ trackWalletReady: trackingEventFnWithoutPayload(EventNames.WALLET_READY),
+ trackInstantOpened: trackingEventFnWithoutPayload(EventNames.INSTANT_OPENED),
+};
diff --git a/packages/instant/src/util/heap.ts b/packages/instant/src/util/heap.ts
new file mode 100644
index 000000000..78ec3b3cc
--- /dev/null
+++ b/packages/instant/src/util/heap.ts
@@ -0,0 +1,113 @@
+import { ObjectMap } from '@0x/types';
+import { logUtils } from '@0x/utils';
+import * as _ from 'lodash';
+
+import { HEAP_ANALYTICS_ID } from '../constants';
+
+import { AnalyticsEventOptions, AnalyticsUserOptions } from './analytics';
+
+export interface HeapAnalytics {
+ loaded: boolean;
+ appid: string;
+ identify(id: string, idType: string): void;
+ track(eventName: string, eventProperties?: ObjectMap<string | number>): void;
+ resetIdentity(): void;
+ addUserProperties(properties: AnalyticsUserOptions): void;
+ addEventProperties(properties: AnalyticsEventOptions): void;
+ removeEventProperty(property: string): void;
+ clearEventProperties(): void;
+}
+interface ModifiedWindow {
+ heap?: HeapAnalytics;
+ zeroExInstantLoadedHeap?: boolean;
+}
+const getWindow = (): ModifiedWindow => {
+ return window as ModifiedWindow;
+};
+
+const setupZeroExInstantHeap = () => {
+ if (_.isUndefined(HEAP_ANALYTICS_ID)) {
+ return;
+ }
+
+ const curWindow = getWindow();
+ // Set property to specify that this is zeroEx's heap
+ curWindow.zeroExInstantLoadedHeap = true;
+
+ // Typescript-compatible version of https://docs.heapanalytics.com/docs/installation
+ /* tslint:disable */
+ ((window as any).heap = (window as any).heap || []),
+ ((window as any).heap.load = function(e: any, t: any) {
+ ((window as any).heap.appid = e), ((window as any).heap.config = t = t || {});
+ var r = t.forceSSL || 'https:' === (document.location as Location).protocol,
+ a = document.createElement('script');
+ (a.type = 'text/javascript'),
+ (a.async = !0),
+ (a.src = (r ? 'https:' : 'http:') + '//cdn.heapanalytics.com/js/heap-' + e + '.js');
+ var n = document.getElementsByTagName('script')[0];
+ (n.parentNode as Node).insertBefore(a, n);
+ for (
+ var o = function(e: any) {
+ return function() {
+ (window as any).heap.push([e].concat(Array.prototype.slice.call(arguments, 0)));
+ };
+ },
+ p = [
+ 'addEventProperties',
+ 'addUserProperties',
+ 'clearEventProperties',
+ 'identify',
+ 'resetIdentity',
+ 'removeEventProperty',
+ 'setEventProperties',
+ 'track',
+ 'unsetEventProperty',
+ ],
+ c = 0;
+ c < p.length;
+ c++
+ )
+ (window as any).heap[p[c]] = o(p[c]);
+ });
+ (window as any).heap.load(HEAP_ANALYTICS_ID);
+ /* tslint:enable */
+
+ return curWindow.heap as HeapAnalytics;
+};
+
+export const heapUtil = {
+ getHeap: (): HeapAnalytics | undefined => {
+ const curWindow = getWindow();
+ const hasOtherExistingHeapIntegration = curWindow.heap && !curWindow.zeroExInstantLoadedHeap;
+ if (hasOtherExistingHeapIntegration) {
+ return undefined;
+ }
+
+ const zeroExInstantHeapIntegration = curWindow.zeroExInstantLoadedHeap && curWindow.heap;
+ if (zeroExInstantHeapIntegration) {
+ return zeroExInstantHeapIntegration;
+ }
+
+ return setupZeroExInstantHeap();
+ },
+ evaluateHeapCall: (heapFunctionCall: (heap: HeapAnalytics) => void): void => {
+ if (_.isUndefined(HEAP_ANALYTICS_ID)) {
+ return;
+ }
+
+ const curHeap = heapUtil.getHeap();
+ if (curHeap) {
+ try {
+ if (curHeap.appid !== HEAP_ANALYTICS_ID) {
+ // Integrator has included heap after us and reset the app id
+ return;
+ }
+ heapFunctionCall(curHeap);
+ } catch (e) {
+ // We never want analytics to crash our React component
+ // TODO(sk): error reporter here
+ logUtils.log('Analytics error', e);
+ }
+ }
+ },
+};
diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts
index 452a71460..7c788dff2 100644
--- a/packages/instant/src/util/provider_state_factory.ts
+++ b/packages/instant/src/util/provider_state_factory.ts
@@ -56,7 +56,7 @@ export const providerStateFactory = {
getInitialProviderStateFallback: (orderSource: OrderSource, network: Network): ProviderState => {
const provider = providerFactory.getFallbackNoSigningProvider(network);
const providerState: ProviderState = {
- name: envUtil.getProviderName(provider),
+ name: 'Fallback',
provider,
web3Wrapper: new Web3Wrapper(provider),
assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network),