feat: zkme

.env

@@ -18,6 +18,7 @@ VITE_TRANSAK_URL=https://global.transak.com
 VITE_TRANSAK_API_KEY=48949c0b-2d20-4e3a-a311-51ca91ae8c0d
 
 VITE_KS_SETTING_API=https://ks-setting.kyberswap.com/api
+VITE_COMMON_SERVICE_API=https://common-service.kyberswap.com/api
 VITE_BLACKJACK_API=https://blackjack.kyberswap.com/api
 
 VITE_GTM_ID=GTM-TRQCJ8F

.env.dev

@@ -18,6 +18,7 @@ VITE_TRANSAK_URL=https://staging-global.transak.com
 VITE_TRANSAK_API_KEY=327b8b63-626b-4376-baf2-70a304c48488
 
 VITE_KS_SETTING_API=https://ks-setting.dev.kyberengineering.io/api
+VITE_COMMON_SERVICE_API=https://common-service.dev.kyberengineering.io/api
 VITE_BLACKJACK_API=https://blackjack.dev.kyberengineering.io/api
 
 VITE_GTM_ID=

.env.production

@@ -18,6 +18,7 @@ VITE_TRANSAK_URL=https://global.transak.com
 VITE_TRANSAK_API_KEY=48949c0b-2d20-4e3a-a311-51ca91ae8c0d
 
 VITE_KS_SETTING_API=https://ks-setting.kyberswap.com/api
+VITE_COMMON_SERVICE_API=https://common-service.kyberswap.com/api
 VITE_BLACKJACK_API=https://blackjack.kyberswap.com/api
 
 VITE_GTM_ID=GTM-TRQCJ8F

.env.stg

@@ -17,6 +17,7 @@ VITE_TRANSAK_URL=https://staging-global.transak.com
 VITE_TRANSAK_API_KEY=327b8b63-626b-4376-baf2-70a304c48488
 
 VITE_KS_SETTING_API=https://ks-setting.stg.kyberengineering.io/api
+VITE_COMMON_SERVICE_API=https://common-service.stg.kyberengineering.io/api
 VITE_BLACKJACK_API=https://blackjack.stg.kyberengineering.io/api
 
 VITE_GTM_ID=

package.json

@@ -70,6 +70,7 @@
     "@web3-react/metamask": "^8.2.1",
     "@web3-react/types": "8.2.0",
     "@web3-react/walletconnect-v2": "^8.3.3",
+    "@zkmelabs/widget": "^0.1.3",
     "aos": "^2.3.4",
     "axios": "1.2.1",
     "base64-js": "^1.5.1",

src/components/Announcement/Popups/TransactionPopup.tsx

@@ -188,6 +188,8 @@ const SUMMARY: { [type in TRANSACTION_TYPE]: SummaryFunction } = {
   [TRANSACTION_TYPE.KYBERDAO_UNSTAKE]: summary1Token,
   [TRANSACTION_TYPE.KYBERDAO_VOTE]: summaryTypeOnly,
   [TRANSACTION_TYPE.KYBERDAO_DELEGATE]: summaryDelegateDao,
+
+  [TRANSACTION_TYPE.CLAIM]: () => 'Claimed',
 }
 
 const CUSTOM_SUCCESS_STATUS: { [key in string]: string } = {

src/components/Header/web3/WalletModal/Option.tsx

@@ -125,6 +125,7 @@ const Option = ({
 
   const content = (
     <OptionCardClickable
+      role="button"
       id={`connect-${walletKey}`}
       data-testid={`connect-${walletKey}`}
       onClick={

src/components/Header/web3/WalletModal/index.tsx

@@ -56,7 +56,7 @@ const ContentWrapper = styled.div`
   border-bottom-right-radius: 20px;
 `
 
-const TermAndCondition = styled.div`
+export const TermAndCondition = styled.div`
   padding: 8px;
   font-size: 12px;
   font-weight: 500;

src/components/WalletPopup/Transactions/TransactionItem.tsx

@@ -376,6 +376,7 @@ const DESCRIPTION_MAP: {
   [TRANSACTION_TYPE.ELASTIC_COLLECT_FEE]: DescriptionLiquidity,
 
   [TRANSACTION_TYPE.HARVEST]: DescriptionHarvestFarmReward,
+  [TRANSACTION_TYPE.CLAIM]: DescriptionApproveClaim,
 }
 
 type Prop = {

src/constants/env.ts

@@ -18,6 +18,7 @@ export const AGGREGATOR_API = required('AGGREGATOR_API')
 export const SENTRY_DNS = required('SENTRY_DNS')
 export const REWARD_SERVICE_API = required('REWARD_SERVICE_API')
 export const KS_SETTING_API = required('KS_SETTING_API')
+export const COMMON_SERVICE_API = required('COMMON_SERVICE_API')
 export const BLACKJACK_API = required('BLACKJACK_API')
 export const BLOCK_SERVICE_API = required('BLOCK_SERVICE_API')
 export const PRICE_CHART_API = required('PRICE_CHART_API')

src/hooks/useMixpanel.ts

@@ -144,13 +144,6 @@ export enum MIXPANEL_TYPE {
   MEV_ADD_CLICK_MODAL,
   MEV_ADD_RESULT,
 
-  // type and swap
-  TAS_TYPING_KEYWORD,
-  TAS_SELECT_PAIR,
-  TAS_LIKE_PAIR,
-  TAS_DISLIKE_PAIR,
-  TAS_PRESS_CTRL_K,
-
   BANNER_CLICK,
   CLOSE_BANNER_CLICK,
 
@@ -880,30 +873,6 @@ export default function useMixpanel(currencies?: { [field in Field]?: Currency }
           break
         }
 
-        // type and swap
-        case MIXPANEL_TYPE.TAS_TYPING_KEYWORD: {
-          mixpanel.track('Type and Swap - Typed on the text box', { text: payload })
-          break
-        }
-        case MIXPANEL_TYPE.TAS_SELECT_PAIR: {
-          mixpanel.track('Type and Swap - Selected an option', { option: payload })
-          break
-        }
-        case MIXPANEL_TYPE.TAS_LIKE_PAIR: {
-          mixpanel.track('Type and Swap - Favorite a token pair', payload)
-          break
-        }
-        case MIXPANEL_TYPE.TAS_DISLIKE_PAIR: {
-          mixpanel.track('Type and Swap -  Un-favorite a token pair', payload)
-          break
-        }
-        case MIXPANEL_TYPE.TAS_PRESS_CTRL_K: {
-          mixpanel.track('Type and Swap - User click Ctrl + K (or Cmd + K) or Clicked on the text box', {
-            navigation: payload,
-          })
-          break
-        }
-
         case MIXPANEL_TYPE.BANNER_CLICK: {
           mixpanel.track('User click on "Banner" at swap page')
           break

src/index.tsx

@@ -2,6 +2,7 @@ import * as Sentry from '@sentry/react'
 import { BrowserTracing } from '@sentry/tracing'
 import { Web3ReactHooks, Web3ReactProvider } from '@web3-react/core'
 import { Connector } from '@web3-react/types'
+import '@zkmelabs/widget/dist/style.css'
 import AOS from 'aos'
 import 'aos/dist/aos.css'
 import dayjs from 'dayjs'

src/pages/ElasticSnapshot/components/ChooseGrantModal.tsx

@@ -0,0 +1,197 @@
+import { Trans, t } from '@lingui/macro'
+import { rgba } from 'polished'
+import { useEffect, useState } from 'react'
+import { Flex, Text } from 'rebass'
+import { useCreateOptionMutation } from 'services/commonService'
+import styled from 'styled-components'
+
+import { NotificationType } from 'components/Announcement/type'
+import { ButtonOutlined, ButtonPrimary } from 'components/Button'
+import Dots from 'components/Dots'
+import Modal from 'components/Modal'
+import { useActiveWeb3React, useWeb3React } from 'hooks'
+import useTheme from 'hooks/useTheme'
+import { useNotify } from 'state/application/hooks'
+
+const Option = styled.div<{ disabled: boolean; active: boolean }>`
+  border: 1px solid ${({ theme, active }) => (active ? theme.primary : theme.border)};
+  background: ${({ theme, active }) => (active ? rgba(theme.primary, 0.2) : theme.buttonGray)};
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-radius: 16px;
+  gap: 8px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  transition: all 0.2s;
+`
+const Opt = styled.div<{ active: boolean }>`
+  text-shadow: ${({ theme, active }) => (active ? `0px 0px 3px ${theme.primary}` : undefined)};
+  color: ${({ theme, active }) => (!active ? theme.subText : theme.primary)};
+  width: 40px;
+  height: 40px;
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 40px;
+  text-align: center;
+`
+
+export default function ChooseGrantModal({
+  isOpen,
+  onDismiss,
+  userSelectedOption,
+}: {
+  isOpen: boolean
+  onDismiss: () => void
+  userSelectedOption?: string
+}) {
+  const theme = useTheme()
+
+  const options = {
+    A: t`USD stablecoins equivalent to 60% of the Reference Value of Lost Affected Assets contributed from such Affected Address, vested continuously on a linear basis over 3 months.`,
+    B: t`USD stablecoins equivalent to 100% of the Reference Value of Lost Affected Assets contributed from such Affected Address, vested continuously on a linear basis over 12 months.`,
+    // C: t`Opt out.`,
+  }
+
+  const [loading, setLoading] = useState(false)
+  const [selectedOption, setSelectedOption] = useState(userSelectedOption || '')
+  useEffect(() => {
+    if (userSelectedOption) setSelectedOption(userSelectedOption)
+  }, [userSelectedOption])
+
+  const { account } = useActiveWeb3React()
+  const { library } = useWeb3React()
+  const [createOption] = useCreateOptionMutation()
+  const notify = useNotify()
+
+  const signMessage = () => {
+    const message = (() => {
+      switch (selectedOption) {
+        case 'A':
+          return 'I confirm choosing Option A - USD stablecoins equivalent to 60% of the Reference Value of Lost Affected Assets contributed from such Affected Address, vested continuously on a linear basis over 3 months.'
+        case 'B':
+          return 'I confirm choosing Option B - USD stablecoins equivalent to 100% of the Reference Value of Lost Affected Assets contributed from such Affected Address, vested continuously on a linear basis over 12 months.'
+        case 'C':
+        default:
+          return 'I confirm choosing Option C - Opt out.'
+      }
+    })()
+    setLoading(true)
+    library
+      ?.getSigner()
+      .signMessage(message)
+      .then(async signature => {
+        if (signature && account) {
+          const res = await createOption({
+            walletAddress: account,
+            signature,
+            message,
+          })
+          if ((res as any)?.data?.code === 0) {
+            notify({
+              title: t`Choose option successfully`,
+              summary: t`You have chosen option ${selectedOption} for KyberSwap Elastic Exploit Treasury Grant Program`,
+              type: NotificationType.SUCCESS,
+            })
+            onDismiss()
+          } else {
+            notify({
+              title: t`Error`,
+              summary: (res as any).error?.data?.message || t`Something went wrong`,
+              type: NotificationType.ERROR,
+            })
+          }
+        } else {
+          notify({
+            title: t`Error`,
+            summary: t`Something went wrong`,
+            type: NotificationType.ERROR,
+          })
+        }
+      })
+      .finally(() => setLoading(false))
+  }
+
+  // const [isAcceptTerm, setIsAcceptTerm] = useState(false)
+
+  return (
+    <Modal isOpen={isOpen} onDismiss={onDismiss} maxWidth="480px" width="100%">
+      <Flex flexDirection="column" padding="20px" bg={theme.background} width="100%" lineHeight={1.5}>
+        <Text color={theme.text} fontSize="20px" fontWeight="500" textAlign="center">
+          <Trans>Treasury Grant Options</Trans>
+        </Text>
+
+        <Text fontSize="12px" marginTop="24px" color={theme.subText} textAlign="justify">
+          <Trans>
+            KyberSwap Elastic Exploit Treasury Grant Program (“Program”) will support Affected Users who have lost
+            Affected Assets to the KyberSwap Elastic Exploit. Under the Program, an Affected User who fulfils
+            Eligibility Requirements can choose from one of the following options for the Treasury Grants in respect of
+            each Affected Address of such Affected User.
+          </Trans>
+        </Text>
+
+        <Flex flexDirection="column" sx={{ gap: '12px' }} marginTop="24px">
+          {Object.keys(options).map(opt => {
+            return (
+              <Option
+                key={opt}
+                onClick={() => !loading && !userSelectedOption && setSelectedOption(opt)}
+                active={selectedOption === opt}
+                disabled={!!userSelectedOption}
+                role="button"
+              >
+                <Opt active={selectedOption === opt}>{opt}</Opt>
+                <Text flex={1} fontSize="12px">
+                  {options[opt]}
+                </Text>
+              </Option>
+            )
+          })}
+        </Flex>
+
+        {!userSelectedOption && (
+          <Text marginTop="6px" fontSize="12px" color={theme.warning}>
+            <Trans>Once you make a selection, you are unable to change your choice.</Trans>
+          </Text>
+        )}
+
+        {userSelectedOption ? (
+          <Flex marginTop="24px">
+            <ButtonOutlined onClick={onDismiss}>
+              <Trans>Close</Trans>
+            </ButtonOutlined>
+          </Flex>
+        ) : (
+          <>
+            {/* <TermAndCondition onClick={() => setIsAcceptTerm(prev => !prev)} style={{ marginTop: '24px' }}>
+              <input
+                type="checkbox"
+                checked={isAcceptTerm}
+                data-testid="accept-term"
+                style={{ marginRight: '12px', height: '14px', width: '14px', minWidth: '14px', cursor: 'pointer' }}
+              />
+              <Text color={theme.subText}>
+                <Trans>Accept </Trans>{' '}
+                <ExternalLink href={TERM_FILES_PATH.KYBERSWAP_TERMS} onClick={e => e.stopPropagation()}>
+                  <Trans>KyberSwap&lsquo;s Terms of Use</Trans>
+                </ExternalLink>{' '}
+                <Trans>and</Trans>{' '}
+                <ExternalLink href={TERM_FILES_PATH.PRIVACY_POLICY} onClick={e => e.stopPropagation()}>
+                  <Trans>Privacy Policy</Trans>
+                </ExternalLink>
+              </Text>
+            </TermAndCondition>
+            */}
+            <Flex marginTop="16px" sx={{ gap: '1rem' }}>
+              <ButtonOutlined onClick={onDismiss}>
+                <Trans>Rethink</Trans>
+              </ButtonOutlined>
+              <ButtonPrimary onClick={signMessage} disabled={!selectedOption || loading}>
+                {loading ? <Dots>Signing</Dots> : <Trans>Sign with your wallet</Trans>}
+              </ButtonPrimary>
+            </Flex>
+          </>
+        )}
+      </Flex>
+    </Modal>
+  )
+}