diff --git a/README.md b/README.md index be29f954..b26a9e79 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ A powerful and compliant web Analytics platform (1st-party alternative to Google AesirX Analytics comes with a locally hosted JavaScript solution that gathers and stores data legally and compliantly in accordance with GDPR and other regional legislation including storage of citizens’ data in-country and 1st-party. +*Important Change: AesirX Consent was split to another packages https://github.com/aesirxio/consent + ## Setup instructions ### Setup the 1st party server @@ -21,22 +23,11 @@ Follow the instructions in: [https://github.com/aesirxio/analytics-1stparty](htt ``` ``` 1. (`https://example.com` is the link to your 1st party server which must be installed) -2. `CLIENT_ID` replace this with the provided `CLIENT_ID` from https://dapp.shield.aesirx.io/ -3. `CLIENT_SECRET` replace this with the provided `CLIENT_SECRET` fromhttps://dapp.shield.aesirx.io/ - -##### Disable Consent Popup: -``` - -``` #### Usage in ReactJS @@ -46,18 +37,8 @@ Follow the instructions in: [https://github.com/aesirxio/analytics-1stparty](htt ``` REACT_APP_ENDPOINT_ANALYTICS_URL=https://example.com -REACT_APP_SSO_CLIENT_ID=[REPLACE THIS WITH THE PROVIDED CLIENT_ID] -REACT_APP_SSO_CLIENT_SECRET=[REPLACE THIS WITH THE PROVIDED CLIENT_SECRET] (https://example.com is the link to your 1st party server) -`CLIENT_ID` replace this with the provided `CLIENT_ID` from https://dapp.shield.aesirx.io/ -`CLIENT_SECRET` replace this with the provided `CLIENT_SECRET` fromhttps://dapp.shield.aesirx.io/ -``` - -##### Disable Consent Popup: -add this environment variable to `.env` -``` -REACT_APP_DISABLE_ANALYTICS_CONSENT=true ``` ###### With react-router-dom v5: @@ -89,12 +70,8 @@ export default AnalyticsContainer; ``` NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL=https://example.com -NEXT_PUBLIC_SSO_CLIENT_ID=[REPLACE THIS WITH THE PROVIDED CLIENT_ID] -NEXT_PUBLIC_SSO_CLIENT_SECRET=[REPLACE THIS WITH THE PROVIDED CLIENT_SECRET] (https://example.com is the link to your 1st party server) -`CLIENT_ID` replace this with the provided `CLIENT_ID` from https://dapp.shield.aesirx.io/ -`CLIENT_SECRET` replace this with the provided `CLIENT_SECRET` fromhttps://dapp.shield.aesirx.io/ ``` ##### Disable Consent Popup: @@ -239,220 +216,3 @@ const CustomEvent = () => { (`endPoint` is the link to your 1st party server which must be installed) (`referer` is the referer domain) - -## Customize CSS for Consent modal -Please follow below CSS example: -``` - // Customize toast - .aesirxconsent .toast { - --aesirxconsent-toast-font-size: 16px; - --aesirxconsent-toast-padding-x: 0.75rem; - --aesirxconsent-toast-padding-y: 0.5rem; - --aesirxconsent-toast-spacing: 1.5rem; - --aesirxconsent-toast-zindex: 1049; - } - // Customize button - .aesirxconsent .btn { - --aesirxconsent-btn-font-size: 16px; - --aesirxconsent-btn-padding-x: 0.75rem; - --aesirxconsent-btn-padding-y: 0.375rem; - --aesirxconsent-btn-font-weight: 400; - --aesirxconsent-btn-line-height: 1.5; - } - // Customize button success - .aesirxconsent .btn-success { - --aesirxconsent-btn-color: #000; - --aesirxconsent-btn-bg: #1ab394; - --aesirxconsent-btn-border-color: #1ab394; - --aesirxconsent-btn-hover-color: #000; - --aesirxconsent-btn-hover-bg: #3cbea4; - --aesirxconsent-btn-hover-border-color: #31bb9f; - --aesirxconsent-btn-focus-shadow-rgb: 22, 152, 126; - --aesirxconsent-btn-active-color: #000; - --aesirxconsent-btn-active-bg: #48c2a9; - --aesirxconsent-btn-active-border-color: #31bb9f; - --aesirxconsent-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --aesirxconsent-btn-disabled-color: #000; - --aesirxconsent-btn-disabled-bg: #1ab394; - --aesirxconsent-btn-disabled-border-color: #1ab394; - } - // To customize CSS for dark mode (Bootstrap dark mode) - [data-bs-theme=dark] .aesirxconsent { - color: #fff; - } -``` - - -## Choose template for Consent modal - -There is 5 template for Consent modal -1. default (recommend) - 1. Support Advance Consent Mode v2 -2. simple-consent-mode - 1. Support Basic Consent Mode v2 - -#### Usage in SSR site: -``` - -``` - -#### In ReactJS: - -add this environment variable to `.env` -``` -REACT_APP_CONSENT_LAYOUT=default -``` - -#### In NextJS: - -add this environment variable to `.env` -``` -NEXT_PUBLIC_CONSENT_LAYOUT=default -``` - -## Opt-in Consent - -#### Usage in SSR site: -``` - -``` - -(We also provive option `replaceAnalyticsConsent` to replace Analytics Consent with Opt-in Consent) -``` - -``` - -#### In ReactJS: -``` -const OptInConsent = React.lazy( - () => import('./OptInConsent').then(module => ({ default: module.OptInConsent })) -); -const ConsentComponent = () => { - const [showModal, setShowModal] = useState(false); - const handleOpen = () => { - setShowModal(true); - }; - const handleConsent = () => { - setShowModal(false); - }; - const handleReject = () => { - setShowModal(false); - }; - return ( - <> - YOUR_CONTENT_INPUT_HERE`, - show: showModal, - handleConsent: handleConsent, - handleReject: handleReject - }, - ]} - /> - - ); -}; -``` -(We also provive option `replaceAnalyticsConsent` to replace Analytics Consent with Opt-in Consent) -To use this in ReactJS please add `isOptInReplaceAnalytics` to our provider first -``` - - {children} - -``` -``` -YOUR_CONTENT_INPUT_HERE`, - show: showModal, - handleConsent: handleConsent, - handleReject: handleReject, - replaceAnalyticsConsent: "true" - }, - ]} -/> -``` -#### In NextJS: -``` -import dynamic from "next/dynamic"; -const OptInConsent = dynamic( - () => import("aesirx-analytics").then((module) => module.OptInConsent), - { - loading: () =>
Loading...
, - ssr: false, - } -); - -const ConsentComponent = () => { - const [showModal, setShowModal] = useState(false); - const handleOpen = () => { - setShowModal(true); - }; - const handleConsent = () => { - setShowModal(false); - }; - const handleReject = () => { - setShowModal(false); - }; - return ( - <> - YOUR_CONTENT_INPUT_HERE`, - show: showModal, - handleConsent: handleConsent, - handleReject: handleReject - }, - ]} - /> - - ); -}; -``` -(We also provive option `replaceAnalyticsConsent` to replace Analytics Consent with Opt-in Consent) -To use this in NextJS please add `isOptInReplaceAnalytics` to our provider first -``` - - <[YOUR-COMPONENT]/> - -``` -``` -YOUR_CONTENT_INPUT_HERE`, - show: showModal, - handleConsent: handleConsent, - handleReject: handleReject, - replaceAnalyticsConsent: "true" - }, - ]} -/> -``` \ No newline at end of file diff --git a/package.json b/package.json index 52501cf5..fa8d11bc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aesirx-analytics", - "version": "2.3.6", + "version": "2.4.0", "license": "GPL-3.0-only", "author": "AesirX", "repository": "https://gitlab.redweb.dk/aesirx/analytics", @@ -9,30 +9,16 @@ "types": "dist/index.d.ts", "type": "module", "dependencies": { - "@concordium/browser-wallet-api-helpers": "3.0.1", - "@concordium/react-components": "0.6.1", - "@concordium/web-sdk": "7.0.4-rc.3", - "@web3modal/ethereum": "^2.7.0", - "@web3modal/react": "^2.7.0", - "aesirx-sso": "^1.4.18", - "axios": "^1.7.4", "bootstrap": "^5.3.2", "bowser": "^2.11.0", "buffer": "^6.0.3", "ethers": "^6.6.5", - "i18next": "^23.6.0", - "i18next-browser-languagedetector": "^7.2.1", "murmurhash-js": "^1.0.0", "next": "^14.2.10", "query-string": "^7.1.1", "react": "^18.3.1", - "react-bootstrap": "^2.8.0", - "react-content-loader": "^7.0.0", - "react-device-detect": "^2.2.3", "react-dom": "18", - "react-select": "^5.8.0", - "react-toastify": "^9.1.3", - "wagmi": "^1.3.2" + "react-toastify": "^9.1.3" }, "scripts": { "dev": "NODE_ENV=development tsup --watch", diff --git a/src/AnalyticsNext/index.tsx b/src/AnalyticsNext/index.tsx index 8c039706..252f9944 100644 --- a/src/AnalyticsNext/index.tsx +++ b/src/AnalyticsNext/index.tsx @@ -1,90 +1,21 @@ -import React, { ReactNode, useEffect, useState } from 'react'; +import React, { ReactNode } from 'react'; import AnalyticsContextProvider from '../utils/AnalyticsContextProvider'; import AnalyticsHandle from './handle'; import { NextRouter } from 'next/router'; -import dynamic from 'next/dynamic'; -import { getConsentTemplate } from '../utils/consent'; - -const ConsentComponent = dynamic(() => import('../Components/Consent'), { ssr: false }); -const ConsentComponentCustom = dynamic(() => import('../Components/ConsentCustom'), { ssr: false }); interface AnalyticsNext { router: NextRouter; attributes: any; - oldLayout?: boolean; - loginApp?: any; - isLoggedApp?: boolean; - isOptInReplaceAnalytics?: boolean; children?: ReactNode; } -const AnalyticsNext = ({ - router, - attributes, - oldLayout = false, - loginApp, - isLoggedApp, - isOptInReplaceAnalytics = false, - children, -}: AnalyticsNext) => { - const [layout, setLayout] = useState( - process.env.NEXT_PUBLIC_CONSENT_LAYOUT ?? 'simple-consent-mode' - ); - const [gtagId, setGtagId] = useState(process.env.NEXT_PUBLIC_ANALYTICS_GTAG_ID); - const [gtmId, setGtmId] = useState(process.env.NEXT_PUBLIC_ANALYTICS_GTM_ID); - const [customConsentText, setCustomConsentText] = useState( - process.env.NEXT_PUBLIC_ANALYTICS_CONSENT_TEXT - ); - useEffect(() => { - const init = async () => { - const data: any = await getConsentTemplate( - process.env.NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL, - window.location.host - ); - setLayout(data?.data?.template ?? process.env.NEXT_PUBLIC_CONSENT_LAYOUT); - setGtagId(data?.data?.gtag_id ?? process.env.NEXT_PUBLIC_ANALYTICS_GTAG_ID); - setGtmId(data?.data?.gtm_id ?? process.env.NEXT_PUBLIC_ANALYTICS_GTM_ID); - setCustomConsentText( - data?.data?.consent_text ?? process.env.NEXT_PUBLIC_ANALYTICS_CONSENT_TEXT - ); - }; - init(); - }, []); +const AnalyticsNext = ({ router, attributes, children }: AnalyticsNext) => { return ( <> {children} - {process.env.NEXT_PUBLIC_DISABLE_ANALYTICS_CONSENT !== 'true' && ( - <> - {oldLayout || layout === 'original' ? ( - - ) : ( - - )} - - )} diff --git a/src/AnalyticsReact/index.tsx b/src/AnalyticsReact/index.tsx index e26e5450..65fc0f9a 100644 --- a/src/AnalyticsReact/index.tsx +++ b/src/AnalyticsReact/index.tsx @@ -1,11 +1,7 @@ -import React, { ReactNode, Suspense, useEffect, useState } from 'react'; +import React, { ReactNode } from 'react'; import AnalyticsContextProvider from '../utils/AnalyticsContextProvider'; import AnalyticsHandle from './handle'; -import { getConsentTemplate } from '../utils/consent'; - -const ConsentComponent = React.lazy(() => import('../Components/Consent')); -const ConsentComponentCustom = React.lazy(() => import('../Components/ConsentCustom')); interface AnalyticsReact { location: { search: string; pathname: string }; @@ -15,65 +11,11 @@ interface AnalyticsReact { isOptInReplaceAnalytics?: boolean; } -const AnalyticsReact = ({ - location, - history, - oldLayout = false, - isOptInReplaceAnalytics = false, - children, -}: AnalyticsReact) => { - const [layout, setLayout] = useState( - process.env.REACT_APP_CONSENT_LAYOUT ?? 'simple-consent-mode' - ); - const [gtagId, setGtagId] = useState(process.env.REACT_APP_ANALYTICS_GTAG_ID); - const [gtmId, setGtmId] = useState(process.env.REACT_APP_ANALYTICS_GTM_ID); - const [customConsentText, setCustomConsentText] = useState( - process.env.REACT_APP_ANALYTICS_CONSENT_TEXT - ); - useEffect(() => { - const init = async () => { - const data: any = await getConsentTemplate( - process.env.REACT_APP_ENDPOINT_ANALYTICS_URL, - window.location.host - ); - setLayout(data?.data?.template ?? process.env.REACT_APP_CONSENT_LAYOUT); - setGtagId(data?.data?.gtag_id ?? process.env.REACT_APP_ANALYTICS_GTAG_ID); - setGtmId(data?.data?.gtm_id ?? process.env.REACT_APP_ANALYTICS_GTM_ID); - setCustomConsentText( - data?.data?.consent_text ?? process.env.REACT_APP_ANALYTICS_CONSENT_TEXT - ); - }; - init(); - }, []); +const AnalyticsReact = ({ location, history, children }: AnalyticsReact) => { return ( {children} - {process.env.REACT_APP_DISABLE_ANALYTICS_CONSENT !== 'true' && ( - }> - {oldLayout || layout === 'original' ? ( - - ) : ( - - )} - - )} ); diff --git a/src/Assets/aesirx.svg b/src/Assets/aesirx.svg deleted file mode 100644 index ee8e827a..00000000 --- a/src/Assets/aesirx.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/Assets/arrow.svg b/src/Assets/arrow.svg deleted file mode 100644 index e2aa5888..00000000 --- a/src/Assets/arrow.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/Assets/bg.png b/src/Assets/bg.png deleted file mode 100644 index 4062795c..00000000 Binary files a/src/Assets/bg.png and /dev/null differ diff --git a/src/Assets/check_circle.svg b/src/Assets/check_circle.svg deleted file mode 100644 index 9bd75fdc..00000000 --- a/src/Assets/check_circle.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/Assets/check_line.svg b/src/Assets/check_line.svg deleted file mode 100644 index 7af6fb2a..00000000 --- a/src/Assets/check_line.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/Assets/checkbox.svg b/src/Assets/checkbox.svg deleted file mode 100644 index 793b6621..00000000 --- a/src/Assets/checkbox.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/Assets/checkbox_active.svg b/src/Assets/checkbox_active.svg deleted file mode 100644 index 1abde84e..00000000 --- a/src/Assets/checkbox_active.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/Assets/concordium.svg b/src/Assets/concordium.svg deleted file mode 100644 index a8d5b473..00000000 --- a/src/Assets/concordium.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/Assets/concordium_logo.png b/src/Assets/concordium_logo.png deleted file mode 100644 index 310c9094..00000000 Binary files a/src/Assets/concordium_logo.png and /dev/null differ diff --git a/src/Assets/ethereum_logo.png b/src/Assets/ethereum_logo.png deleted file mode 100644 index bfd303de..00000000 Binary files a/src/Assets/ethereum_logo.png and /dev/null differ diff --git a/src/Assets/no.svg b/src/Assets/no.svg deleted file mode 100644 index 444fcedc..00000000 --- a/src/Assets/no.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/Assets/no_white.svg b/src/Assets/no_white.svg deleted file mode 100644 index 4027d6a9..00000000 --- a/src/Assets/no_white.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/Assets/privacy.svg b/src/Assets/privacy.svg deleted file mode 100644 index 2be8d1a0..00000000 --- a/src/Assets/privacy.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/Assets/shield_of_privacy.png b/src/Assets/shield_of_privacy.png deleted file mode 100644 index 44ebcda5..00000000 Binary files a/src/Assets/shield_of_privacy.png and /dev/null differ diff --git a/src/Assets/upgrade.svg b/src/Assets/upgrade.svg deleted file mode 100644 index 1ad8f85a..00000000 --- a/src/Assets/upgrade.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/Assets/wallet_consent.png b/src/Assets/wallet_consent.png deleted file mode 100644 index 8ba4f63d..00000000 Binary files a/src/Assets/wallet_consent.png and /dev/null differ diff --git a/src/Assets/wallet_shield_consent.png b/src/Assets/wallet_shield_consent.png deleted file mode 100644 index f9614a42..00000000 Binary files a/src/Assets/wallet_shield_consent.png and /dev/null differ diff --git a/src/Assets/web3id.svg b/src/Assets/web3id.svg deleted file mode 100644 index e6b20b06..00000000 --- a/src/Assets/web3id.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/Assets/yes.svg b/src/Assets/yes.svg deleted file mode 100644 index ebb5e741..00000000 --- a/src/Assets/yes.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/Components/Connect.tsx b/src/Components/Connect.tsx deleted file mode 100644 index 21b1c15c..00000000 --- a/src/Components/Connect.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import React, { Suspense, useState } from 'react'; -import { Modal } from 'react-bootstrap'; -import { isMobile, isDesktop, OsTypes, osName } from 'react-device-detect'; -import { BROWSER_WALLET, WALLET_CONNECT } from '../Hooks/config'; -import concordium_logo from '../Assets/concordium_logo.png'; -import { useTranslation } from 'react-i18next'; -import ConnectMetamask from './Ethereum/connect'; -import { useAccount } from 'wagmi'; -const ConnectModal = ({ - isConnecting, - handleOnConnect, - activeConnectorError, - activeConnectorType, - activeConnector, -}: any) => { - const [show, setShow] = useState(true); - - const handleClose = () => setShow(false); - const { t } = useTranslation(); - return ( - <> - - -
-
-

- {(window as any)?.aesirx_analytics_translate?.txt_please_connect_your_wallet ?? - t('txt_please_connect_your_wallet')} -

-
- Loading...}> - - -
-
- {isDesktop && ( - - )} - {osName !== OsTypes?.IOS ? ( - <> - - - ) : ( - <> - )} -
{' '} -
-
-
-
- - ); -}; - -const SSOEthereumApp = ({ handleOnConnect }: any) => { - const { isConnected } = useAccount({ - onConnect() { - handleOnConnect('', 'metamask'); - }, - }); - - return isConnected ? <> : ; -}; - -export default ConnectModal; diff --git a/src/Components/Consent.tsx b/src/Components/Consent.tsx deleted file mode 100644 index ce25d6b3..00000000 --- a/src/Components/Consent.tsx +++ /dev/null @@ -1,962 +0,0 @@ -/* eslint-disable no-case-declarations */ -import { - agreeConsents, - getConsents, - getMember, - getNonce, - getSignature, - getWalletNonce, - loadGtagScript, - loadGtmScript, - revokeConsents, - verifySignature, -} from '../utils/consent'; -import React, { Suspense, useContext, useEffect, useState } from 'react'; -import { Button, Form } from 'react-bootstrap'; -import useConsentStatus from '../Hooks/useConsentStatus'; -import '../styles/style.scss'; -import { TermsComponent } from './Terms'; -import { toast } from 'react-toastify'; - -import yes from '../Assets/yes.svg'; -import no from '../Assets/no.svg'; -import no_white from '../Assets/no_white.svg'; -import bg from '../Assets/bg.png'; -import privacy from '../Assets/privacy.svg'; - -import ContentLoader from 'react-content-loader'; -const SSOButton: any = React.lazy(() => - import('aesirx-sso').then((module) => ({ default: module.SSOButton })) -); -import { - MAINNET, - WithWalletConnector, - WalletConnectionProps, - useConnection, - useConnect, - ConnectorType, - stringMessage, - useGrpcClient, - TESTNET, -} from '@concordium/react-components'; -import { BROWSER_WALLET, WALLET_CONNECT } from '../Hooks/config'; -import { OsTypes, isDesktop, isMobile, osName } from 'react-device-detect'; -import { LoadingStatus } from './LoadingStatus'; -import ConnectModal from './Connect'; -import { AnalyticsContext } from '../utils/AnalyticsContextProvider'; -import { useTranslation } from 'react-i18next'; -import { useAccount, useSignMessage } from 'wagmi'; -import SSOEthereumProvider from './Ethereum'; -import { getWeb3ID } from '../utils/Concordium'; -declare global { - interface Window { - dataLayer: any; - } -} -declare const dataLayer: any[]; -interface WalletConnectionPropsExtends extends WalletConnectionProps { - endpoint: string; - aesirXEndpoint: string; - networkEnv?: string; - loginApp?: any; - isLoggedApp?: boolean; - gtagId: string; - gtmId: string; - layout?: string; -} -const ConsentComponent = ({ - endpoint, - aesirXEndpoint, - networkEnv, - loginApp, - isLoggedApp, - gtagId, - gtmId, - layout, -}: any) => { - return ( - - {(props) => ( -
- - - -
- )} -
- ); -}; -const ConsentComponentApp = (props: WalletConnectionPropsExtends) => { - const { - endpoint, - aesirXEndpoint, - loginApp, - isLoggedApp, - gtagId, - gtmId, - layout, - activeConnectorType, - activeConnector, - activeConnectorError, - connectedAccounts, - genesisHashes, - setActiveConnectorType, - network, - } = props; - const { setConnection } = useConnection(connectedAccounts, genesisHashes); - - const { isConnecting } = useConnect(activeConnector, setConnection); - - const handleOnConnect = async (connectorType: ConnectorType, network = 'concordium') => { - if (network === 'concordium') { - setActiveConnectorType(connectorType); - } - setLoading('done'); - }; - - const [ - uuid, - level, - connection, - account, - show, - setShow, - web3ID, - setWeb3ID, - handleLevel, - showRevoke, - handleRevoke, - ] = useConsentStatus(endpoint, layout, props); - - const [consents, setConsents] = useState([1, 2]); - const [loading, setLoading] = useState('done'); - const [loadingCheckAccount, setLoadingCheckAccount] = useState(false); - const [showExpandConsent, setShowExpandConsent] = useState(true); - const [showExpandRevoke, setShowExpandRevoke] = useState(false); - const [showBackdrop, setShowBackdrop] = useState(true); - const [consentTier4, setConsentTier4] = useState({}); - const analyticsContext = useContext(AnalyticsContext); - const { t } = useTranslation(); - const gRPCClient = useGrpcClient(network); - - // Metamask - const { address, connector } = useAccount(); - - const { signMessage } = useSignMessage({ - async onSuccess(data, variables) { - const signature = Buffer.from( - typeof data === 'object' && data !== null ? JSON.stringify(data) : data, - 'utf-8' - ).toString('base64'); - const jwt = sessionStorage.getItem('aesirx-analytics-jwt'); - if (variables?.message.indexOf('Revoke consent') > -1) { - // Revoke Metamask - const levelRevoke = sessionStorage.getItem('aesirx-analytics-revoke'); - const consentList = await getConsents(endpoint, uuid); - consentList.forEach(async (consent: any) => { - !consent?.expiration && - (await revokeConsents( - endpoint, - levelRevoke, - consent?.consent_uuid, - address, - signature, - web3ID, - jwt, - 'metamask' - )); - }); - setLoading('done'); - handleRevoke(false); - setShowExpandConsent(false); - setShow(true); - setShowBackdrop(false); - sessionStorage.removeItem('aesirx-analytics-allow'); - } else if (variables?.message.indexOf('Login with nonce') > -1) { - const res = await verifySignature(aesirXEndpoint, 'metamask', address, data); - sessionStorage.setItem('aesirx-analytics-jwt', res?.jwt); - setLoadingCheckAccount(false); - const nonce = await getNonce( - endpoint, - address, - 'Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}', - 'metamask' - ); - signMessage({ message: `${nonce}` }); - } else { - setLoading('saving'); - // Consent Metamask - await agreeConsents( - endpoint, - level, - uuid, - consents, - address, - signature, - web3ID, - jwt, - 'metamask', - gtagId, - gtmId, - layout - ); - sessionStorage.setItem('aesirx-analytics-uuid', uuid); - sessionStorage.setItem('aesirx-analytics-allow', '1'); - sessionStorage.setItem('aesirx-analytics-consent-type', 'metamask'); - - setShow(false); - setLoading('done'); - handleRevoke(true, level); - setShowBackdrop(false); - } - }, - async onError(error) { - setLoading('done'); - toast.error(error.message); - }, - }); - - const handleChange = async ({ target: { value } }: any) => { - if (consents.indexOf(parseInt(value)) === -1) { - setConsents([...consents, ...[parseInt(value)]]); - } else { - setConsents(consents.filter((consent) => consent !== parseInt(value))); - } - }; - - const handleAgree = async () => { - try { - let flag = true; - // Wallets - let jwt = ''; - if (level > 2) { - if (level === 4) { - try { - setLoadingCheckAccount(true); - const nonceLogin = await getWalletNonce( - aesirXEndpoint, - account ? 'concordium' : 'metamask', - account ?? address - ); - if (nonceLogin) { - try { - if (account) { - const signature = await connection.signMessage( - account, - stringMessage(`${nonceLogin}`) - ); - const convertedSignature = - typeof signature === 'object' && signature !== null - ? signature - : JSON.parse(signature); - - if (signature) { - const data = await verifySignature( - aesirXEndpoint, - 'concordium', - account, - convertedSignature - ); - sessionStorage.setItem('aesirx-analytics-jwt', data?.jwt); - jwt = data?.jwt; - loginApp && !isLoggedApp && loginApp(data); - setLoadingCheckAccount(false); - } - } else { - signMessage({ message: `${nonceLogin}` }); - } - } catch (error) { - setLoadingCheckAccount(false); - toast(error.message); - } - } - } catch (error) { - SSOClick('.loginSSO'); - setLoadingCheckAccount(false); - return; - } - } - if (account) { - // Concordium - const signature = await getSignature( - endpoint, - account, - connection, - level === 3 - ? 'Decentralized Consent:{nonce} {domain} {time}' - : 'Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}' - ); - setLoading('saving'); - await agreeConsents( - endpoint, - level, - uuid, - consents, - account, - signature, - web3ID, - jwt, - 'concordium', - gtagId, - gtmId, - layout - ); - sessionStorage.setItem('aesirx-analytics-consent-type', 'concordium'); - } else if (connector) { - // Metamask - if (level === 3) { - const nonce = await getNonce( - endpoint, - address, - level === 3 - ? 'Decentralized Consent:{nonce} {domain} {time}' - : 'Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}', - 'metamask' - ); - signMessage({ message: `${nonce}` }); - } - } else { - setLoading('connect'); - flag = false; - } - } else { - setLoading('saving'); - const consentList = await getConsents(endpoint, analyticsContext.visitor_uuid); - consents.forEach(async (consent) => { - const existConsent = consentList.find((item: any) => item?.consent === consent); - if (!existConsent) { - await agreeConsents( - endpoint, - 1, - uuid, - consent, - null, - null, - null, - null, - 'concordium', - gtagId, - gtmId, - layout - ); - } else if ( - !!existConsent?.consent_uuid && - existConsent?.expiration && - new Date(existConsent.expiration) < new Date() - ) { - await agreeConsents( - endpoint, - 1, - uuid, - consent, - null, - null, - null, - null, - 'concordium', - gtagId, - gtmId, - layout - ); - } - }); - } - - if (flag && (account || level < 3)) { - sessionStorage.setItem('aesirx-analytics-uuid', uuid); - sessionStorage.setItem('aesirx-analytics-allow', '1'); - - setShow(false); - setLoading('done'); - handleRevoke(true, level); - setShowBackdrop(false); - } - } catch (error) { - console.log(error); - handleNotAllow(); - - setLoading('done'); - toast.error(error?.response?.data?.error ?? error.message); - } - }; - - useEffect(() => { - const init = async () => { - if (Object.keys(consentTier4)?.length && (account || address)) { - await consentTier4Init(consentTier4); - setConsentTier4({}); - } - }; - init(); - }, [consentTier4, account, address]); - - const consentTier4Init = async (response: any) => { - let hasWeb3ID = true; - if (response?.loginType === 'concordium') { - const web3ID = await getWeb3ID(account, gRPCClient, network?.name); - if (web3ID) { - setWeb3ID(web3ID); - } else { - hasWeb3ID = false; - } - } else { - const memberData = await getMember(aesirXEndpoint, response?.access_token); - hasWeb3ID = memberData?.web3id ? true : false; - } - if (hasWeb3ID) { - if (response?.loginType === 'concordium') { - // Concordium - sessionStorage.setItem('aesirx-analytics-consent-type', 'concordium'); - const signature = await getSignature( - endpoint, - account, - connection, - 'Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}' - ); - await agreeConsents( - endpoint, - level, - uuid, - consents, - account, - signature, - null, - response?.jwt, - 'concordium', - gtagId, - gtmId, - layout - ); - setShow(false); - handleRevoke(true, level); - setLoading('done'); - } else if (response?.loginType === 'metamask') { - // Metamask - sessionStorage.setItem('aesirx-analytics-consent-type', 'metamask'); - const nonce = await getNonce( - endpoint, - address, - 'Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}', - 'metamask' - ); - signMessage({ message: `${nonce}` }); - } - } else { - handleLevel(3); - toast("You haven't minted any WEB3 ID yet. Try to mint at https://dapp.shield.aesirx.io"); - setLoading('done'); - } - }; - const onGetData = async (response: any) => { - // on Login Tier 2 & 4 - try { - setLoading('saving'); - const levelRevoke = sessionStorage.getItem('aesirx-analytics-revoke'); - sessionStorage.setItem('aesirx-analytics-jwt', response?.jwt); - if (levelRevoke && levelRevoke !== '0') { - // Revoke Consent - sessionStorage.setItem( - 'aesirx-analytics-consent-type', - response?.loginType === 'concordium' ? 'concordium' : 'metamask' - ); - handleRevokeBtn(); - } else { - // Agree Consent - if (level === 4) { - if (response?.loginType === 'concordium' && isDesktop) { - setActiveConnectorType(BROWSER_WALLET); - } - setConsentTier4(response); - } else { - await agreeConsents( - endpoint, - level, - uuid, - consents, - null, - null, - null, - response?.jwt, - 'concordium', - gtagId, - gtmId, - layout - ); - setShow(false); - handleRevoke(true, level); - setLoading('done'); - } - } - loginApp && !isLoggedApp && loginApp(response); - } catch (error) { - console.log(error); - setShow(false); - setLoading('done'); - toast.error(error?.response?.data?.error ?? error.message); - } - }; - - const handleNotAllow = () => { - sessionStorage.setItem('aesirx-analytics-uuid', uuid); - sessionStorage.setItem('aesirx-analytics-rejected', 'true'); - setShowExpandConsent(false); - setShowBackdrop(false); - window.funcAfterReject && window.funcAfterReject(); - }; - const handleRevokeBtn = async () => { - const levelRevoke = sessionStorage.getItem('aesirx-analytics-revoke'); - const consentType = sessionStorage.getItem('aesirx-analytics-consent-type'); - const jwt = sessionStorage.getItem('aesirx-analytics-jwt'); - try { - let flag = true; - - if (levelRevoke !== '1') { - if (parseInt(levelRevoke) > 2) { - if (!jwt && (parseInt(levelRevoke) === 2 || parseInt(levelRevoke) === 4)) { - SSOClick('.revokeLogin'); - return; - } - if (account && consentType !== 'metamask') { - setLoading('sign'); - const signature = await getSignature( - endpoint, - account, - connection, - 'Revoke consent:{nonce} {domain} {time}' - ); - setLoading('saving'); - const consentList = await getConsents(endpoint, uuid); - consentList.forEach(async (consent: any) => { - !consent?.expiration && - (await revokeConsents( - endpoint, - levelRevoke, - consent?.consent_uuid, - account, - signature, - web3ID, - jwt - )); - }); - setLoading('done'); - handleRevoke(false); - } else if (connector) { - // Metamask - setLoading('sign'); - setLoading('saving'); - const nonce = await getNonce( - endpoint, - address, - 'Revoke consent:{nonce} {domain} {time}', - 'metamask' - ); - signMessage({ message: `${nonce}` }); - } else { - setLoading('connect'); - flag = false; - } - } else { - setLoading('saving'); - const consentList = await getConsents(endpoint, uuid); - consentList.forEach(async (consent: any) => { - !consent?.expiration && - (await revokeConsents( - endpoint, - levelRevoke, - consent?.consent_uuid, - null, - null, - null, - jwt - )); - }); - setLoading('done'); - handleRevoke(false); - } - - if (flag && ((account && consentType !== 'metamask') || level < 3)) { - setShowExpandConsent(false); - setShow(true); - setShowBackdrop(false); - sessionStorage.removeItem('aesirx-analytics-allow'); - } - } else { - handleRevoke(false); - setShowExpandConsent(false); - setShow(true); - setShowBackdrop(false); - sessionStorage.removeItem('aesirx-analytics-allow'); - } - } catch (error) { - console.log(error); - setLoading('done'); - toast.error(error?.response?.data?.error ?? error.message); - } - }; - - const SSOClick = (selector: string) => { - const element: HTMLElement = document.querySelector(selector) as HTMLElement; - element.click(); - }; - - const loadConsentDefault = async (gtagId: any, gtmId: any) => { - window.dataLayer = window.dataLayer || []; - function gtag( // eslint-disable-next-line @typescript-eslint/no-unused-vars - p0: string, // eslint-disable-next-line @typescript-eslint/no-unused-vars - p1: any, // eslint-disable-next-line @typescript-eslint/no-unused-vars - p2?: any - ) { - // eslint-disable-next-line prefer-rest-params - dataLayer.push(arguments); - } - if (layout !== 'simple-consent-mode' && sessionStorage.getItem('consentGranted') !== 'true') { - gtag('consent', 'default', { - ad_user_data: 'denied', - ad_personalization: 'denied', - ad_storage: 'denied', - analytics_storage: 'denied', - wait_for_update: 500, - }); - gtag('set', 'url_passthrough', true); - gtag('set', 'ads_data_redaction', true); - } - if ( - (layout !== 'simple-consent-mode' || sessionStorage.getItem('consentGranted') === 'true') && - ((gtmId && - !document.querySelector( - `script[src="https://www.googletagmanager.com/gtm.js?id=${gtmId}"]` - )) || - (gtagId && - !document.querySelector( - `script[src="https://www.googletagmanager.com/gtag/js?id=${gtagId}"]` - ))) - ) { - gtagId && (await loadGtagScript(gtagId)); - gtmId && (await loadGtmScript(gtmId)); - if (gtagId) { - gtag('js', new Date()); - gtag('config', `${gtagId}`); - } - if (gtmId) { - dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); - } - } - - if (sessionStorage.getItem('consentGranted') === 'true') { - gtag('consent', 'update', { - ad_user_data: 'granted', - ad_personalization: 'granted', - ad_storage: 'granted', - analytics_storage: 'granted', - }); - } - }; - - useEffect(() => { - if (activeConnectorError) { - toast.error(activeConnectorError); - } - }, [activeConnectorError]); - - useEffect(() => { - if (sessionStorage.getItem('aesirx-analytics-rejected') === 'true') { - setShowBackdrop(false); - setShowExpandConsent(false); - } - }, []); - - useEffect(() => { - (gtagId || gtmId) && loadConsentDefault(gtagId, gtmId); - }, [layout]); - - console.log('level', uuid, level, web3ID, account, loading); - - return ( -
-
-
-
- -
-
- {!showExpandRevoke && ( - <> - Background Image -
{ - if ( - osName !== OsTypes?.IOS && - isMobile && - !connection && - sessionStorage.getItem('aesirx-analytics-revoke') && - parseInt(sessionStorage.getItem('aesirx-analytics-revoke')) > 2 - ) { - setActiveConnectorType(WALLET_CONNECT); - } - setShowExpandRevoke(true); - }} - > - SoP Icon - {t('txt_shield_of_privacy')} -
- - )} - - {showExpandRevoke && ( - <> -
{ - setShowExpandRevoke(false); - }} - > - No Icon -
-
- {t('txt_you_can_revoke')}
- {t('txt_visit')}{' '} - - {t('txt_link')} - {' '} - {t('txt_for_more_information')} -
-
- Background Image -
-
-
- SoP Icon {t('txt_shield_of_privacy')} -
-
- - {t('txt_manage_consent')} - - {loading === 'done' ? ( - - ) : ( - <> - )} - {(sessionStorage.getItem('aesirx-analytics-revoke') === '4' || - sessionStorage.getItem('aesirx-analytics-revoke') === '2') && ( -
- Loading...
}> - Login Revoke} - ssoState={'noscopes'} - onGetData={onGetData} - /> - -
- )} -
-
-
-
- - )} -
-
-
-
-
-
- -
- {!showExpandConsent ? ( - <> -
- Background Image -
{ - setShowExpandConsent(true); - sessionStorage.removeItem('aesirx-analytics-rejected'); - }} - > - SoP Icon - {t('txt_shield_of_privacy')} -
-
- - ) : ( - <> - {level ? ( - <> - -
- - -
- {loading === 'done' ? ( - <> -
- Loading...
}> - - Yes Icon - {t('txt_yes_i_consent')} - - } - ssoState={'noscopes'} - onGetData={onGetData} - {...(level === 2 ? { noCreateAccount: true } : {})} - /> - -
- {level === 2 || (level === 4 && !account && !address) ? ( - <> - ) : ( - - )} - - - - ) : ( - <> - )} -
- - - - ) : ( -
- - - - - - - - - - -
- )} - - )} -
-
-
- - {!account && loading === 'connect' && ( - - )} - - ); -}; - -export default ConsentComponent; diff --git a/src/Components/ConsentCustom.tsx b/src/Components/ConsentCustom.tsx deleted file mode 100644 index 39e3d1b3..00000000 --- a/src/Components/ConsentCustom.tsx +++ /dev/null @@ -1,1476 +0,0 @@ -/* eslint-disable no-case-declarations */ -import { - agreeConsents, - getConsents, - getMember, - getNonce, - getSignature, - getWalletNonce, - loadGtagScript, - loadGtmScript, - revokeConsents, - verifySignature, -} from '../utils/consent'; -import React, { Suspense, useContext, useEffect, useState } from 'react'; -import { Button, Col, Form, Row } from 'react-bootstrap'; -import useConsentStatus from '../Hooks/useConsentStatus'; -import '../styles/style.scss'; -import { TermsComponent } from './Terms'; -import { toast } from 'react-toastify'; - -import no from '../Assets/no.svg'; -import bg from '../Assets/bg.png'; -import privacy from '../Assets/privacy.svg'; -import checkbox from '../Assets/checkbox.svg'; -import checkbox_active from '../Assets/checkbox_active.svg'; -import check_circle from '../Assets/check_circle.svg'; -import wallet_consent from '../Assets/wallet_consent.png'; -import wallet_shield_consent from '../Assets/wallet_shield_consent.png'; - -import ContentLoader from 'react-content-loader'; -const SSOButton: any = React.lazy(() => - import('aesirx-sso').then((module) => ({ default: module.SSOButton })) -); -import { - MAINNET, - WithWalletConnector, - useConnection, - useConnect, - ConnectorType, - stringMessage, - useGrpcClient, - TESTNET, -} from '@concordium/react-components'; -import { BROWSER_WALLET, WALLET_CONNECT } from '../Hooks/config'; -import { OsTypes, isDesktop, isMobile, osName } from 'react-device-detect'; -import { LoadingStatus } from './LoadingStatus'; -import ConnectModal from './Connect'; -import { AnalyticsContext } from '../utils/AnalyticsContextProvider'; -import { useTranslation } from 'react-i18next'; -import { useAccount, useSignMessage } from 'wagmi'; -import SSOEthereumProvider from './Ethereum'; -import { getWeb3ID } from '../utils/Concordium'; -import { trackEvent } from '../utils'; -import ConsentHeader from './ConsentHeader'; -declare global { - interface Window { - dataLayer: any; - } -} -declare const dataLayer: any[]; - -const ConsentComponentCustom = ({ - endpoint, - aesirXEndpoint, - networkEnv, - loginApp, - isLoggedApp, - gtagId, - gtmId, - layout, - isOptInReplaceAnalytics, - customConsentText, - languageSwitcher, -}: any) => { - return ( - <> - {!isOptInReplaceAnalytics ? ( - <> - - {(props: any) => ( - - )} - - - ) : ( - <> - )} - - ); -}; -const ConsentComponentCustomWrapper = (props: any) => { - const [ - uuid, - level, - connection, - account, - show, - setShow, - web3ID, - setWeb3ID, - handleLevel, - showRevoke, - handleRevoke, - ] = useConsentStatus(props?.endpoint, props?.layout, props); - - return ( -
- - - -
- ); -}; -const ConsentComponentCustomApp = (props: any) => { - const { - endpoint, - aesirXEndpoint, - loginApp, - isLoggedApp, - gtagId, - gtmId, - layout, - customConsentText, - languageSwitcher, - activeConnectorType, - activeConnector, - activeConnectorError, - connectedAccounts, - genesisHashes, - setActiveConnectorType, - network, - uuid, - level, - connection, - account, - show, - setShow, - web3ID, - setWeb3ID, - handleLevel, - showRevoke, - handleRevoke, - } = props; - const { setConnection } = useConnection(connectedAccounts, genesisHashes); - - const { isConnecting } = useConnect(activeConnector, setConnection); - - const handleOnConnect = async (connectorType: ConnectorType, network = 'concordium') => { - if (network === 'concordium') { - setActiveConnectorType(connectorType); - } - setLoading('done'); - }; - - const [consents, setConsents] = useState([1, 2]); - const [revokeConsentOption, setRevokeConsentOption] = useState('consent'); - const [loading, setLoading] = useState('done'); - const [loadingCheckAccount, setLoadingCheckAccount] = useState(false); - const [showExpandConsent, setShowExpandConsent] = useState(true); - const [showRejectedConsent, setShowRejectedConsent] = useState(false); - const [showExpandRevoke, setShowExpandRevoke] = useState(false); - const [showBackdrop, setShowBackdrop] = useState(true); - const [consentTier4, setConsentTier4] = useState({}); - const [upgradeLayout, setUpgradeLayout] = useState( - level === 3 || level === 4 ? true : false - ); - const [upgradeLevel, setUpgradeLevel] = useState(level === 4 || level === 3 ? level : 0); - const analyticsContext = useContext(AnalyticsContext); - const { t } = useTranslation(); - const gRPCClient = useGrpcClient(network); - const revoke = sessionStorage.getItem('aesirx-analytics-revoke'); - // Metamask - const { address, connector } = - (layout === 'simple-consent-mode' || level === 1) && - (!revoke || revoke === '0' || revoke === '1') - ? { address: '', connector: '' } - : useAccount(); - const { signMessage }: any = - (layout === 'simple-consent-mode' || level === 1) && - (!revoke || revoke === '0' || revoke === '1') - ? { signMessage: {} } - : useSignMessage({ - async onSuccess(data: any, variables: any) { - const signature = Buffer.from( - typeof data === 'object' && data !== null ? JSON.stringify(data) : data, - 'utf-8' - ).toString('base64'); - const jwt = sessionStorage.getItem('aesirx-analytics-jwt'); - if (variables?.message.indexOf('Revoke consent') > -1) { - // Revoke Metamask - const levelRevoke = sessionStorage.getItem('aesirx-analytics-revoke'); - const consentList = await getConsents(endpoint, uuid); - consentList.forEach(async (consent: any) => { - !consent?.expiration && - (await revokeConsents( - endpoint, - levelRevoke, - consent?.consent_uuid, - address, - signature, - web3ID, - jwt, - 'metamask' - )); - }); - setLoading('done'); - handleRevoke(false); - setShowExpandConsent(false); - setShow(true); - setShowBackdrop(false); - sessionStorage.removeItem('aesirx-analytics-allow'); - } else if (variables?.message.indexOf('Login with nonce') > -1) { - const res = await verifySignature(aesirXEndpoint, 'metamask', address, data); - sessionStorage.setItem('aesirx-analytics-jwt', res?.jwt); - setLoadingCheckAccount(false); - const nonce = await getNonce( - endpoint, - address, - 'Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}', - 'metamask' - ); - signMessage({ message: `${nonce}` }); - } else { - setLoading('saving'); - // Consent Metamask - await agreeConsents( - endpoint, - level, - uuid, - consents, - address, - signature, - web3ID, - jwt, - 'metamask', - gtagId, - gtmId - ); - sessionStorage.setItem('aesirx-analytics-uuid', uuid); - sessionStorage.setItem('aesirx-analytics-allow', '1'); - sessionStorage.setItem('aesirx-analytics-consent-type', 'metamask'); - - setShow(false); - setLoading('done'); - handleRevoke(true, level); - setShowBackdrop(false); - } - }, - async onError(error: any) { - setLoading('done'); - toast.error(error.message); - }, - }); - - const handleChange = async ({ target: { value } }: any) => { - if (consents.indexOf(parseInt(value)) === -1) { - setConsents([...consents, ...[parseInt(value)]]); - } else { - setConsents(consents.filter((consent) => consent !== parseInt(value))); - } - }; - - const handleAgree = async () => { - try { - let flag = true; - // Wallets - let jwt = ''; - if (level > 2) { - if (level === 4) { - try { - setLoadingCheckAccount(true); - const nonceLogin = await getWalletNonce( - aesirXEndpoint, - account ? 'concordium' : 'metamask', - account ?? address - ); - if (nonceLogin) { - try { - if (account) { - const signature = await connection.signMessage( - account, - stringMessage(`${nonceLogin}`) - ); - const convertedSignature = - typeof signature === 'object' && signature !== null - ? signature - : JSON.parse(signature); - - if (signature) { - const data = await verifySignature( - aesirXEndpoint, - 'concordium', - account, - convertedSignature - ); - sessionStorage.setItem('aesirx-analytics-jwt', data?.jwt); - jwt = data?.jwt; - loginApp && !isLoggedApp && loginApp(data); - setLoadingCheckAccount(false); - } - } else { - signMessage({ message: `${nonceLogin}` }); - } - } catch (error) { - setLoadingCheckAccount(false); - toast(error.message); - } - } - } catch (error) { - SSOClick('.loginSSO'); - setLoadingCheckAccount(false); - return; - } - } - if (account) { - // Concordium - const signature = await getSignature( - endpoint, - account, - connection, - level === 3 - ? 'Decentralized Consent:{nonce} {domain} {time}' - : 'Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}' - ); - setLoading('saving'); - await agreeConsents( - endpoint, - level, - uuid, - consents, - account, - signature, - web3ID, - jwt, - 'concordium', - gtagId, - gtmId - ); - sessionStorage.setItem('aesirx-analytics-consent-type', 'concordium'); - setUpgradeLayout(false); - } else if (connector) { - // Metamask - if (level === 3) { - const nonce = await getNonce( - endpoint, - address, - level === 3 - ? 'Decentralized Consent:{nonce} {domain} {time}' - : 'Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}', - 'metamask' - ); - signMessage({ message: `${nonce}` }); - } - } else { - setLoading('connect'); - flag = false; - } - } else { - setLoading('saving'); - const consentList = await getConsents(endpoint, analyticsContext.visitor_uuid); - consents.forEach(async (consent) => { - const existConsent = consentList.find((item: any) => item?.consent === consent); - if (!existConsent) { - await agreeConsents( - endpoint, - 1, - uuid, - consent, - null, - null, - null, - null, - null, - gtagId, - gtmId - ); - } else if ( - !!existConsent?.consent_uuid && - existConsent?.expiration && - new Date(existConsent.expiration) < new Date() - ) { - await agreeConsents( - endpoint, - 1, - uuid, - consent, - null, - null, - null, - null, - null, - gtagId, - gtmId - ); - } - }); - } - - if (flag && (account || level < 3)) { - sessionStorage.setItem('aesirx-analytics-uuid', uuid); - sessionStorage.setItem('aesirx-analytics-allow', '1'); - - setShow(false); - setLoading('done'); - handleRevoke(true, level); - setUpgradeLayout(false); - setShowBackdrop(false); - setShowExpandRevoke(false); - } - } catch (error) { - console.log(error); - handleNotAllow(); - - setLoading('done'); - toast.error(error?.response?.data?.error ?? error.message); - } - }; - - useEffect(() => { - const init = async () => { - if (Object.keys(consentTier4)?.length && (account || address)) { - await consentTier4Init(consentTier4); - setConsentTier4({}); - } - }; - init(); - }, [consentTier4, account, address]); - - const consentTier4Init = async (response: any) => { - let hasWeb3ID = true; - if (response?.loginType === 'concordium') { - const web3ID = await getWeb3ID(account, gRPCClient, network?.name); - if (web3ID) { - setWeb3ID(web3ID); - } else { - hasWeb3ID = false; - } - } else { - const memberData = await getMember(aesirXEndpoint, response?.access_token); - hasWeb3ID = memberData?.web3id ? true : false; - } - if (hasWeb3ID) { - if (response?.loginType === 'concordium') { - // Concordium - sessionStorage.setItem('aesirx-analytics-consent-type', 'concordium'); - const signature = await getSignature( - endpoint, - account, - connection, - 'Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}' - ); - await agreeConsents( - endpoint, - level, - uuid, - consents, - account, - signature, - null, - response?.jwt, - 'concordium', - gtagId, - gtmId - ); - setShow(false); - handleRevoke(true, level); - setUpgradeLayout(false); - setLoading('done'); - } else if (response?.loginType === 'metamask') { - // Metamask - sessionStorage.setItem('aesirx-analytics-consent-type', 'metamask'); - const nonce = await getNonce( - endpoint, - address, - 'Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}', - 'metamask' - ); - signMessage({ message: `${nonce}` }); - } - } else { - handleLevel(3); - toast("You haven't minted any WEB3 ID yet. Try to mint at https://dapp.shield.aesirx.io"); - setLoading('done'); - } - }; - const onGetData = async (response: any) => { - // on Login Tier 2 & 4 - try { - setLoading('saving'); - const levelRevoke = sessionStorage.getItem('aesirx-analytics-revoke'); - sessionStorage.setItem('aesirx-analytics-jwt', response?.jwt); - if (levelRevoke && levelRevoke !== '0') { - // Revoke Consent - sessionStorage.setItem( - 'aesirx-analytics-consent-type', - response?.loginType === 'concordium' ? 'concordium' : 'metamask' - ); - await handleRevokeBtn(); - setTimeout(() => { - window.location.reload(); - }, 1000); - } else { - // Agree Consent - if (level === 4) { - if (response?.loginType === 'concordium' && isDesktop) { - setActiveConnectorType(BROWSER_WALLET); - } - setConsentTier4(response); - } else { - await agreeConsents( - endpoint, - level, - uuid, - consents, - null, - null, - null, - response?.jwt, - 'concordium', - gtagId, - gtmId - ); - setShow(false); - handleRevoke(true, level); - setUpgradeLayout(false); - setLoading('done'); - } - } - loginApp && !isLoggedApp && loginApp(response); - } catch (error) { - console.log(error); - setShow(false); - setLoading('done'); - toast.error(error?.response?.data?.error ?? error.message); - } - }; - - const handleNotAllow = async () => { - sessionStorage.setItem('aesirx-analytics-uuid', uuid); - setShowExpandConsent(false); - setShowBackdrop(false); - const hostUrl = endpoint ? endpoint : ''; - const root = hostUrl ? hostUrl.replace(/\/$/, '') : ''; - await trackEvent(root, '', { - event_name: 'Reject consent', - event_type: 'reject-consent', - }); - sessionStorage.setItem('aesirx-analytics-rejected', 'true'); - window.funcAfterReject && window.funcAfterReject(); - }; - const handleRevokeBtn = async () => { - const levelRevoke = sessionStorage.getItem('aesirx-analytics-revoke'); - const consentType = sessionStorage.getItem('aesirx-analytics-consent-type'); - const jwt = sessionStorage.getItem('aesirx-analytics-jwt'); - try { - let flag = true; - - if (levelRevoke !== '1') { - if (parseInt(levelRevoke) > 2) { - if (!jwt && (parseInt(levelRevoke) === 2 || parseInt(levelRevoke) === 4)) { - SSOClick('.revokeLogin'); - return; - } - if (account && consentType !== 'metamask') { - setLoading('sign'); - const signature = await getSignature( - endpoint, - account, - connection, - 'Revoke consent:{nonce} {domain} {time}' - ); - setLoading('saving'); - const consentList = await getConsents(endpoint, uuid); - consentList.forEach(async (consent: any) => { - !consent?.expiration && - (await revokeConsents( - endpoint, - levelRevoke, - consent?.consent_uuid, - account, - signature, - web3ID, - jwt - )); - }); - setLoading('done'); - handleRevoke(false); - } else if (connector) { - // Metamask - setLoading('sign'); - setLoading('saving'); - const nonce = await getNonce( - endpoint, - address, - 'Revoke consent:{nonce} {domain} {time}', - 'metamask' - ); - signMessage({ message: `${nonce}` }); - } else { - setLoading('connect'); - flag = false; - } - } else { - if (!jwt && parseInt(levelRevoke) === 2) { - SSOClick('.revokeLogin'); - return; - } else { - setLoading('saving'); - const consentList = await getConsents(endpoint, uuid); - consentList.forEach(async (consent: any) => { - !consent?.expiration && - (await revokeConsents( - endpoint, - levelRevoke, - consent?.consent_uuid, - null, - null, - null, - jwt - )); - }); - setLoading('done'); - handleRevoke(false); - } - } - - if (flag && ((account && consentType !== 'metamask') || level < 3)) { - setShowExpandConsent(false); - setShow(true); - setShowBackdrop(false); - sessionStorage.removeItem('aesirx-analytics-allow'); - } - } else { - await revokeConsents(endpoint, levelRevoke, uuid, null, null, null, jwt); - handleRevoke(false); - setShowExpandConsent(false); - setShow(true); - setShowBackdrop(false); - sessionStorage.removeItem('aesirx-analytics-allow'); - } - const hostUrl = endpoint ? endpoint : ''; - const root = hostUrl ? hostUrl.replace(/\/$/, '') : ''; - trackEvent(root, '', { - event_name: 'Revoke consent', - event_type: 'revoke-consent', - }); - } catch (error) { - console.log(error); - setLoading('done'); - toast.error(error?.response?.data?.error ?? error.message); - } - }; - - const SSOClick = (selector: string) => { - const element: HTMLElement = document.querySelector(selector) as HTMLElement; - element.click(); - }; - - useEffect(() => { - if (activeConnectorError) { - toast.error(activeConnectorError); - } - }, [activeConnectorError]); - - useEffect(() => { - if (sessionStorage.getItem('aesirx-analytics-rejected') === 'true') { - setShowBackdrop(false); - setShowExpandConsent(false); - } - if ( - sessionStorage.getItem('aesirx-analytics-revoke') && - sessionStorage.getItem('aesirx-analytics-revoke') !== '0' - ) { - window.funcAfterConsent && window.funcAfterConsent(); - } - }, []); - - useEffect(() => { - (gtagId || gtmId) && loadConsentDefault(gtagId, gtmId); - }, [layout, gtagId, gtmId]); - - useEffect(() => { - if ( - showExpandRevoke && - isDesktop && - (sessionStorage.getItem('aesirx-analytics-revoke') === '3' || - sessionStorage.getItem('aesirx-analytics-revoke') === '4') - ) { - setActiveConnectorType(BROWSER_WALLET); - } - }, [showExpandRevoke]); - - console.log('level', uuid, level, web3ID, account, loading); - - const ConsentLevelUprade = ({ level, levelname, image, content, isUpgrade = false }: any) => { - return ( -
{ - setUpgradeLevel(level); - handleLevel(level); - }} - > -
- level -
{levelname}
-
{content}
-
-
- Checkbox icon -
-
- ); - }; - const loadConsentDefault = async (gtagId: any, gtmId: any) => { - window.dataLayer = window.dataLayer || []; - function gtag( // eslint-disable-next-line @typescript-eslint/no-unused-vars - p0: string, // eslint-disable-next-line @typescript-eslint/no-unused-vars - p1: any, // eslint-disable-next-line @typescript-eslint/no-unused-vars - p2?: any - ) { - // eslint-disable-next-line prefer-rest-params - dataLayer.push(arguments); - } - if ( - sessionStorage.getItem('consentGranted') === 'true' && - ((gtmId && - !document.querySelector( - `script[src="https://www.googletagmanager.com/gtm.js?id=${gtmId}"]` - )) || - (gtagId && - !document.querySelector( - `script[src="https://www.googletagmanager.com/gtag/js?id=${gtagId}"]` - ))) - ) { - gtagId && (await loadGtagScript(gtagId)); - gtmId && (await loadGtmScript(gtmId)); - if (gtagId) { - gtag('js', new Date()); - gtag('config', `${gtagId}`); - } - if (gtmId) { - dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); - } - } - if (sessionStorage.getItem('consentGranted') === 'true') { - gtag('consent', 'update', { - ad_user_data: 'granted', - ad_personalization: 'granted', - ad_storage: 'granted', - analytics_storage: 'granted', - }); - } - }; - const paymentRevoke = sessionStorage.getItem('aesirx-analytics-opt-payment'); - const optInRevokes = Object.keys(sessionStorage) - .filter((key) => key.startsWith('aesirx-analytics-optin')) - .map((key) => key); - return ( -
-
-
-
- -
-
- {!showExpandRevoke && ( - <> - Background Image -
{ - if ( - osName !== OsTypes?.IOS && - isMobile && - !connection && - sessionStorage.getItem('aesirx-analytics-revoke') && - parseInt(sessionStorage.getItem('aesirx-analytics-revoke')) > 2 - ) { - setActiveConnectorType(WALLET_CONNECT); - } - setShowExpandRevoke(true); - }} - > - SoP Icon - {(window as any)?.aesirx_analytics_translate?.txt_shield_of_privacy ?? - t('txt_shield_of_privacy')} -
- - )} - - {showExpandRevoke && ( - <> - -
{ - setShowExpandRevoke(false); - }} - > - No Icon -
-
- {paymentRevoke - ? ((window as any)?.aesirx_analytics_translate - ?.txt_you_can_revoke_on_the_site ?? t('txt_you_can_revoke_on_the_site')) - : ((window as any)?.aesirx_analytics_translate?.txt_you_can_revoke ?? - t('txt_you_can_revoke'))} -
-
- { - setRevokeConsentOption(value); - }} - /> - {optInRevokes?.map((item, key) => { - return ( - { - setRevokeConsentOption(value); - }} - /> - ); - })} - - -
-
-
-
- - {(window as any)?.aesirx_analytics_translate?.txt_manage_consent ?? - t('txt_manage_consent')} - - {loading === 'done' ? ( - - ) : ( - <> - )} - {(sessionStorage.getItem('aesirx-analytics-revoke') === '4' || - sessionStorage.getItem('aesirx-analytics-revoke') === '2') && ( -
- Loading...
}> - Login Revoke} - ssoState={'noscopes'} - onGetData={onGetData} - /> - -
- )} -
-
-
-
- - )} -
-
-
-
-
-
- -
- {!showExpandConsent ? ( - <> -
- Background Image -
{ - setShowExpandConsent(true); - const rejectConsent = sessionStorage.getItem('aesirx-analytics-rejected'); - rejectConsent && setShowRejectedConsent(true); - sessionStorage.removeItem('aesirx-analytics-rejected'); - }} - > - SoP Icon - {(window as any)?.aesirx_analytics_translate?.txt_shield_of_privacy ?? - t('txt_shield_of_privacy')} -
-
- - ) : ( -
- {level ? ( - <> - {upgradeLayout ? ( - <> -
- <> -

- {(window as any)?.aesirx_analytics_translate - ?.txt_select_your_preferred ?? t('txt_select_your_preferred')} -

-
- - - -
- - Check Icon - -
- {(window as any)?.aesirx_analytics_translate - ?.txt_decentralized_wallet_will_be_loaded ?? - t('txt_decentralized_wallet_will_be_loaded')} -
-
-
- - Check Icon - -
- {(window as any)?.aesirx_analytics_translate - ?.txt_both_first_party_third_party ?? - t('txt_both_first_party_third_party')} -
-
-
- - Check Icon - -
- {(window as any)?.aesirx_analytics_translate - ?.txt_all_consented_data_will_be_collected ?? - t('txt_all_consented_data_will_be_collected')} -
-
-
- - Check Icon - -
- {(window as any)?.aesirx_analytics_translate - ?.txt_users_can_revoke ?? t('txt_users_can_revoke')} -
-
- - } - isUpgrade={true} - /> - - - -
- - Check Icon - -
- {(window as any)?.aesirx_analytics_translate - ?.txt_decentralized_wallet_will_be_loaded ?? - t('txt_decentralized_wallet_will_be_loaded')} -
-
-
- - Check Icon - -
- {(window as any)?.aesirx_analytics_translate - ?.txt_both_first_party_third_party ?? - t('txt_both_first_party_third_party')} -
-
-
- - Check Icon - -
- {(window as any)?.aesirx_analytics_translate - ?.txt_all_consented_data_will_be_collected ?? - t('txt_all_consented_data_will_be_collected')} -
-
-
- - Check Icon - -
- {(window as any)?.aesirx_analytics_translate - ?.txt_users_can_revoke_dapp ?? - t('txt_users_can_revoke_dapp')} -
-
-
- - Check Icon - -
- {(window as any)?.aesirx_analytics_translate - ?.txt_users_can_earn ?? t('txt_users_can_earn')} -
-
- - } - isUpgrade={true} - /> - -
-
-
- -
- {layout !== 'simple-consent-mode' && ( - - Loading... -
- } - > - - {(window as any)?.aesirx_analytics_translate - ?.txt_continue ?? t('txt_continue')} - - } - ssoState={'noscopes'} - onGetData={onGetData} - {...(level === 2 ? { noCreateAccount: true } : {})} - /> - - )} -
- {level === 4 && !account && !address ? ( - <> - ) : ( - - )} -
- -
- - ) : showRejectedConsent ? ( - <> - -
- - -
- {loading === 'done' ? ( - <> - - - {level === 2 || (level === 4 && !account && !address) ? ( - <> - ) : ( - - )} - {layout === 'simple-consent-mode' ? ( - <> - ) : ( - <> - {' '} - - )} - - ) : ( - <> - )} -
- -
- - ) : ( - <> - -
- - -
- {loading === 'done' ? ( - <> - - - {level === 2 || (level === 4 && !account && !address) ? ( - <> - ) : ( - - )} - {layout === 'simple-consent-mode' ? ( - <> - ) : ( - <> - {' '} - - )} - - ) : ( - <> - )} -
- -
- - )} - - ) : ( -
- - - - - - - - - - -
- )} -
- )} -
-
-
- {!account && loading === 'connect' && ( - - )} - - ); -}; - -export default ConsentComponentCustom; diff --git a/src/Components/ConsentHeader.tsx b/src/Components/ConsentHeader.tsx deleted file mode 100644 index 70b9995e..00000000 --- a/src/Components/ConsentHeader.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from 'react'; -import bg from '../Assets/bg.png'; -import privacy from '../Assets/privacy.svg'; -import { useTranslation } from 'react-i18next'; -import { useI18nextContext } from '../utils/I18nextProvider'; -import Select, { StylesConfig } from 'react-select'; -import i18n from 'i18next'; - -const ConsentHeader = ({ isRejectedLayout, languageSwitcher }: any) => { - const { t } = useTranslation(); - const { listLanguages } = useI18nextContext(); - const currentLanguage = listLanguages.filter( - (lang: any) => lang.value == i18n.language || i18n.language?.includes(lang.value) - ); - const customStyles: StylesConfig = { - menuList: (base) => ({ - ...base, - maxHeight: '160px', - }), - }; - return ( -
-
- {(window as any)?.aesirx_analytics_translate?.txt_tracking_data_privacy ?? - t('txt_tracking_data_privacy')} -
- {languageSwitcher ? ( -
-