diff --git a/ecommerce-store-website/package-lock.json b/ecommerce-store-website/package-lock.json index d482500c0..e21794299 100644 --- a/ecommerce-store-website/package-lock.json +++ b/ecommerce-store-website/package-lock.json @@ -7,7 +7,7 @@ "name": "stl-token-negotiator-web", "dependencies": { "@react-spring/web": "^9.3.1", - "@tokenscript/token-negotiator": "^2.5.0", + "@tokenscript/token-negotiator": "2.5.0", "@use-gesture/react": "^10.1.6", "body-scroll-lock": "^4.0.0-beta.0", "clsx": "^1.1.1", diff --git a/ecommerce-store-website/package.json b/ecommerce-store-website/package.json index ac7b5551a..704a7e0a4 100644 --- a/ecommerce-store-website/package.json +++ b/ecommerce-store-website/package.json @@ -2,16 +2,15 @@ "name": "stl-token-negotiator-web", "private": true, "scripts": { - "dev": "npm run css && next dev", - "build-without-export": "npm run css && next build", - "build": "npm run css && next build && next export", - "start": "npm run css && next start -p 3004", - "lint": "next lint", - "css": "node scripts/copy_tn_css.js" + "dev": "next dev", + "build-without-export": "next build", + "build": "next build && next export", + "start": "next start -p 3004", + "lint": "next lint" }, "dependencies": { "@react-spring/web": "^9.3.1", - "@tokenscript/token-negotiator": "^2.5.0", + "@tokenscript/token-negotiator": "2.5.0", "@use-gesture/react": "^10.1.6", "body-scroll-lock": "^4.0.0-beta.0", "clsx": "^1.1.1", diff --git a/ecommerce-store-website/public/css/tn_style.css b/ecommerce-store-website/public/css/tn_style.css deleted file mode 100644 index 648b27e6a..000000000 --- a/ecommerce-store-website/public/css/tn_style.css +++ /dev/null @@ -1,1258 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;400&display=swap.css"); -.overlay-tn button:disabled { - cursor: not-allowed !important; -} - -.overlay-tn .headline-container-tn { - border-bottom: 1px solid #ececec; - padding-top: 8px; -} -.overlay-tn .headline-container-tn > div { - display: flex; - justify-content: space-between; - align-items: center; -} -.overlay-tn .headline-container-tn .toolbar-tn { - display: flex; - justify-content: right; - align-items: center; -} -.overlay-tn .headline-container-tn .toolbar-tn button { - margin-right: 10px; -} - -.overlay-tn .cancel-auth-btn { - display: block; - margin: 10px auto; - cursor: pointer; -} - -.overlay-tn .connect-btn-tn { - transition: all 1s; - margin: 0; -} - -/* common theme */ -.overlay-tn { - color: #000; - font-family: "Source Sans Pro", sans-serif; -} - -.overlay-tn.popup-tn { - position: fixed; - z-index: 9999; -} - -.overlay-tn.popup-tn.bottom-right { - bottom: 24px; - right: 24px; -} - -.overlay-tn.popup-tn.bottom-left { - bottom: 24px; - left: 24px; -} - -.overlay-tn.popup-tn.top-right { - top: 10px; - right: 24px; -} - -.overlay-tn.popup-tn.top-left { - top: 10px; - left: 24px; -} - -.overlay-tn .wallet-button-tn, -.overlay-tn .opening-btn-tn, -.overlay-tn .tokens-btn-tn, -.overlay-tn .fungible-token-btn, -.overlay-tn .connect-btn-tn, -.overlay-tn .btn-tn { - transition: all 0.25s; -} - -.overlay-tn .wallet-button-tn:hover, -.overlay-tn .wallet-button-tn:focus { - opacity: 1; -} - -.overlay-tn .opening-heading-tn, -.overlay-tn .wallet-button-tn p, -.overlay-tn .issuer-connect-title, -.overlay-tn .loader-msg-tn h4, -.overlay-tn .headline-container-tn { - font-size: 1rem; - font-size: max(1rem, 16px); -} - -.overlay-tn .wallet-button-tn img, -.overlay-tn .wallet-button-tn svg { - max-width: 100%; - width: 62px; - height: auto; -} - -.overlay-tn .no-tokens-tn { - padding: 0 1rem; -} - -.overlay-fab-button-tn { - padding: 0; - height: 80px; - width: 80px; - border: 0; - border-radius: 54px; - cursor: pointer; - z-index: 999; - position: absolute; - display: flex; - align-items: center; - justify-content: center; -} -.overlay-fab-button-tn .overlay-fab-button-tn-img-container { - --stl-anim: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNzUgNTUiIHdpZHRoPSIyNzUiIGhlaWdodD0iNTUiPjxzdmcgd2lkdGg9IjU1IiBoZWlnaHQ9IjU1Ij48cGF0aCBkPSJNMjUuNSA0MWgtNWMwLTIuOS0wLjYtNS42LTEuNy04LjFjLTEtMi4zLTIuNC00LjMtNC4yLTYuMWMtMS45LTEuOS00LjMtMy40LTYuOC00LjRjLTIuMy0wLjktNC44LTEuNC03LjMtMS40di01aDdoMTh2Ni4ydjUuNnY2LjJaIi8+PHBhdGggZD0iTTU0IDE2LjJ2MTEuOXY2LjF2N2gtMTIuOGgtNi4xaC02LjF2LTEzLjR2LTUuMnYtNi40aDEyLjZoNS4zWiIvPjwvc3ZnPjxzdmcgd2lkdGg9IjU1IiBoZWlnaHQ9IjU1IiB4PSI1NSI+PHBhdGggZD0iTTMxLjcgNDJjLTAuMiAuMi0zLjUgLjMtMy43IC4zYy0wLjItMS44LTAuNy0zLjYtMS42LTUuM2MtMC42LTEuNC0xMS45LTEzLjEtMTMtMTQuMmMtMS4zLTEuMy0yLjktMi41LTQuNC0zLjNjLTEuNS0wLjgtMi45LTEuMi00LjQtMS40bC40LTMuNWMuMi0wLjEgLjMtMC4yIC41LTAuMmMuMiAwIDQuOCAuMSA0LjkgLjJoMTEuMmwxMC41IDE0LjNjLjEgLjIgLjIgMy44IC4yIDRjMCAuMi0wLjEgNC4zLTAuMiA0LjRaIi8+PHBhdGggZD0iTTQ4LjMgMTQuN2MuMi0wLjEgLjQtMC4yIC42LTAuMmMuMiAwIC4zIDcuNSAuNSA3LjZsLjQgNC4yYy4xIC4xIC4yIDQuNyAuMiA0LjljMCAuMi04LjEgLjQtOC4yIC41bC0xNC4zIDEwLjRjLTAuMSAuMi00LjEgLjMtNC4zIC4zYy0wLjIgMC0wLjMtOC40LTAuNS04LjVsLTAuNC0zLjdjLTAuMS0wLjEtMC4yLTQuMy0wLjItNC41YzAtMC4yIDcuOS0wLjQgOC0wLjVjMCAwIDEzLjgtMTAuNSAxMy44LTEwLjVaIi8+PC9zdmc+PHN2ZyB3aWR0aD0iNTUiIGhlaWdodD0iNTUiIHg9IjExMCI+PHBhdGggZD0iTTM2LjYgNDIuOWMtMC4yIC4zLTIuMiAuNC0yLjUgLjRjLTAuNC0wLjgtMC45LTEuOS0xLjUtMi45Yy0wLjMtMC43LTE5LjctMjAuMy0yMC4yLTIwLjhjLTAuOS0wLjktMS44LTEuNy0yLjYtMi40Yy0wLjctMC42LTEuMy0xLjEtMS45LTEuNGwuNy0yLjJjLjItMC4zIC42LTAuNCAxLTAuNGMuMyAwIDIuOSAuMSAzLjEgLjRoNS43bDE4LjkgMjAuOGMuMyAuMyAuNCAyLjQgLjQgMi43YzAgLjQtMC4xIDIuNy0wLjQgM1oiLz48cGF0aCBkPSJNNDMuOCAxMy42Yy4yLTAuMyAuNi0wLjQgLjktMC40Yy40IDAgLjcgMy45IDEgNC4xbC43IDIuNmMuMiAuMyAuNCAyLjggLjQgMy4yYzAgLjMtNC4yIC43LTQuNSAxbC0yMC44IDE4LjhjLTAuMyAuMy0yLjUgLjQtMi45IC40Yy0wLjMgMC0wLjctNC4zLTAuOS00LjZsLTAuNy0yLjNjLTAuMy0wLjItMC40LTIuNi0wLjQtM2MwLTAuMyA0LjEtMC43IDQuMy0wLjljMCAwIDIwLjYtMTguOSAyMC42LTE4LjlaIi8+PC9zdmc+PHN2ZyB3aWR0aD0iNTUiIGhlaWdodD0iNTUiIHg9IjE2NSI+PHBhdGggZD0iTTQwLjMgNDMuNmMtMC4zIC4zLTEuMiAuNS0xLjcgLjVjLTAuNS0wLjMtMS0wLjctMS41LTEuM2MtMC4xLTAuMi0yNS4yLTI1LjQtMjUuNC0yNS42Yy0wLjUtMC41LTAuOS0xLjEtMS4xLTEuN2MtMC4yLTAuNS0wLjMtMS0wLjItMS40bC45LTEuM2MuMy0wLjQgLjgtMC42IDEuMy0wLjZjLjUgMCAxLjYgLjIgMS45IC42aDEuN2wyNSAyNS42Yy40IC4zIC41IDEuMyAuNSAxLjhjMCAuNC0wLjEgMS41LTAuNSAxLjhaIi8+PHBhdGggZD0iTTQwLjQgMTIuOGMuNC0wLjQgLjgtMC42IDEuMy0wLjZjLjUgMCAxIDEuMyAxLjMgMS43bC45IDEuNGMuMyAuNCAuNSAxLjUgLjUgMmMwIC40LTEuNCAuOS0xLjcgMS4ybC0yNS42IDI1LjFjLTAuMyAuMy0xLjQgLjUtMS44IC41Yy0wLjUgMC0xLTEuNC0xLjMtMS44bC0wLjktMS40Yy0wLjQtMC4zLTAuNS0xLjQtMC41LTEuOGMwLTAuNSAxLjMtMSAxLjctMS4zYzAgMCAyNS41LTI1IDI1LjUtMjVaIi8+PC9zdmc+PHN2ZyB3aWR0aD0iNTUiIGhlaWdodD0iNTUiIHg9IjIyMCI+PHBhdGggZD0iTTQxLjggNDMuOGMtMC4zIC40LTAuOSAuNi0xLjQgLjZjLTAuNSAwLTEtMC4yLTEuNC0wLjZsLTI3LjYtMjcuNmMtMC40LTAuNC0wLjYtMC45LTAuNi0xLjRjMC0wLjUgLjItMSAuNi0xLjRsMS0xYy4zLTAuNCAuOS0wLjYgMS40LTAuNmMuNSAwIDEgLjIgMS40IC42bDI3LjYgMjcuNmMuNCAuNCAuNiAuOSAuNiAxLjRjMCAuNS0wLjIgMS4xLTAuNiAxLjRaIi8+PHBhdGggZD0iTTM5IDEyLjRjLjQtMC40IC45LTAuNiAxLjQtMC42Yy41IDAgMS4xIC4yIDEuNCAuNmwxIDFjLjQgLjMgLjYgLjkgLjYgMS40YzAgLjUtMC4yIDEtMC42IDEuNGwtMjcuNiAyNy42Yy0wLjQgLjQtMC45IC42LTEuNCAuNmMtMC41IDAtMS0wLjItMS40LTAuNmwtMS0xYy0wLjQtMC4zLTAuNi0wLjktMC42LTEuNGMwLTAuNSAuMi0xIC42LTEuNFoiLz48L3N2Zz48L3N2Zz4="); - mask-image: var(--stl-anim); - -webkit-mask-image: var(--stl-anim); - width: 55px; - height: 55px; -} - -.overlay-tn.popup-tn.bottom-right .overlay-fab-button-tn { - bottom: 0; - right: 0; -} - -.overlay-tn.popup-tn.bottom-left .overlay-fab-button-tn { - bottom: 0; - left: 0px; -} - -.overlay-tn.popup-tn.top-right .overlay-fab-button-tn { - top: 0px; - right: 0; -} - -.overlay-tn.popup-tn.top-left .overlay-fab-button-tn { - top: 0px; - left: 0px; -} - -.overlay-tn .headline-container-tn p { - margin: 1rem; -} - -.dis-wallet-tn { - margin: 5px 10px; -} - -.stl-tn { - cursor: pointer; -} - -.overlay-tn .overlay-content-tn:hover { - transition: all 0.15s; - -webkit-transition: all 0.15s; -} - -.overlay-tn.popup-tn.open .overlay-fab-button-tn .overlay-fab-button-tn-img-container { - mask-position: -220px 0px; - --webkit-mask-position: -220px 0px; - animation: openAnimation 0.1s steps(4); - -webkit-animation: openAnimation 0.1s steps(4); - will-change: animation; - animation-fill-mode: forwards; -} - -.overlay-tn.popup-tn.close .overlay-fab-button-tn .overlay-fab-button-tn-img-container { - animation: closeAnimation 0.1s steps(4); - -webkit-animation: closeAnimation 0.1s steps(4); - will-change: animation; - animation-fill-mode: forwards; -} - -.overlay-tn.popup-tn.open .overlay-fab-button-tn .stl-tn > .child_a { - animation: 0.2s linear both a0_t, 0.2s linear both a0_d; - -webkit-animation: 0.2s linear both a0_t, 0.2s linear both a0_d; -} - -.overlay-tn.popup-tn.open .overlay-fab-button-tn .stl-tn > .child_b { - animation: 0.2s linear both a0_t, 0.2s linear both a1_d; - -webkit-animation: 0.2s linear both a0_t, 0.2s linear both a1_d; -} - -.overlay-tn.popup-tn.open .overlay-content-tn { - opacity: 1; - visibility: visible; - transition: all 0.3s 0.1s; - padding: 0; - pointer-events: inherit; -} - -.overlay-tn.popup-tn.open.bottom-right .overlay-content-tn { - right: 0; - bottom: 88px; -} - -.overlay-tn.popup-tn.open.top-right .overlay-content-tn { - right: 0; - top: 88px; -} - -.overlay-tn.popup-tn.open.bottom-left .overlay-content-tn { - left: 0; - bottom: 88px; -} - -.overlay-tn.popup-tn.open.top-left .overlay-content-tn { - top: 88px; - left: 0; -} - -.overlay-tn .overlay-content-tn { - display: flex; - flex-direction: column; - height: 266px; - width: 355px; - overflow: hidden; -} - -.overlay-tn.popup-tn .overlay-content-tn { - pointer-events: none; - opacity: 0; - visibility: hidden; - position: absolute; - bottom: 74px; - box-shadow: 0 2px 4px 0 rgba(103, 103, 103, 0.5); - z-index: 888; -} - -.overlay-tn.inline-tn .overlay-content-tn { - position: relative; - margin: 0 auto; -} - -.overlay-tn .overlay-content-tn .token-issuer-nav-tn { - padding: 0; - margin: 0; -} - -.overlay-tn .overlay-content-tn .issuer-connect-title { - margin: 0; - max-width: 160px; - text-align: left; -} - -.overlay-tn .overlay-content-tn .headline-tn { - width: auto; - margin: 0; - padding: 13px 12px 13px 12px; - font-size: 1.2rem; - font-size: max(1.2rem, 18px); - font-weight: bold; - line-height: 1.71rem; -} - -.overlay-tn .overlay-content-tn .token-container-tn { - flex-grow: 1; - overflow: scroll; -} - -.overlay-tn .overlay-content-tn .token-tn { - display: flex; - align-items: center; - padding: 12px 0; -} - -.overlay-tn .back-to-menu-tn { - cursor: pointer; - height: 42px; - border-radius: 80px; - margin: 14px 0px 14px 11px; - border: none; - padding: 5px; - width: auto; - background-color: #efefef; -} - -.overlay-tn .back-to-menu-tn:hover { - background-color: #c5c5c5 !important; -} - -.overlay-tn .overlay-content-tn .token-tn .image-tn { - width: 89px; - min-height: 89px; - margin: 0 14px; -} - -.overlay-tn .overlay-content-tn .token-tn .data-tn { - width: 175px; - text-align: left; - flex-grow: 1; -} - -.overlay-tn .token-title-tn { - font-size: 1rem; - font-size: max(1rem, 16px); - padding: 0; - margin: 0; - font-weight: 400; - overflow-wrap: anywhere; -} - -.overlay-tn .overlay-content-tn .token-tn .detail-tn { - min-height: 20px; - font-size: 0.7rem; - font-size: max(0.7rem, 11px); - line-height: 1.3rem; - margin: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-bottom: 0.2rem; -} - -.overlay-tn .overlay-content-tn .token-tn .title-tn { - margin: 0; - font-size: 1.12rem; - font-size: max(1.12rem, 18px); - color: #000000; -} - -.overlay-tn .overlay-content-tn .toggle-tn { - transform: scale(0.7); - width: 55px; - margin-right: 7px; - border-radius: 5px; - cursor: pointer; -} - -.overlay-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn { - opacity: 0; - position: absolute; -} - -.overlay-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn + label { - position: relative; - display: inline-block; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - transition: 0.2s ease; - height: 25px; - width: 50px; - border-radius: 60px; - cursor: pointer; -} - -.overlay-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn + label:before { - content: ""; - position: absolute; - display: block; - transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1); - height: 19px; - width: 100%; - top: 0; - left: 0; - border-radius: 19px; -} - -.overlay-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn + label:after { - content: ""; - position: absolute; - display: block; - transition: 0.25s cubic-bezier(0.54, 1.6, 0.5, 1); - height: 28px; - width: 28px; - top: -5px; - left: 0px; - border-radius: 60px; -} - -.overlay-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn:checked + label { - border: 3px solid #88bff6; -} - -.overlay-content-tn .toggle-tn input.mobileToggle-tn:checked + label:before { - background: #88bff6; - transition: width 0.2s cubic-bezier(0, 0, 0, 0.1); -} - -.overlay-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn:checked + label:after { - left: 24px; -} - -.overlay-tn label { - box-sizing: border-box; -} - -.overlay-content-tn .toggle-tn input:focus + label { - border: 3px solid #005fcc !important; -} - -.overlay-tn li.issuer-connect-banner-tn { - box-sizing: border-box; -} - -.overlay-tn .load-container-tn { - position: absolute; - width: 100%; - height: 100%; - z-index: 200; - background-color: rgba(52, 52, 52, 0.75); - text-align: center; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - font-size: 16px; - color: #fff; -} - -.loader-msg-tn h4 { - color: #fff; -} - -.loader-msg-tn small { - color: #fff; - font-size: 0.81rem; - font-size: max(0.81rem, 13px); -} - -/* loader */ -.lds-ellipsis { - display: inline-block; - position: relative; - width: 80px; - height: 40px; -} - -.lds-ellipsis div { - position: absolute; - display: block; - top: 16px; - width: 13px; - height: 13px; - border-radius: 50%; - background: #fff; - animation-timing-function: cubic-bezier(0, 1, 1, 0); -} - -.lds-ellipsis div:nth-child(1) { - left: 8px; - animation: lds-ellipsis1 0.6s infinite; -} - -.lds-ellipsis div:nth-child(2) { - left: 8px; - animation: lds-ellipsis2 0.6s infinite; -} - -.lds-ellipsis div:nth-child(3) { - left: 32px; - animation: lds-ellipsis2 0.6s infinite; -} - -.lds-ellipsis div:nth-child(4) { - left: 56px; - animation: lds-ellipsis3 0.6s infinite; -} - -@keyframes lds-ellipsis1 { - 0% { - transform: scale(0); - } - 100% { - transform: scale(1); - } -} -@keyframes lds-ellipsis3 { - 0% { - transform: scale(1); - } - 100% { - transform: scale(0); - } -} -@keyframes lds-ellipsis2 { - 0% { - transform: translate(0, 0); - } - 100% { - transform: translate(24px, 0); - } -} -.lds-ellipsis-sm { - display: inline-block; - position: relative; - width: 65px; - height: 11px; - transform: scale(0.5); - margin-left: -8px; -} - -.lds-ellipsis-sm div { - background: #000; - top: 0; -} - -li.issuer-connect-banner-tn { - list-style-type: none; - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px; - /* height: 2.7rem; */ -} - -li.token-tn, -.load-more-tn { - width: 100%; - list-style-type: none; -} - -.overlay-tn .opening-btn-tn, -li.issuer-connect-banner-tn .connect-btn-tn, -li.issuer-connect-banner-tn .tokens-btn-tn, -li.issuer-connect-banner-tn .fungible-token-btn { - font-size: 0.75rem; - font-size: max(0.75rem, 12px); - font-weight: 200; - border: none; - padding: 7px 15px 7px 15px; - border-radius: 23px; - cursor: pointer; -} - -.load-more-tn { - text-align: center; - padding: 10px 0; -} - -.opening-btn-tn, -li.issuer-connect-banner-tn .connect-btn-tn, -li.issuer-connect-banner-tn .tokens-btn-tn, -li.issuer-connect-banner-tn .fungible-token-btn, -.btn-tn { - font-size: 0.75rem; - font-size: max(0.75rem, 12px); - font-weight: 200; - border: none; - padding: 7px 15px 7px 15px; - border-radius: 23px; - cursor: pointer; - color: white; - background: #101010; -} - -.refresh-icon-tn { - width: 12px; - height: 12px; -} - -.dismiss-error-tn { - margin-top: 20px; - border: 0 !important; - font-size: 0.75rem; - font-size: max(0.75rem, 12px); -} - -li.issuer-connect-banner-tn .tokens-btn-tn, -li.issuer-connect-banner-tn .fungible-token-btn { - display: none; - width: auto; - margin: 0; -} - -.overlay-tn .token-issuer-list-container-tn, -.token-list-container-tn { - padding: 0; - margin: 0; -} - -.overlay-tn .inner-content-tn { - padding: 0; - display: flex; - position: relative; - left: 0; - transition: all 0.25s ease-out; - height: 100%; -} - -.issuer-slider-tn { - width: 200%; -} - -.issuer-slider-tn > div { - width: 50%; -} - -.shimmer-tn { - display: inline-block; - height: 1em; - position: relative; - overflow: hidden; - background-color: #dddbdd; -} - -.shimmer-tn:after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - transform: translateX(-100%); - background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0)); - animation: shimmer 2s infinite; - content: ""; -} - -@keyframes shimmer { - 100% { - transform: translateX(100%); - } -} -.img-container-tn { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; -} - -.img-container-tn img { - max-width: 100%; - max-height: 100%; -} - -.issuer-icon-tn { - height: 32px; - width: 32px; - border-radius: 45px; - margin-right: 9px; -} - -/* .overlay-tn .overlay-content-tn.open .inner-content-tn { */ -.issuer-slider-tn.open { - position: relative; - left: -100%; -} - -.overlay-tn .overlay-content-tn .wallet-selection-view-tn { - position: absolute; - z-index: 100; - height: inherit; - width: 100%; -} - -.overlay-tn .overlay-content-tn .opening-content-view-tn .inner-content-tn .inner-content-block-tn { - text-align: center; - padding: 20%; -} - -.overlay-tn button.opening-btn-tn { - margin: 0 0 24px 0; - transform: scale(1.1); - padding: 7px 14px; - width: auto; - cursor: pointer; - border: none; - font-size: 0.75rem; - font-size: max(0.75rem, 12px); -} - -.overlay-tn .overlay-content-tn .opening-content-view-tn .inner-content-tn { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - z-index: 100; - height: calc(100% - 4px); - width: 100%; -} - -.overlay-tn .overlay-content-tn .opening-content-view-tn { - position: absolute; - z-index: 100; - height: 100%; - width: 100%; -} - -.view-content-tn { - height: 100%; - flex: 50%; - position: relative; - width: 100%; -} - -.transition-wrapper-tn { - position: absolute; - width: 100%; - height: 100%; - display: flex; -} -.transition-wrapper-tn.slide-in-left-tn, .transition-wrapper-tn.slide-in-right-tn { - width: 200% !important; -} -.transition-wrapper-tn.slide-in-left-tn { - right: 0; -} -.transition-wrapper-tn.slide-in-left-tn.slide-in { - animation: slide-in-left 0.25s forwards ease-out; - -webkit-animation: slide-in-left 0.25s forwards ease-out; -} -.transition-wrapper-tn.slide-in-right-tn { - left: 0; -} -.transition-wrapper-tn.slide-in-right-tn.slide-in { - animation: slide-in-right 0.25s forwards ease-out; - -webkit-animation: slide-in-right 0.25s forwards ease-out; -} -.transition-wrapper-tn.slide-in-top-tn, .transition-wrapper-tn.slide-in-bottom-tn { - height: 200% !important; - flex-direction: column; -} -.transition-wrapper-tn.slide-in-top-tn { - bottom: 0; -} -.transition-wrapper-tn.slide-in-top-tn.slide-in { - animation: slide-in-top 0.25s forwards ease-out; - -webkit-animation: slide-in-top 0.25s forwards ease-out; -} -.transition-wrapper-tn.slide-in-bottom-tn { - top: 0; -} -.transition-wrapper-tn.slide-in-bottom-tn.slide-in { - animation: slide-in-bottom 0.25s forwards ease-out; - -webkit-animation: slide-in-bottom 0.25s forwards ease-out; -} - -@keyframes slide-in-left { - 100% { - transform: translateX(50%); - } -} -@-webkit-keyframes slide-in-left { - 100% { - -webkit-transform: translateX(50%); - } -} -@keyframes slide-in-right { - 100% { - transform: translateX(-50%); - } -} -@-webkit-keyframes slide-in-right { - 100% { - -webkit-transform: translateX(-50%); - } -} -@keyframes slide-in-top { - 100% { - transform: translateY(50%); - } -} -@-webkit-keyframes slide-in-top { - 100% { - -webkit-transform: translateY(50%); - } -} -@keyframes slide-in-bottom { - 100% { - transform: translateY(-50%); - } -} -@-webkit-keyframes slide-in-bottom { - 100% { - -webkit-transform: translateY(-50%); - } -} -.scroll-tn { - overflow: hidden scroll; - height: 100%; -} - -.issuer-view-tn, -.token-view-tn { - width: 100%; -} - -.overlay-tn .wallet-button-container-tn { - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: center; - padding: 10px 0 20px 0; -} - -.overlay-tn .wallet-button-container-tn p { - margin: 0; - padding: 0; -} - -.overlay-tn .wallet-button-tn { - margin: 16px; - background: none; - color: inherit; - border: none; - padding: 0; - font: inherit; - cursor: pointer; - outline: inherit; - width: 132px; - opacity: 0.8; -} - -.overlay-tn .skeleton-box { - display: inline-block; - position: relative; - overflow: hidden; - background-color: #dddbdd; -} - -.overlay-tn .skeleton-box::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - transform: translateX(-100%); - background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0)); - -webkit-animation: shimmer 2s infinite; - animation: shimmer 2s infinite; - content: ""; -} - -@-webkit-keyframes shimmer { - 100% { - transform: translateX(100%); - } -} -@keyframes shimmer { - 100% { - transform: translateX(100%); - } -} -@keyframes a0_t { - 0% { - transform: translate(13px, 28.5px) translate(-13px, -13.5px); - animation-timing-function: cubic-bezier(0, 0, 0.6, 1); - } - 100% { - transform: translate(27.1px, 28.1px) translate(-17.1px, -17.1px); - } -} -@keyframes a0_d { - 0% { - d: path("M25.5,26C25.5,26,20.5,26,20.5,26C20.5,23.1,19.9,20.4,18.8,17.9C17.8,15.6,16.4,13.6,14.6,11.8C12.7,9.9,10.3,8.4,7.8,7.4C5.5,6.5,3,6,.5,6L.5,1C.5,1,.5,1,.5,1C.5,1,7.5,1,7.5,1L25.5,1L25.5,7.2C25.5,7.2,25.5,12.8,25.5,12.8C25.5,12.8,25.5,19,25.5,19Z"); - animation-timing-function: cubic-bezier(0, 0, 0.6, 1); - } - 100% { - d: path("M31.8,32.8C31.5,33.2,30.9,33.4,30.4,33.4C29.9,33.4,29.4,33.2,29,32.8C29,32.8,1.4,5.2,1.4,5.2C1,4.8,.8,4.3,.8,3.8C.8,3.3,1,2.8,1.4,2.4L2.4,1.4C2.7,1,3.3,.8,3.8,.8C4.3,.8,4.8,1,5.2,1.4L5.2,1.4L32.8,29C33.2,29.4,33.4,29.9,33.4,30.4C33.4,30.9,33.2,31.5,32.8,31.8Z"); - } -} -@keyframes a1_d { - 0% { - d: path("M53,1C53,1,53,1,53,1C53,1,53,12.9,53,12.9L53,19C53,19,53,26,53,26C53,26,40.2,26,40.2,26L34.1,26C34.1,26,28,26,28,26C28,26,28,12.6,28,12.6L28,7.4C28,7.4,28,1,28,1C28,1,40.6,1,40.6,1C40.6,1,45.9,1,45.9,1Z"); - animation-timing-function: cubic-bezier(0, 0, 0.6, 1); - } - 100% { - d: path("M29,1.4C29.4,1,29.9,.8,30.4,.8C30.9,.8,31.5,1,31.8,1.4L32.8,2.4C33.2,2.7,33.4,3.3,33.4,3.8C33.4,4.3,33.2,4.8,32.8,5.2L5.2,32.8C4.8,33.2,4.3,33.4,3.8,33.4C3.3,33.4,2.8,33.2,2.4,32.8L1.4,31.8C1,31.5,.8,30.9,.8,30.4C.8,29.9,1,29.4,1.4,29C1.4,29,29,1.4,29,1.4Z"); - } -} -@media (max-width: 375px) { - .overlay-tn .overlay-content-tn { - width: 328px !important; - } -} -@media (max-width: 360px) { - .overlay-tn .overlay-content-tn { - width: 312px !important; - } -} -@media (max-width: 340px) { - .overlay-tn .overlay-content-tn { - width: 274px !important; - } -} -@keyframes openAnimation { - 0% { - mask-position: 0 0; - -webkit-mask-position: 0 0; - } - 100% { - mask-position: -220px 0px; - -webkit-mask-position: -220px 0px; - } -} -@keyframes closeAnimation { - 0% { - mask-position: -220px 0px; - -webkit-mask-position: -220px 0px; - } - 100% { - mask-position: 0 0; - -webkit-mask-position: 0 0; - } -} -/* dark theme */ -.overlay-tn.dark-tn .wallet-button-tn p { - color: black; -} - -.overlay-tn.dark-tn .retry { - border-color: darkorange !important; -} - -.overlay-tn.dark-tn .headline-container-tn { - border-bottom: solid 1px #1f1f1f; -} - -.overlay-tn.dark-tn .wallet-selection-view-tn, -.overlay-tn.dark-tn .overlay-content-tn .opening-content-view-tn { - background: #000; -} - -.overlay-tn.dark-tn .opening-heading-tn, -.overlay-tn.dark-tn .wallet-button-tn p { - color: darkgrey; -} - -.overlay-tn.dark-tn .headline-container-tn p { - color: white; -} - -.overlay-tn.dark-tn li.issuer-connect-banner-tn { - color: white; - border-bottom: 1px solid #161616; -} - -.overlay-tn.dark-tn .overlay-fab-button-tn:focus { - outline-color: #dd980f; -} - -.overlay-tn.dark-tn .overlay-fab-button-tn { - background: #fff; - box-shadow: 0 2px 5px 0 #676767; -} - -.overlay-tn.dark-tn .overlay-fab-button-tn-img-container { - background-color: #000; /* set fill color of SVG image mask */ -} - -.overlay-tn.dark-tn #svg-tn-right, -#svg-tn-left { - fill: #fff; -} - -.overlay-tn.popup-tn.dark-tn .overlay-content-tn:hover { - box-shadow: 0 2px 3px 0 #676767; -} - -.overlay-tn.dark-tn .overlay-content-tn .token-title-tn { - color: #fff; -} - -.overlay-tn.dark-tn .overlay-content-tn { - box-shadow: 0 2px 4px 0 rgba(103, 103, 103, 0.5); - background-color: black; - border-top: 4px solid white; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 4px; - border-top-left-radius: 3px; -} - -.overlay-tn.dark-tn .overlay-content-tn .token-tn { - border-top: solid 1px #161616; -} - -.overlay-tn.dark-tn .overlay-content-tn .token-tn:last-child { - border-bottom: solid 1px #1f1f1f; -} - -.overlay-tn.dark-tn .overlay-content-tn .headline-tn, -.overlay-tn.dark-tn .overlay-content-tn .token-tn .detail-tn, -.overlay-tn.dark-tn .overlay-content-tn .token-tn .title-tn { - color: white; -} - -.overlay-tn.dark-tn .opening-btn-tn:hover, -.overlay-tn.dark-tn .tokens-btn-tn:hover, -.overlay-tn.dark-tn .fungible-token-btn:hover, -.overlay-tn.dark-tn .connect-btn-tn:hover, -.overlay-tn.dark-tn .btn-tn:hover { - background: #343434 !important; -} - -.overlay-tn.dark-tn .opening-btn-tn, -.overlay-tn.dark-tn li.issuer-connect-banner-tn .connect-btn-tn, -.overlay-tn.dark-tn li.issuer-connect-banner-tn .tokens-btn-tn, -.overlay-tn.dark-tn li.issuer-connect-banner-tn .fungible-token-btn, -.overlay-tn.dark-tn .btn-tn { - color: white; - background: #282828; - border: 1px solid #303030; - font-weight: 400; -} -.overlay-tn.dark-tn .opening-btn-tn > svg, -.overlay-tn.dark-tn li.issuer-connect-banner-tn .connect-btn-tn > svg, -.overlay-tn.dark-tn li.issuer-connect-banner-tn .tokens-btn-tn > svg, -.overlay-tn.dark-tn li.issuer-connect-banner-tn .fungible-token-btn > svg, -.overlay-tn.dark-tn .btn-tn > svg { - fill: white; -} - -.overlay-tn.dark-tn .dismiss-error-tn { - border: 1px solid #404040 !important; -} - -.overlay-tn.dark-tn .overlay-content-tn .toggle-tn { - background: black; -} - -.overlay-tn.dark-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn + label { - border: 3px solid black; - background: white; -} - -.overlay-tn.dark-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn + label:after { - background: #282828; - border: 1px solid #323232; -} - -.overlay-tn.dark-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn:checked + label { - border: 3px solid #723f00; -} - -.overlay-tn.dark-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn:checked + label:before { - background: #723f00; -} - -.overlay-tn.dark-tn .overlay-content-tn .issuer-connect-title { - color: white; -} - -.overlay-tn.dark-tn .overlay-content-tn .toggle-tn input:focus + label { - border: 3px solid #dd980f !important; -} - -/* loader */ -.dark-tn .lds-ellipsis-sm div { - background: #fff; -} - -/* light theme */ -.overlay-tn.light-tn .overlay-fab-button-tn { - background: black; - box-shadow: 0 2px 5px 0 #676767; -} - -.overlay-tn.light-tn .overlay-fab-button-tn-img-container { - background-color: #fff; /* set fill color of SVG image mask */ -} - -.overlay-tn.light-tn .overlay-content-tn .opening-content-view-tn { - background: white; -} - -.overlay-tn.light-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn + label:after { - background: #f1f1f1; - box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05); -} - -.overlay-tn.light-tn li.issuer-connect-banner-tn { - color: black; - border-bottom: 1px solid #ececec; -} - -.overlay-tn.light-tn .opening-btn-tn:hover, -.overlay-tn.light-tn .tokens-btn-tn:hover, -.overlay-tn.light-tn .fungible-token-btn:hover, -.overlay-tn.light-tn .connect-btn-tn:hover, -.overlay-tn.light-tn .btn-tn:hover { - background: #c5c5c5 !important; -} - -.overlay-tn.light-tn .opening-btn-tn, -.overlay-tn.light-tn li.issuer-connect-banner-tn .connect-btn-tn, -.overlay-tn.light-tn li.issuer-connect-banner-tn .tokens-btn-tn, -.overlay-tn.light-tn li.issuer-connect-banner-tn .fungible-token-btn, -.overlay-tn.light-tn .btn-tn { - color: black; - background: #efefef; - font-weight: 400; -} - -.overlay-tn.light-tn li.issuer-connect-banner-tn .connect-btn-tn, -.overlay-tn.light-tn li.issuer-connect-banner-tn .tokens-btn-tn, -.overlay-tn.light-tn li.issuer-connect-banner-tn .fungible-token-btn, -.overlay-tn.light-tn .btn-tn { - border: 1px solid #efefef; -} - -.overlay-tn.popup-tn.light-tn .overlay-content-tn:hover { - box-shadow: 0 2px 3px 0 #676767; -} - -.overlay-tn.light-tn .overlay-content-tn { - box-shadow: 0 2px 4px 0 rgba(103, 103, 103, 0.5); - background-color: #ffffff; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 4px; - border-top-left-radius: 3px; - border-top: 4px solid black; -} - -.overlay-tn.light-tn .overlay-content-tn .token-tn .title-tn, -.overlay-tn.light-tn .overlay-content-tn .headline-tn { - font-weight: 700; - color: #000000; - width: 100%; -} - -.overlay-tn.light-tn .overlay-content-tn .token-tn { - border-top: solid 1px #e9e9e9; -} - -.overlay-tn.light-tn .overlay-content-tn .token-tn:last-child { - border-bottom: solid 1px #e9e9e9; -} - -.overlay-tn.light-tn .overlay-content-tn .token-tn .detail-tn { - color: #727272; -} - -.overlay-tn.light-tn .overlay-content-tn .toggle-tn { - background: white; -} - -.overlay-tn.light-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn + label { - border: 3px solid #c6c5c5; - background: #c6c5c5; -} - -.overlay-tn.light-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn:checked + label { - border: 3px solid #88bff6; -} - -.overlay-tn.light-tn .overlay-content-tn .toggle-tn input.mobileToggle-tn:checked + label:before { - background: #88bff6; -} - -.overlay-tn.light-tn .overlay-content-tn .toggle-tn input:focus + label { - border: 3px solid #005fcc !important; -} - -.overlay-tn.light-tn #svg-tn-right, -#svg-tn-left { - fill: white; -} - -.overlay-tn.light-tn .retry { - border-color: darkorange !important; -} - -.overlay-tn.light-tn .opening-heading-tn { - color: black; -} - -/* Modal for handling input required by attestation.ID (wallet connection setup for instance) */ -.modal-tn { - display: none; - position: fixed; - z-index: 9999; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(0, 0, 0, 0.5); -} - -.modal-close-tn { - color: #000; - float: right; - font-size: 24px; - font-weight: bold; - height: 30px; - width: 30px; - text-align: center; - border-radius: 15px; - background: #fff; - line-height: 28px; - margin-bottom: 5px; - margin-left: 2px; - box-sizing: border-box; -} - -.modal-close-tn:hover, -.modal-close-tn:focus { - color: #696969; - text-decoration: none; - cursor: pointer; - -webkit-transition: all 200ms ease-in; - transition: all 200ms ease-in; -} - -.modal-header-tn { - padding: 2px 16px; - /*background-color: #5cb85c;*/ - color: white; - width: 100%; - position: relative; -} - -.modal-body-tn { - padding: 2px 16px; - width: 100%; -} - -.modal-body-tn iframe { - width: 100%; - min-height: 620px; - background-color: #fff; - border: 6px solid #696969; - border-radius: 3px; -} - -/* Modal Content */ -.modal-content-tn { - width: 430px; - position: relative; - background-color: transparent; - margin: auto; - padding: 0; - -webkit-animation-name: animatetop; - -webkit-animation-duration: 0.4s; - animation-name: animatetop; - animation-duration: 0.4s; - min-height: 100vh; - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; -} - -/* Add Animation */ -@-webkit-keyframes animatetop { - from { - top: -300px; - opacity: 0; - } - to { - top: 0; - opacity: 1; - } -} -@keyframes animatetop { - from { - top: -300px; - opacity: 0; - } - to { - top: 0; - opacity: 1; - } -} - -/*# sourceMappingURL=style.css.map */ diff --git a/ecommerce-store-website/scripts/copy_tn_css.js b/ecommerce-store-website/scripts/copy_tn_css.js deleted file mode 100644 index 8769c87a5..000000000 --- a/ecommerce-store-website/scripts/copy_tn_css.js +++ /dev/null @@ -1,14 +0,0 @@ -#!/usr/bin/env node - -const fs = require("fs"); -const path = require("path"); - -const cssDir = path.join(__dirname, "..", "public", "css") -const tnCss = path.join(__dirname, "..", "node_modules/@tokenscript/token-negotiator/dist/theme/style.css") -const publicCss = path.join(__dirname, "..", "public/css/tn_style.css") - -if (!fs.existsSync(cssDir)){ - fs.mkdirSync(cssDir); -} - -fs.createReadStream(tnCss).pipe(fs.createWriteStream(publicCss)); diff --git a/ecommerce-store-website/src/base/state.js b/ecommerce-store-website/src/base/state.js index 9fdbc767d..7314e4731 100644 --- a/ecommerce-store-website/src/base/state.js +++ b/ecommerce-store-website/src/base/state.js @@ -1,7 +1,8 @@ // Dependencies import create from 'zustand'; -import { subscribeWithSelector } from 'zustand/middleware'; +import { subscribeWithSelector } from 'zustand/middleware' +import _debounce from 'lodash-es/debounce'; import _isNil from 'lodash-es/isNil'; // diff --git a/ecommerce-store-website/src/pages/_app.js b/ecommerce-store-website/src/pages/_app.js index 91dded837..d1a604370 100644 --- a/ecommerce-store-website/src/pages/_app.js +++ b/ecommerce-store-website/src/pages/_app.js @@ -2,8 +2,6 @@ // Dependencies import PropTypes from 'prop-types'; -import { useEffect, useState } from 'react'; - // App import { useStore } from 'base/state'; import { Layout as DefaultLayout, Context } from 'ui/app'; @@ -15,7 +13,7 @@ import { TokenContextProvider } from '../providers/TokenContextProvider'; // Styles import 'styles/index.scss'; import "./ui/styles/_app.scss"; -// import "@tokenscript/token-negotiator/dist/theme/style.css"; +import "@tokenscript/token-negotiator/dist/theme/style.css"; const CONTEXT_VIEWS = { 'register-thanks': { @@ -27,12 +25,6 @@ export default function App({ Component, pageProps }) { const Layout = Component.Layout ?? DefaultLayout; const api = useStore( s => s.api ); - - const [isMounted,setIsMounted] = useState(false); // Need this for the react-tooltip - - useEffect(() => { - setIsMounted(true); - },[]); return ( @@ -41,11 +33,6 @@ export default function App({ Component, pageProps }) { api.setContextView() } views={ CONTEXT_VIEWS } />
- {isMounted &&
`, - }} - >
} ); }; diff --git a/ecommerce-store-website/src/providers/TokenContextProvider.js b/ecommerce-store-website/src/providers/TokenContextProvider.js index fde4fa967..30a33a68a 100644 --- a/ecommerce-store-website/src/providers/TokenContextProvider.js +++ b/ecommerce-store-website/src/providers/TokenContextProvider.js @@ -1,13 +1,13 @@ import React, {createContext, useState, useEffect, useMemo} from "react"; -import {chainMap} from "src/base/utils/network"; +import { chainMap } from "src/base/utils/network"; const TokenContext = createContext({ tokens: {}, wallet: {}, proof: {}, negotiator: {}, - walletStatus: "", - chainId: "", + walletStatus: '', + chainId: '', switchChain: undefined }); @@ -17,22 +17,22 @@ const mumbaiIssuers = [ onChain: true, contract: "0x594CeCc147F8F27fF6d269AE23D9a0Ff27d979F4", chain: "mumbai", - openSeaSlug: undefined + openSeaSlug: undefined, }, { collectionID: "stl-wow-mumbai", onChain: true, contract: "0xa432AC92c386b9929Bd9308C4e98505ac22d3A00", chain: "mumbai", - openSeaSlug: undefined + openSeaSlug: undefined, }, { collectionID: "stl-riot-racer-mumbai", onChain: true, contract: "0x165B81C550263f6E9AC9B1852D6A8bAC9538E6d7", chain: "mumbai", - openSeaSlug: undefined - } + openSeaSlug: undefined, + }, ]; const goerliIssuers = [ @@ -41,22 +41,22 @@ const goerliIssuers = [ onChain: true, contract: "0xc361201E5B1005cCDE47B32F223BC145DE393F62", chain: "goerli", - openSeaSlug: undefined + openSeaSlug: undefined, }, { collectionID: "stl-wow-goerli", onChain: true, contract: "0x87644E0A1287A4D96DecC29A13400a1be9759AF8", chain: "goerli", - openSeaSlug: undefined + openSeaSlug: undefined, }, { collectionID: "stl-riot-racer-goerli", onChain: true, contract: "0xae96095fF42B0Cae2DaD3d49E5EE11663280d819", chain: "goerli", - openSeaSlug: undefined - } + openSeaSlug: undefined, + }, ]; const TokenContextProvider = (props) => { @@ -64,114 +64,103 @@ const TokenContextProvider = (props) => { const [tokens, setTokens] = useState([]); const [proof, setProof] = useState(); const [wallet, setWallet] = useState(); - const [walletStatus, setWalletStatus] = useState(""); - const [chainId, setChainId] = useState(""); + const [walletStatus, setWalletStatus] = useState(''); + const [ chainId, setChainId ] = useState(''); useEffect(() => { - setTimeout(() => { - import("@tokenscript/token-negotiator").then((negotiatorInstance) => { - let currentIssuers = goerliIssuers; - const newNegotiator = new negotiatorInstance.Client({ - type: "active", + + import("@tokenscript/token-negotiator").then((negotiatorInstance) => { + let currentIssuers = goerliIssuers; + const newNegotiator = new negotiatorInstance.Client({ + type: "active", issuers: [...currentIssuers], uiOptions: { openingHeading: "Open a new world of discounts available with your tokens.", issuerHeading: "Get discounts with tokens", repeatAction: "try again", - position: "bottom-right" + position: "bottom-right", }, ipfsBaseUrl: "https://smart-token-labs-demo-server.mypinata.cloud/ipfs/", - walletOptions: { - walletConnectV2: { - chains: ["eip155:5", "eip155:80001"] - } - } - }); - - setNegotiator(newNegotiator); - window.negotiator = newNegotiator; - - newNegotiator.on("tokens-selected", (tokens) => { - setTokens({...tokens.selectedTokens}); - }); - - newNegotiator.on("token-proof", (result) => { - setProof(result.data); - }); - - newNegotiator.on("connected-wallet", (connectedWallet) => { - if (connectedWallet) { - setWallet(connectedWallet); - resetIssuers(connectedWallet.chainId); - setWalletStatus(undefined); - } else { - setWallet(null); - setTokens({}); - setWalletStatus("You must connect your wallet to continue."); - } - }); - - const resetIssuers = (networkId) => { - if (!networkId) return; - - if (typeof networkId === "string") - networkId = parseInt(networkId, 16); - - console.log("New chain ID: ", networkId); - - setChainId(networkId); - - const normalisedNetworkId = chainMap[networkId] - ? chainMap[networkId] - : ""; - - switch (normalisedNetworkId) { - case "Goerli": - window.negotiator.negotiate(goerliIssuers); - break; - case "Mumbai": - window.negotiator.negotiate(mumbaiIssuers); - break; - default: - break; - } - }; - - newNegotiator.on("network-change", (chain) => { - resetIssuers(chain); - const walletConnection = - newNegotiator.web3WalletProvider.getConnectedWalletData(); - if (walletConnection.length > 0) { - setWallet(walletConnection[0]); - } - }); - - newNegotiator.negotiate(); + walletOptions: { + walletConnectV2: { + chains: ["eip155:5", "eip155:80001"] + } + } + }); + + setNegotiator(newNegotiator); + window.negotiator = newNegotiator; + + newNegotiator.on("tokens-selected", (tokens) => { + setTokens({...tokens.selectedTokens}); + }); + + newNegotiator.on("token-proof", (result) => { + setProof(result.data); + }); + + newNegotiator.on("connected-wallet", (connectedWallet) => { + if (connectedWallet) { + setWallet(connectedWallet); + resetIssuers(connectedWallet.chainId); + setWalletStatus(undefined); + } else { + setWallet(null); + setTokens({}); + setWalletStatus('You must connect your wallet to continue.'); + } }); - }, 0); + + newNegotiator.on("network-change", (chain) => { + resetIssuers(chain); + const walletConnection = newNegotiator.web3WalletProvider.getConnectedWalletData(); + if(walletConnection.length > 0) { + setWallet(walletConnection[0]); + } + }); + + newNegotiator.negotiate(); + }); + }, []); - async function switchChain(nChainId) { + const resetIssuers = (networkId) => { + if (!networkId) return; + + if (typeof networkId === "string") + networkId = parseInt(networkId, 16); + + console.log("New chain ID: ", networkId); + + setChainId(networkId); + + const normalisedNetworkId = chainMap[networkId] + ? chainMap[networkId] + : ""; + + switch (normalisedNetworkId) { + case "Goerli": + window.negotiator.negotiate(goerliIssuers); + break; + case "Mumbai": + window.negotiator.negotiate(mumbaiIssuers); + break; + default: + break; + } + }; + + async function switchChain(nChainId){ // Try automatically switching to Goerli - await wallet.provider.send("wallet_switchEthereumChain", [ - {chainId: "0x" + Number(nChainId).toString(16)} - ]); - resetIssuers(nChainId); + await wallet.provider.send("wallet_switchEthereumChain", [{chainId: "0x" + Number(nChainId).toString(16)}]); + resetIssuers(nChainId); } const tokenContextProviderValue = useMemo( - () => ({ - tokens, - negotiator, - wallet, - proof, - walletStatus, - chainId, - switchChain - }), - [tokens, negotiator, wallet, proof, walletStatus, chainId, switchChain] + () => ({ tokens, negotiator, wallet, proof, walletStatus, chainId, switchChain }), + [tokens, negotiator, wallet, proof, walletStatus, chainId, switchChain] ); return ( @@ -181,4 +170,4 @@ const TokenContextProvider = (props) => { ); }; -export {TokenContextProvider, TokenContext}; +export { TokenContextProvider, TokenContext }; diff --git a/ecommerce-store-website/src/styles/modules/dev/_functions.scss b/ecommerce-store-website/src/styles/modules/dev/_functions.scss new file mode 100644 index 000000000..b28b04f64 --- /dev/null +++ b/ecommerce-store-website/src/styles/modules/dev/_functions.scss @@ -0,0 +1,3 @@ + + + diff --git a/ecommerce-store-website/src/styles/modules/dev/index.scss b/ecommerce-store-website/src/styles/modules/dev/index.scss index 8e1f3f0a6..89edd23f0 100644 --- a/ecommerce-store-website/src/styles/modules/dev/index.scss +++ b/ecommerce-store-website/src/styles/modules/dev/index.scss @@ -6,3 +6,4 @@ @forward 'config'; +@forward 'functions'; diff --git a/ecommerce-store-website/src/ui/app/header/header.js b/ecommerce-store-website/src/ui/app/header/header.js index 8ddef3136..79c9a9253 100644 --- a/ecommerce-store-website/src/ui/app/header/header.js +++ b/ecommerce-store-website/src/ui/app/header/header.js @@ -1,12 +1,14 @@ + // Dependencies -import React, {useState, useRef, useEffect, useContext} from "react"; +import React, { useState, useRef, useEffect, useContext } from "react"; import PropTypes from "prop-types"; import clsx from "clsx"; -import {useRouter} from "next/router"; +import { useRouter } from "next/router"; +import _ from "lodash"; // App -import {Logo, Link, Nav, Button, Icon, Layer} from "ui/components"; -import {TokenContext} from "src/providers/TokenContextProvider"; +import { Logo, Link, Nav, Button, Image, Icon, Layer } from "ui/components"; +import { TokenContext } from "src/providers/TokenContextProvider"; // Styles import styles from "./header.module.scss"; @@ -15,145 +17,97 @@ import styles from "./header.module.scss"; // Brand Connector Demo / UI / Components / Header // -const Header = function Header({className}) { - const router = useRouter(); - const {wallet, negotiator, tokens} = useContext(TokenContext); +const Header = function Header({ className }) { + const router = useRouter(); + const { wallet, negotiator, tokens } = useContext(TokenContext); - const walletAddress = wallet ? wallet.address : undefined; + const walletAddress = wallet ? wallet.address : undefined; - let tokensFound = 0; + let tokensFound = 0; + + if(Object.keys(tokens)) { + tokensFound = Object.keys(tokens).map(( tokenCollection ) => { + return tokens[tokenCollection].tokens.length; + }) + if(tokensFound.length) tokensFound = tokensFound.reduce((a, b) => a + b); + else tokensFound = 0; + } - if (Object.keys(tokens)) { - tokensFound = Object.keys(tokens).map((tokenCollection) => { - return tokens[tokenCollection].tokens.length; - }); - if (tokensFound.length) tokensFound = tokensFound.reduce((a, b) => a + b); - else tokensFound = 0; - } + const [ isMenuOpen, setIsMenuOpen ] = useState( false ); + const menuRef = useRef( null ); - const [isMenuOpen, setIsMenuOpen] = useState(false); - const menuRef = useRef(null); + useEffect( () => { + setIsMenuOpen( false ); + }, [ router.pathname ]); - useEffect(() => { - setIsMenuOpen(false); - }, [router.pathname]); + const handleClickConnect = () => { + if (negotiator) { + negotiator.ui.openOverlay(); + } + } - const handleClickConnect = () => { - setTimeout(() => { - if (typeof negotiator !== "undefined" || negotiator !== {}) { - negotiator.ui.openOverlay(); - } - }, 1000); - }; + const isDemoRoute = ['/demo/fashion', '/demo/music-and-events', '/demo/automotive'].find( route => route === router.pathname ); - const isDemoRoute = [ - "/demo/fashion", - "/demo/music-and-events", - "/demo/automotive" - ].find((route) => route === router.pathname); + return ( +
- return ( -
-
-
- a !== "/whats-on"} - > - - -
-
- - setIsMenuOpen(false)} - > -
-

Examples

- - Fashion - - - Music & - Event - - - Automotive - -
- -
-
-
- ); -}; +
+
+ a !== '/whats-on' }> + + +
+
+ + setIsMenuOpen( false ) }> +
+

Examples

+ + Fashion + + + Music & Event + + + Automotive + +
+ +
+
+
+ ); +} Header.propTypes = { - className: PropTypes.string, - children: PropTypes.node + className: PropTypes.string, + children: PropTypes.node, }; export default Header; diff --git a/ecommerce-store-website/src/ui/components/banner/banner.js b/ecommerce-store-website/src/ui/components/banner/banner.js index b0a61b0d9..2e2157b39 100644 --- a/ecommerce-store-website/src/ui/components/banner/banner.js +++ b/ecommerce-store-website/src/ui/components/banner/banner.js @@ -22,7 +22,9 @@ export default function Banner({ className, theme, image, headline, text, overla const [ imageW, imageH ] = imageDimensions; const handleOnClick = async () => { + // TODO: Actually pass the tokens through component const issuer = authTokens[0]; + console.log('issuer ==>', issuer); try { await window.negotiator.authenticate({ issuer, diff --git a/ecommerce-store-website/src/ui/components/form/field.module.scss b/ecommerce-store-website/src/ui/components/form/field.module.scss index 3b3ea0484..360014831 100644 --- a/ecommerce-store-website/src/ui/components/form/field.module.scss +++ b/ecommerce-store-website/src/ui/components/form/field.module.scss @@ -14,6 +14,12 @@ // Elements ---------------- + input[type] { + &:focus { + outline: 0; + } + } + input[type] { @include type-size( 'f6', $margin: 0 ); height: grid-baseline(8); @@ -31,10 +37,6 @@ &::placeholder { color: color-get( --field-text ); } - - &:focus { - outline: 0; - } } &_message { diff --git a/ecommerce-store-website/src/ui/components/headline/headline.js b/ecommerce-store-website/src/ui/components/headline/headline.js index 8484fc24c..12e8d585a 100644 --- a/ecommerce-store-website/src/ui/components/headline/headline.js +++ b/ecommerce-store-website/src/ui/components/headline/headline.js @@ -3,6 +3,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; +import _ from 'lodash-es'; + // Styles import styles from './headline.module.scss'; diff --git a/ecommerce-store-website/src/ui/components/image/image.js b/ecommerce-store-website/src/ui/components/image/image.js index 511fa8f6c..fdc50a867 100644 --- a/ecommerce-store-website/src/ui/components/image/image.js +++ b/ecommerce-store-website/src/ui/components/image/image.js @@ -3,6 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import NextImage from 'next/image'; +import _ from 'lodash'; import clsx from 'clsx'; // Styles diff --git a/ecommerce-store-website/src/ui/components/layer/layer.js b/ecommerce-store-website/src/ui/components/layer/layer.js index 6dbbc6dec..e7f5e8733 100644 --- a/ecommerce-store-website/src/ui/components/layer/layer.js +++ b/ecommerce-store-website/src/ui/components/layer/layer.js @@ -5,6 +5,7 @@ import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { useTransition, animated as a } from '@react-spring/web'; import clsx from 'clsx'; +import _ from 'lodash-es'; // Styles import styles from './layer.module.scss'; diff --git a/ecommerce-store-website/src/ui/components/minter/minter.js b/ecommerce-store-website/src/ui/components/minter/minter.js index 031a92cc1..acd21bf55 100644 --- a/ecommerce-store-website/src/ui/components/minter/minter.js +++ b/ecommerce-store-website/src/ui/components/minter/minter.js @@ -6,6 +6,7 @@ import clsx from 'clsx'; import { safeMint } from "base/utils/interact.js"; import { Card, Button, Headline, Image, PopUp } from 'ui/components'; import { TokenContext } from "src/providers/TokenContextProvider"; +import { useStore } from 'base/state'; import { chainMap } from 'base/utils/network'; import nftDataStore from 'base/nft-data-store'; @@ -117,10 +118,7 @@ export default function Minter({ className }) { let isMinted = mintedNFTs.indexOf( collectionItem.id ) > -1 || tokenIsSelected; return ( - + { title }

{ description }

diff --git a/ecommerce-store-website/src/ui/components/popup/popup.js b/ecommerce-store-website/src/ui/components/popup/popup.js index 3c7043726..7f996f347 100644 --- a/ecommerce-store-website/src/ui/components/popup/popup.js +++ b/ecommerce-store-website/src/ui/components/popup/popup.js @@ -4,6 +4,7 @@ // Brand Connector Demo / UI / Components / PopUp // +import { useStore } from 'base/state'; export default function PopUp({ isOpen, closeEvent, msg }) { return ( diff --git a/ecommerce-store-website/src/ui/components/toast/toast.js b/ecommerce-store-website/src/ui/components/toast/toast.js index f02f5c78b..75c3bd5f0 100644 --- a/ecommerce-store-website/src/ui/components/toast/toast.js +++ b/ecommerce-store-website/src/ui/components/toast/toast.js @@ -35,6 +35,14 @@ export default function Toast({ className, isOpen, msg }) { color: 'black' }}>
+ {/* */}
{msg}
diff --git a/ecommerce-store-website/src/ui/hooks/use-breakpoint.js b/ecommerce-store-website/src/ui/hooks/use-breakpoint.js index dfc38d3dd..145161192 100644 --- a/ecommerce-store-website/src/ui/hooks/use-breakpoint.js +++ b/ecommerce-store-website/src/ui/hooks/use-breakpoint.js @@ -1,3 +1,7 @@ + +// Dependencies +import _ from 'lodash-es'; + // App import { usePropertyValues } from './'; diff --git a/ecommerce-store-website/src/ui/hooks/use-intersection.js b/ecommerce-store-website/src/ui/hooks/use-intersection.js index 61b984644..37f781520 100644 --- a/ecommerce-store-website/src/ui/hooks/use-intersection.js +++ b/ecommerce-store-website/src/ui/hooks/use-intersection.js @@ -2,6 +2,8 @@ // Dependencies import { useState, useRef, useEffect } from 'react'; +import _ from 'lodash-es'; + // // Brand Connector Demo / UI / App / Hooks / Intersection diff --git a/ecommerce-store-website/src/ui/views/car-industry/car-industry-view.js b/ecommerce-store-website/src/ui/views/car-industry/car-industry-view.js index 303c1b730..a44dfef2c 100644 --- a/ecommerce-store-website/src/ui/views/car-industry/car-industry-view.js +++ b/ecommerce-store-website/src/ui/views/car-industry/car-industry-view.js @@ -6,6 +6,7 @@ import clsx from 'clsx'; import { Page } from 'ui/app'; import { Link, Slider, Button } from 'ui/components'; import {useContext, useEffect, useState} from "react"; +import { useStore } from "src/base/state"; // Styles import styles from "./car-industry-view.module.scss"; diff --git a/ecommerce-store-website/src/ui/views/demo/automotive/automotive-view.js b/ecommerce-store-website/src/ui/views/demo/automotive/automotive-view.js index 3a0cf0928..5d4fa5d31 100644 --- a/ecommerce-store-website/src/ui/views/demo/automotive/automotive-view.js +++ b/ecommerce-store-website/src/ui/views/demo/automotive/automotive-view.js @@ -24,12 +24,12 @@ export default function AutomotiveView() { }; const vehicles = [ - { id: 1, image: { src: '/images/lambo-vehicle.webp', height: 282, width: 594 }, title: 'Lamborghini', description: 'Rare Aventador LP780-4 ‘22', price: 550, salePrice: 500 }, - { id: 2, image: { src: '/images/porsch-vehicle.webp', height: 282, width: 594 } , title: 'Porche', description: '911 GT3 RS Limited Edition ‘20', price: 290, salePrice: 250 }, - { id: 3, image: { src: '/images/lambo-urus-vehicle.webp', height: 282, width: 594 } , title: 'Lamborghini Urus Esteso 19', description: 'Limited Edition Urus Esteso ‘19', price: 450, salePrice: 400 }, - { id: 4, image: { src: '/images/mercedes-vehicle.webp', height: 282, width: 594 } , title: 'Mercedes', description: 'AMG GT Night Edition ‘21', price: 320, salePrice: 270 }, - { id: 5, image: { src: '/images/ferrari-vehicle.webp', height: 282, width: 594 } , title: 'Ferrari', description: 'Vulcan ‘21', price: 310, salePrice: 260 }, - { id: 6, image: { src: '/images/aston-martin-vehicle.webp', height: 282, width: 594 } , title: 'Aston Martin', description: 'Vulcan ‘21', price: 550, salePrice: 500 }, + { image: { src: '/images/lambo-vehicle.webp', height: 282, width: 594 }, title: 'Lamborghini', description: 'Rare Aventador LP780-4 ‘22', price: 550, salePrice: 500 }, + { image: { src: '/images/porsch-vehicle.webp', height: 282, width: 594 } , title: 'Porche', description: '911 GT3 RS Limited Edition ‘20', price: 290, salePrice: 250 }, + { image: { src: '/images/lambo-urus-vehicle.webp', height: 282, width: 594 } , title: 'Lamborghini Urus Esteso 19', description: 'Limited Edition Urus Esteso ‘19', price: 450, salePrice: 400 }, + { image: { src: '/images/mercedes-vehicle.webp', height: 282, width: 594 } , title: 'Mercedes', description: 'AMG GT Night Edition ‘21', price: 320, salePrice: 270 }, + { image: { src: '/images/ferrari-vehicle.webp', height: 282, width: 594 } , title: 'Ferrari', description: 'Vulcan ‘21', price: 310, salePrice: 260 }, + { image: { src: '/images/aston-martin-vehicle.webp', height: 282, width: 594 } , title: 'Aston Martin', description: 'Vulcan ‘21', price: 550, salePrice: 500 }, ] const { tokens: selectedTokens, chainId } = useContext(TokenContext); @@ -98,7 +98,7 @@ export default function AutomotiveView() { { vehicles && vehicles.map( ( vehicle, i ) => ( s.selectedTokens ); const { tokens: selectedTokens } = useContext(TokenContext); const promotionEnabled = checkNFTEligibility(selectedTokens, ['stl-wow-goerli', 'stl-wow-mumbai']); @@ -82,8 +84,8 @@ export default function Fashion() { World of Women
- { exclusiveProducts && exclusiveProducts.map( ( product ) => ( - + { exclusiveProducts && exclusiveProducts.map( ( product, i ) => ( + ))}
@@ -96,7 +98,7 @@ export default function Fashion() {
{ products && products.map( ( product, i ) => ( - + ))}