diff options
Diffstat (limited to 'packages/instant/src')
125 files changed, 0 insertions, 7015 deletions
diff --git a/packages/instant/src/assets/icons/ae.svg b/packages/instant/src/assets/icons/ae.svg deleted file mode 100644 index 592400d1a..000000000 --- a/packages/instant/src/assets/icons/ae.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index 9ed9784a4..000000000 --- a/packages/instant/src/assets/icons/agi.svg +++ /dev/null @@ -1,5 +0,0 @@ -<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 deleted file mode 100644 index ed7e1491a..000000000 --- a/packages/instant/src/assets/icons/ant.svg +++ /dev/null @@ -1,5 +0,0 @@ -<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 deleted file mode 100644 index 8136fb688..000000000 --- a/packages/instant/src/assets/icons/ast.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index 9b69ddf9d..000000000 --- a/packages/instant/src/assets/icons/bat.svg +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index bddc90e16..000000000 --- a/packages/instant/src/assets/icons/cvc.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index 901d522ca..000000000 --- a/packages/instant/src/assets/icons/dai.svg +++ /dev/null @@ -1,5 +0,0 @@ -<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 deleted file mode 100644 index 371f89584..000000000 --- a/packages/instant/src/assets/icons/dgd.svg +++ /dev/null @@ -1,5 +0,0 @@ -<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 deleted file mode 100644 index 2e4a90a5d..000000000 --- a/packages/instant/src/assets/icons/dgx.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index 7d5459343..000000000 --- a/packages/instant/src/assets/icons/dnt.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index bb4347df2..000000000 --- a/packages/instant/src/assets/icons/fun.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index ebf6290cf..000000000 --- a/packages/instant/src/assets/icons/gno.svg +++ /dev/null @@ -1,6 +0,0 @@ -<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 deleted file mode 100644 index 7315ce459..000000000 --- a/packages/instant/src/assets/icons/gnt.svg +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 70d35bc2f..000000000 --- a/packages/instant/src/assets/icons/knc.svg +++ /dev/null @@ -1,6 +0,0 @@ -<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 deleted file mode 100644 index 2fddf7ef1..000000000 --- a/packages/instant/src/assets/icons/link.svg +++ /dev/null @@ -1,6 +0,0 @@ -<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 deleted file mode 100644 index cbe4f2202..000000000 --- a/packages/instant/src/assets/icons/lpt.svg +++ /dev/null @@ -1,8 +0,0 @@ -<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 deleted file mode 100644 index 45be622e4..000000000 --- a/packages/instant/src/assets/icons/mana.svg +++ /dev/null @@ -1,8 +0,0 @@ -<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 deleted file mode 100644 index e09d47444..000000000 --- a/packages/instant/src/assets/icons/mkr.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index a0b821c57..000000000 --- a/packages/instant/src/assets/icons/mln.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index a906509af..000000000 --- a/packages/instant/src/assets/icons/omg.svg +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index eb48342e1..000000000 --- a/packages/instant/src/assets/icons/powr.svg +++ /dev/null @@ -1,6 +0,0 @@ -<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 deleted file mode 100644 index fe563dee2..000000000 --- a/packages/instant/src/assets/icons/ren.svg +++ /dev/null @@ -1,12 +0,0 @@ -<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 deleted file mode 100644 index 1be1a6a88..000000000 --- a/packages/instant/src/assets/icons/rep.svg +++ /dev/null @@ -1,7 +0,0 @@ -<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 deleted file mode 100644 index d9eb89634..000000000 --- a/packages/instant/src/assets/icons/req.svg +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index f2892c981..000000000 --- a/packages/instant/src/assets/icons/salt.svg +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index 34b2c432b..000000000 --- a/packages/instant/src/assets/icons/snt.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index 1d7320770..000000000 --- a/packages/instant/src/assets/icons/spank.svg +++ /dev/null @@ -1,6 +0,0 @@ -<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 deleted file mode 100644 index 8bcb73015..000000000 --- a/packages/instant/src/assets/icons/wax.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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 deleted file mode 100644 index 1a9218201..000000000 --- a/packages/instant/src/assets/icons/zil.svg +++ /dev/null @@ -1,3 +0,0 @@ -<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 deleted file mode 100644 index da623710b..000000000 --- a/packages/instant/src/assets/icons/zrx.svg +++ /dev/null @@ -1,6 +0,0 @@ -<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M4.62099 13.9044L6.3287 12.1375L4.20565 9.27256L1.50251 5.44771C0.547534 7.07749 0 8.97462 0 11C0 14.3552 1.50251 17.3593 3.8722 19.3768L7.30341 16.9518C6.13632 16.2248 5.19614 15.1662 4.62099 13.9044Z" fill="white"/> -<path d="M8.09561 4.62099L9.86251 6.3287L12.7274 4.20565L16.5523 1.50251C14.9225 0.547534 13.0254 0 11 0C7.64475 0 4.64072 1.50251 2.62323 3.8722L5.04816 7.30341C5.77525 6.13632 6.83381 5.19614 8.09561 4.62099Z" fill="white"/> -<path d="M15.6713 9.86251L17.7943 12.7274L20.4975 16.5523C21.4525 14.9225 22 13.0254 22 11C22 7.64475 20.4975 4.64072 18.1278 2.62323L14.6966 5.04816C15.8637 5.77525 16.8039 6.83381 17.379 8.09561L15.6713 9.86251Z" fill="white"/> -<path d="M19.3768 18.1278L16.9518 14.6966C16.2248 15.8637 15.1662 16.8039 13.9044 17.379L12.1375 15.6713L9.27256 17.7943L5.44771 20.4975C7.07749 21.4525 8.97462 22 11 22C14.3552 22 17.3593 20.4975 19.3768 18.1278Z" fill="white"/> -</svg> diff --git a/packages/instant/src/assets/powered_by_0x.svg b/packages/instant/src/assets/powered_by_0x.svg deleted file mode 100644 index e3d007d0b..000000000 --- a/packages/instant/src/assets/powered_by_0x.svg +++ /dev/null @@ -1,17 +0,0 @@ -<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/amount_placeholder.tsx b/packages/instant/src/components/amount_placeholder.tsx deleted file mode 100644 index 290e34a07..000000000 --- a/packages/instant/src/components/amount_placeholder.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; - -import { Pulse } from './animations/pulse'; - -import { Text } from './ui/text'; - -interface PlainPlaceholder { - color: ColorOption; -} -const PlainPlaceholder: React.StatelessComponent<PlainPlaceholder> = props => ( - <Text fontWeight="bold" fontColor={props.color}> - — - </Text> -); - -export interface AmountPlaceholderProps { - color: ColorOption; - isPulsating: boolean; -} -export const AmountPlaceholder: React.StatelessComponent<AmountPlaceholderProps> = props => { - if (props.isPulsating) { - return ( - <Pulse> - <PlainPlaceholder color={props.color} /> - </Pulse> - ); - } else { - return <PlainPlaceholder color={props.color} />; - } -}; - -AmountPlaceholder.displayName = 'AmountPlaceholder'; diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx deleted file mode 100644 index 1dff1b1fc..000000000 --- a/packages/instant/src/components/animations/full_rotation.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { keyframes, styled } from '../../style/theme'; - -interface FullRotationProps { - height: string; - width: string; -} -const rotatingKeyframes = keyframes` -from { - transform: rotate(0deg); -} - -to { - transform: rotate(360deg); -} -`; - -export const FullRotation = styled.div<FullRotationProps>` - animation: ${rotatingKeyframes} 2s linear infinite; - height: ${props => props.height}; - width: ${props => props.width}; -`; diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx deleted file mode 100644 index 4f8f25679..000000000 --- a/packages/instant/src/components/animations/position_animation.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { InterpolationValue } from 'styled-components'; - -import { media, OptionallyScreenSpecific, stylesForMedia } from '../../style/media'; -import { css, keyframes, styled } from '../../style/theme'; - -export interface TransitionInfo { - from: string; - to: string; -} - -const generateTransitionInfoCss = ( - key: keyof TransitionInfo, - top?: TransitionInfo, - bottom?: TransitionInfo, - left?: TransitionInfo, - right?: TransitionInfo, -): string => { - const topStringIfExists = top ? `top: ${top[key]};` : ''; - const bottomStringIfExists = bottom ? `bottom: ${bottom[key]};` : ''; - const leftStringIfExists = left ? `left: ${left[key]};` : ''; - const rightStringIfExists = right ? `right: ${right[key]};` : ''; - return ` - ${topStringIfExists} - ${bottomStringIfExists} - ${leftStringIfExists} - ${rightStringIfExists} - `; -}; - -const slideKeyframeGenerator = ( - position: string, - top?: TransitionInfo, - bottom?: TransitionInfo, - left?: TransitionInfo, - right?: TransitionInfo, -) => keyframes` - from { - position: ${position}; - ${generateTransitionInfoCss('from', top, bottom, left, right)} - } - - to { - position: ${position}; - ${generateTransitionInfoCss('to', top, bottom, left, right)} - } -`; - -export interface PositionAnimationSettings { - top?: TransitionInfo; - bottom?: TransitionInfo; - left?: TransitionInfo; - right?: TransitionInfo; - timingFunction: string; - duration?: string; - position?: string; -} - -const generatePositionAnimationCss = (positionSettings: PositionAnimationSettings) => { - return css` - animation-name: ${slideKeyframeGenerator( - positionSettings.position || 'relative', - positionSettings.top, - positionSettings.bottom, - positionSettings.left, - positionSettings.right, - )}; - animation-duration: ${positionSettings.duration || '0.3s'}; - animation-timing-function: ${positionSettings.timingFunction}; - animation-delay: 0s; - animation-iteration-count: 1; - animation-fill-mode: forwards; - position: ${positionSettings.position || 'relative'}; - width: 100%; - `; -}; - -export interface PositionAnimationProps { - positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>; - zIndex?: OptionallyScreenSpecific<number>; - height?: string; -} - -const defaultAnimation = (positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>) => { - const bestDefault = 'default' in positionSettings ? positionSettings.default : positionSettings; - return generatePositionAnimationCss(bestDefault); -}; -const animationForSize = ( - positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>, - sizeKey: 'sm' | 'md' | 'lg', - mediaFn: (...args: any[]) => InterpolationValue[], -) => { - // checking default makes sure we have a PositionAnimationSettings object - // and then we check to see if we have a setting for the specific `sizeKey` - const animationSettingsForSize = 'default' in positionSettings && positionSettings[sizeKey]; - return animationSettingsForSize && mediaFn`${generatePositionAnimationCss(animationSettingsForSize)}`; -}; - -export const PositionAnimation = styled.div<PositionAnimationProps>` - && { - ${props => props.zIndex && stylesForMedia<number>('z-index', props.zIndex)} - ${props => defaultAnimation(props.positionSettings)} - ${props => animationForSize(props.positionSettings, 'sm', media.small)} - ${props => animationForSize(props.positionSettings, 'md', media.medium)} - ${props => animationForSize(props.positionSettings, 'lg', media.large)} - ${props => (props.height ? `height: ${props.height};` : '')} - } -`; diff --git a/packages/instant/src/components/animations/pulse.tsx b/packages/instant/src/components/animations/pulse.tsx deleted file mode 100644 index 01d6ea070..000000000 --- a/packages/instant/src/components/animations/pulse.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { keyframes, styled } from '../../style/theme'; - -const pulsingKeyframes = keyframes` - 0%, 100% { - opacity: 0.2; - } - 50% { - opacity: 100; - } -`; -export const Pulse = styled.div` - animation-name: ${pulsingKeyframes} - animation-duration: 2s; - animation-iteration-count: infinite; -`; diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx deleted file mode 100644 index 6ac47e9a6..000000000 --- a/packages/instant/src/components/animations/slide_animation.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; - -import { OptionallyScreenSpecific } from '../../style/media'; -import { SlideAnimationState } from '../../types'; - -import { PositionAnimation, PositionAnimationSettings } from './position_animation'; - -export interface SlideAnimationProps { - animationState: SlideAnimationState; - slideInSettings: OptionallyScreenSpecific<PositionAnimationSettings>; - slideOutSettings: OptionallyScreenSpecific<PositionAnimationSettings>; - zIndex?: OptionallyScreenSpecific<number>; - height?: string; - onAnimationEnd?: () => void; -} - -export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => { - if (props.animationState === 'none') { - return <React.Fragment>{props.children}</React.Fragment>; - } - const positionSettings = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings; - return ( - <PositionAnimation - onAnimationEnd={props.onAnimationEnd} - height={props.height} - positionSettings={positionSettings} - zIndex={props.zIndex} - > - {props.children} - </PositionAnimation> - ); -}; - -SlideAnimation.displayName = 'SlideAnimation'; diff --git a/packages/instant/src/components/buy_button.tsx b/packages/instant/src/components/buy_button.tsx deleted file mode 100644 index 551e857a5..000000000 --- a/packages/instant/src/components/buy_button.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; -import { AssetProxyId } from '@0x/types'; -import { BigNumber } from '@0x/utils'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { oc } from 'ts-optchain'; - -import { WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX } from '../constants'; -import { ColorOption } from '../style/theme'; -import { AffiliateInfo, Asset, ZeroExInstantError } from '../types'; -import { analytics } from '../util/analytics'; -import { errorReporter } from '../util/error_reporter'; -import { gasPriceEstimator } from '../util/gas_price_estimator'; -import { util } from '../util/util'; - -import { Button } from './ui/button'; - -export interface BuyButtonProps { - accountAddress?: string; - accountEthBalanceInWei?: BigNumber; - buyQuote?: BuyQuote; - assetBuyer: AssetBuyer; - web3Wrapper: Web3Wrapper; - affiliateInfo?: AffiliateInfo; - selectedAsset?: Asset; - onValidationPending: (buyQuote: BuyQuote) => void; - onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void; - onSignatureDenied: (buyQuote: BuyQuote) => void; - onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void; - onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void; - onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void; -} - -export class BuyButton extends React.PureComponent<BuyButtonProps> { - public static defaultProps = { - onClick: util.boundNoop, - onBuySuccess: util.boundNoop, - onBuyFailure: util.boundNoop, - }; - public render(): React.ReactNode { - const { buyQuote, accountAddress, selectedAsset } = this.props; - const shouldDisableButton = _.isUndefined(buyQuote) || _.isUndefined(accountAddress); - const buttonText = - !_.isUndefined(selectedAsset) && selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20 - ? `Buy ${selectedAsset.metaData.symbol.toUpperCase()}` - : 'Buy Now'; - return ( - <Button - width="100%" - onClick={this._handleClick} - isDisabled={shouldDisableButton} - fontColor={ColorOption.white} - > - {buttonText} - </Button> - ); - } - private readonly _handleClick = async () => { - // The button is disabled when there is no buy quote anyway. - const { buyQuote, assetBuyer, affiliateInfo, accountAddress, accountEthBalanceInWei, web3Wrapper } = this.props; - if (_.isUndefined(buyQuote) || _.isUndefined(accountAddress)) { - return; - } - this.props.onValidationPending(buyQuote); - const ethNeededForBuy = buyQuote.worstCaseQuoteInfo.totalEthAmount; - // if we don't have a balance for the user, let the transaction through, it will be handled by the wallet - const hasSufficientEth = _.isUndefined(accountEthBalanceInWei) || accountEthBalanceInWei.gte(ethNeededForBuy); - if (!hasSufficientEth) { - analytics.trackBuyNotEnoughEth(buyQuote); - this.props.onValidationFail(buyQuote, ZeroExInstantError.InsufficientETH); - return; - } - let txHash: string | undefined; - const gasInfo = await gasPriceEstimator.getGasInfoAsync(); - const feeRecipient = oc(affiliateInfo).feeRecipient(); - try { - analytics.trackBuyStarted(buyQuote); - txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote, { - feeRecipient, - takerAddress: accountAddress, - gasPrice: gasInfo.gasPriceInWei, - }); - } catch (e) { - if (e instanceof Error) { - if (e.message === AssetBuyerError.TransactionValueTooLow) { - analytics.trackBuySimulationFailed(buyQuote); - this.props.onValidationFail(buyQuote, AssetBuyerError.TransactionValueTooLow); - return; - } else if (e.message === AssetBuyerError.SignatureRequestDenied) { - analytics.trackBuySignatureDenied(buyQuote); - this.props.onSignatureDenied(buyQuote); - return; - } else { - errorReporter.report(e); - analytics.trackBuyUnknownError(buyQuote, e.message); - this.props.onValidationFail(buyQuote, ZeroExInstantError.CouldNotSubmitTransaction); - return; - } - } - throw e; - } - const startTimeUnix = new Date().getTime(); - const expectedEndTimeUnix = startTimeUnix + gasInfo.estimatedTimeMs; - this.props.onBuyProcessing(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix); - try { - analytics.trackBuyTxSubmitted(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix); - await web3Wrapper.awaitTransactionSuccessAsync(txHash); - } catch (e) { - if (e instanceof Error && e.message.startsWith(WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX)) { - analytics.trackBuyTxFailed(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix); - this.props.onBuyFailure(buyQuote, txHash); - return; - } - throw e; - } - analytics.trackBuyTxSucceeded(buyQuote, txHash, startTimeUnix, expectedEndTimeUnix); - this.props.onBuySuccess(buyQuote, txHash); - }; -} diff --git a/packages/instant/src/components/buy_order_progress.tsx b/packages/instant/src/components/buy_order_progress.tsx deleted file mode 100644 index 11ac5d5e0..000000000 --- a/packages/instant/src/components/buy_order_progress.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; - -import { TimedProgressBar } from '../components/timed_progress_bar'; - -import { TimeCounter } from '../components/time_counter'; -import { Container } from '../components/ui/container'; -import { OrderProcessState, OrderState } from '../types'; - -export interface BuyOrderProgressProps { - buyOrderState: OrderState; -} - -export const BuyOrderProgress: React.StatelessComponent<BuyOrderProgressProps> = props => { - const { buyOrderState } = props; - if ( - buyOrderState.processState === OrderProcessState.Processing || - buyOrderState.processState === OrderProcessState.Success || - buyOrderState.processState === OrderProcessState.Failure - ) { - const progress = buyOrderState.progress; - const hasEnded = buyOrderState.processState !== OrderProcessState.Processing; - const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix; - return ( - <Container width="100%" padding="20px 20px 0px 20px"> - <Container marginBottom="5px"> - <TimeCounter estimatedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} /> - </Container> - <TimedProgressBar expectedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} /> - </Container> - ); - } - return null; -}; - -BuyOrderProgress.displayName = 'BuyOrderProgress'; diff --git a/packages/instant/src/components/buy_order_state_buttons.tsx b/packages/instant/src/components/buy_order_state_buttons.tsx deleted file mode 100644 index 1214559d1..000000000 --- a/packages/instant/src/components/buy_order_state_buttons.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; -import { BigNumber } from '@0x/utils'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; -import { AffiliateInfo, Asset, OrderProcessState, ZeroExInstantError } from '../types'; - -import { BuyButton } from './buy_button'; -import { PlacingOrderButton } from './placing_order_button'; -import { SecondaryButton } from './secondary_button'; - -import { Button } from './ui/button'; -import { Flex } from './ui/flex'; - -export interface BuyOrderStateButtonProps { - accountAddress?: string; - accountEthBalanceInWei?: BigNumber; - buyQuote?: BuyQuote; - buyOrderProcessingState: OrderProcessState; - assetBuyer: AssetBuyer; - web3Wrapper: Web3Wrapper; - affiliateInfo?: AffiliateInfo; - selectedAsset?: Asset; - onViewTransaction: () => void; - onValidationPending: (buyQuote: BuyQuote) => void; - onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void; - onSignatureDenied: (buyQuote: BuyQuote) => void; - onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void; - onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void; - onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void; - onRetry: () => void; -} - -export const BuyOrderStateButtons: React.StatelessComponent<BuyOrderStateButtonProps> = props => { - if (props.buyOrderProcessingState === OrderProcessState.Failure) { - return ( - <Flex justify="space-between"> - <Button width="48%" onClick={props.onRetry} fontColor={ColorOption.white}> - Back - </Button> - <SecondaryButton width="48%" onClick={props.onViewTransaction}> - Details - </SecondaryButton> - </Flex> - ); - } else if ( - props.buyOrderProcessingState === OrderProcessState.Success || - props.buyOrderProcessingState === OrderProcessState.Processing - ) { - return <SecondaryButton onClick={props.onViewTransaction}>View Transaction</SecondaryButton>; - } else if (props.buyOrderProcessingState === OrderProcessState.Validating) { - return <PlacingOrderButton />; - } - - return ( - <BuyButton - accountAddress={props.accountAddress} - accountEthBalanceInWei={props.accountEthBalanceInWei} - buyQuote={props.buyQuote} - assetBuyer={props.assetBuyer} - web3Wrapper={props.web3Wrapper} - affiliateInfo={props.affiliateInfo} - selectedAsset={props.selectedAsset} - onValidationPending={props.onValidationPending} - onValidationFail={props.onValidationFail} - onSignatureDenied={props.onSignatureDenied} - onBuyProcessing={props.onBuyProcessing} - onBuySuccess={props.onBuySuccess} - onBuyFailure={props.onBuyFailure} - /> - ); -}; - -BuyOrderStateButtons.displayName = 'BuyOrderStateButtons'; diff --git a/packages/instant/src/components/coinbase_wallet_logo.tsx b/packages/instant/src/components/coinbase_wallet_logo.tsx deleted file mode 100644 index 845b96d73..000000000 --- a/packages/instant/src/components/coinbase_wallet_logo.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; - -export interface CoinbaseWalletLogoProps { - width?: number; -} - -export const CoinbaseWalletLogo: React.StatelessComponent<CoinbaseWalletLogoProps> = ({ width }) => ( - <svg width={width} viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg"> - <circle cx="25.5" cy="25.5" r="25.5" fill="#3263E9" /> - <path - fillRule="evenodd" - clipRule="evenodd" - d="M25.5 41C34.0604 41 41 34.0604 41 25.5C41 16.9396 34.0604 10 25.5 10C16.9396 10 10 16.9396 10 25.5C10 34.0604 16.9396 41 25.5 41ZM21.5108 20.5107C20.9586 20.5107 20.5108 20.9584 20.5108 21.5107V29.6223C20.5108 30.1746 20.9586 30.6223 21.5108 30.6223H29.6224C30.1747 30.6223 30.6224 30.1746 30.6224 29.6223V21.5107C30.6224 20.9584 30.1747 20.5107 29.6224 20.5107H21.5108Z" - fill="white" - /> - </svg> -); - -CoinbaseWalletLogo.displayName = 'CoinbaseWalletLogo'; - -CoinbaseWalletLogo.defaultProps = { - width: 164, -}; diff --git a/packages/instant/src/components/css_reset.tsx b/packages/instant/src/components/css_reset.tsx deleted file mode 100644 index d1b20f4c9..000000000 --- a/packages/instant/src/components/css_reset.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { INJECTED_DIV_CLASS } from '../constants'; -import { createGlobalStyle } from '../style/theme'; - -export interface CSSResetProps {} - -/* - * Derived from - * https://github.com/jtrost/Complete-CSS-Reset - */ -export const CSSReset = createGlobalStyle` - .${INJECTED_DIV_CLASS} { - a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button, - canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, - details, dialog, dfn, div, dl, dt, em, embed, fieldset, figure, form, - h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, - input, ins, keygen, kbd, label, legend, li, map, mark, menu, meter, nav, - noscript, object, ol, optgroup, option, output, p, param, pre, progress, - q, rp, rt, ruby, samp, section, select, small, span, strong, sub, sup, - table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video { - background: transparent; - border: 0; - font-size: 100%; - font: inherit; - margin: 0; - outline: none; - padding: 0; - text-align: left; - text-decoration: none; - vertical-align: baseline; - } - } -`; diff --git a/packages/instant/src/components/erc20_asset_amount_input.tsx b/packages/instant/src/components/erc20_asset_amount_input.tsx deleted file mode 100644 index 0418f9165..000000000 --- a/packages/instant/src/components/erc20_asset_amount_input.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; -import * as React from 'react'; - -import { ColorOption, transparentWhite } from '../style/theme'; -import { ERC20Asset, SimpleHandler } from '../types'; -import { assetUtils } from '../util/asset'; -import { util } from '../util/util'; - -import { ScalingAmountInput } from './scaling_amount_input'; - -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Icon } from './ui/icon'; -import { Text } from './ui/text'; - -// Asset amounts only apply to ERC20 assets -export interface ERC20AssetAmountInputProps { - asset?: ERC20Asset; - value?: BigNumber; - onChange: (value?: BigNumber, asset?: ERC20Asset) => void; - onSelectAssetClick?: (asset?: ERC20Asset) => void; - startingFontSizePx: number; - fontColor?: ColorOption; - isInputDisabled: boolean; - canSelectOtherAsset: boolean; - numberOfAssetsAvailable?: number; -} - -export interface ERC20AssetAmountInputState { - currentFontSizePx: number; -} - -export class ERC20AssetAmountInput extends React.PureComponent<ERC20AssetAmountInputProps, ERC20AssetAmountInputState> { - public static defaultProps = { - onChange: util.boundNoop, - isDisabled: false, - }; - constructor(props: ERC20AssetAmountInputProps) { - super(props); - this.state = { - currentFontSizePx: props.startingFontSizePx, - }; - } - public render(): React.ReactNode { - const { asset } = this.props; - return ( - <Container whiteSpace="nowrap"> - {_.isUndefined(asset) ? this._renderTokenSelectionContent() : this._renderContentForAsset(asset)} - </Container> - ); - } - private readonly _renderContentForAsset = (asset: ERC20Asset): React.ReactNode => { - 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} - onFontSizeChange={this._handleFontSizeChange} - hasAutofocus={true} - /* We send in a key of asset data to force a rerender of this component when the user selects a new asset. We do this so the autofocus attribute will bring focus onto this input */ - key={asset.assetData} - /> - </Container> - <Container - display="inline-block" - marginLeft="8px" - title={assetUtils.bestNameForAsset(asset, undefined)} - > - <Flex inline={true}> - <Text - fontSize={`${this.state.currentFontSizePx}px`} - fontColor={ColorOption.white} - textTransform="uppercase" - onClick={this.props.canSelectOtherAsset ? onSymbolClick : undefined} - > - {assetUtils.formattedSymbolForAsset(asset)} - </Text> - {this.props.canSelectOtherAsset && this._renderChevronIcon()} - </Flex> - </Container> - </React.Fragment> - ); - }; - private readonly _renderTokenSelectionContent = (): React.ReactNode => { - const { numberOfAssetsAvailable } = this.props; - let text = 'Select Token'; - if (_.isUndefined(numberOfAssetsAvailable)) { - text = 'Loading...'; - } else if (numberOfAssetsAvailable === 0) { - text = 'Assets Unavailable'; - } - return ( - <Flex> - <Text - fontSize="30px" - fontColor={ColorOption.white} - opacity={0.7} - fontWeight="500" - onClick={this._generateSelectAssetClickHandler()} - > - {text} - </Text> - {this._renderChevronIcon()} - </Flex> - ); - }; - private readonly _renderChevronIcon = (): React.ReactNode => { - if (!this._areAnyAssetsAvailable()) { - return null; - } - return ( - <Container marginLeft="5px"> - <Icon icon="chevron" width={12} stroke={ColorOption.white} onClick={this._handleSelectAssetClick} /> - </Container> - ); - }; - private readonly _handleChange = (value?: BigNumber): void => { - this.props.onChange(value, this.props.asset); - }; - private readonly _handleFontSizeChange = (fontSizePx: number): void => { - this.setState({ - currentFontSizePx: fontSizePx, - }); - }; - private readonly _generateSelectAssetClickHandler = (): SimpleHandler | undefined => { - // We don't want to allow opening the token selection panel if there are no assets. - // Since styles are inferred from the presence of a click handler, we want to return undefined - // instead of providing a noop. - if (!this._areAnyAssetsAvailable() || _.isUndefined(this.props.onSelectAssetClick)) { - return undefined; - } - return this._handleSelectAssetClick; - }; - private readonly _areAnyAssetsAvailable = (): boolean => { - const { numberOfAssetsAvailable } = this.props; - return !_.isUndefined(numberOfAssetsAvailable) && numberOfAssetsAvailable > 0; - }; - private readonly _handleSelectAssetClick = (): void => { - if (this.props.onSelectAssetClick) { - this.props.onSelectAssetClick(); - } - }; - // For assets with symbols of different length, - // start scaling the input at different character lengths - private readonly _textLengthThresholdForAsset = (asset?: ERC20Asset): number => { - if (_.isUndefined(asset)) { - return 3; - } - const symbol = asset.metaData.symbol; - if (symbol.length <= 3) { - return 5; - } - if (symbol.length === 5) { - return 3; - } - return 4; - }; -} diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx deleted file mode 100644 index a26fb5cf5..000000000 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; -import { ERC20Asset } from '../types'; -import { analytics } from '../util/analytics'; -import { assetUtils } from '../util/asset'; - -import { SearchInput } from './search_input'; -import { Circle } from './ui/circle'; -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Text } from './ui/text'; - -export interface ERC20TokenSelectorProps { - tokens: ERC20Asset[]; - onTokenSelect: (token: ERC20Asset) => void; -} - -export interface ERC20TokenSelectorState { - searchQuery: string; -} - -export class ERC20TokenSelector extends React.PureComponent<ERC20TokenSelectorProps> { - public state: ERC20TokenSelectorState = { - searchQuery: '', - }; - public render(): React.ReactNode { - const { tokens } = this.props; - return ( - <Container height="100%"> - <Container marginBottom="10px"> - <Text fontColor={ColorOption.darkGrey} fontSize="18px" fontWeight="600" lineHeight="22px"> - Select Token - </Text> - </Container> - <SearchInput - placeholder="Search tokens..." - width="100%" - value={this.state.searchQuery} - onChange={this._handleSearchInputChange} - tabIndex={-1} - /> - <Container overflow="scroll" height="calc(100% - 90px)" marginTop="10px"> - <TokenRowFilter - tokens={tokens} - onClick={this._handleTokenClick} - searchQuery={this.state.searchQuery} - /> - </Container> - </Container> - ); - } - private readonly _handleSearchInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => { - const searchQuery = event.target.value; - this.setState({ - searchQuery, - }); - analytics.trackTokenSelectorSearched(searchQuery); - }; - private readonly _handleTokenClick = (token: ERC20Asset): void => { - this.props.onTokenSelect(token); - }; -} - -interface TokenRowFilterProps { - tokens: ERC20Asset[]; - onClick: (token: ERC20Asset) => void; - searchQuery: string; -} - -class TokenRowFilter extends React.Component<TokenRowFilterProps> { - public render(): React.ReactNode { - return _.map(this.props.tokens, token => { - if (!this._isTokenQueryMatch(token)) { - return null; - } - return <TokenSelectorRow key={token.assetData} token={token} onClick={this.props.onClick} />; - }); - } - public shouldComponentUpdate(nextProps: TokenRowFilterProps): boolean { - const arePropsDeeplyEqual = _.isEqual(nextProps, this.props); - return !arePropsDeeplyEqual; - } - private readonly _isTokenQueryMatch = (token: ERC20Asset): boolean => { - const { searchQuery } = this.props; - const searchQueryLowerCase = searchQuery.toLowerCase().trim(); - if (searchQueryLowerCase === '') { - return true; - } - const tokenName = token.metaData.name.toLowerCase(); - const tokenSymbol = token.metaData.symbol.toLowerCase(); - return _.startsWith(tokenSymbol, searchQueryLowerCase) || _.startsWith(tokenName, searchQueryLowerCase); - }; -} - -interface TokenSelectorRowProps { - token: ERC20Asset; - onClick: (token: ERC20Asset) => void; -} - -class TokenSelectorRow extends React.PureComponent<TokenSelectorRowProps> { - public render(): React.ReactNode { - const { token } = this.props; - const circleColor = token.metaData.primaryColor || 'black'; - const displaySymbol = assetUtils.bestNameForAsset(token); - return ( - <Container - padding="12px 0px" - borderBottom="1px solid" - borderColor={ColorOption.feintGrey} - backgroundColor={ColorOption.white} - width="100%" - onClick={this._handleClick} - darkenOnHover={true} - cursor="pointer" - > - <Container marginLeft="5px"> - <Flex justify="flex-start"> - <Container marginRight="10px"> - <Circle diameter={26} rawColor={circleColor}> - <Flex height="100%" width="100%"> - <TokenSelectorRowIcon token={token} /> - </Flex> - </Circle> - </Container> - <Text fontSize="14px" fontWeight={700} fontColor={ColorOption.black}> - {displaySymbol} - </Text> - <Container margin="0px 5px"> - <Text fontSize="14px"> - </Text> - </Container> - <Text fontSize="14px">{token.metaData.name}</Text> - </Flex> - </Container> - </Container> - ); - } - private readonly _handleClick = (): void => { - this.props.onClick(this.props.token); - }; -} - -interface TokenSelectorRowIconProps { - token: ERC20Asset; -} - -const getTokenIcon = (symbol: string): React.StatelessComponent | undefined => { - try { - return require(`../assets/icons/${symbol}.svg`) as React.StatelessComponent; - } catch (e) { - // Can't find icon - return undefined; - } -}; - -class TokenSelectorRowIcon extends React.PureComponent<TokenSelectorRowIconProps> { - public render(): React.ReactNode { - const { token } = this.props; - const iconUrlIfExists = token.metaData.iconUrl; - - const TokenIcon = getTokenIcon(token.metaData.symbol); - 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/install_wallet_panel_content.tsx b/packages/instant/src/components/install_wallet_panel_content.tsx deleted file mode 100644 index 1af3dafbb..000000000 --- a/packages/instant/src/components/install_wallet_panel_content.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import * as React from 'react'; - -import { - META_MASK_CHROME_STORE_URL, - META_MASK_FIREFOX_STORE_URL, - META_MASK_OPERA_STORE_URL, - META_MASK_SITE_URL, -} from '../constants'; -import { ColorOption } from '../style/theme'; -import { Browser } from '../types'; -import { analytics } from '../util/analytics'; -import { envUtil } from '../util/env'; -import { util } from '../util/util'; - -import { MetaMaskLogo } from './meta_mask_logo'; -import { StandardPanelContent, StandardPanelContentProps } from './standard_panel_content'; -import { Button } from './ui/button'; - -export interface InstallWalletPanelContentProps {} - -export class InstallWalletPanelContent extends React.PureComponent<InstallWalletPanelContentProps> { - public render(): React.ReactNode { - const panelProps = this._getStandardPanelContentProps(); - return <StandardPanelContent {...panelProps} />; - } - private readonly _getStandardPanelContentProps = (): StandardPanelContentProps => { - const browser = envUtil.getBrowser(); - let description = 'Please install the MetaMask wallet browser extension.'; - let actionText = 'Learn More'; - let actionUrl = META_MASK_SITE_URL; - switch (browser) { - case Browser.Chrome: - description = 'Please install the MetaMask wallet browser extension from the Chrome Store.'; - actionText = 'Get Chrome Extension'; - actionUrl = META_MASK_CHROME_STORE_URL; - break; - case Browser.Firefox: - description = 'Please install the MetaMask wallet browser extension from the Firefox Store.'; - actionText = 'Get Firefox Extension'; - actionUrl = META_MASK_FIREFOX_STORE_URL; - break; - case Browser.Opera: - description = 'Please install the MetaMask wallet browser extension from the Opera Store.'; - actionText = 'Get Opera Add-on'; - actionUrl = META_MASK_OPERA_STORE_URL; - break; - default: - break; - } - const onActionClick = () => { - analytics.trackInstallWalletModalClickedGet(); - util.createOpenUrlInNewWindow(actionUrl)(); - }; - return { - image: <MetaMaskLogo width={85} height={80} />, - title: 'Install MetaMask', - description, - moreInfoSettings: { - href: META_MASK_SITE_URL, - text: 'What is MetaMask?', - onClick: analytics.trackInstallWalletModalClickedExplanation, - }, - action: ( - <Button - onClick={onActionClick} - width="100%" - fontColor={ColorOption.white} - backgroundColor={ColorOption.darkOrange} - > - {actionText} - </Button> - ), - }; - }; -} diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx deleted file mode 100644 index e943f68d7..000000000 --- a/packages/instant/src/components/instant_heading.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; -import * as React from 'react'; - -import { SelectedERC20AssetAmountInput } from '../containers/selected_erc20_asset_amount_input'; -import { ColorOption } from '../style/theme'; -import { AsyncProcessState, ERC20Asset, OrderProcessState, OrderState } from '../types'; -import { format } from '../util/format'; - -import { AmountPlaceholder } from './amount_placeholder'; -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Icon } from './ui/icon'; -import { Spinner } from './ui/spinner'; -import { Text } from './ui/text'; - -export interface InstantHeadingProps { - selectedAssetUnitAmount?: BigNumber; - totalEthBaseUnitAmount?: BigNumber; - ethUsdPrice?: BigNumber; - quoteRequestState: AsyncProcessState; - buyOrderState: OrderState; - onSelectAssetClick?: (asset?: ERC20Asset) => void; -} - -const PLACEHOLDER_COLOR = ColorOption.white; -const ICON_WIDTH = 34; -const ICON_HEIGHT = 34; -const ICON_COLOR = ColorOption.white; - -export class InstantHeading extends React.PureComponent<InstantHeadingProps, {}> { - public render(): React.ReactNode { - const iconOrAmounts = this._renderIcon() || this._renderAmountsSection(); - return ( - <Container backgroundColor={ColorOption.primaryColor} width="100%" padding="20px"> - <Container marginBottom="5px"> - <Text - letterSpacing="1px" - fontColor={ColorOption.white} - opacity={0.7} - fontWeight={500} - textTransform="uppercase" - fontSize="12px" - > - {this._renderTopText()} - </Text> - </Container> - <Flex direction="row" justify="space-between"> - <Flex height="60px"> - <SelectedERC20AssetAmountInput - startingFontSizePx={38} - onSelectAssetClick={this.props.onSelectAssetClick} - /> - </Flex> - <Flex direction="column" justify="space-between"> - {iconOrAmounts} - </Flex> - </Flex> - </Container> - ); - } - - private _renderAmountsSection(): React.ReactNode { - if ( - _.isUndefined(this.props.totalEthBaseUnitAmount) && - this.props.quoteRequestState !== AsyncProcessState.Pending - ) { - return null; - } else { - return ( - <Container> - <Container marginBottom="5px">{this._renderPlaceholderOrAmount(this._renderEthAmount)}</Container> - <Container opacity={0.7}>{this._renderPlaceholderOrAmount(this._renderDollarAmount)}</Container> - </Container> - ); - } - } - - private _renderIcon(): React.ReactNode { - const processState = this.props.buyOrderState.processState; - - if (processState === OrderProcessState.Failure) { - return <Icon icon="failed" width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; - } else if (processState === OrderProcessState.Processing) { - return <Spinner widthPx={ICON_HEIGHT} heightPx={ICON_HEIGHT} />; - } else if (processState === OrderProcessState.Success) { - return <Icon icon="success" width={ICON_WIDTH} height={ICON_HEIGHT} color={ICON_COLOR} />; - } - return undefined; - } - - private _renderTopText(): React.ReactNode { - const processState = this.props.buyOrderState.processState; - if (processState === OrderProcessState.Failure) { - return 'Order failed'; - } else if (processState === OrderProcessState.Processing) { - return 'Processing Order...'; - } else if (processState === OrderProcessState.Success) { - return 'Tokens received!'; - } - - return 'I want to buy'; - } - - private _renderPlaceholderOrAmount(amountFunction: () => React.ReactNode): React.ReactNode { - if (this.props.quoteRequestState === AsyncProcessState.Pending) { - return <AmountPlaceholder isPulsating={true} color={PLACEHOLDER_COLOR} />; - } - if (_.isUndefined(this.props.selectedAssetUnitAmount)) { - return <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />; - } - return amountFunction(); - } - - private readonly _renderEthAmount = (): React.ReactNode => { - const ethAmount = format.ethBaseUnitAmount( - this.props.totalEthBaseUnitAmount, - 4, - <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />, - ); - - const fontSize = _.isString(ethAmount) && ethAmount.length >= 13 ? '14px' : '16px'; - return ( - <Text - fontSize={fontSize} - textAlign="right" - width="100%" - fontColor={ColorOption.white} - fontWeight={500} - noWrap={true} - > - {ethAmount} - </Text> - ); - }; - - private readonly _renderDollarAmount = (): React.ReactNode => { - return ( - <Text fontSize="16px" textAlign="right" width="100%" fontColor={ColorOption.white} noWrap={true}> - {format.ethBaseUnitAmountInUsd( - this.props.totalEthBaseUnitAmount, - this.props.ethUsdPrice, - 2, - <AmountPlaceholder isPulsating={false} color={ColorOption.white} />, - )} - </Text> - ); - }; -} diff --git a/packages/instant/src/components/meta_mask_logo.tsx b/packages/instant/src/components/meta_mask_logo.tsx deleted file mode 100644 index bfbc67270..000000000 --- a/packages/instant/src/components/meta_mask_logo.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react'; - -export interface MetaMaskLogoProps { - width?: number; - height?: number; -} - -export const MetaMaskLogo: React.StatelessComponent<MetaMaskLogoProps> = ({ width, height }) => ( - <svg width={width} height={height} viewBox="0 0 85 80" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M80.578 0L47.7107 24.8648L53.542 10.2702L80.578 0Z" fill="#E2761B" /> - <path d="M4.24075 0L37.1081 25.4053L31.2768 10.2702L4.24075 0Z" fill="#E4761B" /> - <path d="M68.9152 57.8379L59.9032 71.8919L78.9874 77.2973L84.2886 58.3785L68.9152 57.8379Z" fill="#E4761B" /> - <path d="M0.53006 58.3785L5.83124 77.2973L24.9155 71.8919L15.9035 57.8379L0.53006 58.3785Z" fill="#E4761B" /> - <path d="M23.8552 34.5941L18.554 42.7022L37.1082 43.7833L36.5781 23.2428L23.8552 34.5941Z" fill="#E4761B" /> - <path d="M60.9635 34.5941L47.7106 23.2428V43.7833L66.2647 42.7022L60.9635 34.5941Z" fill="#E4761B" /> - <path d="M24.9156 71.8914L36.0481 66.4861L26.5059 58.378L24.9156 71.8914Z" fill="#E4761B" /> - <path d="M48.7709 66.4861L59.9034 71.8914L58.313 58.378L48.7709 66.4861Z" fill="#E4761B" /> - <path d="M59.9034 71.8919L48.7709 66.4865L49.301 73.5135V76.7567L59.9034 71.8919Z" fill="#D7C1B3" /> - <path d="M24.9157 71.892L35.518 76.7568V73.5136L36.0482 66.4866L24.9157 71.892Z" fill="#D7C1B3" /> - <path d="M35.5179 53.5138L25.9758 50.8111L32.8673 47.5678L35.5179 53.5138Z" fill="#233447" /> - <path d="M49.3009 53.5138L51.9515 47.5678L58.843 50.8111L49.3009 53.5138Z" fill="#233447" /> - <path d="M24.9155 71.892L26.5059 57.838L15.9035 58.3785L24.9155 71.892Z" fill="#CD6116" /> - <path d="M58.313 57.838L59.9034 71.892L68.9154 58.3785L58.313 57.838Z" fill="#CD6116" /> - <path - d="M66.2648 42.7025L47.7106 43.7836L49.301 53.5132L51.9516 47.5673L58.8431 50.8106L66.2648 42.7025Z" - fill="#CD6116" - /> - <path - d="M25.9758 50.8106L32.8673 47.5673L35.5179 53.5132L37.1083 43.7836L18.5541 42.7025L25.9758 50.8106Z" - fill="#CD6116" - /> - <path d="M18.5541 42.7024L26.5059 58.378L25.9758 50.8105L18.5541 42.7024Z" fill="#E4751F" /> - <path d="M58.8431 50.8106L58.313 58.3781L66.2647 42.7025L58.8431 50.8106Z" fill="#E4751F" /> - <path d="M37.1083 43.7838L35.518 53.5135L37.6384 65.4053L38.1686 49.7297L37.1083 43.7838Z" fill="#E4751F" /> - <path d="M47.7105 43.7838L46.6503 49.7297L47.1804 65.4053L49.3009 53.5135L47.7105 43.7838Z" fill="#E4751F" /> - <path - d="M49.301 53.5134L47.1805 65.4052L48.7709 66.4863L58.313 58.3782L58.8431 50.8107L49.301 53.5134Z" - fill="#F6851B" - /> - <path - d="M25.9758 50.8107L26.5059 58.3782L36.048 66.4863L37.6384 65.4052L35.5179 53.5134L25.9758 50.8107Z" - fill="#F6851B" - /> - <path - d="M49.3011 76.7568V73.5135L48.771 72.973H36.0482L35.518 73.5135V76.7568L24.9157 71.8919L28.6265 75.1351L36.0482 80H48.771L56.1927 75.1351L59.9035 71.8919L49.3011 76.7568Z" - fill="#C0AD9E" - /> - <path - d="M48.771 66.486L47.1806 65.405H37.6385L36.0482 66.486L35.518 73.513L36.0482 72.9725H48.771L49.3011 73.513L48.771 66.486Z" - fill="#161616" - /> - <path - d="M82.1685 26.4864L84.8191 12.9729L80.5781 0L48.771 24.3242L60.9637 34.5945L78.4576 39.9998L82.1685 35.6755L80.5781 34.0539L83.2287 31.8918L81.1082 30.2702L83.7588 28.108L82.1685 26.4864Z" - fill="#763D16" - /> - <path - d="M0 12.9729L2.65059 26.4864L1.06024 28.108L3.71083 30.2702L1.59036 31.8918L4.24095 34.0539L2.65059 35.6755L6.36142 39.9998L23.8553 34.5945L36.0481 24.3242L4.24095 0L0 12.9729Z" - fill="#763D16" - /> - <path - d="M78.4575 39.9993L60.9636 34.5939L66.2648 42.702L58.313 58.3776H68.9154H84.2888L78.4575 39.9993Z" - fill="#F6851B" - /> - <path - d="M23.8554 34.5939L6.36147 39.9993L0.530167 58.3776H15.9036H26.506L18.5542 42.702L23.8554 34.5939Z" - fill="#F6851B" - /> - <path - d="M47.7106 43.7833L48.7709 24.3239L53.5419 10.2699H31.2769L36.048 24.3239L37.1083 43.7833L37.6384 49.7292V65.4048H47.1805V49.7292L47.7106 43.7833Z" - fill="#F6851B" - /> - </svg> -); - -MetaMaskLogo.displayName = 'MetaMaskLogo'; - -MetaMaskLogo.defaultProps = { - width: 85, - height: 80, -}; diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx deleted file mode 100644 index 3ded50652..000000000 --- a/packages/instant/src/components/order_details.tsx +++ /dev/null @@ -1,230 +0,0 @@ -import { BuyQuoteInfo } from '@0x/asset-buyer'; -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { oc } from 'ts-optchain'; - -import { BIG_NUMBER_ZERO, DEFAULT_UNKOWN_ASSET_NAME } from '../constants'; -import { ColorOption } from '../style/theme'; -import { BaseCurrency } from '../types'; -import { format } from '../util/format'; - -import { AmountPlaceholder } from './amount_placeholder'; -import { SectionHeader } from './section_header'; - -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Text, TextProps } from './ui/text'; - -export interface OrderDetailsProps { - buyQuoteInfo?: BuyQuoteInfo; - selectedAssetUnitAmount?: BigNumber; - ethUsdPrice?: BigNumber; - isLoading: boolean; - assetName?: string; - baseCurrency: BaseCurrency; - onBaseCurrencySwitchEth: () => void; - onBaseCurrencySwitchUsd: () => void; -} -export class OrderDetails extends React.PureComponent<OrderDetailsProps> { - public render(): React.ReactNode { - const shouldShowUsdError = this.props.baseCurrency === BaseCurrency.USD && this._hadErrorFetchingUsdPrice(); - return ( - <Container width="100%" flexGrow={1} padding="20px 20px 0px 20px"> - <Container marginBottom="10px">{this._renderHeader()}</Container> - {shouldShowUsdError ? this._renderErrorFetchingUsdPrice() : this._renderRows()} - </Container> - ); - } - - private _renderRows(): React.ReactNode { - const { buyQuoteInfo } = this.props; - return ( - <React.Fragment> - <OrderDetailsRow - labelText={this._assetAmountLabel()} - primaryValue={this._displayAmountOrPlaceholder(buyQuoteInfo && buyQuoteInfo.assetEthAmount)} - /> - <OrderDetailsRow - labelText="Fee" - primaryValue={this._displayAmountOrPlaceholder(buyQuoteInfo && buyQuoteInfo.feeEthAmount)} - /> - <OrderDetailsRow - labelText="Total Cost" - isLabelBold={true} - primaryValue={this._displayAmountOrPlaceholder(buyQuoteInfo && buyQuoteInfo.totalEthAmount)} - isPrimaryValueBold={true} - secondaryValue={this._totalCostSecondaryValue()} - /> - </React.Fragment> - ); - } - - private _renderErrorFetchingUsdPrice(): React.ReactNode { - return ( - <Text> - There was an error fetching the USD price. - <Text - onClick={this.props.onBaseCurrencySwitchEth} - fontWeight={700} - fontColor={ColorOption.primaryColor} - > - Click here - </Text> - {' to view ETH prices'} - </Text> - ); - } - - private _hadErrorFetchingUsdPrice(): boolean { - return this.props.ethUsdPrice ? this.props.ethUsdPrice.isEqualTo(BIG_NUMBER_ZERO) : false; - } - - private _totalCostSecondaryValue(): React.ReactNode { - const secondaryCurrency = this.props.baseCurrency === BaseCurrency.USD ? BaseCurrency.ETH : BaseCurrency.USD; - - const canDisplayCurrency = - secondaryCurrency === BaseCurrency.ETH || - (secondaryCurrency === BaseCurrency.USD && this.props.ethUsdPrice && !this._hadErrorFetchingUsdPrice()); - - if (this.props.buyQuoteInfo && canDisplayCurrency) { - return this._displayAmount(secondaryCurrency, this.props.buyQuoteInfo.totalEthAmount); - } else { - return undefined; - } - } - - private _displayAmountOrPlaceholder(weiAmount?: BigNumber): React.ReactNode { - const { baseCurrency, isLoading } = this.props; - - if (_.isUndefined(weiAmount)) { - return ( - <Container opacity={0.5}> - <AmountPlaceholder color={ColorOption.lightGrey} isPulsating={isLoading} /> - </Container> - ); - } - - return this._displayAmount(baseCurrency, weiAmount); - } - - private _displayAmount(currency: BaseCurrency, weiAmount: BigNumber): React.ReactNode { - switch (currency) { - case BaseCurrency.USD: - return format.ethBaseUnitAmountInUsd(weiAmount, this.props.ethUsdPrice, 2, ''); - case BaseCurrency.ETH: - return format.ethBaseUnitAmount(weiAmount, 4, ''); - } - } - - private _assetAmountLabel(): React.ReactNode { - const { assetName, baseCurrency } = this.props; - const numTokens = this.props.selectedAssetUnitAmount; - - // Display as 0 if we have a selected asset - const displayNumTokens = - assetName && assetName !== DEFAULT_UNKOWN_ASSET_NAME && _.isUndefined(numTokens) - ? new BigNumber(0) - : numTokens; - if (!_.isUndefined(displayNumTokens)) { - let numTokensWithSymbol: React.ReactNode = displayNumTokens.toString(); - if (assetName) { - numTokensWithSymbol += ` ${assetName}`; - } - const pricePerTokenWei = this._pricePerTokenWei(); - if (pricePerTokenWei) { - const atPriceDisplay = ( - <Text fontColor={ColorOption.lightGrey}> - @ {this._displayAmount(baseCurrency, pricePerTokenWei)} - </Text> - ); - numTokensWithSymbol = ( - <React.Fragment> - {numTokensWithSymbol} {atPriceDisplay} - </React.Fragment> - ); - } - return numTokensWithSymbol; - } - return 'Token Amount'; - } - - private _pricePerTokenWei(): BigNumber | undefined { - const buyQuoteAccessor = oc(this.props.buyQuoteInfo); - const assetTotalInWei = buyQuoteAccessor.assetEthAmount(); - const selectedAssetUnitAmount = this.props.selectedAssetUnitAmount; - return !_.isUndefined(assetTotalInWei) && - !_.isUndefined(selectedAssetUnitAmount) && - !selectedAssetUnitAmount.eq(BIG_NUMBER_ZERO) - ? assetTotalInWei.div(selectedAssetUnitAmount).integerValue(BigNumber.ROUND_CEIL) - : undefined; - } - - private _baseCurrencyChoice(choice: BaseCurrency): React.ReactNode { - const onClick = - choice === BaseCurrency.ETH ? this.props.onBaseCurrencySwitchEth : this.props.onBaseCurrencySwitchUsd; - const isSelected = this.props.baseCurrency === choice; - - const textStyle: TextProps = { onClick, fontSize: '12px' }; - if (isSelected) { - textStyle.fontColor = ColorOption.primaryColor; - textStyle.fontWeight = 700; - } else { - textStyle.fontColor = ColorOption.lightGrey; - } - return <Text {...textStyle}>{choice}</Text>; - } - - private _renderHeader(): React.ReactNode { - return ( - <Flex justify="space-between"> - <SectionHeader>Order Details</SectionHeader> - <Container> - {this._baseCurrencyChoice(BaseCurrency.ETH)} - <Container marginLeft="5px" marginRight="5px" display="inline"> - <Text fontSize="12px" fontColor={ColorOption.feintGrey}> - / - </Text> - </Container> - {this._baseCurrencyChoice(BaseCurrency.USD)} - </Container> - </Flex> - ); - } -} - -export interface OrderDetailsRowProps { - labelText: React.ReactNode; - isLabelBold?: boolean; - isPrimaryValueBold?: boolean; - primaryValue: React.ReactNode; - secondaryValue?: React.ReactNode; -} -export class OrderDetailsRow extends React.PureComponent<OrderDetailsRowProps, {}> { - public render(): React.ReactNode { - return ( - <Container padding="10px 0px" borderTop="1px dashed" borderColor={ColorOption.feintGrey}> - <Flex justify="space-between"> - <Text fontWeight={this.props.isLabelBold ? 700 : 400} fontColor={ColorOption.grey}> - {this.props.labelText} - </Text> - <Container>{this._renderValues()}</Container> - </Flex> - </Container> - ); - } - - private _renderValues(): React.ReactNode { - const secondaryValueNode: React.ReactNode = this.props.secondaryValue && ( - <Container marginRight="3px" display="inline-block"> - <Text fontColor={ColorOption.lightGrey}>({this.props.secondaryValue})</Text> - </Container> - ); - return ( - <React.Fragment> - {secondaryValueNode} - <Text fontWeight={this.props.isPrimaryValueBold ? 700 : 400}>{this.props.primaryValue}</Text> - </React.Fragment> - ); - } -} diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx deleted file mode 100644 index ada9f7bab..000000000 --- a/packages/instant/src/components/payment_method.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; -import { Account, AccountState, Network } from '../types'; -import { envUtil } from '../util/env'; - -import { CoinbaseWalletLogo } from './coinbase_wallet_logo'; -import { MetaMaskLogo } from './meta_mask_logo'; -import { PaymentMethodDropdown } from './payment_method_dropdown'; -import { SectionHeader } from './section_header'; -import { Circle } from './ui/circle'; -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Icon } from './ui/icon'; -import { Text } from './ui/text'; -import { WalletPrompt } from './wallet_prompt'; - -export interface PaymentMethodProps { - account: Account; - network: Network; - walletDisplayName: string; - onInstallWalletClick: () => void; - onUnlockWalletClick: () => void; -} - -export class PaymentMethod extends React.PureComponent<PaymentMethodProps> { - public render(): React.ReactNode { - return ( - <Container width="100%" height="120px" padding="20px 20px 0px 20px"> - <Container marginBottom="12px"> - <Flex justify="space-between"> - <SectionHeader>{this._renderTitleText()}</SectionHeader> - {this._renderTitleLabel()} - </Flex> - </Container> - {this._renderMainContent()} - </Container> - ); - } - private readonly _renderTitleText = (): string => { - const { account } = this.props; - switch (account.state) { - case AccountState.Loading: - return 'loading...'; - case AccountState.Locked: - case AccountState.None: - return 'connect your wallet'; - case AccountState.Ready: - return 'payment method'; - } - }; - private readonly _renderTitleLabel = (): React.ReactNode => { - const { account } = this.props; - if (account.state === AccountState.Ready || account.state === AccountState.Locked) { - const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red; - return ( - <Flex align="center"> - <Circle diameter={8} color={circleColor} /> - <Container marginLeft="5px"> - <Text fontColor={ColorOption.darkGrey} fontSize="12px" lineHeight="30px"> - {this.props.walletDisplayName} - </Text> - </Container> - </Flex> - ); - } - return null; - }; - private readonly _renderMainContent = (): React.ReactNode => { - const { account, network } = this.props; - const isMobile = envUtil.isMobileOperatingSystem(); - const logo = isMobile ? <CoinbaseWalletLogo width={22} /> : <MetaMaskLogo width={19} height={18} />; - const primaryColor = isMobile ? ColorOption.darkBlue : ColorOption.darkOrange; - const secondaryColor = isMobile ? ColorOption.lightBlue : ColorOption.lightOrange; - const colors = { primaryColor, secondaryColor }; - switch (account.state) { - case AccountState.Loading: - return null; - case AccountState.Locked: - return ( - <WalletPrompt - onClick={this.props.onUnlockWalletClick} - image={ - <Container position="relative" top="2px"> - <Icon width={13} icon="lock" color={ColorOption.black} /> - </Container> - } - {...colors} - > - Click to Connect {this.props.walletDisplayName} - </WalletPrompt> - ); - case AccountState.None: - return ( - <WalletPrompt onClick={this.props.onInstallWalletClick} image={logo} {...colors}> - {isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'} - </WalletPrompt> - ); - case AccountState.Ready: - return ( - <PaymentMethodDropdown - accountAddress={account.address} - accountEthBalanceInWei={account.ethBalanceInWei} - network={network} - /> - ); - } - }; -} diff --git a/packages/instant/src/components/payment_method_dropdown.tsx b/packages/instant/src/components/payment_method_dropdown.tsx deleted file mode 100644 index e463e3eae..000000000 --- a/packages/instant/src/components/payment_method_dropdown.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { BigNumber } from '@0x/utils'; -import * as copy from 'copy-to-clipboard'; -import * as React from 'react'; - -import { Network } from '../types'; -import { analytics } from '../util/analytics'; -import { envUtil } from '../util/env'; -import { etherscanUtil } from '../util/etherscan'; -import { format } from '../util/format'; - -import { Dropdown, DropdownItemConfig } from './ui/dropdown'; - -export interface PaymentMethodDropdownProps { - accountAddress: string; - accountEthBalanceInWei?: BigNumber; - network: Network; -} - -export class PaymentMethodDropdown extends React.PureComponent<PaymentMethodDropdownProps> { - public render(): React.ReactNode { - const { accountAddress, accountEthBalanceInWei } = this.props; - const value = format.ethAddress(accountAddress); - const label = format.ethBaseUnitAmount(accountEthBalanceInWei, 4, '') as string; - return ( - <Dropdown - value={value} - label={label} - items={this._getDropdownItemConfigs()} - onOpen={analytics.trackPaymentMethodDropdownOpened} - /> - ); - } - private readonly _getDropdownItemConfigs = (): DropdownItemConfig[] => { - if (envUtil.isMobileOperatingSystem()) { - return []; - } - const viewOnEtherscan = { - text: 'View on Etherscan', - onClick: this._handleEtherscanClick, - }; - const copyAddressToClipboard = { - text: 'Copy address to clipboard', - onClick: this._handleCopyToClipboardClick, - }; - return [viewOnEtherscan, copyAddressToClipboard]; - }; - private readonly _handleEtherscanClick = (): void => { - analytics.trackPaymentMethodOpenedEtherscan(); - - const { accountAddress, network } = this.props; - const etherscanUrl = etherscanUtil.getEtherScanEthAddressIfExists(accountAddress, network); - window.open(etherscanUrl, '_blank'); - }; - private readonly _handleCopyToClipboardClick = (): void => { - analytics.trackPaymentMethodCopiedAddress(); - - const { accountAddress } = this.props; - copy(accountAddress); - }; -} diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx deleted file mode 100644 index 528a305dc..000000000 --- a/packages/instant/src/components/placing_order_button.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; - -import { Button } from './ui/button'; -import { Container } from './ui/container'; -import { Spinner } from './ui/spinner'; - -export const PlacingOrderButton: React.StatelessComponent<{}> = props => ( - <Button isDisabled={true} width="100%" fontColor={ColorOption.white}> - <Container display="inline-block" position="relative" top="3px" marginRight="8px"> - <Spinner widthPx={16} heightPx={16} /> - </Container> - Placing Order… - </Button> -); - -PlacingOrderButton.displayName = 'PlacingOrderButton'; diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx deleted file mode 100644 index 7dc1fdc0c..000000000 --- a/packages/instant/src/components/scaling_amount_input.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; -import * as React from 'react'; - -import { Maybe } from '../types'; - -import { GIT_SHA, MAGIC_TRIGGER_ERROR_INPUT, MAGIC_TRIGGER_ERROR_MESSAGE, NPM_PACKAGE_VERSION } from '../constants'; -import { ColorOption } from '../style/theme'; -import { maybeBigNumberUtil } from '../util/maybe_big_number'; -import { util } from '../util/util'; - -import { ScalingInput } from './scaling_input'; - -export interface ScalingAmountInputProps { - isDisabled: boolean; - maxFontSizePx: number; - textLengthThreshold: number; - fontColor?: ColorOption; - value?: BigNumber; - onAmountChange: (value?: BigNumber) => void; - onFontSizeChange: (fontSizePx: number) => void; - hasAutofocus: boolean; -} -interface ScalingAmountInputState { - stringValue: string; -} - -const { stringToMaybeBigNumber, areMaybeBigNumbersEqual } = maybeBigNumberUtil; -export class ScalingAmountInput extends React.PureComponent<ScalingAmountInputProps, ScalingAmountInputState> { - public static defaultProps = { - onAmountChange: util.boundNoop, - onFontSizeChange: util.boundNoop, - isDisabled: false, - hasAutofocus: false, - }; - public constructor(props: ScalingAmountInputProps) { - super(props); - this.state = { - stringValue: _.isUndefined(props.value) ? '' : props.value.toString(), - }; - } - public componentDidUpdate(): void { - const parsedStateValue = stringToMaybeBigNumber(this.state.stringValue); - const currentValue = this.props.value; - - if (!areMaybeBigNumbersEqual(parsedStateValue, currentValue)) { - // we somehow got into the state in which the value passed in and the string value - // in state have differed, reset state - // we dont expect to ever get into this state, but let's make sure - // we reset if we do since we're dealing with important numbers - this.setState({ - stringValue: _.isUndefined(currentValue) ? '' : currentValue.toString(), - }); - } - } - - public render(): React.ReactNode { - const { textLengthThreshold, fontColor, maxFontSizePx, onFontSizeChange } = this.props; - return ( - <ScalingInput - type="number" - maxFontSizePx={maxFontSizePx} - textLengthThreshold={textLengthThreshold} - onFontSizeChange={onFontSizeChange} - fontColor={fontColor} - onChange={this._handleChange} - value={this.state.stringValue} - placeholder="0.00" - emptyInputWidthCh={3.5} - isDisabled={this.props.isDisabled} - hasAutofocus={this.props.hasAutofocus} - /> - ); - } - private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => { - if (event.target.value === MAGIC_TRIGGER_ERROR_INPUT) { - throw new Error(`${MAGIC_TRIGGER_ERROR_MESSAGE} git: ${GIT_SHA}, npm: ${NPM_PACKAGE_VERSION}`); - } - - const sanitizedValue = event.target.value.replace(/[^0-9.]/g, ''); // only allow numbers and "." - this.setState({ - stringValue: sanitizedValue, - }); - - // Trigger onAmountChange with a valid BigNumber, or undefined if the sanitizedValue is invalid or empty - const bigNumberValue: Maybe<BigNumber> = _.isEmpty(sanitizedValue) - ? undefined - : stringToMaybeBigNumber(sanitizedValue); - - this.props.onAmountChange(bigNumberValue); - }; -} diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx deleted file mode 100644 index c31de1fb5..000000000 --- a/packages/instant/src/components/scaling_input.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import { ObjectMap } from '@0x/types'; -import * as _ from 'lodash'; -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; -import { util } from '../util/util'; - -import { Input } from './ui/input'; - -export enum ScalingInputPhase { - FixedFontSize, - ScalingFontSize, -} - -export interface ScalingSettings { - percentageToReduceFontSizePerCharacter: number; - // 1ch = the width of the 0 chararacter. - // Allow to customize 'char' length for different characters. - characterWidthOverrides: ObjectMap<number>; - // How much room to leave to the right of the scaling input. - additionalInputSpaceInCh: number; -} - -export interface ScalingInputProps { - type?: string; - textLengthThreshold: number; - maxFontSizePx: number; - value: string; - emptyInputWidthCh: number; - onChange: (event: React.ChangeEvent<HTMLInputElement>) => void; - onFontSizeChange: (fontSizePx: number) => void; - fontColor?: ColorOption; - placeholder?: string; - maxLength?: number; - scalingSettings: ScalingSettings; - isDisabled: boolean; - hasAutofocus: boolean; -} - -export interface ScalingInputSnapshot { - inputWidthPx: number; -} - -// These are magic numbers that were determined experimentally. -const defaultScalingSettings: ScalingSettings = { - percentageToReduceFontSizePerCharacter: 0.1, - characterWidthOverrides: { - '1': 0.7, - '.': 0.4, - }, - additionalInputSpaceInCh: 0.4, -}; - -export class ScalingInput extends React.PureComponent<ScalingInputProps> { - public static defaultProps = { - onChange: util.boundNoop, - onFontSizeChange: util.boundNoop, - maxLength: 9, - scalingSettings: defaultScalingSettings, - isDisabled: false, - hasAutofocus: false, - }; - private readonly _inputRef = React.createRef<HTMLInputElement>(); - public static getPhase(textLengthThreshold: number, value: string): ScalingInputPhase { - if (value.length <= textLengthThreshold) { - return ScalingInputPhase.FixedFontSize; - } - return ScalingInputPhase.ScalingFontSize; - } - public static getPhaseFromProps(props: ScalingInputProps): ScalingInputPhase { - const { value, textLengthThreshold } = props; - return ScalingInput.getPhase(textLengthThreshold, value); - } - public static calculateFontSize( - textLengthThreshold: number, - maxFontSizePx: number, - phase: ScalingInputPhase, - value: string, - percentageToReduceFontSizePerCharacter: number, - ): number { - if (phase !== ScalingInputPhase.ScalingFontSize) { - return maxFontSizePx; - } - const charactersOverMax = value.length - textLengthThreshold; - const scalingFactor = (1 - percentageToReduceFontSizePerCharacter) ** charactersOverMax; - const fontSize = scalingFactor * maxFontSizePx; - return fontSize; - } - public static calculateFontSizeFromProps(props: ScalingInputProps, phase: ScalingInputPhase): number { - const { textLengthThreshold, value, maxFontSizePx, scalingSettings } = props; - return ScalingInput.calculateFontSize( - textLengthThreshold, - maxFontSizePx, - phase, - value, - scalingSettings.percentageToReduceFontSizePerCharacter, - ); - } - public componentDidMount(): void { - // Trigger an initial notification of the calculated fontSize. - const currentPhase = ScalingInput.getPhaseFromProps(this.props); - const currentFontSize = ScalingInput.calculateFontSizeFromProps(this.props, currentPhase); - this.props.onFontSizeChange(currentFontSize); - } - public componentDidUpdate(prevProps: ScalingInputProps): void { - const prevPhase = ScalingInput.getPhaseFromProps(prevProps); - const curPhase = ScalingInput.getPhaseFromProps(this.props); - const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase); - const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase); - // If font size has changed, notify. - if (prevFontSize !== curFontSize) { - this.props.onFontSizeChange(curFontSize); - } - } - public render(): React.ReactNode { - const { type, hasAutofocus, isDisabled, fontColor, placeholder, value, maxLength } = this.props; - const phase = ScalingInput.getPhaseFromProps(this.props); - return ( - <Input - type={type} - ref={this._inputRef as any} - fontColor={fontColor} - onChange={this._handleChange} - value={value} - placeholder={placeholder} - fontSize={`${this._calculateFontSize(phase)}px`} - width={this._calculateWidth(phase)} - maxLength={maxLength} - disabled={isDisabled} - autoFocus={hasAutofocus} - /> - ); - } - private readonly _calculateWidth = (phase: ScalingInputPhase): string => { - const { value, scalingSettings } = this.props; - if (_.isEmpty(value)) { - return `${this.props.emptyInputWidthCh}ch`; - } - const lengthInCh = _.reduce( - value.split(''), - (sum, char) => { - const widthOverride = scalingSettings.characterWidthOverrides[char]; - if (!_.isUndefined(widthOverride)) { - // tslint is confused - // tslint:disable-next-line:restrict-plus-operands - return sum + widthOverride; - } - return sum + 1; - }, - scalingSettings.additionalInputSpaceInCh, - ); - return `${lengthInCh}ch`; - }; - private readonly _calculateFontSize = (phase: ScalingInputPhase): number => { - return ScalingInput.calculateFontSizeFromProps(this.props, phase); - }; - private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => { - const value = event.target.value; - const { maxLength } = this.props; - if (!_.isUndefined(value) && !_.isUndefined(maxLength) && value.length > maxLength) { - return; - } - this.props.onChange(event); - }; -} diff --git a/packages/instant/src/components/search_input.tsx b/packages/instant/src/components/search_input.tsx deleted file mode 100644 index 71bc18915..000000000 --- a/packages/instant/src/components/search_input.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; - -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Icon } from './ui/icon'; -import { Input, InputProps } from './ui/input'; - -export interface SearchInputProps extends InputProps { - backgroundColor?: ColorOption; -} - -export const SearchInput: React.StatelessComponent<SearchInputProps> = props => ( - <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .5em"> - <Flex justify="flex-start" align="center"> - <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="2px 12px" /> - <Input {...props} type="search" fontSize="16px" fontColor={props.fontColor} /> - </Flex> - </Container> -); - -SearchInput.displayName = 'SearchInput'; - -SearchInput.defaultProps = { - backgroundColor: ColorOption.lightestGrey, - fontColor: ColorOption.grey, -}; diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx deleted file mode 100644 index 0714ce287..000000000 --- a/packages/instant/src/components/secondary_button.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; - -import { Button, ButtonProps } from './ui/button'; - -export interface SecondaryButtonProps extends ButtonProps {} - -export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => { - const buttonProps = _.omit(props, 'text'); - return ( - <Button - backgroundColor={ColorOption.white} - borderColor={ColorOption.lightGrey} - width={props.width} - onClick={props.onClick} - {...buttonProps} - > - {props.children} - </Button> - ); -}; -SecondaryButton.defaultProps = { - width: '100%', -}; -SecondaryButton.displayName = 'SecondaryButton'; diff --git a/packages/instant/src/components/section_header.tsx b/packages/instant/src/components/section_header.tsx deleted file mode 100644 index 2185b67ba..000000000 --- a/packages/instant/src/components/section_header.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; - -import { Text } from './ui/text'; - -export interface SectionHeaderProps {} -export const SectionHeader: React.StatelessComponent<SectionHeaderProps> = props => { - return ( - <Text - letterSpacing="1px" - fontColor={ColorOption.primaryColor} - fontWeight={600} - textTransform="uppercase" - fontSize="12px" - > - {props.children} - </Text> - ); -}; -SectionHeader.displayName = 'SectionHeader'; diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx deleted file mode 100644 index c7c6732cf..000000000 --- a/packages/instant/src/components/sliding_error.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import * as React from 'react'; - -import { ScreenSpecification } from '../style/media'; -import { ColorOption } from '../style/theme'; -import { zIndex } from '../style/z_index'; -import { SlideAnimationState } from '../types'; - -import { PositionAnimationSettings } from './animations/position_animation'; -import { SlideAnimation } from './animations/slide_animation'; - -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Text } from './ui/text'; - -export interface ErrorProps { - icon: string; - message: string; -} - -export const Error: React.StatelessComponent<ErrorProps> = props => ( - <Container - padding="10px" - border={`1px solid ${ColorOption.darkOrange}`} - backgroundColor={ColorOption.lightOrange} - width="100%" - borderRadius="6px" - marginTop="10px" - marginBottom="10px" - > - <Flex justify="flex-start"> - <Container marginRight="5px" display="inline" top="3px" position="relative"> - <Text fontSize="20px">{props.icon}</Text> - </Container> - <Text fontWeight="500" fontColor={ColorOption.darkOrange}> - {props.message} - </Text> - </Flex> - </Container> -); - -Error.displayName = 'Error'; - -export interface SlidingErrorProps extends ErrorProps { - animationState: SlideAnimationState; -} -export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => { - const slideAmount = '120px'; - - const desktopSlideIn: PositionAnimationSettings = { - timingFunction: 'ease-in', - top: { - from: slideAmount, - to: '0px', - }, - position: 'relative', - }; - const desktopSlideOut: PositionAnimationSettings = { - timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)', - top: { - from: '0px', - to: slideAmount, - }, - position: 'relative', - }; - - const mobileSlideIn: PositionAnimationSettings = { - duration: '0.5s', - timingFunction: 'ease-in', - top: { from: '-120px', to: '0px' }, - position: 'fixed', - }; - const moblieSlideOut: PositionAnimationSettings = { - duration: '0.5s', - timingFunction: 'ease-in', - top: { from: '0px', to: '-120px' }, - position: 'fixed', - }; - - const slideUpSettings: ScreenSpecification<PositionAnimationSettings> = { - default: desktopSlideIn, - sm: mobileSlideIn, - }; - const slideOutSettings: ScreenSpecification<PositionAnimationSettings> = { - default: desktopSlideOut, - sm: moblieSlideOut, - }; - - return ( - <SlideAnimation - slideInSettings={slideUpSettings} - slideOutSettings={slideOutSettings} - zIndex={{ sm: zIndex.errorPopup, default: zIndex.errorPopBehind }} - animationState={props.animationState} - > - <Error icon={props.icon} message={props.message} /> - </SlideAnimation> - ); -}; - -SlidingError.displayName = 'SlidingError'; diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx deleted file mode 100644 index 9b09a0d80..000000000 --- a/packages/instant/src/components/sliding_panel.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; -import { zIndex } from '../style/z_index'; -import { SlideAnimationState } from '../types'; - -import { PositionAnimationSettings } from './animations/position_animation'; -import { SlideAnimation } from './animations/slide_animation'; - -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Icon } from './ui/icon'; - -export interface PanelProps { - onClose?: () => void; -} - -export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => ( - <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel} padding="20px"> - <Flex justify="flex-end"> - <Icon padding="5px" width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} /> - </Flex> - <Container position="relative" top="-10px" height="100%"> - {children} - </Container> - </Container> -); - -Panel.displayName = 'Panel'; - -export interface SlidingPanelProps extends PanelProps { - animationState: SlideAnimationState; - onAnimationEnd?: () => void; -} - -export class SlidingPanel extends React.PureComponent<SlidingPanelProps> { - public render(): React.ReactNode { - if (this.props.animationState === 'none') { - return null; - } - const { animationState, onAnimationEnd, ...rest } = this.props; - const slideAmount = '100%'; - const slideUpSettings: PositionAnimationSettings = { - duration: '0.3s', - timingFunction: 'ease-in-out', - top: { - from: slideAmount, - to: '0px', - }, - position: 'absolute', - }; - const slideDownSettings: PositionAnimationSettings = { - duration: '0.3s', - timingFunction: 'ease-out', - top: { - from: '0px', - to: slideAmount, - }, - position: 'absolute', - }; - return ( - <SlideAnimation - slideInSettings={slideUpSettings} - slideOutSettings={slideDownSettings} - animationState={animationState} - height="100%" - onAnimationEnd={onAnimationEnd} - > - <Panel {...rest} /> - </SlideAnimation> - ); - } -} diff --git a/packages/instant/src/components/standard_panel_content.tsx b/packages/instant/src/components/standard_panel_content.tsx deleted file mode 100644 index f2987df82..000000000 --- a/packages/instant/src/components/standard_panel_content.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; -import { util } from '../util/util'; - -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Text } from './ui/text'; - -export interface MoreInfoSettings { - text: string; - href: string; - onClick?: () => void; -} - -export interface StandardPanelContentProps { - image: React.ReactNode; - title?: string; - description: string; - moreInfoSettings?: MoreInfoSettings; - action: React.ReactNode; -} - -const SPACING_BETWEEN_PX = '20px'; - -const onMoreInfoClick = (href: string, onClick?: () => void) => { - return () => { - if (onClick) { - onClick(); - } - util.createOpenUrlInNewWindow(href)(); - }; -}; - -export const StandardPanelContent: React.StatelessComponent<StandardPanelContentProps> = ({ - image, - title, - description, - moreInfoSettings, - action, -}) => ( - <Container height="100%"> - <Flex direction="column" height="calc(100% - 58px)"> - <Container marginBottom={SPACING_BETWEEN_PX}>{image}</Container> - {title && ( - <Container marginBottom={SPACING_BETWEEN_PX}> - <Text fontSize="20px" fontWeight={700} fontColor={ColorOption.black}> - {title} - </Text> - </Container> - )} - <Container marginBottom={SPACING_BETWEEN_PX}> - <Text fontSize="14px" fontColor={ColorOption.grey} center={true}> - {description} - </Text> - </Container> - <Container marginBottom={SPACING_BETWEEN_PX}> - {moreInfoSettings && ( - <Text - center={true} - fontSize="13px" - textDecorationLine="underline" - fontColor={ColorOption.lightGrey} - onClick={onMoreInfoClick(moreInfoSettings.href, moreInfoSettings.onClick)} - > - {moreInfoSettings.text} - </Text> - )} - </Container> - </Flex> - <Container>{action}</Container> - </Container> -); - -StandardPanelContent.displayName = 'StandardPanelContent'; diff --git a/packages/instant/src/components/standard_sliding_panel.tsx b/packages/instant/src/components/standard_sliding_panel.tsx deleted file mode 100644 index bcc9d3dce..000000000 --- a/packages/instant/src/components/standard_sliding_panel.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; - -import { StandardSlidingPanelContent, StandardSlidingPanelSettings } from '../types'; - -import { InstallWalletPanelContent } from './install_wallet_panel_content'; -import { SlidingPanel } from './sliding_panel'; - -export interface StandardSlidingPanelProps extends StandardSlidingPanelSettings { - onClose: () => void; -} - -export class StandardSlidingPanel extends React.PureComponent<StandardSlidingPanelProps> { - public render(): React.ReactNode { - const { animationState, content, onClose } = this.props; - return ( - <SlidingPanel animationState={animationState} onClose={onClose}> - {this._getNodeForContent(content)} - </SlidingPanel> - ); - } - private readonly _getNodeForContent = (content: StandardSlidingPanelContent): React.ReactNode => { - switch (content) { - case StandardSlidingPanelContent.InstallWallet: - return <InstallWalletPanelContent />; - case StandardSlidingPanelContent.None: - return null; - } - }; -} diff --git a/packages/instant/src/components/time_counter.tsx b/packages/instant/src/components/time_counter.tsx deleted file mode 100644 index 93dc497d5..000000000 --- a/packages/instant/src/components/time_counter.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import * as React from 'react'; - -import { ONE_SECOND_MS } from '../constants'; -import { ColorOption } from '../style/theme'; -import { timeUtil } from '../util/time'; - -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Text } from './ui/text'; - -export interface TimeCounterProps { - estimatedTimeMs: number; - hasEnded: boolean; -} -interface TimeCounterState { - elapsedSeconds: number; -} - -export class TimeCounter extends React.PureComponent<TimeCounterProps, TimeCounterState> { - public state = { - elapsedSeconds: 0, - }; - private _timerId?: number; - - public componentDidMount(): void { - this._setupTimerBasedOnProps(); - } - - public componentWillUnmount(): void { - this._clearTimer(); - } - - public componentDidUpdate(prevProps: TimeCounterProps): void { - if (prevProps.hasEnded !== this.props.hasEnded) { - this._setupTimerBasedOnProps(); - } - } - - public render(): React.ReactNode { - const estimatedTimeSeconds = this.props.estimatedTimeMs / ONE_SECOND_MS; - return ( - <Flex justify="space-between"> - <Container> - <Container marginRight="5px" display="inline"> - <Text fontWeight={600} fontColor={ColorOption.grey}> - Est. Time - </Text> - </Container> - <Text fontColor={ColorOption.grey}> - ({timeUtil.secondsToHumanDescription(estimatedTimeSeconds)}) - </Text> - </Container> - <Text fontColor={ColorOption.grey}> - Time: {timeUtil.secondsToStopwatchTime(this.state.elapsedSeconds)} - </Text> - </Flex> - ); - } - - private _setupTimerBasedOnProps(): void { - this.props.hasEnded ? this._clearTimer() : this._newTimer(); - } - - private _newTimer(): void { - this._clearTimer(); - this._timerId = window.setInterval(() => { - this.setState({ - elapsedSeconds: this.state.elapsedSeconds + 1, - }); - }, ONE_SECOND_MS); - } - - private _clearTimer(): void { - if (this._timerId) { - window.clearInterval(this._timerId); - } - } -} diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx deleted file mode 100644 index 287269af7..000000000 --- a/packages/instant/src/components/timed_progress_bar.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import * as _ from 'lodash'; -import { transparentize } from 'polished'; -import * as React from 'react'; - -import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_WIDTH } from '../constants'; -import { ColorOption, css, keyframes, styled, ThemeConsumer } from '../style/theme'; - -import { Container } from './ui/container'; - -export interface TimedProgressBarProps { - expectedTimeMs: number; - hasEnded: boolean; -} - -/** - * Timed Progress Bar - * Goes from 0% -> PROGRESS_STALL_AT_WIDTH over time of expectedTimeMs - * When hasEnded set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length of time - */ -export class TimedProgressBar extends React.PureComponent<TimedProgressBarProps, {}> { - private readonly _barRef = React.createRef<HTMLDivElement>(); - - public render(): React.ReactNode { - const widthAnimationSettings = this._calculateWidthAnimationSettings(); - return <ProgressBar animationSettings={widthAnimationSettings} ref={this._barRef} />; - } - - private _calculateWidthAnimationSettings(): WidthAnimationSettings { - if (this.props.hasEnded) { - if (!this._barRef.current) { - throw new Error('ended but no reference'); - } - const fromWidth = `${this._barRef.current.offsetWidth}px`; - return { - timeMs: PROGRESS_FINISH_ANIMATION_TIME_MS, - fromWidth, - toWidth: '100%', - }; - } - - return { - timeMs: this.props.expectedTimeMs, - fromWidth: '0px', - toWidth: PROGRESS_STALL_AT_WIDTH, - }; - } -} - -const expandingWidthKeyframes = (fromWidth: string, toWidth: string) => { - return keyframes` - from { - width: ${fromWidth}; - } - to { - width: ${toWidth}; - } - `; -}; - -export interface WidthAnimationSettings { - timeMs: number; - fromWidth: string; - toWidth: string; -} - -interface ProgressProps { - width?: string; - animationSettings?: WidthAnimationSettings; -} - -export const Progress = styled.div<ProgressProps>` - && { - background-color: ${props => props.theme[ColorOption.primaryColor]}; - border-radius: 6px; - height: 6px; - ${props => (props.width ? `width: ${props.width};` : '')} - ${props => - props.animationSettings - ? css` - animation: ${expandingWidthKeyframes( - props.animationSettings.fromWidth, - props.animationSettings.toWidth, - )} - ${props.animationSettings.timeMs}ms linear 1 forwards; - ` - : ''} - } -`; - -export interface ProgressBarProps extends ProgressProps {} - -export const ProgressBar: React.ComponentType<ProgressBarProps & React.ClassAttributes<{}>> = React.forwardRef( - (props, ref) => ( - <ThemeConsumer> - {theme => ( - <Container - width="100%" - borderRadius="6px" - rawBackgroundColor={transparentize(0.5, theme[ColorOption.primaryColor])} - > - <Progress {...props} ref={ref as any} /> - </Container> - )} - </ThemeConsumer> - ), -); diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx deleted file mode 100644 index e77b1b5d1..000000000 --- a/packages/instant/src/components/ui/button.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { darken, saturate } from 'polished'; -import * as React from 'react'; - -import { ColorOption, styled } from '../../style/theme'; -import { util } from '../../util/util'; - -export type ButtonOnClickHandler = (event: React.MouseEvent<HTMLElement>) => void; - -export interface ButtonProps { - backgroundColor?: ColorOption; - borderColor?: ColorOption; - fontColor?: ColorOption; - fontSize?: string; - width?: string; - padding?: string; - type?: string; - isDisabled?: boolean; - href?: string; - onClick?: ButtonOnClickHandler; - className?: string; -} - -const PlainButton: React.StatelessComponent<ButtonProps> = ({ - children, - isDisabled, - onClick, - href, - type, - className, -}) => { - const computedOnClick = isDisabled ? undefined : href ? util.createOpenUrlInNewWindow(href) : onClick; - return ( - <button type={type} className={className} onClick={computedOnClick} disabled={isDisabled}> - {children} - </button> - ); -}; - -const darkenOnHoverAmount = 0.1; -const darkenOnActiveAmount = 0.2; -const saturateOnFocusAmount = 0.2; -export const Button = styled(PlainButton)` - && { - all: initial; - box-sizing: border-box; - font-size: ${props => props.fontSize}; - font-family: 'Inter UI', sans-serif; - font-weight: 500; - color: ${props => props.fontColor && props.theme[props.fontColor]}; - cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; - transition: background-color, opacity 0.5s ease; - padding: ${props => props.padding}; - border-radius: 3px; - text-align: center; - outline: none; - width: ${props => props.width}; - background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; - border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')}; - &:hover { - background-color: ${props => - !props.isDisabled - ? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white']) - : ''} !important; - } - &:active { - background-color: ${props => - !props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''}; - } - &:disabled { - opacity: 0.5; - } - &:focus { - background-color: ${props => - saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])}; - } - } -`; - -Button.defaultProps = { - backgroundColor: ColorOption.primaryColor, - width: 'auto', - isDisabled: false, - padding: '.82em 1.2em', - fontSize: '16px', -}; - -Button.displayName = 'Button'; diff --git a/packages/instant/src/components/ui/circle.tsx b/packages/instant/src/components/ui/circle.tsx deleted file mode 100644 index e4f2c5260..000000000 --- a/packages/instant/src/components/ui/circle.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { ColorOption, styled, Theme, withTheme } from '../../style/theme'; - -export interface CircleProps { - diameter: number; - rawColor?: string; - color?: ColorOption; - theme: Theme; -} - -export const Circle = withTheme( - styled.div<CircleProps>` - && { - width: ${props => props.diameter}px; - height: ${props => props.diameter}px; - background-color: ${props => - props.rawColor ? props.rawColor : props.theme[props.color || ColorOption.white]}; - border-radius: 50%; - } - `, -); - -Circle.displayName = 'Circle'; - -Circle.defaultProps = { - color: ColorOption.white, -}; diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx deleted file mode 100644 index 59b733f3e..000000000 --- a/packages/instant/src/components/ui/container.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { darken } from 'polished'; - -import { MediaChoice, stylesForMedia } from '../../style/media'; -import { ColorOption, styled } from '../../style/theme'; -import { cssRuleIfExists } from '../../style/util'; - -export interface ContainerProps { - display?: MediaChoice; - position?: string; - top?: string; - right?: string; - bottom?: string; - left?: string; - width?: MediaChoice; - height?: MediaChoice; - maxWidth?: string; - margin?: string; - marginTop?: string; - marginRight?: string; - marginBottom?: string; - marginLeft?: string; - padding?: string; - borderRadius?: MediaChoice; - border?: string; - borderColor?: ColorOption; - borderTop?: string; - borderBottom?: string; - className?: string; - backgroundColor?: ColorOption; - rawBackgroundColor?: string; - hasBoxShadow?: boolean; - isHidden?: boolean; - zIndex?: number; - whiteSpace?: string; - opacity?: number; - cursor?: string; - overflow?: string; - darkenOnHover?: boolean; - rawHoverColor?: string; - boxShadowOnHover?: boolean; - flexGrow?: string | number; -} - -const getBackgroundColor = (theme: any, backgroundColor?: ColorOption, rawBackgroundColor?: string): string => { - if (backgroundColor) { - return theme[backgroundColor] as string; - } - if (rawBackgroundColor) { - return rawBackgroundColor; - } - return 'none'; -}; - -export const Container = styled.div<ContainerProps>` - && { - box-sizing: border-box; - ${props => cssRuleIfExists(props, 'flex-grow')} - ${props => cssRuleIfExists(props, 'position')} - ${props => cssRuleIfExists(props, 'top')} - ${props => cssRuleIfExists(props, 'right')} - ${props => cssRuleIfExists(props, 'bottom')} - ${props => cssRuleIfExists(props, 'left')} - ${props => cssRuleIfExists(props, 'max-width')} - ${props => cssRuleIfExists(props, 'margin')} - ${props => cssRuleIfExists(props, 'margin-top')} - ${props => cssRuleIfExists(props, 'margin-right')} - ${props => cssRuleIfExists(props, 'margin-bottom')} - ${props => cssRuleIfExists(props, 'margin-left')} - ${props => cssRuleIfExists(props, 'padding')} - ${props => cssRuleIfExists(props, 'border')} - ${props => cssRuleIfExists(props, 'border-top')} - ${props => cssRuleIfExists(props, 'border-bottom')} - ${props => cssRuleIfExists(props, 'z-index')} - ${props => cssRuleIfExists(props, 'white-space')} - ${props => cssRuleIfExists(props, 'opacity')} - ${props => cssRuleIfExists(props, 'cursor')} - ${props => cssRuleIfExists(props, 'overflow')} - ${props => (props.overflow === 'scroll' ? `-webkit-overflow-scrolling: touch` : '')}; - ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; - ${props => props.display && stylesForMedia<string>('display', props.display)} - ${props => props.width && stylesForMedia<string>('width', props.width)} - ${props => props.height && stylesForMedia<string>('height', props.height)} - ${props => props.borderRadius && stylesForMedia<string>('border-radius', props.borderRadius)} - ${props => (props.isHidden ? 'visibility: hidden;' : '')} - background-color: ${props => getBackgroundColor(props.theme, props.backgroundColor, props.rawBackgroundColor)}; - border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; - &:hover { - ${props => (props.rawHoverColor ? `background-color: ${props.rawHoverColor}` : '')} - ${props => - props.darkenOnHover - ? `background-color: ${ - props.backgroundColor ? darken(0.05, props.theme[props.backgroundColor]) : 'none' - }` - : ''}; - ${props => (props.boxShadowOnHover ? 'box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)' : '')}; - } - } -`; - -Container.defaultProps = { - display: 'block', -}; - -Container.displayName = 'Container'; diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx deleted file mode 100644 index 8788d3d59..000000000 --- a/packages/instant/src/components/ui/dropdown.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import * as _ from 'lodash'; -import { transparentize } from 'polished'; -import * as React from 'react'; - -import { ColorOption, completelyTransparent, ThemeConsumer } from '../../style/theme'; -import { zIndex } from '../../style/z_index'; - -import { Container } from './container'; -import { Flex } from './flex'; -import { Icon } from './icon'; -import { Overlay } from './overlay'; -import { Text } from './text'; - -export interface DropdownItemConfig { - text: string; - onClick?: () => void; -} - -export interface DropdownProps { - value: string; - label?: string; - items: DropdownItemConfig[]; - onOpen?: () => void; -} - -export interface DropdownState { - isOpen: boolean; -} - -export class Dropdown extends React.PureComponent<DropdownProps, DropdownState> { - public static defaultProps = { - items: [], - }; - public state: DropdownState = { - isOpen: false, - }; - public render(): React.ReactNode { - const { value, label, items } = this.props; - const { isOpen } = this.state; - const hasItems = !_.isEmpty(items); - const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px'; - return ( - <React.Fragment> - {isOpen && ( - <Overlay - zIndex={zIndex.dropdownItems - 1} - backgroundColor={completelyTransparent} - onClick={this._closeDropdown} - /> - )} - <Container position="relative"> - <Container - cursor={hasItems ? 'pointer' : undefined} - onClick={this._handleDropdownClick} - hasBoxShadow={isOpen} - boxShadowOnHover={true} - borderRadius={borderRadius} - border="1px solid" - borderColor={ColorOption.feintGrey} - padding="0.8em" - > - <Flex justify="space-between"> - <Text fontSize="16px" fontColor={ColorOption.darkGrey}> - {value} - </Text> - <Container> - {label && ( - <Text fontSize="16px" fontColor={ColorOption.lightGrey}> - {label} - </Text> - )} - {hasItems && ( - <Container marginLeft="5px" display="inline-block" position="relative" bottom="2px"> - <Icon padding="3px" icon="chevron" width={12} stroke={ColorOption.grey} /> - </Container> - )} - </Container> - </Flex> - </Container> - {isOpen && ( - <Container - width="100%" - position="absolute" - onClick={this._closeDropdown} - backgroundColor={ColorOption.white} - hasBoxShadow={true} - zIndex={zIndex.dropdownItems} - > - {_.map(items, (item, index) => ( - <DropdownItem key={item.text} {...item} isLast={index === items.length - 1} /> - ))} - </Container> - )} - </Container> - </React.Fragment> - ); - } - private readonly _handleDropdownClick = (): void => { - if (_.isEmpty(this.props.items)) { - return; - } - const isOpen = !this.state.isOpen; - this.setState({ - isOpen, - }); - - if (isOpen && this.props.onOpen) { - this.props.onOpen(); - } - }; - private readonly _closeDropdown = (): void => { - this.setState({ - isOpen: false, - }); - }; -} - -export interface DropdownItemProps extends DropdownItemConfig { - text: string; - onClick?: () => void; - isLast: boolean; -} - -export const DropdownItem: React.StatelessComponent<DropdownItemProps> = ({ text, onClick, isLast }) => ( - <ThemeConsumer> - {theme => ( - <Container - onClick={onClick} - cursor="pointer" - rawHoverColor={transparentize(0.9, theme[ColorOption.primaryColor])} - backgroundColor={ColorOption.white} - padding="0.8em" - borderTop="0" - border="1px solid" - borderRadius={isLast ? '0px 0px 4px 4px' : undefined} - width="100%" - borderColor={ColorOption.feintGrey} - > - <Text fontSize="14px" fontColor={ColorOption.darkGrey}> - {text} - </Text> - </Container> - )} - </ThemeConsumer> -); - -DropdownItem.displayName = 'DropdownItem'; diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx deleted file mode 100644 index 145e654f1..000000000 --- a/packages/instant/src/components/ui/flex.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { MediaChoice, stylesForMedia } from '../../style/media'; -import { ColorOption, styled } from '../../style/theme'; -import { cssRuleIfExists } from '../../style/util'; - -export interface FlexProps { - direction?: 'row' | 'column'; - flexWrap?: 'wrap' | 'nowrap'; - justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; - align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; - width?: MediaChoice; - height?: MediaChoice; - backgroundColor?: ColorOption; - inline?: boolean; - flexGrow?: number | string; -} - -export const Flex = styled.div<FlexProps>` - && { - display: ${props => (props.inline ? 'inline-flex' : 'flex')}; - flex-direction: ${props => props.direction}; - flex-wrap: ${props => props.flexWrap}; - ${props => cssRuleIfExists(props, 'flexGrow')} - justify-content: ${props => props.justify}; - align-items: ${props => props.align}; - background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; - ${props => (props.width ? stylesForMedia('width', props.width) : '')} - ${props => (props.height ? stylesForMedia('height', props.height) : '')} - } -`; - -Flex.defaultProps = { - direction: 'row', - flexWrap: 'nowrap', - justify: 'center', - align: 'center', -}; - -Flex.displayName = 'Flex'; diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx deleted file mode 100644 index 811142b5b..000000000 --- a/packages/instant/src/components/ui/icon.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { ColorOption, styled, Theme, withTheme } from '../../style/theme'; - -type svgRule = 'evenodd' | 'nonzero' | 'inherit'; -interface IconInfo { - viewBox: string; - path: string; - fillRule?: svgRule; - clipRule?: svgRule; - strokeOpacity?: number; - strokeWidth?: number; - strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit'; - strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit'; -} -interface IconInfoMapping { - closeX: IconInfo; - failed: IconInfo; - success: IconInfo; - chevron: IconInfo; - search: IconInfo; - lock: IconInfo; -} -const ICONS: IconInfoMapping = { - closeX: { - viewBox: '0 0 11 11', - fillRule: 'evenodd', - clipRule: 'evenodd', - path: - 'M10.45 10.449C10.7539 10.1453 10.7539 9.65282 10.45 9.34909L6.60068 5.49999L10.45 1.65093C10.7538 1.3472 10.7538 0.854765 10.45 0.551038C10.1462 0.24731 9.65378 0.24731 9.34995 0.551038L5.50058 4.40006L1.65024 0.549939C1.34641 0.246212 0.853973 0.246212 0.550262 0.549939C0.246429 0.853667 0.246429 1.34611 0.550262 1.64983L4.40073 5.49995L0.55014 9.35019C0.246307 9.65392 0.246307 10.1464 0.55014 10.4501C0.853851 10.7538 1.34628 10.7538 1.65012 10.4501L5.5007 6.59987L9.35007 10.449C9.6539 10.7527 10.1463 10.7527 10.45 10.449Z', - }, - failed: { - viewBox: '0 0 34 34', - fillRule: 'evenodd', - clipRule: 'evenodd', - path: - 'M6.65771 26.4362C9.21777 29.2406 12.9033 31 17 31C24.7319 31 31 24.7319 31 17C31 14.4468 30.3164 12.0531 29.1226 9.99219L6.65771 26.4362ZM4.88281 24.0173C3.68555 21.9542 3 19.5571 3 17C3 9.26807 9.26807 3 17 3C21.1006 3 24.7891 4.76294 27.3496 7.57214L4.88281 24.0173ZM0 17C0 26.3888 7.61133 34 17 34C26.3887 34 34 26.3888 34 17C34 7.61121 26.3887 0 17 0C7.61133 0 0 7.61121 0 17Z', - }, - success: { - viewBox: '0 0 34 34', - fillRule: 'evenodd', - clipRule: 'evenodd', - path: - 'M17 34C26.3887 34 34 26.3888 34 17C34 7.61121 26.3887 0 17 0C7.61133 0 0 7.61121 0 17C0 26.3888 7.61133 34 17 34ZM25.7539 13.0977C26.2969 12.4718 26.2295 11.5244 25.6035 10.9817C24.9775 10.439 24.0303 10.5063 23.4878 11.1323L15.731 20.0771L12.3936 16.7438C11.8071 16.1583 10.8574 16.1589 10.272 16.7451C9.68652 17.3313 9.6875 18.281 10.2734 18.8665L14.75 23.3373L15.8887 24.4746L16.9434 23.2587L25.7539 13.0977Z', - }, - chevron: { - viewBox: '0 0 12 7', - path: 'M11 1L6 6L1 1', - strokeOpacity: 0.5, - strokeWidth: 1.5, - strokeLinecap: 'round', - strokeLinejoin: 'round', - }, - search: { - viewBox: '0 0 14 14', - fillRule: 'evenodd', - clipRule: 'evenodd', - path: - 'M8.39404 5.19727C8.39404 6.96289 6.96265 8.39453 5.19702 8.39453C3.4314 8.39453 2 6.96289 2 5.19727C2 3.43164 3.4314 2 5.19702 2C6.96265 2 8.39404 3.43164 8.39404 5.19727ZM8.09668 9.51074C7.26855 10.0684 6.27075 10.3945 5.19702 10.3945C2.3269 10.3945 0 8.06738 0 5.19727C0 2.32715 2.3269 0 5.19702 0C8.06738 0 10.394 2.32715 10.394 5.19727C10.394 6.27051 10.0686 7.26855 9.51074 8.09668L13.6997 12.2861L12.2854 13.7002L8.09668 9.51074Z', - }, - lock: { - viewBox: '0 0 13 16', - path: - 'M6.47619 0C3.79509 0 1.60489 2.21216 1.60489 4.92014V6.33135C0.717479 6.33135 0 7.05602 0 7.95232V14.379C0 15.2753 0.717479 16 1.60489 16H11.3475C12.2349 16 12.9524 15.2753 12.9524 14.379V7.95232C12.9524 7.05602 12.2349 6.33135 11.3475 6.33135V4.92014C11.3475 2.21216 9.1573 0 6.47619 0ZM9.6482 6.33135H3.30418V4.92014C3.30418 3.16567 4.72026 1.71633 6.47619 1.71633C8.23213 1.71633 9.6482 3.16567 9.6482 4.92014V6.33135Z', - }, -}; - -export interface IconProps { - className?: string; - width: number; - height?: number; - color?: ColorOption; - stroke?: ColorOption; - icon: keyof IconInfoMapping; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; - padding?: string; - theme: Theme; -} -const PlainIcon: React.StatelessComponent<IconProps> = props => { - const iconInfo = ICONS[props.icon]; - const colorValue = _.isUndefined(props.color) ? undefined : props.theme[props.color]; - const strokeValue = _.isUndefined(props.stroke) ? undefined : props.theme[props.stroke]; - return ( - <div onClick={props.onClick} className={props.className}> - <svg - width={props.width} - height={props.height} - viewBox={iconInfo.viewBox} - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <path - d={iconInfo.path} - fill={colorValue} - fillRule={iconInfo.fillRule || 'nonzero'} - clipRule={iconInfo.clipRule || 'nonzero'} - stroke={strokeValue} - strokeOpacity={iconInfo.strokeOpacity} - strokeWidth={iconInfo.strokeWidth} - strokeLinecap={iconInfo.strokeLinecap} - strokeLinejoin={iconInfo.strokeLinejoin} - /> - </svg> - </div> - ); -}; - -export const Icon = withTheme(styled(PlainIcon)` - && { - display: inline-block; - ${props => (!_.isUndefined(props.onClick) ? 'cursor: pointer' : '')}; - transition: opacity 0.5s ease; - padding: ${props => props.padding}; - opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)}; - &:hover { - opacity: 1; - } - &:active { - opacity: 1; - } - } -`); - -Icon.defaultProps = { - padding: '0em 0em', -}; - -Icon.displayName = 'Icon'; diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx deleted file mode 100644 index 024e81b15..000000000 --- a/packages/instant/src/components/ui/input.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; - -import { ColorOption, styled } from '../../style/theme'; - -export interface InputProps extends React.HTMLAttributes<HTMLInputElement> { - tabIndex?: number; - className?: string; - value?: string; - width?: string; - fontSize?: string; - fontColor?: ColorOption; - placeholder?: string; - type?: string; - onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; -} - -export const Input = styled.input<InputProps>` - && { - all: initial; - font-size: ${props => props.fontSize}; - width: ${props => props.width}; - padding: 0.1em 0em; - font-family: 'Inter UI'; - color: ${props => props.theme[props.fontColor || 'white']}; - background: transparent; - outline: none; - border: none; - &::placeholder { - color: ${props => props.theme[props.fontColor || 'white']} !important; - opacity: 0.5 !important; - } - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; - } - } -`; - -Input.defaultProps = { - width: 'auto', - fontColor: ColorOption.white, - fontSize: '12px', -}; - -Input.displayName = 'Input'; diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx deleted file mode 100644 index 0b1be6a65..000000000 --- a/packages/instant/src/components/ui/overlay.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as _ from 'lodash'; - -import { generateMediaWrapper, ScreenWidths } from '../../style/media'; -import { generateOverlayBlack, styled } from '../../style/theme'; -import { zIndex } from '../../style/z_index'; - -export interface OverlayProps { - zIndex?: number; - backgroundColor?: string; - width?: string; - height?: string; - showMaxWidth?: ScreenWidths; -} - -export const Overlay = styled.div<OverlayProps>` - && { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: ${props => props.zIndex} - background-color: ${props => props.backgroundColor}; - ${props => props.width && `width: ${props.width};`} - ${props => props.height && `height: ${props.height};`} - display: ${props => (props.showMaxWidth ? 'none' : 'block')}; - ${props => props.showMaxWidth && generateMediaWrapper(props.showMaxWidth)`display: block;`} - } -`; - -Overlay.defaultProps = { - zIndex: zIndex.overlayDefault, - backgroundColor: generateOverlayBlack(0.7), -}; - -Overlay.displayName = 'Overlay'; diff --git a/packages/instant/src/components/ui/spinner.tsx b/packages/instant/src/components/ui/spinner.tsx deleted file mode 100644 index 28ebc2598..000000000 --- a/packages/instant/src/components/ui/spinner.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react'; - -import { FullRotation } from '../animations/full_rotation'; - -export interface SpinnerProps { - widthPx: number; - heightPx: number; -} -export const Spinner: React.StatelessComponent<SpinnerProps> = props => { - return ( - <FullRotation width={`${props.widthPx}px`} height={`${props.heightPx}px`}> - <svg - width={props.widthPx} - height={props.heightPx} - viewBox="0 0 34 34" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <circle cx="17" cy="17" r="15" stroke="white" strokeOpacity="0.2" strokeWidth="4" /> - <path - d="M17 32C25.2843 32 32 25.2843 32 17C32 8.71573 25.2843 2 17 2" - stroke="white" - strokeWidth="4" - strokeLinecap="round" - strokeLinejoin="round" - /> - </svg> - </FullRotation> - ); -}; diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx deleted file mode 100644 index ca120f3bd..000000000 --- a/packages/instant/src/components/ui/text.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import * as React from 'react'; - -import { ColorOption, styled } from '../../style/theme'; -import { util } from '../../util/util'; - -export interface TextProps { - fontColor?: ColorOption; - fontFamily?: string; - fontStyle?: string; - fontSize?: string; - opacity?: number; - letterSpacing?: string; - textAlign?: string; - textTransform?: string; - lineHeight?: string; - className?: string; - minHeight?: string; - center?: boolean; - fontWeight?: number | string; - textDecorationLine?: string; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; - noWrap?: boolean; - display?: string; - href?: string; - width?: string; -} - -export const Text: React.StatelessComponent<TextProps> = ({ href, onClick, ...rest }) => { - const computedOnClick = href ? util.createOpenUrlInNewWindow(href) : onClick; - return <StyledText {...rest} onClick={computedOnClick} />; -}; - -const opacityOnHoverAmount = 0.5; -export const StyledText = styled.div<TextProps>` - && { - font-family: 'Inter UI', sans-serif; - font-style: ${props => props.fontStyle}; - font-weight: ${props => props.fontWeight}; - font-size: ${props => props.fontSize}; - opacity: ${props => props.opacity}; - text-decoration-line: ${props => props.textDecorationLine}; - ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; - ${props => (props.center ? 'text-align: center' : '')}; - color: ${props => props.fontColor && props.theme[props.fontColor]}; - ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; - ${props => (props.onClick ? 'cursor: pointer' : '')}; - transition: color 0.5s ease; - ${props => (props.noWrap ? 'white-space: nowrap' : '')}; - ${props => (props.display ? `display: ${props.display}` : '')}; - ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')}; - ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')}; - ${props => (props.textAlign ? `text-align: ${props.textAlign}` : '')}; - ${props => (props.width ? `width: ${props.width}` : '')}; - &:hover { - ${props => (props.onClick ? `opacity: ${opacityOnHoverAmount};` : '')}; - } - } -`; - -Text.defaultProps = { - fontFamily: 'Inter UI', - fontStyle: 'normal', - fontWeight: 400, - fontColor: ColorOption.black, - fontSize: '15px', - textDecorationLine: 'none', - noWrap: false, - display: 'inline-block', -}; - -Text.displayName = 'Text'; diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx deleted file mode 100644 index 10433767f..000000000 --- a/packages/instant/src/components/wallet_prompt.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; - -import { ColorOption } from '../style/theme'; - -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Text } from './ui/text'; - -export interface WalletPromptProps { - image: React.ReactNode; - onClick?: () => void; - primaryColor: ColorOption; - secondaryColor: ColorOption; -} - -export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ - onClick, - image, - children, - secondaryColor, - primaryColor, -}) => ( - <Container - padding="10px" - border={`1px solid ${primaryColor}`} - backgroundColor={secondaryColor} - width="100%" - borderRadius="4px" - onClick={onClick} - cursor={onClick ? 'pointer' : undefined} - boxShadowOnHover={!!onClick} - > - <Flex> - {image} - <Container marginLeft="10px"> - <Text fontSize="16px" fontColor={primaryColor} fontWeight="500"> - {children} - </Text> - </Container> - </Flex> - </Container> -); - -WalletPrompt.defaultProps = { - primaryColor: ColorOption.darkOrange, - secondaryColor: ColorOption.lightOrange, -}; - -WalletPrompt.displayName = 'WalletPrompt'; diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx deleted file mode 100644 index e9cb48e61..000000000 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; - -import { ZeroExInstantContainer } from '../components/zero_ex_instant_container'; - -import { INJECTED_DIV_CLASS } from '../constants'; - -import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider'; - -export type ZeroExInstantProps = ZeroExInstantProviderProps; - -export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = props => { - return ( - <div className={INJECTED_DIV_CLASS}> - <ZeroExInstantProvider {...props}> - <ZeroExInstantContainer /> - </ZeroExInstantProvider> - </div> - ); -}; - -ZeroExInstant.displayName = 'ZeroExInstant'; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx deleted file mode 100644 index e8c64d5d1..000000000 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ /dev/null @@ -1,112 +0,0 @@ -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'; -import { LatestBuyQuoteOrderDetails } from '../containers/latest_buy_quote_order_details'; -import { LatestError } from '../containers/latest_error'; -import { SelectedAssetBuyOrderStateButtons } from '../containers/selected_asset_buy_order_state_buttons'; -import { SelectedAssetInstantHeading } from '../containers/selected_asset_instant_heading'; -import { ColorOption } from '../style/theme'; -import { zIndex } from '../style/z_index'; -import { SlideAnimationState } from '../types'; -import { analytics, TokenSelectorClosedVia } from '../util/analytics'; - -import { CSSReset } from './css_reset'; -import { SlidingPanel } from './sliding_panel'; -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; - -export interface ZeroExInstantContainerProps {} -export interface ZeroExInstantContainerState { - tokenSelectionPanelAnimationState: SlideAnimationState; -} - -export class ZeroExInstantContainer extends React.PureComponent< - ZeroExInstantContainerProps, - ZeroExInstantContainerState -> { - public state = { - tokenSelectionPanelAnimationState: 'none' as SlideAnimationState, - }; - public render(): React.ReactNode { - return ( - <React.Fragment> - <CSSReset /> - <Container - width={{ default: '350px', sm: '100%' }} - height={{ default: 'auto', sm: '100%' }} - position="relative" - > - <Container position="relative"> - <LatestError /> - </Container> - <Container - zIndex={zIndex.mainContainer} - position="relative" - backgroundColor={ColorOption.white} - borderRadius={{ default: '3px', sm: '0px' }} - hasBoxShadow={true} - overflow="hidden" - height="100%" - > - <Flex direction="column" justify="flex-start" height="100%"> - <SelectedAssetInstantHeading onSelectAssetClick={this._handleSymbolClick} /> - <ConnectedBuyOrderProgressOrPaymentMethod /> - <LatestBuyQuoteOrderDetails /> - <Container padding="20px" width="100%"> - <SelectedAssetBuyOrderStateButtons /> - </Container> - </Flex> - <SlidingPanel - animationState={this.state.tokenSelectionPanelAnimationState} - onClose={this._handlePanelCloseClickedX} - onAnimationEnd={this._handleSlidingPanelAnimationEnd} - > - <AvailableERC20TokenSelector onTokenSelect={this._handlePanelCloseAfterChose} /> - </SlidingPanel> - <CurrentStandardSlidingPanel /> - </Container> - <Container - display={{ sm: 'none', default: 'block' }} - marginTop="10px" - marginLeft="auto" - marginRight="auto" - width="108px" - > - <a href={ZERO_EX_SITE_URL} target="_blank"> - <PoweredByLogo /> - </a> - </Container> - </Container> - </React.Fragment> - ); - } - private readonly _handleSymbolClick = (): void => { - analytics.trackTokenSelectorOpened(); - this.setState({ - tokenSelectionPanelAnimationState: 'slidIn', - }); - }; - private readonly _handlePanelCloseClickedX = (): void => { - this._handlePanelClose(TokenSelectorClosedVia.ClickedX); - }; - private readonly _handlePanelCloseAfterChose = (): void => { - this._handlePanelClose(TokenSelectorClosedVia.TokenChose); - }; - private readonly _handlePanelClose = (closedVia: TokenSelectorClosedVia): void => { - analytics.trackTokenSelectorClosed(closedVia); - this.setState({ - tokenSelectionPanelAnimationState: 'slidOut', - }); - }; - private readonly _handleSlidingPanelAnimationEnd = (): void => { - if (this.state.tokenSelectionPanelAnimationState === 'slidOut') { - // When the slidOut animation completes, don't keep the panel mounted. - // Performance optimization - this.setState({ tokenSelectionPanelAnimationState: 'none' }); - } - }; -} diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx deleted file mode 100644 index 38a716091..000000000 --- a/packages/instant/src/components/zero_ex_instant_overlay.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react'; - -import { ZeroExInstantContainer } from '../components/zero_ex_instant_container'; -import { MAIN_CONTAINER_DIV_CLASS, OVERLAY_CLOSE_BUTTON_DIV_CLASS, OVERLAY_DIV_CLASS } from '../constants'; -import { ColorOption } from '../style/theme'; - -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Icon } from './ui/icon'; -import { Overlay } from './ui/overlay'; -import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider'; - -export interface ZeroExInstantOverlayProps extends ZeroExInstantProviderProps { - onClose?: () => void; - zIndex?: number; -} - -export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlayProps> = props => { - const { onClose, zIndex, ...rest } = props; - return ( - <ZeroExInstantProvider {...rest}> - <Overlay zIndex={zIndex} className={OVERLAY_DIV_CLASS}> - <Flex height="100vh"> - <Container - className={OVERLAY_CLOSE_BUTTON_DIV_CLASS} - position="absolute" - top="0px" - right="0px" - display={{ default: 'initial', sm: 'none' }} - > - <Icon - height={18} - width={18} - color={ColorOption.white} - icon="closeX" - onClick={onClose} - padding="2em 2em" - /> - </Container> - <Container - width={{ default: 'auto', sm: '100%' }} - height={{ default: 'auto', sm: '100%' }} - className={MAIN_CONTAINER_DIV_CLASS} - > - <ZeroExInstantContainer /> - </Container> - </Flex> - </Overlay> - </ZeroExInstantProvider> - ); -}; - -ZeroExInstantOverlay.displayName = 'ZeroExInstantOverlay'; diff --git a/packages/instant/src/components/zero_ex_instant_provider.tsx b/packages/instant/src/components/zero_ex_instant_provider.tsx deleted file mode 100644 index ec8e82ee3..000000000 --- a/packages/instant/src/components/zero_ex_instant_provider.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { Provider as ReduxProvider } from 'react-redux'; - -import { ACCOUNT_UPDATE_INTERVAL_TIME_MS, BUY_QUOTE_UPDATE_INTERVAL_TIME_MS } from '../constants'; -import { SelectedAssetThemeProvider } from '../containers/selected_asset_theme_provider'; -import { asyncData } from '../redux/async_data'; -import { DEFAULT_STATE, DefaultState, State } from '../redux/reducer'; -import { store, Store } from '../redux/store'; -import { fonts } from '../style/fonts'; -import { AccountState, Network, QuoteFetchOrigin, ZeroExInstantBaseConfig } from '../types'; -import { analytics, disableAnalytics } from '../util/analytics'; -import { assetUtils } from '../util/asset'; -import { errorFlasher } from '../util/error_flasher'; -import { setupRollbar } from '../util/error_reporter'; -import { gasPriceEstimator } from '../util/gas_price_estimator'; -import { Heartbeater } from '../util/heartbeater'; -import { generateAccountHeartbeater, generateBuyQuoteHeartbeater } from '../util/heartbeater_factory'; -import { providerStateFactory } from '../util/provider_state_factory'; - -export type ZeroExInstantProviderProps = ZeroExInstantBaseConfig; - -export class ZeroExInstantProvider extends React.PureComponent<ZeroExInstantProviderProps> { - private readonly _store: Store; - private _accountUpdateHeartbeat?: Heartbeater; - private _buyQuoteHeartbeat?: Heartbeater; - - // TODO(fragosti): Write tests for this beast once we inject a provider. - private static _mergeDefaultStateWithProps( - props: ZeroExInstantProviderProps, - defaultState: DefaultState = DEFAULT_STATE, - ): State { - // use the networkId passed in with the props, otherwise default to that of the default state (1, mainnet) - const networkId = props.networkId || defaultState.network; - // construct the ProviderState - const providerState = providerStateFactory.getInitialProviderState( - props.orderSource, - networkId, - props.provider, - props.walletDisplayName, - ); - // merge the additional additionalAssetMetaDataMap with our default map - const completeAssetMetaDataMap = { - // Make sure the passed in assetDatas are lower case - ..._.mapKeys(props.additionalAssetMetaDataMap || {}, (value, key) => key.toLowerCase()), - ...defaultState.assetMetaDataMap, - }; - // construct the final state - const storeStateFromProps: State = { - ...defaultState, - providerState, - network: networkId, - walletDisplayName: props.walletDisplayName, - selectedAsset: _.isUndefined(props.defaultSelectedAssetData) - ? undefined - : assetUtils.createAssetFromAssetDataOrThrow( - props.defaultSelectedAssetData, - completeAssetMetaDataMap, - networkId, - ), - selectedAssetUnitAmount: _.isUndefined(props.defaultAssetBuyAmount) - ? undefined - : new BigNumber(props.defaultAssetBuyAmount), - availableAssets: _.isUndefined(props.availableAssetDatas) - ? undefined - : assetUtils.createAssetsFromAssetDatas(props.availableAssetDatas, completeAssetMetaDataMap, networkId), - assetMetaDataMap: completeAssetMetaDataMap, - affiliateInfo: props.affiliateInfo, - }; - return storeStateFromProps; - } - constructor(props: ZeroExInstantProviderProps) { - super(props); - setupRollbar(); - fonts.include(); - const initialAppState = ZeroExInstantProvider._mergeDefaultStateWithProps(this.props); - this._store = store.create(initialAppState); - } - public componentDidMount(): void { - const state = this._store.getState(); - const dispatch = this._store.dispatch; - // tslint:disable-next-line:no-floating-promises - asyncData.fetchEthPriceAndDispatchToStore(dispatch); - // fetch available assets if none are specified - if (_.isUndefined(state.availableAssets)) { - // tslint:disable-next-line:no-floating-promises - asyncData.fetchAvailableAssetDatasAndDispatchToStore(state, dispatch); - } - if (state.providerState.account.state !== AccountState.None) { - this._accountUpdateHeartbeat = generateAccountHeartbeater({ - store: this._store, - shouldPerformImmediatelyOnStart: true, - }); - this._accountUpdateHeartbeat.start(ACCOUNT_UPDATE_INTERVAL_TIME_MS); - } - - this._buyQuoteHeartbeat = generateBuyQuoteHeartbeater({ - store: this._store, - shouldPerformImmediatelyOnStart: false, - }); - this._buyQuoteHeartbeat.start(BUY_QUOTE_UPDATE_INTERVAL_TIME_MS); - // Trigger first buyquote fetch - // tslint:disable-next-line:no-floating-promises - asyncData.fetchCurrentBuyQuoteAndDispatchToStore(state, dispatch, QuoteFetchOrigin.Manual, { - updateSilently: false, - }); - // warm up the gas price estimator cache just in case we can't - // grab the gas price estimate when submitting the transaction - // tslint:disable-next-line:no-floating-promises - gasPriceEstimator.getGasInfoAsync(); - // tslint:disable-next-line:no-floating-promises - this._flashErrorIfWrongNetwork(); - - // Analytics - disableAnalytics(this.props.shouldDisableAnalyticsTracking || false); - analytics.addEventProperties( - analytics.generateEventProperties( - state.network, - this.props.orderSource, - state.providerState, - window, - state.selectedAsset, - this.props.affiliateInfo, - state.baseCurrency, - ), - ); - analytics.trackInstantOpened(); - } - public componentWillUnmount(): void { - if (this._accountUpdateHeartbeat) { - this._accountUpdateHeartbeat.stop(); - } - if (this._buyQuoteHeartbeat) { - this._buyQuoteHeartbeat.stop(); - } - } - public render(): React.ReactNode { - return ( - <ReduxProvider store={this._store}> - <SelectedAssetThemeProvider>{this.props.children}</SelectedAssetThemeProvider> - </ReduxProvider> - ); - } - private readonly _flashErrorIfWrongNetwork = async (): Promise<void> => { - const msToShowError = 30000; // 30 seconds - const state = this._store.getState(); - const network = state.network; - const web3Wrapper = state.providerState.web3Wrapper; - const networkOfProvider = await web3Wrapper.getNetworkIdAsync(); - if (network !== networkOfProvider) { - const errorMessage = `Wrong network detected. Try switching to ${Network[network]}.`; - errorFlasher.flashNewErrorMessage(this._store.dispatch, errorMessage, msToShowError); - } - }; -} diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts deleted file mode 100644 index d407925a3..000000000 --- a/packages/instant/src/constants.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { BigNumber } from '@0x/utils'; - -import { AccountNotReady, AccountState, Network, ProviderType } from './types'; - -export const BIG_NUMBER_ZERO = new BigNumber(0); -export const ETH_DECIMALS = 18; -export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer'; -export const INJECTED_DIV_CLASS = 'zeroExInstantResetRoot'; -export const INJECTED_DIV_ID = 'zeroExInstant'; -export const OVERLAY_DIV_CLASS = 'zeroExInstantOverlay'; -export const OVERLAY_CLOSE_BUTTON_DIV_CLASS = 'zeroExInstantOverlayCloseButton'; -export const MAIN_CONTAINER_DIV_CLASS = 'zeroExInstantMainContainer'; -export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed'; -export const GWEI_IN_WEI = new BigNumber(1000000000); -export const ONE_SECOND_MS = 1000; -export const ONE_MINUTE_MS = ONE_SECOND_MS * 60; -export const GIT_SHA = process.env.GIT_SHA; -export const NODE_ENV = process.env.NODE_ENV; -export const SLIPPAGE_PERCENTAGE = 0.2; -export const NPM_PACKAGE_VERSION = process.env.NPM_PACKAGE_VERSION; -export const DEFAULT_UNKOWN_ASSET_NAME = '???'; -export const ACCOUNT_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 5; -export const BUY_QUOTE_UPDATE_INTERVAL_TIME_MS = ONE_SECOND_MS * 15; -export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.multipliedBy(6); -export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = ONE_MINUTE_MS * 2; -export const MAGIC_TRIGGER_ERROR_INPUT = '0€'; -export const MAGIC_TRIGGER_ERROR_MESSAGE = 'Triggered error'; -export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info'; -export const HEAP_ANALYTICS_ID = process.env.HEAP_ANALYTICS_ID; -export const HEAP_ENABLED = process.env.HEAP_ENABLED; -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; -export const HOST_DOMAINS_EXTERNAL = [ - '0x-instant-staging.s3-website-us-east-1.amazonaws.com', - '0x-instant-dogfood.s3-website-us-east-1.amazonaws.com', - 'instant.0xproject.com', -]; -export const HOST_DOMAINS_LOCAL = ['localhost', '127.0.0.1', '0.0.0.0']; -export const ROLLBAR_CLIENT_TOKEN = process.env.ROLLBAR_CLIENT_TOKEN; -export const ROLLBAR_ENABLED = process.env.ROLLBAR_ENABLED; -export const INSTANT_DISCHARGE_TARGET = process.env.INSTANT_DISCHARGE_TARGET as - | 'production' - | 'dogfood' - | 'staging' - | undefined; -export const COINBASE_WALLET_IOS_APP_STORE_URL = 'https://itunes.apple.com/us/app/coinbase-wallet/id1278383455?mt=8'; -export const COINBASE_WALLET_ANDROID_APP_STORE_URL = 'https://play.google.com/store/apps/details?id=org.toshi&hl=en'; -export const COINBASE_WALLET_SITE_URL = 'https://wallet.coinbase.com/'; -export const META_MASK_FIREFOX_STORE_URL = 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/'; -export const META_MASK_CHROME_STORE_URL = - 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en'; -export const META_MASK_OPERA_STORE_URL = 'https://addons.opera.com/en/extensions/details/metamask/'; -export const META_MASK_SITE_URL = 'https://metamask.io/'; -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, -}; -export const LOADING_ACCOUNT: AccountNotReady = { - state: AccountState.Loading, -}; -export const LOCKED_ACCOUNT: AccountNotReady = { - state: AccountState.Locked, -}; -export const PROVIDER_TYPE_TO_NAME: { [key in ProviderType]: string } = { - [ProviderType.Cipher]: 'Cipher', - [ProviderType.MetaMask]: 'MetaMask', - [ProviderType.Mist]: 'Mist', - [ProviderType.CoinbaseWallet]: 'Coinbase Wallet', - [ProviderType.Parity]: 'Parity', - [ProviderType.TrustWallet]: 'Trust Wallet', - [ProviderType.Opera]: 'Opera Wallet', - [ProviderType.Fallback]: 'Fallback', -}; diff --git a/packages/instant/src/containers/available_erc20_token_selector.ts b/packages/instant/src/containers/available_erc20_token_selector.ts deleted file mode 100644 index 4d4218d22..000000000 --- a/packages/instant/src/containers/available_erc20_token_selector.ts +++ /dev/null @@ -1,45 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; - -import { State } from '../redux/reducer'; -import { ERC20Asset } from '../types'; -import { assetUtils } from '../util/asset'; - -import { ERC20TokenSelector } from '../components/erc20_token_selector'; -import { Action, actions } from '../redux/actions'; - -export interface AvailableERC20TokenSelectorProps { - onTokenSelect?: (token: ERC20Asset) => void; -} - -interface ConnectedState { - tokens: ERC20Asset[]; -} - -interface ConnectedDispatch { - onTokenSelect: (token: ERC20Asset) => void; -} - -const mapStateToProps = (state: State, _ownProps: AvailableERC20TokenSelectorProps): ConnectedState => ({ - tokens: assetUtils.getERC20AssetsFromAssets(state.availableAssets || []), -}); - -const mapDispatchToProps = ( - dispatch: Dispatch<Action>, - ownProps: AvailableERC20TokenSelectorProps, -): ConnectedDispatch => ({ - onTokenSelect: (token: ERC20Asset) => { - dispatch(actions.updateSelectedAsset(token)); - dispatch(actions.resetAmount()); - if (ownProps.onTokenSelect) { - ownProps.onTokenSelect(token); - } - }, -}); - -export const AvailableERC20TokenSelector: React.ComponentClass<AvailableERC20TokenSelectorProps> = connect( - mapStateToProps, - mapDispatchToProps, -)(ERC20TokenSelector); diff --git a/packages/instant/src/containers/connected_account_payment_method.ts b/packages/instant/src/containers/connected_account_payment_method.ts deleted file mode 100644 index f648f0b54..000000000 --- a/packages/instant/src/containers/connected_account_payment_method.ts +++ /dev/null @@ -1,94 +0,0 @@ -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; - -import { PaymentMethod, PaymentMethodProps } from '../components/payment_method'; -import { - COINBASE_WALLET_ANDROID_APP_STORE_URL, - COINBASE_WALLET_IOS_APP_STORE_URL, - COINBASE_WALLET_SITE_URL, -} from '../constants'; -import { Action, actions } from '../redux/actions'; -import { asyncData } from '../redux/async_data'; -import { State } from '../redux/reducer'; -import { Network, Omit, OperatingSystem, ProviderState, StandardSlidingPanelContent, WalletSuggestion } from '../types'; -import { analytics } from '../util/analytics'; -import { envUtil } from '../util/env'; - -export interface ConnectedAccountPaymentMethodProps {} - -interface ConnectedState { - network: Network; - providerState: ProviderState; - walletDisplayName?: string; -} - -interface ConnectedDispatch { - openInstallWalletPanel: () => void; - unlockWalletAndDispatchToStore: (providerState: ProviderState) => void; -} - -type ConnectedProps = Omit<PaymentMethodProps, keyof ConnectedAccountPaymentMethodProps>; - -type FinalProps = ConnectedProps & ConnectedAccountPaymentMethodProps; - -const mapStateToProps = (state: State, _ownProps: ConnectedAccountPaymentMethodProps): ConnectedState => ({ - network: state.network, - providerState: state.providerState, - walletDisplayName: state.walletDisplayName, -}); - -const mapDispatchToProps = ( - dispatch: Dispatch<Action>, - ownProps: ConnectedAccountPaymentMethodProps, -): ConnectedDispatch => ({ - openInstallWalletPanel: () => dispatch(actions.openStandardSlidingPanel(StandardSlidingPanelContent.InstallWallet)), - unlockWalletAndDispatchToStore: (providerState: ProviderState) => { - analytics.trackAccountUnlockRequested(); - // tslint:disable-next-line:no-floating-promises - asyncData.fetchAccountInfoAndDispatchToStore(providerState, dispatch, true); - }, -}); - -const mergeProps = ( - connectedState: ConnectedState, - connectedDispatch: ConnectedDispatch, - ownProps: ConnectedAccountPaymentMethodProps, -): FinalProps => ({ - ...ownProps, - network: connectedState.network, - account: connectedState.providerState.account, - walletDisplayName: connectedState.providerState.displayName, - onUnlockWalletClick: () => connectedDispatch.unlockWalletAndDispatchToStore(connectedState.providerState), - onInstallWalletClick: () => { - const isMobile = envUtil.isMobileOperatingSystem(); - const walletSuggestion: WalletSuggestion = isMobile - ? WalletSuggestion.CoinbaseWallet - : WalletSuggestion.MetaMask; - - analytics.trackInstallWalletClicked(walletSuggestion); - if (walletSuggestion === WalletSuggestion.MetaMask) { - connectedDispatch.openInstallWalletPanel(); - } else { - const operatingSystem = envUtil.getOperatingSystem(); - let url = COINBASE_WALLET_SITE_URL; - switch (operatingSystem) { - case OperatingSystem.Android: - url = COINBASE_WALLET_ANDROID_APP_STORE_URL; - break; - case OperatingSystem.iOS: - url = COINBASE_WALLET_IOS_APP_STORE_URL; - break; - default: - break; - } - window.open(url, '_blank'); - } - }, -}); - -export const ConnectedAccountPaymentMethod: React.ComponentClass<ConnectedAccountPaymentMethodProps> = connect( - mapStateToProps, - mapDispatchToProps, - mergeProps, -)(PaymentMethod); diff --git a/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx b/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx deleted file mode 100644 index cace18e7e..000000000 --- a/packages/instant/src/containers/connected_buy_order_progress_or_payment_method.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import { connect } from 'react-redux'; - -import { State } from '../redux/reducer'; -import { OrderProcessState } from '../types'; - -import { ConnectedAccountPaymentMethod } from './connected_account_payment_method'; -import { SelectedAssetBuyOrderProgress } from './selected_asset_buy_order_progress'; - -interface BuyOrderProgressOrPaymentMethodProps { - orderProcessState: OrderProcessState; -} -export const BuyOrderProgressOrPaymentMethod = (props: BuyOrderProgressOrPaymentMethodProps) => { - const { orderProcessState } = props; - if ( - orderProcessState === OrderProcessState.Processing || - orderProcessState === OrderProcessState.Success || - orderProcessState === OrderProcessState.Failure - ) { - return <SelectedAssetBuyOrderProgress />; - } else { - return <ConnectedAccountPaymentMethod />; - } - return null; -}; - -interface ConnectedState extends BuyOrderProgressOrPaymentMethodProps {} - -export interface ConnectedBuyOrderProgressOrPaymentMethodProps {} -const mapStateToProps = (state: State, _ownProps: ConnectedBuyOrderProgressOrPaymentMethodProps): ConnectedState => ({ - orderProcessState: state.buyOrderState.processState, -}); -export const ConnectedBuyOrderProgressOrPaymentMethod: React.ComponentClass< - ConnectedBuyOrderProgressOrPaymentMethodProps -> = connect(mapStateToProps)(BuyOrderProgressOrPaymentMethod); diff --git a/packages/instant/src/containers/current_standard_sliding_panel.ts b/packages/instant/src/containers/current_standard_sliding_panel.ts deleted file mode 100644 index 82ac7fa1b..000000000 --- a/packages/instant/src/containers/current_standard_sliding_panel.ts +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; - -import { StandardSlidingPanel } from '../components/standard_sliding_panel'; -import { Action, actions } from '../redux/actions'; -import { State } from '../redux/reducer'; -import { StandardSlidingPanelSettings } from '../types'; - -export interface CurrentStandardSlidingPanelProps {} - -interface ConnectedState extends StandardSlidingPanelSettings {} - -interface ConnectedDispatch { - onClose: () => void; -} - -const mapStateToProps = (state: State, _ownProps: CurrentStandardSlidingPanelProps): ConnectedState => - state.standardSlidingPanelSettings; - -const mapDispatchToProps = ( - dispatch: Dispatch<Action>, - ownProps: CurrentStandardSlidingPanelProps, -): ConnectedDispatch => ({ - onClose: () => dispatch(actions.closeStandardSlidingPanel()), -}); - -export const CurrentStandardSlidingPanel: React.ComponentClass<CurrentStandardSlidingPanelProps> = connect( - mapStateToProps, - mapDispatchToProps, -)(StandardSlidingPanel); diff --git a/packages/instant/src/containers/latest_buy_quote_order_details.ts b/packages/instant/src/containers/latest_buy_quote_order_details.ts deleted file mode 100644 index 148735c47..000000000 --- a/packages/instant/src/containers/latest_buy_quote_order_details.ts +++ /dev/null @@ -1,41 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; -import { oc } from 'ts-optchain'; - -import { Action, actions } from '../redux/actions'; -import { State } from '../redux/reducer'; - -import { OrderDetails, OrderDetailsProps } from '../components/order_details'; -import { AsyncProcessState, BaseCurrency, Omit } from '../types'; -import { assetUtils } from '../util/asset'; - -type DispatchProperties = 'onBaseCurrencySwitchEth' | 'onBaseCurrencySwitchUsd'; - -interface ConnectedState extends Omit<OrderDetailsProps, DispatchProperties> {} -const mapStateToProps = (state: State, _ownProps: LatestBuyQuoteOrderDetailsProps): ConnectedState => ({ - // use the worst case quote info - buyQuoteInfo: oc(state).latestBuyQuote.worstCaseQuoteInfo(), - selectedAssetUnitAmount: state.selectedAssetUnitAmount, - ethUsdPrice: state.ethUsdPrice, - isLoading: state.quoteRequestState === AsyncProcessState.Pending, - assetName: assetUtils.bestNameForAsset(state.selectedAsset), - baseCurrency: state.baseCurrency, -}); - -interface ConnectedDispatch extends Pick<OrderDetailsProps, DispatchProperties> {} -const mapDispatchToProps = (dispatch: Dispatch<Action>): ConnectedDispatch => ({ - onBaseCurrencySwitchEth: () => { - dispatch(actions.updateBaseCurrency(BaseCurrency.ETH)); - }, - onBaseCurrencySwitchUsd: () => { - dispatch(actions.updateBaseCurrency(BaseCurrency.USD)); - }, -}); - -export interface LatestBuyQuoteOrderDetailsProps {} -export const LatestBuyQuoteOrderDetails: React.ComponentClass<LatestBuyQuoteOrderDetailsProps> = connect( - mapStateToProps, - mapDispatchToProps, -)(OrderDetails); diff --git a/packages/instant/src/containers/latest_error.tsx b/packages/instant/src/containers/latest_error.tsx deleted file mode 100644 index 57a2dbdc2..000000000 --- a/packages/instant/src/containers/latest_error.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import * as React from 'react'; - -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; - -import { SlidingError } from '../components/sliding_error'; -import { Container } from '../components/ui/container'; -import { Overlay } from '../components/ui/overlay'; -import { Action } from '../redux/actions'; -import { State } from '../redux/reducer'; -import { ScreenWidths } from '../style/media'; -import { generateOverlayBlack } from '../style/theme'; -import { zIndex } from '../style/z_index'; -import { Asset, DisplayStatus, Omit, SlideAnimationState } from '../types'; -import { errorFlasher } from '../util/error_flasher'; - -interface LatestErrorComponentProps { - asset?: Asset; - latestErrorMessage?: string; - animationState: SlideAnimationState; - shouldRenderOverlay: boolean; - onOverlayClick: () => void; -} - -const LatestErrorComponent: React.StatelessComponent<LatestErrorComponentProps> = props => { - if (!props.latestErrorMessage) { - // Render a hidden SlidingError such that instant does not move when a real error is rendered. - return ( - <Container isHidden={true}> - <SlidingError animationState="slidIn" icon="😢" message="" /> - </Container> - ); - } - return ( - <React.Fragment> - <SlidingError animationState={props.animationState} icon="😢" message={props.latestErrorMessage} /> - {props.shouldRenderOverlay && ( - <Overlay - onClick={props.onOverlayClick} - zIndex={zIndex.containerOverlay} - showMaxWidth={ScreenWidths.Sm} - backgroundColor={generateOverlayBlack(0.4)} - /> - )} - </React.Fragment> - ); -}; - -export interface LatestErrorProps {} -interface ConnectedState extends Omit<LatestErrorComponentProps, 'onOverlayClick'> {} -const mapStateToProps = (state: State, _ownProps: LatestErrorProps): ConnectedState => ({ - asset: state.selectedAsset, - latestErrorMessage: state.latestErrorMessage, - animationState: state.latestErrorDisplayStatus === DisplayStatus.Present ? 'slidIn' : 'slidOut', - shouldRenderOverlay: state.latestErrorDisplayStatus === DisplayStatus.Present, -}); - -type ConnectedDispatch = Pick<LatestErrorComponentProps, 'onOverlayClick'>; -const mapDispatchToProps = (dispatch: Dispatch<Action>, _ownProps: LatestErrorProps): ConnectedDispatch => ({ - onOverlayClick: () => { - errorFlasher.clearError(dispatch); - }, -}); - -export const LatestError = connect( - mapStateToProps, - mapDispatchToProps, -)(LatestErrorComponent); diff --git a/packages/instant/src/containers/selected_asset_buy_order_progress.ts b/packages/instant/src/containers/selected_asset_buy_order_progress.ts deleted file mode 100644 index 7c8c24676..000000000 --- a/packages/instant/src/containers/selected_asset_buy_order_progress.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { connect } from 'react-redux'; - -import { BuyOrderProgress } from '../components/buy_order_progress'; -import { State } from '../redux/reducer'; -import { OrderState } from '../types'; - -interface ConnectedState { - buyOrderState: OrderState; -} -const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({ - buyOrderState: state.buyOrderState, -}); -export const SelectedAssetBuyOrderProgress = connect(mapStateToProps)(BuyOrderProgress); diff --git a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts b/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts deleted file mode 100644 index 4da99cf04..000000000 --- a/packages/instant/src/containers/selected_asset_buy_order_state_buttons.ts +++ /dev/null @@ -1,113 +0,0 @@ -import { AssetBuyer, AssetBuyerError, BuyQuote } from '@0x/asset-buyer'; -import { BigNumber } from '@0x/utils'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; - -import { BuyOrderStateButtons } from '../components/buy_order_state_buttons'; -import { Action, actions } from '../redux/actions'; -import { State } from '../redux/reducer'; -import { AccountState, AffiliateInfo, Asset, OrderProcessState, ZeroExInstantError } from '../types'; -import { analytics } from '../util/analytics'; -import { errorFlasher } from '../util/error_flasher'; -import { etherscanUtil } from '../util/etherscan'; - -interface ConnectedState { - accountAddress?: string; - accountEthBalanceInWei?: BigNumber; - buyQuote?: BuyQuote; - buyOrderProcessingState: OrderProcessState; - assetBuyer: AssetBuyer; - web3Wrapper: Web3Wrapper; - affiliateInfo?: AffiliateInfo; - selectedAsset?: Asset; - onViewTransaction: () => void; -} - -interface ConnectedDispatch { - onValidationPending: (buyQuote: BuyQuote) => void; - onSignatureDenied: (buyQuote: BuyQuote) => void; - onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => void; - onBuySuccess: (buyQuote: BuyQuote, txHash: string) => void; - onBuyFailure: (buyQuote: BuyQuote, txHash: string) => void; - onRetry: () => void; - onValidationFail: (buyQuote: BuyQuote, errorMessage: AssetBuyerError | ZeroExInstantError) => void; -} -export interface SelectedAssetBuyOrderStateButtons {} -const mapStateToProps = (state: State, _ownProps: SelectedAssetBuyOrderStateButtons): ConnectedState => { - const assetBuyer = state.providerState.assetBuyer; - const web3Wrapper = state.providerState.web3Wrapper; - const account = state.providerState.account; - const accountAddress = account.state === AccountState.Ready ? account.address : undefined; - const accountEthBalanceInWei = account.state === AccountState.Ready ? account.ethBalanceInWei : undefined; - const selectedAsset = state.selectedAsset; - return { - accountAddress, - accountEthBalanceInWei, - buyOrderProcessingState: state.buyOrderState.processState, - assetBuyer, - web3Wrapper, - buyQuote: state.latestBuyQuote, - affiliateInfo: state.affiliateInfo, - selectedAsset, - onViewTransaction: () => { - if ( - state.buyOrderState.processState === OrderProcessState.Processing || - state.buyOrderState.processState === OrderProcessState.Success || - state.buyOrderState.processState === OrderProcessState.Failure - ) { - const etherscanUrl = etherscanUtil.getEtherScanTxnAddressIfExists( - state.buyOrderState.txHash, - assetBuyer.networkId, - ); - if (etherscanUrl) { - analytics.trackTransactionViewed(state.buyOrderState.processState); - - window.open(etherscanUrl, '_blank'); - return; - } - } - }, - }; -}; - -const mapDispatchToProps = ( - dispatch: Dispatch<Action>, - ownProps: SelectedAssetBuyOrderStateButtons, -): ConnectedDispatch => ({ - onValidationPending: (buyQuote: BuyQuote) => { - dispatch(actions.setBuyOrderStateValidating()); - }, - onBuyProcessing: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => { - dispatch(actions.setBuyOrderStateProcessing(txHash, startTimeUnix, expectedEndTimeUnix)); - }, - onBuySuccess: (buyQuote: BuyQuote, txHash: string) => dispatch(actions.setBuyOrderStateSuccess(txHash)), - onBuyFailure: (buyQuote: BuyQuote, txHash: string) => dispatch(actions.setBuyOrderStateFailure(txHash)), - onSignatureDenied: () => { - dispatch(actions.resetAmount()); - const errorMessage = 'You denied this transaction'; - errorFlasher.flashNewErrorMessage(dispatch, errorMessage); - }, - onValidationFail: (buyQuote, error) => { - dispatch(actions.setBuyOrderStateNone()); - if (error === ZeroExInstantError.InsufficientETH) { - const errorMessage = "You don't have enough ETH"; - errorFlasher.flashNewErrorMessage(dispatch, errorMessage); - } else if (error === ZeroExInstantError.CouldNotSubmitTransaction) { - const errorMessage = 'Could not submit transaction'; - errorFlasher.flashNewErrorMessage(dispatch, errorMessage); - } else { - errorFlasher.flashNewErrorMessage(dispatch); - } - }, - onRetry: () => { - dispatch(actions.resetAmount()); - }, -}); - -export const SelectedAssetBuyOrderStateButtons: React.ComponentClass<SelectedAssetBuyOrderStateButtons> = connect( - mapStateToProps, - mapDispatchToProps, -)(BuyOrderStateButtons); diff --git a/packages/instant/src/containers/selected_asset_instant_heading.ts b/packages/instant/src/containers/selected_asset_instant_heading.ts deleted file mode 100644 index 8dc127e1d..000000000 --- a/packages/instant/src/containers/selected_asset_instant_heading.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { connect } from 'react-redux'; -import { oc } from 'ts-optchain'; - -import { State } from '../redux/reducer'; -import { AsyncProcessState, ERC20Asset, OrderState } from '../types'; - -import { InstantHeading } from '../components/instant_heading'; - -export interface InstantHeadingProps { - onSelectAssetClick?: (asset?: ERC20Asset) => void; -} - -interface ConnectedState { - selectedAssetUnitAmount?: BigNumber; - totalEthBaseUnitAmount?: BigNumber; - ethUsdPrice?: BigNumber; - quoteRequestState: AsyncProcessState; - buyOrderState: OrderState; -} - -const mapStateToProps = (state: State, _ownProps: InstantHeadingProps): ConnectedState => ({ - selectedAssetUnitAmount: state.selectedAssetUnitAmount, - totalEthBaseUnitAmount: oc(state).latestBuyQuote.worstCaseQuoteInfo.totalEthAmount(), - ethUsdPrice: state.ethUsdPrice, - quoteRequestState: state.quoteRequestState, - buyOrderState: state.buyOrderState, -}); - -export const SelectedAssetInstantHeading: React.ComponentClass<InstantHeadingProps> = connect(mapStateToProps)( - InstantHeading, -); diff --git a/packages/instant/src/containers/selected_asset_theme_provider.ts b/packages/instant/src/containers/selected_asset_theme_provider.ts deleted file mode 100644 index 6e6b83d73..000000000 --- a/packages/instant/src/containers/selected_asset_theme_provider.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import { connect } from 'react-redux'; - -import { State } from '../redux/reducer'; -import { Theme, theme as defaultTheme, ThemeProvider } from '../style/theme'; -import { Asset } from '../types'; - -export interface SelectedAssetThemeProviderProps {} - -interface ConnectedState { - theme: Theme; -} - -const getTheme = (asset?: Asset): Theme => { - if (!_.isUndefined(asset) && !_.isUndefined(asset.metaData.primaryColor)) { - return { - ...defaultTheme, - primaryColor: asset.metaData.primaryColor, - }; - } - return defaultTheme; -}; - -const mapStateToProps = (state: State, _ownProps: SelectedAssetThemeProviderProps): ConnectedState => { - const theme = getTheme(state.selectedAsset); - return { theme }; -}; - -export const SelectedAssetThemeProvider: React.ComponentClass<SelectedAssetThemeProviderProps> = connect( - mapStateToProps, -)(ThemeProvider); diff --git a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts b/packages/instant/src/containers/selected_erc20_asset_amount_input.ts deleted file mode 100644 index 4b9993332..000000000 --- a/packages/instant/src/containers/selected_erc20_asset_amount_input.ts +++ /dev/null @@ -1,122 +0,0 @@ -import { AssetBuyer } from '@0x/asset-buyer'; -import { AssetProxyId } from '@0x/types'; -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; - -import { ERC20AssetAmountInput, ERC20AssetAmountInputProps } from '../components/erc20_asset_amount_input'; -import { Action, actions } from '../redux/actions'; -import { State } from '../redux/reducer'; -import { ColorOption } from '../style/theme'; -import { AffiliateInfo, ERC20Asset, Omit, OrderProcessState, QuoteFetchOrigin } from '../types'; -import { buyQuoteUpdater } from '../util/buy_quote_updater'; - -export interface SelectedERC20AssetAmountInputProps { - fontColor?: ColorOption; - startingFontSizePx: number; - onSelectAssetClick?: (asset?: ERC20Asset) => void; -} - -interface ConnectedState { - assetBuyer: AssetBuyer; - value?: BigNumber; - asset?: ERC20Asset; - isInputDisabled: boolean; - numberOfAssetsAvailable?: number; - affiliateInfo?: AffiliateInfo; - canSelectOtherAsset: boolean; -} - -interface ConnectedDispatch { - updateBuyQuote: ( - assetBuyer: AssetBuyer, - value?: BigNumber, - asset?: ERC20Asset, - affiliateInfo?: AffiliateInfo, - ) => void; -} - -type ConnectedProps = Omit<ERC20AssetAmountInputProps, keyof SelectedERC20AssetAmountInputProps>; - -type FinalProps = ConnectedProps & SelectedERC20AssetAmountInputProps; - -const mapStateToProps = (state: State, _ownProps: SelectedERC20AssetAmountInputProps): ConnectedState => { - const processState = state.buyOrderState.processState; - 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, - isInputDisabled, - numberOfAssetsAvailable, - affiliateInfo: state.affiliateInfo, - canSelectOtherAsset, - }; -}; - -const debouncedUpdateBuyQuoteAsync = _.debounce(buyQuoteUpdater.updateBuyQuoteAsync.bind(buyQuoteUpdater), 200, { - trailing: true, -}) as typeof buyQuoteUpdater.updateBuyQuoteAsync; - -const mapDispatchToProps = ( - dispatch: Dispatch<Action>, - _ownProps: SelectedERC20AssetAmountInputProps, -): ConnectedDispatch => ({ - updateBuyQuote: (assetBuyer, value, asset, affiliateInfo) => { - // Update the input - dispatch(actions.updateSelectedAssetAmount(value)); - // invalidate the last buy quote. - dispatch(actions.updateLatestBuyQuote(undefined)); - // reset our buy state - dispatch(actions.setBuyOrderStateNone()); - - if (!_.isUndefined(value) && value.isGreaterThan(0) && !_.isUndefined(asset)) { - // even if it's debounced, give them the illusion it's loading - dispatch(actions.setQuoteRequestStatePending()); - // tslint:disable-next-line:no-floating-promises - debouncedUpdateBuyQuoteAsync(assetBuyer, dispatch, asset, value, QuoteFetchOrigin.Manual, { - setPending: true, - dispatchErrors: true, - affiliateInfo, - }); - } - }, -}); - -const mergeProps = ( - connectedState: ConnectedState, - connectedDispatch: ConnectedDispatch, - ownProps: SelectedERC20AssetAmountInputProps, -): FinalProps => { - return { - ...ownProps, - asset: connectedState.asset, - value: connectedState.value, - onChange: (value, asset) => { - connectedDispatch.updateBuyQuote(connectedState.assetBuyer, value, asset, connectedState.affiliateInfo); - }, - isInputDisabled: connectedState.isInputDisabled, - numberOfAssetsAvailable: connectedState.numberOfAssetsAvailable, - canSelectOtherAsset: connectedState.canSelectOtherAsset, - }; -}; - -export const SelectedERC20AssetAmountInput: React.ComponentClass<SelectedERC20AssetAmountInputProps> = connect( - mapStateToProps, - mapDispatchToProps, - mergeProps, -)(ERC20AssetAmountInput); diff --git a/packages/instant/src/data/asset_data_network_mapping.ts b/packages/instant/src/data/asset_data_network_mapping.ts deleted file mode 100644 index 4fd0a25ed..000000000 --- a/packages/instant/src/data/asset_data_network_mapping.ts +++ /dev/null @@ -1,66 +0,0 @@ -import * as _ from 'lodash'; - -import { Network } from '../types'; - -interface AssetDataByNetwork { - [Network.Kovan]?: string; - [Network.Mainnet]?: string; -} - -export const assetDataNetworkMapping: AssetDataByNetwork[] = [ - // ZRX - { - [Network.Mainnet]: '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498', - [Network.Kovan]: '0xf47261b00000000000000000000000002002d3812f58e35f0ea1ffbf80a75a38c32175fa', - }, - // SPANK - { - [Network.Mainnet]: '0xf47261b000000000000000000000000042d6622dece394b54999fbd73d108123806f6a18', - [Network.Kovan]: '0xf47261b00000000000000000000000007c9eee8448f3a7d1193389652d863b27e543272d', - }, - // OMG - { - [Network.Mainnet]: '0xf47261b0000000000000000000000000d26114cd6ee289accf82350c8d8487fedb8a0c07', - [Network.Kovan]: '0xf47261b000000000000000000000000046096d8ec059dbaae2950b30e01634ff0dc652ec', - }, - // MKR - { - [Network.Mainnet]: '0xf47261b00000000000000000000000009f8f72aa9304c8b593d555f12ef6589cc3a579a2', - // 0x Kovan MKR - [Network.Kovan]: '0xf47261b00000000000000000000000007b6b10caa9e8e9552ba72638ea5b47c25afea1f3', - }, - // BAT - { - [Network.Mainnet]: '0xf47261b00000000000000000000000000d8775f648430679a709e98d2b0cb6250d2887ef', - [Network.Kovan]: '0xf47261b0000000000000000000000000c87faa7a58f0adf306bad9e7d892fb045a20e5af', - }, - // SNT - { - [Network.Mainnet]: '0xf47261b0000000000000000000000000744d70fdbe2ba4cf95131626614a1763df805b9e', - [Network.Kovan]: '0xf47261b00000000000000000000000009cfe76a718ea75e3e8ce4fc7ad0fef84be70919b', - }, - // MANA - { - [Network.Mainnet]: '0xf47261b00000000000000000000000000f5d2fb29fb7d3cfee444a200298f468908cc942', - [Network.Kovan]: '0xf47261b0000000000000000000000000c64edfc78321673435fbeebdaaa7f9d755963542', - }, - // GNT - { - [Network.Mainnet]: '0xf47261b0000000000000000000000000a74476443119a942de498590fe1f2454d7d4ac0d', - // 0x Kovan GNT - [Network.Kovan]: '0xf47261b000000000000000000000000031fb614e223706f15d0d3c5f4b08bdf0d5c78623', - }, - // SUB - { - [Network.Mainnet]: '0xf47261b000000000000000000000000012480e24eb5bec1a9d4369cab6a80cad3c0a377a', - }, - // Dentacoin - { - [Network.Mainnet]: '0xf47261b000000000000000000000000008d32b0da63e2C3bcF8019c9c5d849d7a9d791e6', - }, - // REP - { - [Network.Kovan]: '0xf47261b00000000000000000000000008cb3971b8eb709c14616bd556ff6683019e90d9c', - [Network.Mainnet]: '0xf47261b00000000000000000000000001985365e9f78359a9b6ad760e32412f4a445e862', - }, -]; diff --git a/packages/instant/src/data/asset_meta_data_map.ts b/packages/instant/src/data/asset_meta_data_map.ts deleted file mode 100644 index 88611a8c0..000000000 --- a/packages/instant/src/data/asset_meta_data_map.ts +++ /dev/null @@ -1,202 +0,0 @@ -import { AssetProxyId, ObjectMap } from '@0x/types'; - -import { AssetMetaData } from '../types'; - -export const assetMetaDataMap: ObjectMap<AssetMetaData> = { - '0xf47261b0000000000000000000000000e41d2489571d322189246dafa5ebde1f4699f498': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#333333', - symbol: 'zrx', - name: '0x', - }, - '0xf47261b000000000000000000000000042d6622dece394b54999fbd73d108123806f6a18': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#EC4F81', - symbol: 'spank', - name: 'Spank', - }, - '0xf47261b0000000000000000000000000d26114cd6ee289accf82350c8d8487fedb8a0c07': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#2458E7', - symbol: 'omg', - name: 'OmiseGo', - }, - '0xf47261b00000000000000000000000009f8f72aa9304c8b593d555f12ef6589cc3a579a2': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#68CCBB', - symbol: 'mkr', - name: 'Maker', - }, - '0xf47261b00000000000000000000000000d8775f648430679a709e98d2b0cb6250d2887ef': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#FF5000', - symbol: 'bat', - name: 'Basic Attention Token', - }, - '0xf47261b0000000000000000000000000744d70fdbe2ba4cf95131626614a1763df805b9e': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#4763D7', - symbol: 'snt', - name: 'Status', - }, - '0xf47261b00000000000000000000000000f5d2fb29fb7d3cfee444a200298f468908cc942': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#f08839', - symbol: 'mana', - name: 'Decentraland', - }, - '0xf47261b00000000000000000000000001985365e9f78359a9b6ad760e32412f4a445e862': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#512D80', - symbol: 'rep', - name: 'Augur', - }, - '0xf47261b00000000000000000000000000abdace70d3790235af448c88547603b945604ea': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#2c3c8c', - symbol: 'dnt', - name: 'district0x', - }, - '0xf47261b000000000000000000000000005f4a42e251f2d52b8ed15e9fedaacfcef1fad27': { - assetProxyId: AssetProxyId.ERC20, - decimals: 12, - primaryColor: '#048998', - symbol: 'zil', - name: 'Zilliqa', - }, - '0xf47261b00000000000000000000000008f8221afbb33998d8584a2b05749ba73c37a938a': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#58BFD6', - symbol: 'req', - name: 'Request Network', - }, - '0xf47261b0000000000000000000000000e0b7927c4af23765cb51314a0e0521a9645f0e2a': { - assetProxyId: AssetProxyId.ERC20, - decimals: 9, - primaryColor: '#E1AA3E', - symbol: 'dgd', - name: 'DigixDao', - }, - '0xf47261b00000000000000000000000004f3afec4e5a3f2a6a1a411def7d7dfe50ee057bf': { - assetProxyId: AssetProxyId.ERC20, - decimals: 9, - primaryColor: '#E1AA3E', - symbol: 'dgx', - name: 'Digix Gold Token', - }, - '0xf47261b0000000000000000000000000419d0d8bdd9af5e606ae2232ed285aff190e711b': { - assetProxyId: AssetProxyId.ERC20, - decimals: 8, - primaryColor: '#E40057', - symbol: 'fun', - name: 'FunFair', - }, - '0xf47261b000000000000000000000000041e5560054824ea6b0732e656e3ad64e20e94e45': { - assetProxyId: AssetProxyId.ERC20, - decimals: 8, - primaryColor: '#04bc24', - symbol: 'cvc', - name: 'Civic', - }, - '0xf47261b00000000000000000000000005ca9a71b1d01849c0a95490cc00559717fcf0d1d': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#F7296E', - symbol: 'ae', - name: 'Aeternity', - }, - '0xf47261b0000000000000000000000000408e41876cccdc0f92210600ef50372656052a38': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#233C5A', - symbol: 'ren', - name: 'Republic Protocol', - }, - '0xf47261b0000000000000000000000000514910771af9ca656af840dff83e8264ecf986ca': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#325CD2', - symbol: 'link', - name: 'ChainLink', - }, - '0xf47261b00000000000000000000000006810e776880c02933d47db1b9fc05908e5386b96': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#48A4C0', - symbol: 'gno', - name: 'Gnosis', - }, - '0xf47261b0000000000000000000000000960b236a07cf122663c4303350609a66a7b288c0': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#04a29e', - symbol: 'ant', - name: 'Aragon', - }, - '0xf47261b00000000000000000000000004156d3342d5c385a87d264f90653733592000581': { - assetProxyId: AssetProxyId.ERC20, - decimals: 8, - primaryColor: '#4CABA7', - symbol: 'salt', - name: 'Salt', - }, - '0xf47261b0000000000000000000000000595832f8fc6bf59c85c527fec3740a1b7a361269': { - assetProxyId: AssetProxyId.ERC20, - decimals: 6, - primaryColor: '#5BC9D4', - symbol: 'powr', - name: 'PowerLedger', - }, - '0xf47261b00000000000000000000000008eb24319393716668d768dcec29356ae9cffe285': { - assetProxyId: AssetProxyId.ERC20, - decimals: 8, - primaryColor: '#523CE8', - symbol: 'agi', - name: 'SingularityNET', - }, - '0xf47261b000000000000000000000000039bb259f66e1c59d5abef88375979b4d20d98022': { - assetProxyId: AssetProxyId.ERC20, - decimals: 8, - primaryColor: '#EDB740', - symbol: 'wax', - name: 'WAX', - }, - '0xf47261b0000000000000000000000000beb9ef514a379b997e0798fdcc901ee474b6d9a1': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#333333', - symbol: 'mln', - name: 'Melon', - }, - '0xf47261b000000000000000000000000058b6a8a3302369daec383334672404ee733ab239': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#232D37', - symbol: 'lpt', - name: 'Livepeer', - }, - '0xf47261b000000000000000000000000027054b13b1b798b345b591a4d22e6562d47ea75a': { - assetProxyId: AssetProxyId.ERC20, - decimals: 4, - primaryColor: '#3A74F6', - symbol: 'ast', - name: 'AirSwap', - }, - '0xf47261b000000000000000000000000089d24a6b4ccb1b6faa2625fe562bdd9a23260359': { - assetProxyId: AssetProxyId.ERC20, - decimals: 18, - primaryColor: '#DEA349', - symbol: 'dai', - name: 'Dai Stablecoin', - }, -}; diff --git a/packages/instant/src/globals.d.ts b/packages/instant/src/globals.d.ts deleted file mode 100644 index 1b5fa443d..000000000 --- a/packages/instant/src/globals.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -declare module '*.svg' { - const content: any; - /* tslint:disable */ - export default content; - /* tslint:enable */ -} -declare module '*.json' { - const json: any; - /* tslint:disable */ - export default json; - /* tslint:enable */ -} diff --git a/packages/instant/src/index.ts b/packages/instant/src/index.ts deleted file mode 100644 index 6e611dae8..000000000 --- a/packages/instant/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { ZeroExInstant, ZeroExInstantProps } from './components/zero_ex_instant'; -export { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './components/zero_ex_instant_overlay'; diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts deleted file mode 100644 index 0acf3f2ad..000000000 --- a/packages/instant/src/index.umd.ts +++ /dev/null @@ -1,169 +0,0 @@ -import { AssetBuyer, BigNumber } from '@0x/asset-buyer'; -import { assetDataUtils } from '@0x/order-utils'; -import { Provider } from 'ethereum-types'; -import * as _ from 'lodash'; -import * as React from 'react'; -import * as ReactDOM from 'react-dom'; - -import { - DEFAULT_ZERO_EX_CONTAINER_SELECTOR, - GIT_SHA as GIT_SHA_FROM_CONSTANT, - INJECTED_DIV_CLASS, - INJECTED_DIV_ID, - NPM_PACKAGE_VERSION, -} from './constants'; -import { assetMetaDataMap } from './data/asset_meta_data_map'; -import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index'; -import { Network, OrderSource } from './types'; -import { analytics } from './util/analytics'; -import { assert } from './util/assert'; -import { providerFactory } from './util/provider_factory'; -import { util } from './util/util'; - -const isInstantRendered = (): boolean => !!document.getElementById(INJECTED_DIV_ID); - -const validateInstantRenderConfig = (config: ZeroExInstantConfig, selector: string) => { - assert.isValidOrderSource('orderSource', config.orderSource); - if (!_.isUndefined(config.defaultSelectedAssetData)) { - assert.isHexString('defaultSelectedAssetData', config.defaultSelectedAssetData); - } - if (!_.isUndefined(config.additionalAssetMetaDataMap)) { - assert.isValidAssetMetaDataMap('additionalAssetMetaDataMap', config.additionalAssetMetaDataMap); - } - if (!_.isUndefined(config.defaultAssetBuyAmount)) { - assert.isNumber('defaultAssetBuyAmount', config.defaultAssetBuyAmount); - } - if (!_.isUndefined(config.networkId)) { - assert.isNumber('networkId', config.networkId); - } - if (!_.isUndefined(config.availableAssetDatas)) { - assert.areValidAssetDatas('availableAssetDatas', config.availableAssetDatas); - } - if (!_.isUndefined(config.onClose)) { - assert.isFunction('onClose', config.onClose); - } - if (!_.isUndefined(config.zIndex)) { - assert.isNumber('zIndex', config.zIndex); - } - if (!_.isUndefined(config.affiliateInfo)) { - assert.isValidAffiliateInfo('affiliateInfo', config.affiliateInfo); - } - if (!_.isUndefined(config.provider)) { - assert.isWeb3Provider('provider', config.provider); - } - if (!_.isUndefined(config.walletDisplayName)) { - assert.isString('walletDisplayName', config.walletDisplayName); - } - if (!_.isUndefined(config.shouldDisablePushToHistory)) { - assert.isBoolean('shouldDisablePushToHistory', config.shouldDisablePushToHistory); - } - if (!_.isUndefined(config.shouldDisableAnalyticsTracking)) { - assert.isBoolean('shouldDisableAnalyticsTracking', config.shouldDisableAnalyticsTracking); - } - assert.isString('selector', selector); -}; - -// Render instant and return a callback that allows you to remove it from the DOM. -const renderInstant = (config: ZeroExInstantConfig, selector: string) => { - const appendToIfExists = document.querySelector(selector); - assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`); - const appendTo = appendToIfExists as Element; - const injectedDiv = document.createElement('div'); - injectedDiv.setAttribute('id', INJECTED_DIV_ID); - injectedDiv.setAttribute('class', INJECTED_DIV_CLASS); - appendTo.appendChild(injectedDiv); - const closeInstant = () => { - analytics.trackInstantClosed(); - if (!_.isUndefined(config.onClose)) { - config.onClose(); - } - appendTo.removeChild(injectedDiv); - }; - const instantOverlayProps = { - ...config, - // If we are using the history API, just go back to close - onClose: () => (config.shouldDisablePushToHistory ? closeInstant() : window.history.back()), - }; - ReactDOM.render(React.createElement(ZeroExInstantOverlay, instantOverlayProps), injectedDiv); - return closeInstant; -}; - -export interface ZeroExInstantConfig extends ZeroExInstantOverlayProps { - shouldDisablePushToHistory?: boolean; -} - -export const render = (config: ZeroExInstantConfig, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => { - validateInstantRenderConfig(config, selector); - if (config.shouldDisablePushToHistory) { - if (!isInstantRendered()) { - renderInstant(config, selector); - } - return; - } - // Before we render, push to history saying that instant is showing for this part of the history. - window.history.pushState({ zeroExInstantShowing: true }, '0x Instant'); - let removeInstant = renderInstant(config, selector); - // If the integrator defined a popstate handler, save it to __zeroExInstantIntegratorsPopStateHandler - // unless we have already done so on a previous render. - const anyWindow = window as any; - const popStateExistsAndNotSetPreviously = window.onpopstate && !anyWindow.__zeroExInstantIntegratorsPopStateHandler; - anyWindow.__zeroExInstantIntegratorsPopStateHandler = popStateExistsAndNotSetPreviously - ? anyWindow.onpopstate.bind(window) - : util.boundNoop; - const onPopStateHandler = (e: PopStateEvent) => { - anyWindow.__zeroExInstantIntegratorsPopStateHandler(e); - const newState = e.state; - if (newState && newState.zeroExInstantShowing) { - // We have returned to a history state that expects instant to be rendered. - if (!isInstantRendered()) { - removeInstant = renderInstant(config, selector); - } - } else { - // History has changed to a different state. - if (isInstantRendered()) { - removeInstant(); - } - } - }; - window.onpopstate = onPopStateHandler; -}; - -export const assetDataForERC20TokenAddress = (tokenAddress: string): string => { - assert.isETHAddressHex('tokenAddress', tokenAddress); - return assetDataUtils.encodeERC20AssetData(tokenAddress); -}; - -export const hasMetaDataForAssetData = (assetData: string): boolean => { - assert.isHexString('assetData', assetData); - return assetMetaDataMap[assetData] !== undefined; -}; - -export const hasLiquidityForAssetDataAsync = async ( - assetData: string, - orderSource: OrderSource, - networkId: Network = Network.Mainnet, - provider?: Provider, -): Promise<boolean> => { - assert.isHexString('assetData', assetData); - assert.isValidOrderSource('orderSource', orderSource); - assert.isNumber('networkId', networkId); - - if (provider !== undefined) { - assert.isWeb3Provider('provider', provider); - } - - const bestProvider: Provider = provider || providerFactory.getFallbackNoSigningProvider(networkId); - - const assetBuyerOptions = { networkId }; - - const assetBuyer = _.isString(orderSource) - ? AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(bestProvider, orderSource, assetBuyerOptions) - : AssetBuyer.getAssetBuyerForProvidedOrders(bestProvider, orderSource, assetBuyerOptions); - - const liquidity = await assetBuyer.getLiquidityForAssetDataAsync(assetData); - return liquidity.ethValueAvailableInWei.gt(new BigNumber(0)); -}; - -// Write version info to the exported object for debugging -export const GIT_SHA = GIT_SHA_FROM_CONSTANT; -export const NPM_VERSION = NPM_PACKAGE_VERSION; diff --git a/packages/instant/src/redux/actions.ts b/packages/instant/src/redux/actions.ts deleted file mode 100644 index ca0be543b..000000000 --- a/packages/instant/src/redux/actions.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { BuyQuote } from '@0x/asset-buyer'; -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; - -import { ActionsUnion, AddressAndEthBalanceInWei, Asset, BaseCurrency, StandardSlidingPanelContent } from '../types'; - -export interface PlainAction<T extends string> { - type: T; -} - -export interface ActionWithPayload<T extends string, P> extends PlainAction<T> { - data: P; -} - -export type Action = ActionsUnion<typeof actions>; - -function createAction<T extends string>(type: T): PlainAction<T>; -function createAction<T extends string, P>(type: T, data: P): ActionWithPayload<T, P>; -function createAction<T extends string, P>(type: T, data?: P): PlainAction<T> | ActionWithPayload<T, P> { - return _.isUndefined(data) ? { type } : { type, data }; -} - -export enum ActionTypes { - SetAccountStateLoading = 'SET_ACCOUNT_STATE_LOADING', - SetAccountStateLocked = 'SET_ACCOUNT_STATE_LOCKED', - SetAccountStateReady = 'SET_ACCOUNT_STATE_READY', - UpdateAccountEthBalance = 'UPDATE_ACCOUNT_ETH_BALANCE', - UpdateEthUsdPrice = 'UPDATE_ETH_USD_PRICE', - UpdateSelectedAssetUnitAmount = 'UPDATE_SELECTED_ASSET_UNIT_AMOUNT', - SetBuyOrderStateNone = 'SET_BUY_ORDER_STATE_NONE', - SetBuyOrderStateValidating = 'SET_BUY_ORDER_STATE_VALIDATING', - SetBuyOrderStateProcessing = 'SET_BUY_ORDER_STATE_PROCESSING', - SetBuyOrderStateFailure = 'SET_BUY_ORDER_STATE_FAILURE', - SetBuyOrderStateSuccess = 'SET_BUY_ORDER_STATE_SUCCESS', - UpdateLatestBuyQuote = 'UPDATE_LATEST_BUY_QUOTE', - UpdateSelectedAsset = 'UPDATE_SELECTED_ASSET', - SetAvailableAssets = 'SET_AVAILABLE_ASSETS', - SetQuoteRequestStatePending = 'SET_QUOTE_REQUEST_STATE_PENDING', - SetQuoteRequestStateFailure = 'SET_QUOTE_REQUEST_STATE_FAILURE', - SetErrorMessage = 'SET_ERROR_MESSAGE', - HideError = 'HIDE_ERROR', - ClearError = 'CLEAR_ERROR', - ResetAmount = 'RESET_AMOUNT', - OpenStandardSlidingPanel = 'OPEN_STANDARD_SLIDING_PANEL', - CloseStandardSlidingPanel = 'CLOSE_STANDARD_SLIDING_PANEL', - UpdateBaseCurrency = 'UPDATE_BASE_CURRENCY', -} - -export const actions = { - setAccountStateLoading: () => createAction(ActionTypes.SetAccountStateLoading), - setAccountStateLocked: () => createAction(ActionTypes.SetAccountStateLocked), - setAccountStateReady: (address: string) => createAction(ActionTypes.SetAccountStateReady, address), - updateAccountEthBalance: (addressAndBalance: AddressAndEthBalanceInWei) => - createAction(ActionTypes.UpdateAccountEthBalance, addressAndBalance), - updateEthUsdPrice: (price?: BigNumber) => createAction(ActionTypes.UpdateEthUsdPrice, price), - updateSelectedAssetAmount: (amount?: BigNumber) => createAction(ActionTypes.UpdateSelectedAssetUnitAmount, amount), - setBuyOrderStateNone: () => createAction(ActionTypes.SetBuyOrderStateNone), - setBuyOrderStateValidating: () => createAction(ActionTypes.SetBuyOrderStateValidating), - setBuyOrderStateProcessing: (txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => - createAction(ActionTypes.SetBuyOrderStateProcessing, { txHash, startTimeUnix, expectedEndTimeUnix }), - setBuyOrderStateFailure: (txHash: string) => createAction(ActionTypes.SetBuyOrderStateFailure, txHash), - setBuyOrderStateSuccess: (txHash: string) => createAction(ActionTypes.SetBuyOrderStateSuccess, txHash), - updateLatestBuyQuote: (buyQuote?: BuyQuote) => createAction(ActionTypes.UpdateLatestBuyQuote, buyQuote), - updateSelectedAsset: (asset: Asset) => createAction(ActionTypes.UpdateSelectedAsset, asset), - setAvailableAssets: (availableAssets: Asset[]) => createAction(ActionTypes.SetAvailableAssets, availableAssets), - setQuoteRequestStatePending: () => createAction(ActionTypes.SetQuoteRequestStatePending), - setQuoteRequestStateFailure: () => createAction(ActionTypes.SetQuoteRequestStateFailure), - setErrorMessage: (errorMessage: string) => createAction(ActionTypes.SetErrorMessage, errorMessage), - hideError: () => createAction(ActionTypes.HideError), - clearError: () => createAction(ActionTypes.ClearError), - resetAmount: () => createAction(ActionTypes.ResetAmount), - openStandardSlidingPanel: (content: StandardSlidingPanelContent) => - createAction(ActionTypes.OpenStandardSlidingPanel, content), - closeStandardSlidingPanel: () => createAction(ActionTypes.CloseStandardSlidingPanel), - updateBaseCurrency: (baseCurrency: BaseCurrency) => createAction(ActionTypes.UpdateBaseCurrency, baseCurrency), -}; diff --git a/packages/instant/src/redux/analytics_middleware.ts b/packages/instant/src/redux/analytics_middleware.ts deleted file mode 100644 index 4b4d30213..000000000 --- a/packages/instant/src/redux/analytics_middleware.ts +++ /dev/null @@ -1,108 +0,0 @@ -import { AssetProxyId } from '@0x/types'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import * as _ from 'lodash'; -import { Middleware } from 'redux'; - -import { ETH_DECIMALS } from '../constants'; -import { AccountState, StandardSlidingPanelContent } from '../types'; -import { analytics, AnalyticsEventOptions } from '../util/analytics'; - -import { Action, ActionTypes } from './actions'; - -import { State } from './reducer'; - -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.SetAccountStateReady: - if (curAccount.state === AccountState.Ready) { - const didJustTurnReady = prevAccount.state !== AccountState.Ready; - const didJustUpdateAddress = - prevAccount.state === AccountState.Ready && prevAccount.address !== curAccount.address; - const ethAddress = curAccount.address; - if (didJustTurnReady) { - analytics.trackAccountReady(ethAddress); - analytics.addUserProperties({ lastKnownEthAddress: ethAddress }); - analytics.addEventProperties({ ethAddress }); - } else if (didJustUpdateAddress) { - analytics.trackAccountAddressChanged(ethAddress); - analytics.addUserProperties({ lastKnownEthAddress: ethAddress }); - analytics.addEventProperties({ ethAddress }); - } - } - break; - case ActionTypes.SetAccountStateLocked: - if (prevAccount.state !== AccountState.Locked && curAccount.state === AccountState.Locked) { - // if we are moving from account not locked to account locked, track `Account - Locked` - analytics.trackAccountLocked(); - } - break; - case ActionTypes.UpdateAccountEthBalance: - if ( - curAccount.state === AccountState.Ready && - curAccount.ethBalanceInWei && - !_.isEqual(curAccount, prevAccount) - ) { - const ethBalanceInUnitAmount = Web3Wrapper.toUnitAmount( - curAccount.ethBalanceInWei, - ETH_DECIMALS, - ).toString(); - analytics.addUserProperties({ lastEthBalanceInUnitAmount: ethBalanceInUnitAmount }); - analytics.addEventProperties({ ethBalanceInUnitAmount }); - } - break; - case ActionTypes.UpdateSelectedAsset: - const selectedAsset = curState.selectedAsset; - if (selectedAsset) { - const assetName = selectedAsset.metaData.name; - const assetData = selectedAsset.assetData; - analytics.trackTokenSelectorChose({ - assetName, - assetData, - }); - - const selectedAssetEventProperties: AnalyticsEventOptions = { - selectedAssetName: assetName, - selectedAssetData: assetData, - }; - if (selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20) { - selectedAssetEventProperties.selectedAssetDecimals = selectedAsset.metaData.decimals; - selectedAssetEventProperties.selectedAssetSymbol = selectedAsset.metaData.symbol; - } - analytics.addEventProperties(selectedAssetEventProperties); - } - break; - case ActionTypes.SetAvailableAssets: - const availableAssets = curState.availableAssets; - if (availableAssets) { - analytics.addEventProperties({ - numberAvailableAssets: availableAssets.length, - }); - } - break; - case ActionTypes.OpenStandardSlidingPanel: - const openSlidingContent = curState.standardSlidingPanelSettings.content; - if (openSlidingContent === StandardSlidingPanelContent.InstallWallet) { - analytics.trackInstallWalletModalOpened(); - } - break; - case ActionTypes.CloseStandardSlidingPanel: - const closeSlidingContent = curState.standardSlidingPanelSettings.content; - if (closeSlidingContent === StandardSlidingPanelContent.InstallWallet) { - analytics.trackInstallWalletModalClosed(); - } - break; - case ActionTypes.UpdateBaseCurrency: - analytics.trackBaseCurrencyChanged(curState.baseCurrency); - analytics.addEventProperties({ baseCurrency: curState.baseCurrency }); - } - - return nextAction; -}; diff --git a/packages/instant/src/redux/async_data.ts b/packages/instant/src/redux/async_data.ts deleted file mode 100644 index f20fe319f..000000000 --- a/packages/instant/src/redux/async_data.ts +++ /dev/null @@ -1,120 +0,0 @@ -import { AssetProxyId } from '@0x/types'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import * as _ from 'lodash'; -import { Dispatch } from 'redux'; - -import { BIG_NUMBER_ZERO } from '../constants'; -import { AccountState, BaseCurrency, ERC20Asset, OrderProcessState, ProviderState, QuoteFetchOrigin } from '../types'; -import { analytics } from '../util/analytics'; -import { assetUtils } from '../util/asset'; -import { buyQuoteUpdater } from '../util/buy_quote_updater'; -import { coinbaseApi } from '../util/coinbase_api'; -import { errorFlasher } from '../util/error_flasher'; -import { errorReporter } from '../util/error_reporter'; - -import { actions } from './actions'; -import { State } from './reducer'; - -export const asyncData = { - fetchEthPriceAndDispatchToStore: async (dispatch: Dispatch) => { - try { - const ethUsdPrice = await coinbaseApi.getEthUsdPrice(); - dispatch(actions.updateEthUsdPrice(ethUsdPrice)); - } catch (e) { - const errorMessage = 'Error fetching ETH/USD price'; - errorFlasher.flashNewErrorMessage(dispatch, errorMessage); - dispatch(actions.updateEthUsdPrice(BIG_NUMBER_ZERO)); - dispatch(actions.updateBaseCurrency(BaseCurrency.ETH)); - errorReporter.report(e); - analytics.trackUsdPriceFailed(); - } - }, - fetchAvailableAssetDatasAndDispatchToStore: async (state: State, dispatch: Dispatch) => { - const { providerState, assetMetaDataMap, network } = state; - const assetBuyer = providerState.assetBuyer; - try { - const assetDatas = await assetBuyer.getAvailableAssetDatasAsync(); - const deduplicatedAssetDatas = _.uniq(assetDatas); - const assets = assetUtils.createAssetsFromAssetDatas(deduplicatedAssetDatas, assetMetaDataMap, network); - dispatch(actions.setAvailableAssets(assets)); - } catch (e) { - const errorMessage = 'Could not find any assets'; - errorFlasher.flashNewErrorMessage(dispatch, errorMessage); - // On error, just specify that none are available - dispatch(actions.setAvailableAssets([])); - errorReporter.report(e); - } - }, - fetchAccountInfoAndDispatchToStore: async ( - providerState: ProviderState, - dispatch: Dispatch, - shouldAttemptUnlock: boolean = false, - shouldSetToLoading: boolean = false, - ) => { - const web3Wrapper = providerState.web3Wrapper; - const provider = providerState.provider; - if (shouldSetToLoading && providerState.account.state !== AccountState.Loading) { - dispatch(actions.setAccountStateLoading()); - } - let availableAddresses: string[]; - try { - // TODO(bmillman): Add support at the web3Wrapper level for calling `eth_requestAccounts` instead of calling enable here - const isPrivacyModeEnabled = !_.isUndefined((provider as any).enable); - availableAddresses = - isPrivacyModeEnabled && shouldAttemptUnlock - ? await (provider as any).enable() - : await web3Wrapper.getAvailableAddressesAsync(); - } catch (e) { - analytics.trackAccountUnlockDenied(); - dispatch(actions.setAccountStateLocked()); - return; - } - if (!_.isEmpty(availableAddresses)) { - const activeAddress = availableAddresses[0]; - dispatch(actions.setAccountStateReady(activeAddress)); - // tslint:disable-next-line:no-floating-promises - asyncData.fetchAccountBalanceAndDispatchToStore(activeAddress, providerState.web3Wrapper, dispatch); - } else { - dispatch(actions.setAccountStateLocked()); - } - }, - fetchAccountBalanceAndDispatchToStore: async (address: string, web3Wrapper: Web3Wrapper, dispatch: Dispatch) => { - try { - const ethBalanceInWei = await web3Wrapper.getBalanceInWeiAsync(address); - dispatch(actions.updateAccountEthBalance({ address, ethBalanceInWei })); - } catch (e) { - errorReporter.report(e); - // leave balance as is - return; - } - }, - fetchCurrentBuyQuoteAndDispatchToStore: async ( - state: State, - dispatch: Dispatch, - fetchOrigin: QuoteFetchOrigin, - options: { updateSilently: boolean }, - ) => { - const { buyOrderState, providerState, selectedAsset, selectedAssetUnitAmount, affiliateInfo } = state; - const assetBuyer = providerState.assetBuyer; - if ( - !_.isUndefined(selectedAssetUnitAmount) && - !_.isUndefined(selectedAsset) && - selectedAssetUnitAmount.isGreaterThan(BIG_NUMBER_ZERO) && - buyOrderState.processState === OrderProcessState.None && - selectedAsset.metaData.assetProxyId === AssetProxyId.ERC20 - ) { - await buyQuoteUpdater.updateBuyQuoteAsync( - assetBuyer, - dispatch, - selectedAsset as ERC20Asset, - selectedAssetUnitAmount, - fetchOrigin, - { - setPending: !options.updateSilently, - dispatchErrors: !options.updateSilently, - affiliateInfo, - }, - ); - } - }, -}; diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts deleted file mode 100644 index 0d8bb4b05..000000000 --- a/packages/instant/src/redux/reducer.ts +++ /dev/null @@ -1,297 +0,0 @@ -import { BuyQuote } from '@0x/asset-buyer'; -import { AssetProxyId, ObjectMap } from '@0x/types'; -import { BigNumber } from '@0x/utils'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import * as _ from 'lodash'; - -import { LOADING_ACCOUNT, LOCKED_ACCOUNT } from '../constants'; -import { assetMetaDataMap } from '../data/asset_meta_data_map'; -import { - Account, - AccountReady, - AccountState, - AffiliateInfo, - Asset, - AssetMetaData, - AsyncProcessState, - BaseCurrency, - DisplayStatus, - Network, - OrderProcessState, - OrderState, - ProviderState, - StandardSlidingPanelContent, - StandardSlidingPanelSettings, -} from '../types'; - -import { Action, ActionTypes } from './actions'; - -// State that is required and we have defaults for, before props are passed in -export interface DefaultState { - network: Network; - assetMetaDataMap: ObjectMap<AssetMetaData>; - buyOrderState: OrderState; - latestErrorDisplayStatus: DisplayStatus; - quoteRequestState: AsyncProcessState; - standardSlidingPanelSettings: StandardSlidingPanelSettings; - baseCurrency: BaseCurrency; -} - -// State that is required but needs to be derived from the props -interface PropsDerivedState { - providerState: ProviderState; -} - -// State that is optional -interface OptionalState { - selectedAsset: Asset; - availableAssets: Asset[]; - selectedAssetUnitAmount: BigNumber; - ethUsdPrice: BigNumber; - latestBuyQuote: BuyQuote; - latestErrorMessage: string; - affiliateInfo: AffiliateInfo; - walletDisplayName: string; -} - -export type State = DefaultState & PropsDerivedState & Partial<OptionalState>; - -export const DEFAULT_STATE: DefaultState = { - network: Network.Mainnet, - assetMetaDataMap, - buyOrderState: { processState: OrderProcessState.None }, - latestErrorDisplayStatus: DisplayStatus.Hidden, - quoteRequestState: AsyncProcessState.None, - standardSlidingPanelSettings: { - animationState: 'none', - content: StandardSlidingPanelContent.None, - }, - baseCurrency: BaseCurrency.USD, -}; - -export const createReducer = (initialState: State) => { - const reducer = (state: State = initialState, action: Action): State => { - switch (action.type) { - case ActionTypes.SetAccountStateLoading: - return reduceStateWithAccount(state, LOADING_ACCOUNT); - case ActionTypes.SetAccountStateLocked: - return reduceStateWithAccount(state, LOCKED_ACCOUNT); - case ActionTypes.SetAccountStateReady: { - const address = action.data; - let newAccount: AccountReady = { - state: AccountState.Ready, - address, - }; - const currentAccount = state.providerState.account; - if (currentAccount.state === AccountState.Ready && currentAccount.address === address) { - newAccount = { - ...newAccount, - ethBalanceInWei: currentAccount.ethBalanceInWei, - }; - } - return reduceStateWithAccount(state, newAccount); - } - case ActionTypes.UpdateAccountEthBalance: { - const { address, ethBalanceInWei } = action.data; - const currentAccount = state.providerState.account; - if (currentAccount.state !== AccountState.Ready || currentAccount.address !== address) { - return state; - } else { - const newAccount: AccountReady = { - ...currentAccount, - ethBalanceInWei, - }; - return reduceStateWithAccount(state, newAccount); - } - } - case ActionTypes.UpdateEthUsdPrice: - return { - ...state, - ethUsdPrice: action.data, - }; - case ActionTypes.UpdateSelectedAssetUnitAmount: - return { - ...state, - selectedAssetUnitAmount: action.data, - }; - case ActionTypes.UpdateLatestBuyQuote: - const newBuyQuoteIfExists = action.data; - const shouldUpdate = - _.isUndefined(newBuyQuoteIfExists) || doesBuyQuoteMatchState(newBuyQuoteIfExists, state); - if (shouldUpdate) { - return { - ...state, - latestBuyQuote: newBuyQuoteIfExists, - quoteRequestState: AsyncProcessState.Success, - }; - } else { - return state; - } - case ActionTypes.SetQuoteRequestStatePending: - return { - ...state, - latestBuyQuote: undefined, - quoteRequestState: AsyncProcessState.Pending, - }; - case ActionTypes.SetQuoteRequestStateFailure: - return { - ...state, - latestBuyQuote: undefined, - quoteRequestState: AsyncProcessState.Failure, - }; - case ActionTypes.SetBuyOrderStateNone: - return { - ...state, - buyOrderState: { processState: OrderProcessState.None }, - }; - case ActionTypes.SetBuyOrderStateValidating: - return { - ...state, - buyOrderState: { processState: OrderProcessState.Validating }, - }; - case ActionTypes.SetBuyOrderStateProcessing: - const processingData = action.data; - const { startTimeUnix, expectedEndTimeUnix } = processingData; - return { - ...state, - buyOrderState: { - processState: OrderProcessState.Processing, - txHash: processingData.txHash, - progress: { - startTimeUnix, - expectedEndTimeUnix, - }, - }, - }; - case ActionTypes.SetBuyOrderStateFailure: - const failureTxHash = action.data; - if ('txHash' in state.buyOrderState) { - if (state.buyOrderState.txHash === failureTxHash) { - const { txHash, progress } = state.buyOrderState; - return { - ...state, - buyOrderState: { - processState: OrderProcessState.Failure, - txHash, - progress, - }, - }; - } - } - return state; - case ActionTypes.SetBuyOrderStateSuccess: - const successTxHash = action.data; - if ('txHash' in state.buyOrderState) { - if (state.buyOrderState.txHash === successTxHash) { - const { txHash, progress } = state.buyOrderState; - return { - ...state, - buyOrderState: { - processState: OrderProcessState.Success, - txHash, - progress, - }, - }; - } - } - return state; - case ActionTypes.SetErrorMessage: - return { - ...state, - latestErrorMessage: action.data, - latestErrorDisplayStatus: DisplayStatus.Present, - }; - case ActionTypes.HideError: - return { - ...state, - latestErrorDisplayStatus: DisplayStatus.Hidden, - }; - case ActionTypes.ClearError: - return { - ...state, - latestErrorMessage: undefined, - latestErrorDisplayStatus: DisplayStatus.Hidden, - }; - case ActionTypes.UpdateSelectedAsset: - return { - ...state, - selectedAsset: action.data, - }; - case ActionTypes.ResetAmount: - return { - ...state, - latestBuyQuote: undefined, - quoteRequestState: AsyncProcessState.None, - buyOrderState: { processState: OrderProcessState.None }, - selectedAssetUnitAmount: undefined, - }; - case ActionTypes.SetAvailableAssets: - return { - ...state, - availableAssets: action.data, - }; - case ActionTypes.OpenStandardSlidingPanel: - return { - ...state, - standardSlidingPanelSettings: { - content: action.data, - animationState: 'slidIn', - }, - }; - case ActionTypes.CloseStandardSlidingPanel: - return { - ...state, - standardSlidingPanelSettings: { - content: state.standardSlidingPanelSettings.content, - animationState: 'slidOut', - }, - }; - case ActionTypes.UpdateBaseCurrency: - return { - ...state, - baseCurrency: action.data, - }; - default: - return state; - } - }; - return reducer; -}; - -const reduceStateWithAccount = (state: State, account: Account) => { - const oldProviderState = state.providerState; - const newProviderState: ProviderState = { - ...oldProviderState, - account, - }; - return { - ...state, - providerState: newProviderState, - }; -}; - -const doesBuyQuoteMatchState = (buyQuote: BuyQuote, state: State): boolean => { - const selectedAssetIfExists = state.selectedAsset; - const selectedAssetUnitAmountIfExists = state.selectedAssetUnitAmount; - // if no selectedAsset or selectedAssetAmount exists on the current state, return false - if (_.isUndefined(selectedAssetIfExists) || _.isUndefined(selectedAssetUnitAmountIfExists)) { - return false; - } - // if buyQuote's assetData does not match that of the current selected asset, return false - if (selectedAssetIfExists.assetData !== buyQuote.assetData) { - return false; - } - // if ERC20 and buyQuote's assetBuyAmount does not match selectedAssetAmount, return false - // if ERC721, return true - const selectedAssetMetaData = selectedAssetIfExists.metaData; - if (selectedAssetMetaData.assetProxyId === AssetProxyId.ERC20) { - const selectedAssetAmountBaseUnits = Web3Wrapper.toBaseUnitAmount( - selectedAssetUnitAmountIfExists, - selectedAssetMetaData.decimals, - ); - const doesAssetAmountMatch = selectedAssetAmountBaseUnits.eq(buyQuote.assetBuyAmount); - return doesAssetAmountMatch; - } else { - return true; - } -}; diff --git a/packages/instant/src/redux/store.ts b/packages/instant/src/redux/store.ts deleted file mode 100644 index 11bba3876..000000000 --- a/packages/instant/src/redux/store.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as _ from 'lodash'; -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>; - -export const store = { - create: (initialState: State): Store => { - const reducer = createReducer(initialState); - return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(analyticsMiddleware))); - }, -}; diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts deleted file mode 100644 index 92450502d..000000000 --- a/packages/instant/src/style/fonts.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const fonts = { - include: () => { - // Inject the inter-ui font into the page - const appendTo = document.head || document.getElementsByTagName('head')[0] || document.body; - const style = document.createElement('style'); - style.type = 'text/css'; - style.appendChild(document.createTextNode(`@import url('https://rsms.me/inter/inter-ui.css')`)); - appendTo.appendChild(style); - }, -}; diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts deleted file mode 100644 index bbf376694..000000000 --- a/packages/instant/src/style/media.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { InterpolationValue } from 'styled-components'; - -import { css } from './theme'; - -export enum ScreenWidths { - Sm = 40, - Md = 52, - Lg = 64, -} - -export const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css` - @media (max-width: ${screenWidth}em) { - ${css.apply(css, args)}; - } -`; - -export const media = { - small: generateMediaWrapper(ScreenWidths.Sm), - medium: generateMediaWrapper(ScreenWidths.Md), - large: generateMediaWrapper(ScreenWidths.Lg), -}; - -export interface ScreenSpecification<T> { - default: T; - sm?: T; - md?: T; - lg?: T; -} -export type OptionallyScreenSpecific<T> = T | ScreenSpecification<T>; -export type MediaChoice = OptionallyScreenSpecific<string>; -/** - * Given a css property name and a OptionallyScreenSpecific value, - * generates css properties with screen-specific viewport styling - */ -export function stylesForMedia<T extends string | number>( - cssPropertyName: string, - choice: OptionallyScreenSpecific<T>, -): InterpolationValue[] { - if (typeof choice === 'object') { - return css` - ${cssPropertyName}: ${choice.default}; - ${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`} - ${choice.md && media.medium`${cssPropertyName}: ${choice.md}`} - ${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`} - `; - } else { - return css` - ${cssPropertyName}: ${choice}; - `; - } -} diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts deleted file mode 100644 index 49f3c81e6..000000000 --- a/packages/instant/src/style/theme.ts +++ /dev/null @@ -1,56 +0,0 @@ -import * as styledComponents from 'styled-components'; - -const { - default: styled, - css, - keyframes, - withTheme, - createGlobalStyle, - ThemeConsumer, - ThemeProvider, -} = styledComponents; - -export type Theme = { [key in ColorOption]: string }; -// tslint:disable:enum-naming -export enum ColorOption { - primaryColor = 'primaryColor', - black = 'black', - lightGrey = 'lightGrey', - grey = 'grey', - feintGrey = 'feintGrey', - lightestGrey = 'lightestGrey', - darkGrey = 'darkGrey', - white = 'white', - lightOrange = 'lightOrange', - darkOrange = 'darkOrange', - green = 'green', - red = 'red', - darkBlue = 'darkBlue', - lightBlue = 'lightBlue', -} - -export const theme: Theme = { - primaryColor: '#333', - black: 'black', - lightGrey: '#999999', - grey: '#666666', - feintGrey: '#DEDEDE', - lightestGrey: '#EEEEEE', - darkGrey: '#333333', - white: 'white', - lightOrange: '#FFF8F2', - darkOrange: '#F7A24F', - green: '#3CB34F', - red: '#D00000', - darkBlue: '#135df6', - lightBlue: '#F2F7FF', -}; - -export const transparentWhite = 'rgba(255,255,255,0.3)'; -export const completelyTransparent = 'rga(0, 0, 0, 0)'; - -export const generateOverlayBlack = (opacity = 0.6) => { - return `rgba(0, 0, 0, ${opacity})`; -}; - -export { styled, css, keyframes, withTheme, createGlobalStyle, ThemeConsumer, ThemeProvider }; diff --git a/packages/instant/src/style/util.ts b/packages/instant/src/style/util.ts deleted file mode 100644 index 3e38c4a7d..000000000 --- a/packages/instant/src/style/util.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { ObjectMap } from '@0x/types'; -import * as _ from 'lodash'; - -export const cssRuleIfExists = (props: ObjectMap<any>, rule: string): string => { - const camelCaseRule = _.camelCase(rule); - const ruleValueIfExists = props[camelCaseRule]; - if (!_.isUndefined(ruleValueIfExists)) { - return `${rule}: ${ruleValueIfExists};`; - } - return ''; -}; diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts deleted file mode 100644 index ba2d27a17..000000000 --- a/packages/instant/src/style/z_index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const zIndex = { - errorPopBehind: 10, - mainContainer: 20, - dropdownItems: 30, - panel: 40, - containerOverlay: 45, - errorPopup: 50, - overlayDefault: 100, -}; diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts deleted file mode 100644 index 606294c93..000000000 --- a/packages/instant/src/types.ts +++ /dev/null @@ -1,206 +0,0 @@ -import { AssetBuyer, BigNumber } from '@0x/asset-buyer'; -import { AssetProxyId, ObjectMap, SignedOrder } from '@0x/types'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import { Provider } from 'ethereum-types'; - -// Reusable -export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; -export type Maybe<T> = T | undefined; -export enum AsyncProcessState { - None = 'NONE', - Pending = 'PENDING', - Success = 'SUCCESS', - Failure = 'FAILURE', -} - -export enum OrderProcessState { - None = 'NONE', - Validating = 'VALIDATING', - Processing = 'PROCESSING', - Success = 'SUCCESS', - Failure = 'FAILURE', -} - -export enum QuoteFetchOrigin { - Manual = 'Manual', - Heartbeat = 'Heartbeat', -} - -export enum BaseCurrency { - USD = 'USD', // tslint:disable-line:enum-naming - ETH = 'ETH', // tslint:disable-line:enum-naming -} - -export interface SimulatedProgress { - startTimeUnix: number; - expectedEndTimeUnix: number; -} - -interface OrderStatePreTx { - processState: OrderProcessState.None | OrderProcessState.Validating; -} -interface OrderStatePostTx { - processState: OrderProcessState.Processing | OrderProcessState.Success | OrderProcessState.Failure; - txHash: string; - progress: SimulatedProgress; -} -export type OrderState = OrderStatePreTx | OrderStatePostTx; - -export enum DisplayStatus { - Present, - Hidden, -} - -export type FunctionType = (...args: any[]) => any; -export type ActionCreatorsMapObject = ObjectMap<FunctionType>; -export type ActionsUnion<A extends ActionCreatorsMapObject> = ReturnType<A[keyof A]>; - -export interface ERC20AssetMetaData { - assetProxyId: AssetProxyId.ERC20; - decimals: number; - primaryColor?: string; - symbol: string; - name: string; - iconUrl?: string; -} - -export interface ERC721AssetMetaData { - assetProxyId: AssetProxyId.ERC721; - name: string; - imageUrl?: string; - primaryColor?: string; -} - -export type AssetMetaData = ERC20AssetMetaData | ERC721AssetMetaData; - -export interface ERC20Asset { - assetData: string; - metaData: ERC20AssetMetaData; -} - -export interface ERC721Asset { - assetData: string; - metaData: ERC721AssetMetaData; -} - -export interface Asset { - assetData: string; - metaData: AssetMetaData; -} - -export enum Network { - Kovan = 42, - Mainnet = 1, -} - -export enum ZeroExInstantError { - AssetMetaDataNotAvailable = 'ASSET_META_DATA_NOT_AVAILABLE', - InsufficientETH = 'INSUFFICIENT_ETH', // tslint:disable-line:enum-naming - CouldNotSubmitTransaction = 'COULD_NOT_SUBMIT_TRANSACTION', -} - -export type SimpleHandler = () => void; - -export interface AffiliateInfo { - feeRecipient: string; - feePercentage: number; -} - -export interface ProviderState { - name: string; - displayName: string; - provider: Provider; - assetBuyer: AssetBuyer; - web3Wrapper: Web3Wrapper; - account: Account; -} - -export enum AccountState { - None = 'NONE,', - Loading = 'LOADING', - Ready = 'READY', - Locked = 'LOCKED', -} - -export interface AccountReady { - state: AccountState.Ready; - address: string; - ethBalanceInWei?: BigNumber; -} -export interface AccountNotReady { - state: AccountState.None | AccountState.Loading | AccountState.Locked; -} - -export type Account = AccountReady | AccountNotReady; - -export type OrderSource = string | SignedOrder[]; - -export interface AddressAndEthBalanceInWei { - address: string; - ethBalanceInWei: BigNumber; -} - -export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none'; - -export enum StandardSlidingPanelContent { - None = 'NONE', - InstallWallet = 'INSTALL_WALLET', -} - -export interface StandardSlidingPanelSettings { - animationState: SlideAnimationState; - content: StandardSlidingPanelContent; -} - -export enum Browser { - Chrome = 'CHROME', - Firefox = 'FIREFOX', - Opera = 'OPERA', - Safari = 'SAFARI', - Edge = 'EDGE', - Other = 'OTHER', -} - -export enum WalletSuggestion { - CoinbaseWallet = 'Coinbase Wallet', - MetaMask = 'MetaMask', -} - -export enum OperatingSystem { - Android = 'ANDROID', - iOS = 'IOS', // tslint:disable-line:enum-naming - Mac = 'MAC', - Windows = 'WINDOWS', - WindowsPhone = 'WINDOWS_PHONE', - Linux = 'LINUX', - Other = 'OTHER', -} - -export enum ProviderType { - Parity = 'PARITY', - MetaMask = 'META_MASK', - Mist = 'MIST', - CoinbaseWallet = 'COINBASE_WALLET', - Cipher = 'CIPHER', - TrustWallet = 'TRUST_WALLET', - Opera = 'OPERA', - Fallback = 'FALLBACK', -} - -export interface ZeroExInstantRequiredBaseConfig { - orderSource: OrderSource; -} - -export interface ZeroExInstantOptionalBaseConfig { - provider: Provider; - walletDisplayName: string; - availableAssetDatas: string[]; - defaultAssetBuyAmount: number; - defaultSelectedAssetData: string; - additionalAssetMetaDataMap: ObjectMap<AssetMetaData>; - networkId: Network; - affiliateInfo: AffiliateInfo; - shouldDisableAnalyticsTracking: boolean; -} - -export type ZeroExInstantBaseConfig = ZeroExInstantRequiredBaseConfig & Partial<ZeroExInstantOptionalBaseConfig>; diff --git a/packages/instant/src/util/address.ts b/packages/instant/src/util/address.ts deleted file mode 100644 index b21863a8e..000000000 --- a/packages/instant/src/util/address.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { Web3Wrapper } from '@0x/web3-wrapper'; - -export const getBestAddress = async (web3Wrapper: Web3Wrapper): Promise<string | undefined> => { - const addresses = await web3Wrapper.getAvailableAddressesAsync(); - return addresses[0]; -}; diff --git a/packages/instant/src/util/analytics.ts b/packages/instant/src/util/analytics.ts deleted file mode 100644 index fa8a72a2c..000000000 --- a/packages/instant/src/util/analytics.ts +++ /dev/null @@ -1,248 +0,0 @@ -import { BuyQuote } from '@0x/asset-buyer'; -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; - -import { GIT_SHA, HEAP_ENABLED, INSTANT_DISCHARGE_TARGET, NODE_ENV, NPM_PACKAGE_VERSION } from '../constants'; -import { - AffiliateInfo, - Asset, - BaseCurrency, - Network, - OrderProcessState, - OrderSource, - ProviderState, - QuoteFetchOrigin, - WalletSuggestion, -} from '../types'; - -import { EventProperties, heapUtil } from './heap'; - -let isDisabledViaConfig = false; -export const disableAnalytics = (shouldDisableAnalytics: boolean) => { - isDisabledViaConfig = shouldDisableAnalytics; -}; -export const evaluateIfEnabled = (fnCall: () => void) => { - if (isDisabledViaConfig) { - return; - } - if (HEAP_ENABLED) { - fnCall(); - } -}; - -enum EventNames { - InstantOpened = 'Instant - Opened', - InstantClosed = 'Instant - Closed', - AccountLocked = 'Account - Locked', - AccountReady = 'Account - Ready', - AccountUnlockRequested = 'Account - Unlock Requested', - AccountUnlockDenied = 'Account - Unlock Denied', - AccountAddressChanged = 'Account - Address Changed', - BaseCurrencyChanged = 'Base Currency - Changed', - PaymentMethodDropdownOpened = 'Payment Method - Dropdown Opened', - PaymentMethodOpenedEtherscan = 'Payment Method - Opened Etherscan', - PaymentMethodCopiedAddress = 'Payment Method - Copied Address', - BuyNotEnoughEth = 'Buy - Not Enough Eth', - BuyStarted = 'Buy - Started', - BuySignatureDenied = 'Buy - Signature Denied', - BuySimulationFailed = 'Buy - Simulation Failed', - BuyUnknownError = 'Buy - Unknown Error', - BuyTxSubmitted = 'Buy - Tx Submitted', - BuyTxSucceeded = 'Buy - Tx Succeeded', - BuyTxFailed = 'Buy - Tx Failed', - UsdPriceFetchFailed = 'USD Price - Fetch Failed', - InstallWalletClicked = 'Install Wallet - Clicked', - InstallWalletModalOpened = 'Install Wallet - Modal - Opened', - InstallWalletModalClickedExplanation = 'Install Wallet - Modal - Clicked Explanation', - InstallWalletModalClickedGet = 'Install Wallet - Modal - Clicked Get', - InstallWalletModalClosed = 'Install Wallet - Modal - Closed', - TokenSelectorOpened = 'Token Selector - Opened', - TokenSelectorClosed = 'Token Selector - Closed', - TokenSelectorChose = 'Token Selector - Chose', - TokenSelectorSearched = 'Token Selector - Searched', - TransactionViewed = 'Transaction - Viewed', - QuoteFetched = 'Quote - Fetched', - QuoteError = 'Quote - Error', -} - -const track = (eventName: EventNames, eventProperties: EventProperties = {}): void => { - evaluateIfEnabled(() => { - heapUtil.evaluateHeapCall(heap => heap.track(eventName, eventProperties)); - }); -}; -function trackingEventFnWithoutPayload(eventName: EventNames): () => void { - return () => { - track(eventName); - }; -} -// tslint:disable-next-line:no-unused-variable -function trackingEventFnWithPayload(eventName: EventNames): (eventProperties: EventProperties) => void { - return (eventProperties: EventProperties) => { - track(eventName, eventProperties); - }; -} - -const buyQuoteEventProperties = (buyQuote: BuyQuote) => { - const assetBuyAmount = buyQuote.assetBuyAmount.toString(); - const assetEthAmount = buyQuote.worstCaseQuoteInfo.assetEthAmount.toString(); - const feeEthAmount = buyQuote.worstCaseQuoteInfo.feeEthAmount.toString(); - const totalEthAmount = buyQuote.worstCaseQuoteInfo.totalEthAmount.toString(); - const feePercentage = !_.isUndefined(buyQuote.feePercentage) ? buyQuote.feePercentage.toString() : 0; - const hasFeeOrders = !_.isEmpty(buyQuote.feeOrders) ? 'true' : 'false'; - return { - assetBuyAmount, - assetEthAmount, - feeEthAmount, - totalEthAmount, - feePercentage, - hasFeeOrders, - }; -}; - -export interface AnalyticsUserOptions { - lastKnownEthAddress?: string; - lastEthBalanceInUnitAmount?: string; -} -export interface AnalyticsEventOptions { - embeddedHost?: string; - embeddedUrl?: string; - ethBalanceInUnitAmount?: string; - ethAddress?: string; - networkId?: number; - providerName?: string; - providerDisplayName?: string; - gitSha?: string; - npmVersion?: string; - instantEnvironment?: string; - orderSource?: string; - affiliateAddress?: string; - affiliateFeePercent?: number; - numberAvailableAssets?: number; - selectedAssetName?: string; - selectedAssetSymbol?: string; - selectedAssetData?: string; - selectedAssetDecimals?: number; - baseCurrency?: string; -} -export enum TokenSelectorClosedVia { - ClickedX = 'Clicked X', // tslint:disable-line:enum-naming - TokenChose = 'Token Chose', -} -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)); - }); - }, - generateEventProperties: ( - network: Network, - orderSource: OrderSource, - providerState: ProviderState, - window: Window, - selectedAsset?: Asset, - affiliateInfo?: AffiliateInfo, - baseCurrency?: BaseCurrency, - ): AnalyticsEventOptions => { - const affiliateAddress = affiliateInfo ? affiliateInfo.feeRecipient : 'none'; - const affiliateFeePercent = affiliateInfo ? parseFloat(affiliateInfo.feePercentage.toFixed(4)) : 0; - const orderSourceName = typeof orderSource === 'string' ? orderSource : 'provided'; - const eventOptions: AnalyticsEventOptions = { - embeddedHost: window.location.host, - embeddedUrl: window.location.href, - networkId: network, - providerName: providerState.name, - providerDisplayName: providerState.displayName, - gitSha: GIT_SHA, - npmVersion: NPM_PACKAGE_VERSION, - orderSource: orderSourceName, - affiliateAddress, - affiliateFeePercent, - selectedAssetName: selectedAsset ? selectedAsset.metaData.name : 'none', - selectedAssetData: selectedAsset ? selectedAsset.assetData : 'none', - instantEnvironment: INSTANT_DISCHARGE_TARGET || `Local ${NODE_ENV}`, - baseCurrency, - }; - return eventOptions; - }, - trackInstantOpened: trackingEventFnWithoutPayload(EventNames.InstantOpened), - trackInstantClosed: trackingEventFnWithoutPayload(EventNames.InstantClosed), - trackAccountLocked: trackingEventFnWithoutPayload(EventNames.AccountLocked), - trackAccountReady: (address: string) => trackingEventFnWithPayload(EventNames.AccountReady)({ address }), - trackAccountUnlockRequested: trackingEventFnWithoutPayload(EventNames.AccountUnlockRequested), - trackAccountUnlockDenied: trackingEventFnWithoutPayload(EventNames.AccountUnlockDenied), - trackAccountAddressChanged: (address: string) => - trackingEventFnWithPayload(EventNames.AccountAddressChanged)({ address }), - trackBaseCurrencyChanged: (currencyChangedTo: BaseCurrency) => - trackingEventFnWithPayload(EventNames.BaseCurrencyChanged)({ currencyChangedTo }), - trackPaymentMethodDropdownOpened: trackingEventFnWithoutPayload(EventNames.PaymentMethodDropdownOpened), - trackPaymentMethodOpenedEtherscan: trackingEventFnWithoutPayload(EventNames.PaymentMethodOpenedEtherscan), - trackPaymentMethodCopiedAddress: trackingEventFnWithoutPayload(EventNames.PaymentMethodCopiedAddress), - trackBuyNotEnoughEth: (buyQuote: BuyQuote) => - trackingEventFnWithPayload(EventNames.BuyNotEnoughEth)(buyQuoteEventProperties(buyQuote)), - trackBuyStarted: (buyQuote: BuyQuote) => - trackingEventFnWithPayload(EventNames.BuyStarted)(buyQuoteEventProperties(buyQuote)), - trackBuySignatureDenied: (buyQuote: BuyQuote) => - trackingEventFnWithPayload(EventNames.BuySignatureDenied)(buyQuoteEventProperties(buyQuote)), - trackBuySimulationFailed: (buyQuote: BuyQuote) => - trackingEventFnWithPayload(EventNames.BuySimulationFailed)(buyQuoteEventProperties(buyQuote)), - trackBuyUnknownError: (buyQuote: BuyQuote, errorMessage: string) => - trackingEventFnWithPayload(EventNames.BuyUnknownError)({ - ...buyQuoteEventProperties(buyQuote), - errorMessage, - }), - trackBuyTxSubmitted: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => - trackingEventFnWithPayload(EventNames.BuyTxSubmitted)({ - ...buyQuoteEventProperties(buyQuote), - txHash, - expectedTxTimeMs: expectedEndTimeUnix - startTimeUnix, - }), - trackBuyTxSucceeded: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => - trackingEventFnWithPayload(EventNames.BuyTxSucceeded)({ - ...buyQuoteEventProperties(buyQuote), - txHash, - expectedTxTimeMs: expectedEndTimeUnix - startTimeUnix, - actualTxTimeMs: new Date().getTime() - startTimeUnix, - }), - trackBuyTxFailed: (buyQuote: BuyQuote, txHash: string, startTimeUnix: number, expectedEndTimeUnix: number) => - trackingEventFnWithPayload(EventNames.BuyTxFailed)({ - ...buyQuoteEventProperties(buyQuote), - txHash, - expectedTxTimeMs: expectedEndTimeUnix - startTimeUnix, - actualTxTimeMs: new Date().getTime() - startTimeUnix, - }), - trackInstallWalletClicked: (walletSuggestion: WalletSuggestion) => - trackingEventFnWithPayload(EventNames.InstallWalletClicked)({ walletSuggestion }), - trackInstallWalletModalClickedExplanation: trackingEventFnWithoutPayload( - EventNames.InstallWalletModalClickedExplanation, - ), - trackInstallWalletModalClickedGet: trackingEventFnWithoutPayload(EventNames.InstallWalletModalClickedGet), - trackInstallWalletModalOpened: trackingEventFnWithoutPayload(EventNames.InstallWalletModalOpened), - trackInstallWalletModalClosed: trackingEventFnWithoutPayload(EventNames.InstallWalletModalClosed), - trackTokenSelectorOpened: trackingEventFnWithoutPayload(EventNames.TokenSelectorOpened), - trackTokenSelectorClosed: (closedVia: TokenSelectorClosedVia) => - trackingEventFnWithPayload(EventNames.TokenSelectorClosed)({ closedVia }), - trackTokenSelectorChose: (payload: { assetName: string; assetData: string }) => - trackingEventFnWithPayload(EventNames.TokenSelectorChose)(payload), - trackTokenSelectorSearched: (searchText: string) => - trackingEventFnWithPayload(EventNames.TokenSelectorSearched)({ searchText }), - trackTransactionViewed: (orderProcesState: OrderProcessState) => - trackingEventFnWithPayload(EventNames.TransactionViewed)({ orderState: orderProcesState }), - trackQuoteFetched: (buyQuote: BuyQuote, fetchOrigin: QuoteFetchOrigin) => - trackingEventFnWithPayload(EventNames.QuoteFetched)({ - ...buyQuoteEventProperties(buyQuote), - fetchOrigin, - }), - trackQuoteError: (errorMessage: string, assetBuyAmount: BigNumber, fetchOrigin: QuoteFetchOrigin) => { - trackingEventFnWithPayload(EventNames.QuoteError)({ - errorMessage, - assetBuyAmount: assetBuyAmount.toString(), - fetchOrigin, - }); - }, - trackUsdPriceFailed: trackingEventFnWithoutPayload(EventNames.UsdPriceFetchFailed), -}; diff --git a/packages/instant/src/util/assert.ts b/packages/instant/src/util/assert.ts deleted file mode 100644 index 971c1eb96..000000000 --- a/packages/instant/src/util/assert.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { assert as sharedAssert } from '@0x/assert'; -import { schemas } from '@0x/json-schemas'; -import { assetDataUtils } from '@0x/order-utils'; -import { AssetProxyId, ObjectMap, SignedOrder } from '@0x/types'; -import * as _ from 'lodash'; - -import { AffiliateInfo, AssetMetaData } from '../types'; - -export const assert = { - ...sharedAssert, - isValidOrderSource(variableName: string, orderSource: string | SignedOrder[]): void { - if (_.isString(orderSource)) { - sharedAssert.isUri(variableName, orderSource); - return; - } - sharedAssert.doesConformToSchema(variableName, orderSource, schemas.signedOrdersSchema); - }, - areValidAssetDatas(variableName: string, assetDatas: string[]): void { - _.forEach(assetDatas, (assetData, index) => assert.isHexString(`${variableName}[${index}]`, assetData)); - }, - isValidAssetMetaDataMap(variableName: string, metaDataMap: ObjectMap<AssetMetaData>): void { - _.forEach(metaDataMap, (metaData, assetData) => { - assert.isHexString(`key ${assetData} of ${variableName}`, assetData); - assert.isValidAssetMetaData(`${variableName}.${assetData}`, metaData); - const assetDataProxyId = assetDataUtils.decodeAssetProxyId(assetData); - assert.assert( - metaData.assetProxyId === assetDataProxyId, - `Expected meta data for assetData ${assetData} to have asset proxy id of ${assetDataProxyId}, but instead got ${ - metaData.assetProxyId - }`, - ); - }); - }, - isValidAssetMetaData(variableName: string, metaData: AssetMetaData): void { - assert.isHexString(`${variableName}.assetProxyId`, metaData.assetProxyId); - if (!_.isUndefined(metaData.primaryColor)) { - assert.isString(`${variableName}.primaryColor`, metaData.primaryColor); - } - if (metaData.assetProxyId === AssetProxyId.ERC20) { - assert.isNumber(`${variableName}.decimals`, metaData.decimals); - assert.isString(`${variableName}.symbol`, metaData.symbol); - } else if (metaData.assetProxyId === AssetProxyId.ERC721) { - assert.isString(`${variableName}.name`, metaData.name); - assert.isUri(`${variableName}.imageUrl`, metaData.imageUrl); - } - }, - isValidAffiliateInfo(variableName: string, affiliateInfo: AffiliateInfo): void { - assert.isETHAddressHex(`${variableName}.recipientAddress`, affiliateInfo.feeRecipient); - assert.isNumber(`${variableName}.percentage`, affiliateInfo.feePercentage); - assert.assert( - affiliateInfo.feePercentage >= 0 && affiliateInfo.feePercentage <= 0.05, - `Expected ${variableName}.percentage to be between 0 and 0.05, but is ${affiliateInfo.feePercentage}`, - ); - }, -}; diff --git a/packages/instant/src/util/asset.ts b/packages/instant/src/util/asset.ts deleted file mode 100644 index b5c97913d..000000000 --- a/packages/instant/src/util/asset.ts +++ /dev/null @@ -1,146 +0,0 @@ -import { AssetBuyerError, InsufficientAssetLiquidityError } from '@0x/asset-buyer'; -import { AssetProxyId, ObjectMap } from '@0x/types'; -import { BigNumber } from '@0x/utils'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import * as _ from 'lodash'; - -import { BIG_NUMBER_ZERO, DEFAULT_UNKOWN_ASSET_NAME } from '../constants'; -import { assetDataNetworkMapping } from '../data/asset_data_network_mapping'; -import { Asset, AssetMetaData, ERC20Asset, Network, ZeroExInstantError } from '../types'; - -export const assetUtils = { - createAssetsFromAssetDatas: ( - assetDatas: string[], - assetMetaDataMap: ObjectMap<AssetMetaData>, - network: Network, - ): Asset[] => { - const arrayOfAssetOrUndefined = _.map(assetDatas, assetData => - assetUtils.createAssetFromAssetDataIfExists(assetData, assetMetaDataMap, network), - ); - return _.compact(arrayOfAssetOrUndefined); - }, - createAssetFromAssetDataIfExists: ( - assetData: string, - assetMetaDataMap: ObjectMap<AssetMetaData>, - network: Network, - ): Asset | undefined => { - const metaData = assetUtils.getMetaDataIfExists(assetData, assetMetaDataMap, network); - if (_.isUndefined(metaData)) { - return; - } - return { - assetData: assetData.toLowerCase(), - metaData, - }; - }, - createAssetFromAssetDataOrThrow: ( - assetData: string, - assetMetaDataMap: ObjectMap<AssetMetaData>, - network: Network, - ): Asset => { - return { - assetData: assetData.toLowerCase(), - metaData: assetUtils.getMetaDataOrThrow(assetData, assetMetaDataMap, network), - }; - }, - getMetaDataOrThrow: (assetData: string, metaDataMap: ObjectMap<AssetMetaData>, network: Network): AssetMetaData => { - const metaDataIfExists = assetUtils.getMetaDataIfExists(assetData, metaDataMap, network); - if (_.isUndefined(metaDataIfExists)) { - throw new Error(ZeroExInstantError.AssetMetaDataNotAvailable); - } - return metaDataIfExists; - }, - getMetaDataIfExists: ( - assetData: string, - metaDataMap: ObjectMap<AssetMetaData>, - network: Network, - ): AssetMetaData | undefined => { - let mainnetAssetData: string | undefined = assetData; - if (network !== Network.Mainnet) { - const mainnetAssetDataIfExists = assetUtils.getAssociatedAssetDataIfExists( - assetData.toLowerCase(), - network, - ); - // Just so we don't fail in the case where we are on a non-mainnet network, - // but pass in a valid mainnet assetData. - mainnetAssetData = mainnetAssetDataIfExists || assetData; - } - if (_.isUndefined(mainnetAssetData)) { - return; - } - const metaData = metaDataMap[mainnetAssetData.toLowerCase()]; - if (_.isUndefined(metaData)) { - return; - } - return metaData; - }, - bestNameForAsset: (asset?: Asset, defaultName: string = DEFAULT_UNKOWN_ASSET_NAME): string => { - if (_.isUndefined(asset)) { - return defaultName; - } - const metaData = asset.metaData; - switch (metaData.assetProxyId) { - case AssetProxyId.ERC20: - return metaData.symbol.toUpperCase(); - case AssetProxyId.ERC721: - return metaData.name; - } - }, - formattedSymbolForAsset: (asset?: ERC20Asset, defaultName: string = '???'): string => { - if (_.isUndefined(asset)) { - return defaultName; - } - const symbol = asset.metaData.symbol; - if (symbol.length <= 5) { - return symbol; - } - return `${symbol.slice(0, 3)}…`; - }, - getAssociatedAssetDataIfExists: (assetData: string, network: Network): string | undefined => { - const assetDataGroupIfExists = _.find(assetDataNetworkMapping, value => value[network] === assetData); - if (_.isUndefined(assetDataGroupIfExists)) { - return; - } - return assetDataGroupIfExists[Network.Mainnet]; - }, - getERC20AssetsFromAssets: (assets: Asset[]): ERC20Asset[] => { - const erc20sOrUndefined = _.map(assets, asset => - asset.metaData.assetProxyId === AssetProxyId.ERC20 ? (asset as ERC20Asset) : undefined, - ); - return _.compact(erc20sOrUndefined); - }, - assetBuyerErrorMessage: (asset: ERC20Asset, error: Error): string | undefined => { - if (error.message === AssetBuyerError.InsufficientAssetLiquidity) { - const assetName = assetUtils.bestNameForAsset(asset, 'of this asset'); - if ( - error instanceof InsufficientAssetLiquidityError && - error.amountAvailableToFill.isGreaterThan(BIG_NUMBER_ZERO) - ) { - const unitAmountAvailableToFill = Web3Wrapper.toUnitAmount( - error.amountAvailableToFill, - asset.metaData.decimals, - ); - const roundedUnitAmountAvailableToFill = unitAmountAvailableToFill.decimalPlaces( - 2, - BigNumber.ROUND_DOWN, - ); - - if (roundedUnitAmountAvailableToFill.isGreaterThan(BIG_NUMBER_ZERO)) { - return `There are only ${roundedUnitAmountAvailableToFill} ${assetName} available to buy`; - } - } - - return `Not enough ${assetName} available`; - } else if (error.message === AssetBuyerError.InsufficientZrxLiquidity) { - return 'Not enough ZRX available'; - } else if ( - error.message === AssetBuyerError.StandardRelayerApiError || - error.message.startsWith(AssetBuyerError.AssetUnavailable) - ) { - const assetName = assetUtils.bestNameForAsset(asset, 'This asset'); - return `${assetName} is currently unavailable`; - } - - return undefined; - }, -}; diff --git a/packages/instant/src/util/asset_buyer_factory.ts b/packages/instant/src/util/asset_buyer_factory.ts deleted file mode 100644 index 5ba46223c..000000000 --- a/packages/instant/src/util/asset_buyer_factory.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { AssetBuyer, AssetBuyerOpts } from '@0x/asset-buyer'; -import { Provider } from 'ethereum-types'; -import * as _ from 'lodash'; - -import { Network, OrderSource } from '../types'; - -export const assetBuyerFactory = { - getAssetBuyer: (provider: Provider, orderSource: OrderSource, network: Network): AssetBuyer => { - const assetBuyerOptions: Partial<AssetBuyerOpts> = { - networkId: network, - }; - const assetBuyer = _.isString(orderSource) - ? AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(provider, orderSource, assetBuyerOptions) - : AssetBuyer.getAssetBuyerForProvidedOrders(provider, orderSource, assetBuyerOptions); - return assetBuyer; - }, -}; diff --git a/packages/instant/src/util/buy_quote_updater.ts b/packages/instant/src/util/buy_quote_updater.ts deleted file mode 100644 index 37974e71c..000000000 --- a/packages/instant/src/util/buy_quote_updater.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { AssetBuyer, BuyQuote } from '@0x/asset-buyer'; -import { BigNumber } from '@0x/utils'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import * as _ from 'lodash'; -import { Dispatch } from 'redux'; -import { oc } from 'ts-optchain'; - -import { SLIPPAGE_PERCENTAGE } from '../constants'; -import { Action, actions } from '../redux/actions'; -import { AffiliateInfo, ERC20Asset, QuoteFetchOrigin } from '../types'; -import { analytics } from '../util/analytics'; -import { assetUtils } from '../util/asset'; -import { errorFlasher } from '../util/error_flasher'; -import { errorReporter } from '../util/error_reporter'; - -export const buyQuoteUpdater = { - updateBuyQuoteAsync: async ( - assetBuyer: AssetBuyer, - dispatch: Dispatch<Action>, - asset: ERC20Asset, - assetUnitAmount: BigNumber, - fetchOrigin: QuoteFetchOrigin, - options: { - setPending: boolean; - dispatchErrors: boolean; - affiliateInfo?: AffiliateInfo; - }, - ): Promise<void> => { - // get a new buy quote. - const baseUnitValue = Web3Wrapper.toBaseUnitAmount(assetUnitAmount, asset.metaData.decimals); - if (options.setPending) { - // mark quote as pending - dispatch(actions.setQuoteRequestStatePending()); - } - const feePercentage = oc(options.affiliateInfo).feePercentage(); - let newBuyQuote: BuyQuote | undefined; - const slippagePercentage = SLIPPAGE_PERCENTAGE; - try { - newBuyQuote = await assetBuyer.getBuyQuoteAsync(asset.assetData, baseUnitValue, { - feePercentage, - slippagePercentage, - }); - } catch (error) { - const errorMessage = assetUtils.assetBuyerErrorMessage(asset, error); - - errorReporter.report(error); - analytics.trackQuoteError(error.message ? error.message : 'other', baseUnitValue, fetchOrigin); - - if (options.dispatchErrors) { - dispatch(actions.setQuoteRequestStateFailure()); - errorFlasher.flashNewErrorMessage(dispatch, errorMessage || 'Error fetching price, please try again'); - } - return; - } - // We have a successful new buy quote - errorFlasher.clearError(dispatch); - // invalidate the last buy quote. - dispatch(actions.updateLatestBuyQuote(newBuyQuote)); - analytics.trackQuoteFetched(newBuyQuote, fetchOrigin); - }, -}; diff --git a/packages/instant/src/util/coinbase_api.ts b/packages/instant/src/util/coinbase_api.ts deleted file mode 100644 index faac8d82d..000000000 --- a/packages/instant/src/util/coinbase_api.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { BigNumber, fetchAsync } from '@0x/utils'; - -import { COINBASE_API_BASE_URL } from '../constants'; - -export const coinbaseApi = { - getEthUsdPrice: async (): Promise<BigNumber> => { - const res = await fetchAsync(`${COINBASE_API_BASE_URL}/prices/ETH-USD/buy`); - const resJson = await res.json(); - return new BigNumber(resJson.data.amount); - }, -}; diff --git a/packages/instant/src/util/env.ts b/packages/instant/src/util/env.ts deleted file mode 100644 index 7d4f836ff..000000000 --- a/packages/instant/src/util/env.ts +++ /dev/null @@ -1,77 +0,0 @@ -import * as bowser from 'bowser'; -import { Provider } from 'ethereum-types'; -import * as _ from 'lodash'; - -import { PROVIDER_TYPE_TO_NAME } from '../constants'; -import { Browser, OperatingSystem, ProviderType } from '../types'; - -export const envUtil = { - getBrowser(): Browser { - if (bowser.chrome) { - return Browser.Chrome; - } else if (bowser.firefox) { - return Browser.Firefox; - } else if (bowser.opera) { - return Browser.Opera; - } else if (bowser.msedge) { - return Browser.Edge; - } else if (bowser.safari) { - return Browser.Safari; - } else { - return Browser.Other; - } - }, - isMobileOperatingSystem(): boolean { - return bowser.mobile; - }, - getOperatingSystem(): OperatingSystem { - if (bowser.android) { - return OperatingSystem.Android; - } else if (bowser.ios) { - return OperatingSystem.iOS; - } else if (bowser.mac) { - return OperatingSystem.Mac; - } else if (bowser.windows) { - return OperatingSystem.Windows; - } else if (bowser.windowsphone) { - return OperatingSystem.WindowsPhone; - } else if (bowser.linux) { - return OperatingSystem.Linux; - } else { - return OperatingSystem.Other; - } - }, - getProviderType(provider: Provider): ProviderType | undefined { - const anyProvider = provider as any; - if (provider.constructor.name === 'EthereumProvider') { - return ProviderType.Mist; - } else if (anyProvider.isTrust) { - return ProviderType.TrustWallet; - } else if (anyProvider.isParity) { - return ProviderType.Parity; - } else if (anyProvider.isMetaMask) { - return ProviderType.MetaMask; - } else if (!_.isUndefined(_.get(window, 'SOFA'))) { - return ProviderType.CoinbaseWallet; - } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) { - return ProviderType.Cipher; - } else if (envUtil.getBrowser() === Browser.Opera && !anyProvider.isMetaMask) { - return ProviderType.Opera; - } - return; - }, - getProviderName(provider: Provider): string { - const providerTypeIfExists = envUtil.getProviderType(provider); - if (_.isUndefined(providerTypeIfExists)) { - return provider.constructor.name; - } - return PROVIDER_TYPE_TO_NAME[providerTypeIfExists]; - }, - getProviderDisplayName(provider: Provider): string { - const providerTypeIfExists = envUtil.getProviderType(provider); - if (_.isUndefined(providerTypeIfExists)) { - return 'Wallet'; - } - return PROVIDER_TYPE_TO_NAME[providerTypeIfExists]; - }, -}; diff --git a/packages/instant/src/util/error_flasher.ts b/packages/instant/src/util/error_flasher.ts deleted file mode 100644 index 068c12fe2..000000000 --- a/packages/instant/src/util/error_flasher.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Dispatch } from 'redux'; - -import { Action, actions } from '../redux/actions'; - -class ErrorFlasher { - private _timeoutId?: number; - public flashNewErrorMessage(dispatch: Dispatch<Action>, errorMessage?: string, delayMs: number = 7000): void { - this._clearTimeout(); - // dispatch new message - dispatch(actions.setErrorMessage(errorMessage || 'Something went wrong...')); - this._timeoutId = window.setTimeout(() => { - dispatch(actions.hideError()); - }, delayMs); - } - public clearError(dispatch: Dispatch<Action>): void { - this._clearTimeout(); - dispatch(actions.hideError()); - } - private _clearTimeout(): void { - if (this._timeoutId) { - window.clearTimeout(this._timeoutId); - } - } -} - -export const errorFlasher = new ErrorFlasher(); diff --git a/packages/instant/src/util/error_reporter.ts b/packages/instant/src/util/error_reporter.ts deleted file mode 100644 index 8d7481684..000000000 --- a/packages/instant/src/util/error_reporter.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { logUtils } from '@0x/utils'; -import * as _ from 'lodash'; - -import { - GIT_SHA, - HOST_DOMAINS_EXTERNAL, - HOST_DOMAINS_LOCAL, - INSTANT_DISCHARGE_TARGET, - NODE_ENV, - ROLLBAR_CLIENT_TOKEN, - ROLLBAR_ENABLED, -} from '../constants'; - -// Import version of Rollbar designed for embedded components -// See https://docs.rollbar.com/docs/using-rollbarjs-inside-an-embedded-component -// tslint:disable-next-line:no-var-requires -const Rollbar = require('rollbar/dist/rollbar.noconflict.umd'); - -const getRollbarHostDomains = (): string[] => { - if (NODE_ENV === 'development') { - return HOST_DOMAINS_EXTERNAL.concat(HOST_DOMAINS_LOCAL); - } else { - return HOST_DOMAINS_EXTERNAL; - } -}; - -let rollbar: any; -// Configures rollbar and sets up error catching -export const setupRollbar = (): any => { - if (_.isUndefined(rollbar) && ROLLBAR_CLIENT_TOKEN && ROLLBAR_ENABLED) { - const hostDomains = getRollbarHostDomains(); - rollbar = new Rollbar({ - accessToken: ROLLBAR_CLIENT_TOKEN, - captureUncaught: true, - captureUnhandledRejections: true, - enabled: true, - itemsPerMinute: 10, - maxItems: 500, - payload: { - environment: INSTANT_DISCHARGE_TARGET || `Local ${NODE_ENV}`, - client: { - javascript: { - source_map_enabled: true, - code_version: GIT_SHA, - guess_uncaught_frames: true, - }, - }, - }, - hostWhiteList: hostDomains, - uncaughtErrorLevel: 'error', - ignoredMessages: [ - // Errors from the third-party scripts - 'Script error', - // Network errors or ad-blockers - 'TypeError: Failed to fetch', - 'Exchange has not been deployed to detected network (network/artifact mismatch)', - // Source: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-discuss/7VU0_VvC7mE - "undefined is not an object (evaluating '__gCrWeb.autofill.extractForms')", - // Source: http://stackoverflow.com/questions/43399818/securityerror-from-facebook-and-cross-domain-messaging - 'SecurityError (DOM Exception 18)', - ], - }); - } -}; - -export const errorReporter = { - report(err: Error): void { - if (!rollbar) { - logUtils.log('Not reporting to rollbar because not configured', err); - return; - } - - rollbar.error(err, (rollbarErr: Error) => { - if (rollbarErr) { - logUtils.log(`Error reporting to rollbar, ignoring: ${rollbarErr}`); - } - }); - }, -}; diff --git a/packages/instant/src/util/etherscan.ts b/packages/instant/src/util/etherscan.ts deleted file mode 100644 index f9bf82827..000000000 --- a/packages/instant/src/util/etherscan.ts +++ /dev/null @@ -1,30 +0,0 @@ -import * as _ from 'lodash'; - -import { Network } from '../types'; - -const etherscanPrefix = (networkId: number): string | undefined => { - switch (networkId) { - case Network.Kovan: - return 'kovan.'; - case Network.Mainnet: - return ''; - } - return ''; -}; - -export const etherscanUtil = { - getEtherScanTxnAddressIfExists: (txHash: string, networkId: number) => { - const prefix = etherscanPrefix(networkId); - if (_.isUndefined(prefix)) { - return; - } - return `https://${prefix}etherscan.io/tx/${txHash}`; - }, - getEtherScanEthAddressIfExists: (ethAddress: string, networkId: number) => { - const prefix = etherscanPrefix(networkId); - if (_.isUndefined(prefix)) { - return; - } - return `https://${prefix}etherscan.io/address/${ethAddress}`; - }, -}; diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts deleted file mode 100644 index 61aeb839f..000000000 --- a/packages/instant/src/util/format.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { BigNumber } from '@0x/utils'; -import { Web3Wrapper } from '@0x/web3-wrapper'; -import * as _ from 'lodash'; - -import { BIG_NUMBER_ZERO, ETH_DECIMALS } from '../constants'; - -export const format = { - ethBaseUnitAmount: ( - ethBaseUnitAmount?: BigNumber, - decimalPlaces: number = 4, - defaultText: React.ReactNode = '0 ETH', - ): React.ReactNode => { - if (_.isUndefined(ethBaseUnitAmount)) { - return defaultText; - } - const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseUnitAmount, ETH_DECIMALS); - return format.ethUnitAmount(ethUnitAmount, decimalPlaces); - }, - ethUnitAmount: ( - ethUnitAmount?: BigNumber, - decimalPlaces: number = 4, - defaultText: React.ReactNode = '0 ETH', - minUnitAmountToDisplay: BigNumber = new BigNumber('0.00001'), - ): React.ReactNode => { - if (_.isUndefined(ethUnitAmount)) { - return defaultText; - } - let roundedAmount = ethUnitAmount.decimalPlaces(decimalPlaces).precision(decimalPlaces); - - if (roundedAmount.eq(BIG_NUMBER_ZERO) && ethUnitAmount.isGreaterThan(BIG_NUMBER_ZERO)) { - // Sometimes for small ETH amounts (i.e. 0.000045) the amount rounded to 4 decimalPlaces is 0 - // If that is the case, show to 1 significant digit - roundedAmount = new BigNumber(ethUnitAmount.toPrecision(1)); - } - - const displayAmount = - roundedAmount.isGreaterThan(BIG_NUMBER_ZERO) && roundedAmount.isLessThan(minUnitAmountToDisplay) - ? `< ${minUnitAmountToDisplay.toString()}` - : roundedAmount.toString(); - - return `${displayAmount} ETH`; - }, - ethBaseUnitAmountInUsd: ( - ethBaseUnitAmount?: BigNumber, - ethUsdPrice?: BigNumber, - decimalPlaces: number = 2, - defaultText: React.ReactNode = '$0.00', - minUnitAmountToDisplay: BigNumber = new BigNumber('0.00001'), - ): React.ReactNode => { - if (_.isUndefined(ethBaseUnitAmount) || _.isUndefined(ethUsdPrice)) { - return defaultText; - } - const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseUnitAmount, ETH_DECIMALS); - return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces, minUnitAmountToDisplay); - }, - ethUnitAmountInUsd: ( - ethUnitAmount?: BigNumber, - ethUsdPrice?: BigNumber, - decimalPlaces: number = 2, - defaultText: React.ReactNode = '$0.00', - ): React.ReactNode => { - if (_.isUndefined(ethUnitAmount) || _.isUndefined(ethUsdPrice)) { - return defaultText; - } - const rawUsdPrice = ethUnitAmount.multipliedBy(ethUsdPrice); - const roundedUsdPrice = rawUsdPrice.toFixed(decimalPlaces); - if (roundedUsdPrice === '0.00' && rawUsdPrice.gt(BIG_NUMBER_ZERO)) { - return '<$0.01'; - } else { - return `$${roundedUsdPrice}`; - } - }, - ethAddress: (address: string): string => { - return `0x${address.slice(2, 7)}…${address.slice(-5)}`; - }, -}; diff --git a/packages/instant/src/util/gas_price_estimator.ts b/packages/instant/src/util/gas_price_estimator.ts deleted file mode 100644 index 9792b60ba..000000000 --- a/packages/instant/src/util/gas_price_estimator.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { BigNumber, fetchAsync } from '@0x/utils'; - -import { - DEFAULT_ESTIMATED_TRANSACTION_TIME_MS, - DEFAULT_GAS_PRICE, - ETH_GAS_STATION_API_BASE_URL, - GWEI_IN_WEI, -} from '../constants'; - -import { errorReporter } from './error_reporter'; - -interface EthGasStationResult { - average: number; - fastestWait: number; - fastWait: number; - fast: number; - safeLowWait: number; - blockNum: number; - avgWait: number; - block_time: number; - speed: number; - fastest: number; - safeLow: number; -} - -interface GasInfo { - gasPriceInWei: BigNumber; - estimatedTimeMs: number; -} - -const fetchFastAmountInWeiAsync = async (): Promise<GasInfo> => { - const res = await fetchAsync(`${ETH_GAS_STATION_API_BASE_URL}/json/ethgasAPI.json`); - const gasInfo = (await res.json()) as EthGasStationResult; - // Eth Gas Station result is gwei * 10 - const gasPriceInGwei = new BigNumber(gasInfo.fast / 10); - // Time is in minutes - const estimatedTimeMs = gasInfo.fastWait * 60 * 1000; // Minutes to MS - return { gasPriceInWei: gasPriceInGwei.multipliedBy(GWEI_IN_WEI), estimatedTimeMs }; -}; - -export class GasPriceEstimator { - private _lastFetched?: GasInfo; - public async getGasInfoAsync(): Promise<GasInfo> { - let fetchedAmount: GasInfo | undefined; - try { - fetchedAmount = await fetchFastAmountInWeiAsync(); - } catch (e) { - fetchedAmount = undefined; - errorReporter.report(e); - } - - if (fetchedAmount) { - this._lastFetched = fetchedAmount; - } - - return ( - fetchedAmount || - this._lastFetched || { - gasPriceInWei: DEFAULT_GAS_PRICE, - estimatedTimeMs: DEFAULT_ESTIMATED_TRANSACTION_TIME_MS, - } - ); - } -} -export const gasPriceEstimator = new GasPriceEstimator(); diff --git a/packages/instant/src/util/heap.ts b/packages/instant/src/util/heap.ts deleted file mode 100644 index 279ff3059..000000000 --- a/packages/instant/src/util/heap.ts +++ /dev/null @@ -1,116 +0,0 @@ -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'; -import { errorReporter } from './error_reporter'; - -export type EventProperties = ObjectMap<string | number>; - -export interface HeapAnalytics { - loaded: boolean; - appid: string; - identify(id: string, idType: string): void; - track(eventName: string, eventProperties?: EventProperties): 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 - logUtils.log('Analytics error', e); - errorReporter.report(e); - } - } - }, -}; diff --git a/packages/instant/src/util/heartbeater.ts b/packages/instant/src/util/heartbeater.ts deleted file mode 100644 index e700d489e..000000000 --- a/packages/instant/src/util/heartbeater.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { intervalUtils } from '@0x/utils'; -import * as _ from 'lodash'; - -type HeartbeatableFunction = () => Promise<void>; -export class Heartbeater { - private _intervalId?: NodeJS.Timer; - private readonly _performImmediatelyOnStart: boolean; - private readonly _performFunction: HeartbeatableFunction; - - public constructor(performingFunctionAsync: HeartbeatableFunction, performImmediatelyOnStart: boolean) { - this._performFunction = performingFunctionAsync; - this._performImmediatelyOnStart = performImmediatelyOnStart; - } - - public start(intervalTimeMs: number): void { - if (!_.isUndefined(this._intervalId)) { - throw new Error('Heartbeat is running, please stop before restarting'); - } - - if (this._performImmediatelyOnStart) { - // tslint:disable-next-line:no-floating-promises - this._performFunction(); - } - - // tslint:disable-next-line:no-unbound-method - this._intervalId = intervalUtils.setAsyncExcludingInterval(this._performFunction, intervalTimeMs, _.noop); - } - - public stop(): void { - if (this._intervalId) { - intervalUtils.clearInterval(this._intervalId); - } - this._intervalId = undefined; - } -} diff --git a/packages/instant/src/util/heartbeater_factory.ts b/packages/instant/src/util/heartbeater_factory.ts deleted file mode 100644 index cf29bf3ea..000000000 --- a/packages/instant/src/util/heartbeater_factory.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { asyncData } from '../redux/async_data'; -import { Store } from '../redux/store'; -import { QuoteFetchOrigin } from '../types'; - -import { Heartbeater } from './heartbeater'; - -export interface HeartbeatFactoryOptions { - store: Store; - shouldPerformImmediatelyOnStart: boolean; -} -export const generateAccountHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => { - const { store, shouldPerformImmediatelyOnStart } = options; - return new Heartbeater(async () => { - await asyncData.fetchAccountInfoAndDispatchToStore(store.getState().providerState, store.dispatch, false); - }, shouldPerformImmediatelyOnStart); -}; - -export const generateBuyQuoteHeartbeater = (options: HeartbeatFactoryOptions): Heartbeater => { - const { store, shouldPerformImmediatelyOnStart } = options; - return new Heartbeater(async () => { - await asyncData.fetchCurrentBuyQuoteAndDispatchToStore( - store.getState(), - store.dispatch, - QuoteFetchOrigin.Heartbeat, - { - updateSilently: true, - }, - ); - }, shouldPerformImmediatelyOnStart); -}; diff --git a/packages/instant/src/util/maybe_big_number.ts b/packages/instant/src/util/maybe_big_number.ts deleted file mode 100644 index f48473389..000000000 --- a/packages/instant/src/util/maybe_big_number.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { BigNumber } from '@0x/utils'; -import * as _ from 'lodash'; - -import { Maybe } from '../types'; - -export const maybeBigNumberUtil = { - // converts a string to a Maybe<BigNumber> - // if string is a NaN, considered undefined - stringToMaybeBigNumber: (stringValue: string): Maybe<BigNumber> => { - let validBigNumber: BigNumber; - try { - validBigNumber = new BigNumber(stringValue); - } catch { - return undefined; - } - - return validBigNumber.isNaN() ? undefined : validBigNumber; - }, - areMaybeBigNumbersEqual: (val1: Maybe<BigNumber>, val2: Maybe<BigNumber>): boolean => { - if (!_.isUndefined(val1) && !_.isUndefined(val2)) { - return val1.isEqualTo(val2); - } - return _.isUndefined(val1) && _.isUndefined(val2); - }, -}; diff --git a/packages/instant/src/util/provider_factory.ts b/packages/instant/src/util/provider_factory.ts deleted file mode 100644 index 603f7674d..000000000 --- a/packages/instant/src/util/provider_factory.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { EmptyWalletSubprovider, RPCSubprovider, Web3ProviderEngine } from '@0x/subproviders'; -import { Provider } from 'ethereum-types'; -import * as _ from 'lodash'; - -import { BLOCK_POLLING_INTERVAL_MS, ETHEREUM_NODE_URL_BY_NETWORK } from '../constants'; -import { Maybe, Network } from '../types'; - -export const providerFactory = { - getInjectedProviderIfExists: (): Maybe<Provider> => { - const injectedProviderIfExists = (window as any).ethereum; - if (!_.isUndefined(injectedProviderIfExists)) { - return injectedProviderIfExists; - } - const injectedWeb3IfExists = (window as any).web3; - if (!_.isUndefined(injectedWeb3IfExists) && !_.isUndefined(injectedWeb3IfExists.currentProvider)) { - return injectedWeb3IfExists.currentProvider; - } - return undefined; - }, - getFallbackNoSigningProvider: (network: Network): Provider => { - const providerEngine = new Web3ProviderEngine({ - pollingInterval: BLOCK_POLLING_INTERVAL_MS, - }); - // Intercept calls to `eth_accounts` and always return empty - providerEngine.addProvider(new EmptyWalletSubprovider()); - // Construct an RPC subprovider, all data based requests will be sent via the RPCSubprovider - // TODO(bmillman): make this more resilient to infura failures - const rpcUrl = ETHEREUM_NODE_URL_BY_NETWORK[network]; - providerEngine.addProvider(new RPCSubprovider(rpcUrl)); - // // Start the Provider Engine - providerEngine.start(); - return providerEngine; - }, -}; diff --git a/packages/instant/src/util/provider_state_factory.ts b/packages/instant/src/util/provider_state_factory.ts deleted file mode 100644 index bd2d6dad5..000000000 --- a/packages/instant/src/util/provider_state_factory.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { Web3Wrapper } from '@0x/web3-wrapper'; -import { Provider } from 'ethereum-types'; -import * as _ from 'lodash'; - -import { LOADING_ACCOUNT, NO_ACCOUNT } from '../constants'; -import { Maybe, Network, OrderSource, ProviderState } from '../types'; -import { envUtil } from '../util/env'; - -import { assetBuyerFactory } from './asset_buyer_factory'; -import { providerFactory } from './provider_factory'; - -export const providerStateFactory = { - getInitialProviderState: ( - orderSource: OrderSource, - network: Network, - provider?: Provider, - walletDisplayName?: string, - ): ProviderState => { - if (!_.isUndefined(provider)) { - return providerStateFactory.getInitialProviderStateFromProvider( - orderSource, - network, - provider, - walletDisplayName, - ); - } - const providerStateFromWindowIfExits = providerStateFactory.getInitialProviderStateFromWindowIfExists( - orderSource, - network, - walletDisplayName, - ); - if (providerStateFromWindowIfExits) { - return providerStateFromWindowIfExits; - } else { - return providerStateFactory.getInitialProviderStateFallback(orderSource, network, walletDisplayName); - } - }, - getInitialProviderStateFromProvider: ( - orderSource: OrderSource, - network: Network, - provider: Provider, - walletDisplayName?: string, - ): ProviderState => { - const providerState: ProviderState = { - name: envUtil.getProviderName(provider), - displayName: walletDisplayName || envUtil.getProviderDisplayName(provider), - provider, - web3Wrapper: new Web3Wrapper(provider), - assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network), - account: LOADING_ACCOUNT, - }; - return providerState; - }, - getInitialProviderStateFromWindowIfExists: ( - orderSource: OrderSource, - network: Network, - walletDisplayName?: string, - ): Maybe<ProviderState> => { - const injectedProviderIfExists = providerFactory.getInjectedProviderIfExists(); - if (!_.isUndefined(injectedProviderIfExists)) { - const providerState: ProviderState = { - name: envUtil.getProviderName(injectedProviderIfExists), - displayName: walletDisplayName || envUtil.getProviderDisplayName(injectedProviderIfExists), - provider: injectedProviderIfExists, - web3Wrapper: new Web3Wrapper(injectedProviderIfExists), - assetBuyer: assetBuyerFactory.getAssetBuyer(injectedProviderIfExists, orderSource, network), - account: LOADING_ACCOUNT, - }; - return providerState; - } else { - return undefined; - } - }, - getInitialProviderStateFallback: ( - orderSource: OrderSource, - network: Network, - walletDisplayName?: string, - ): ProviderState => { - const provider = providerFactory.getFallbackNoSigningProvider(network); - const providerState: ProviderState = { - name: 'Fallback', - displayName: walletDisplayName || envUtil.getProviderDisplayName(provider), - provider, - web3Wrapper: new Web3Wrapper(provider), - assetBuyer: assetBuyerFactory.getAssetBuyer(provider, orderSource, network), - account: NO_ACCOUNT, - }; - return providerState; - }, -}; diff --git a/packages/instant/src/util/time.ts b/packages/instant/src/util/time.ts deleted file mode 100644 index bfe69cad5..000000000 --- a/packages/instant/src/util/time.ts +++ /dev/null @@ -1,39 +0,0 @@ -const secondsToMinutesAndRemainingSeconds = (seconds: number): { minutes: number; remainingSeconds: number } => { - const minutes = Math.floor(seconds / 60); - const remainingSeconds = seconds - minutes * 60; - - return { - minutes, - remainingSeconds, - }; -}; - -const padZero = (aNumber: number): string => { - return aNumber < 10 ? `0${aNumber}` : aNumber.toString(); -}; - -export const timeUtil = { - // converts seconds to human readable version of seconds or minutes - secondsToHumanDescription: (seconds: number): string => { - const { minutes, remainingSeconds } = secondsToMinutesAndRemainingSeconds(seconds); - - if (minutes === 0) { - const suffix = seconds > 1 ? 's' : ''; - return `${seconds} second${suffix}`; - } - - const minuteSuffix = minutes > 1 ? 's' : ''; - const minuteText = `${minutes} minute${minuteSuffix}`; - - const secondsSuffix = remainingSeconds > 1 ? 's' : ''; - const secondsText = remainingSeconds === 0 ? '' : ` ${remainingSeconds} second${secondsSuffix}`; - - return `${minuteText}${secondsText}`; - }, - // converts seconds to stopwatch time (i.e. 05:30 and 00:30) - // only goes up to minutes, not hours - secondsToStopwatchTime: (seconds: number): string => { - const { minutes, remainingSeconds } = secondsToMinutesAndRemainingSeconds(seconds); - return `${padZero(minutes)}:${padZero(remainingSeconds)}`; - }, -}; diff --git a/packages/instant/src/util/util.ts b/packages/instant/src/util/util.ts deleted file mode 100644 index 29b6b1d2b..000000000 --- a/packages/instant/src/util/util.ts +++ /dev/null @@ -1,6 +0,0 @@ -import * as _ from 'lodash'; - -export const util = { - boundNoop: _.noop.bind(_), - createOpenUrlInNewWindow: (href: string) => () => window.open(href, '_blank'), -}; |
