Merge branch 'dev' into profile-vaults

src/components/ReferralButton/ReferralButton.tsx

@@ -1,74 +1,84 @@
+import RefferalModal from 'components/RefferalModal';
 import Tooltip from 'components/Tooltip';
-import ROUTES from 'constants/routes';
-import React from 'react';
+import useGetReffererIdQuery from 'queries/referral/useGetReffererIdQuery';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { matchPath, useLocation } from 'react-router-dom';
-import { toast } from 'react-toastify';
 import { getIsWalletConnected, getWalletAddress } from 'redux/modules/wallet';
 import { RootState } from 'redux/rootReducer';
 import styled from 'styled-components';
-import { FlexDivCentered } from 'styles/common';
-import { buildReferralLink } from 'utils/routes';
+import { FlexDivCentered, FlexDivColumn, FlexDiv } from 'styles/common';
+import { buildReffererLink } from 'utils/routes';
+import { toast } from 'react-toastify';
+
 const ReferralButton: React.FC = () => {
     const { t } = useTranslation();
     const isWalletConnected = useSelector((state: RootState) => getIsWalletConnected(state));
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
     const walletAddress = useSelector((state: RootState) => getWalletAddress(state));
-    const location = useLocation();
+
+    const reffererIDQuery = useGetReffererIdQuery(walletAddress || '');
+    const reffererID = reffererIDQuery.isSuccess && reffererIDQuery.data ? reffererIDQuery.data : '';
+
+    const getButtonComponent = () => (
+        <StyledButton onClick={() => setIsModalOpen(true)} customDisabled={!isWalletConnected}>
+            {t('common.referral.button.label')}
+        </StyledButton>
+    );
 
     const referralClickHandler = () => {
         if (!walletAddress) {
             return;
         }
-        const referralPath = matchPath(location.pathname, ROUTES.Markets.Market)
-            ? location.pathname
-            : ROUTES.Markets.Home;
 
-        const referralLink = `${window.location.origin}${buildReferralLink(
-            referralPath,
-            window.location.hash,
-            window.location.search,
-            walletAddress
-        )}`;
+        const referralLink = buildReffererLink(reffererID);
 
         navigator.clipboard.writeText(referralLink);
         toast(t('common.referral.link-copied'), { type: 'success' });
     };
 
-    const getButtonComponent = () => (
-        <StyledButton onClick={referralClickHandler} customDisabled={!isWalletConnected}>
-            {t('common.referral.button.label')}
-        </StyledButton>
-    );
-
     return (
         <Container>
-            <Tooltip
-                overlay={
-                    <>
-                        {isWalletConnected
-                            ? t('common.referral.button.enabled-tooltip')
-                            : t('common.referral.button.disbled-tooltip')}
-                    </>
-                }
-                component={getButtonComponent()}
-                iconFontSize={23}
-                marginLeft={2}
-                top={0}
-            />
+            {isModalOpen && <RefferalModal onClose={() => setIsModalOpen(false)} />}
+            <ButtonContainer>
+                <Tooltip
+                    overlay={
+                        <>
+                            {isWalletConnected
+                                ? t('common.referral.button.enabled-tooltip')
+                                : t('common.referral.button.disbled-tooltip')}
+                        </>
+                    }
+                    component={getButtonComponent()}
+                    iconFontSize={23}
+                    marginLeft={2}
+                    top={0}
+                />
+                {reffererID && (
+                    <CopyContainer>
+                        <span>{t('common.referral.your-referral-id')}:</span>
+                        <span>{reffererID} </span>
+                        <CopyIcon onClick={referralClickHandler} className={`icon-thales icon-thales--copy`} />
+                    </CopyContainer>
+                )}
+            </ButtonContainer>
         </Container>
     );
 };
 
 const Container = styled(FlexDivCentered)`
     position: relative;
-    height: 28px;
+    height: 92px;
     button {
         padding: 0 20px;
         width: 100%;
     }
 `;
 
+const ButtonContainer = styled(FlexDivColumn)`
+    height: 100%;
+`;
+
 const StyledButton = styled.button<{ customDisabled?: boolean }>`
     background: ${(props) => props.theme.button.background.secondary};
     border: 2px solid ${(props) => props.theme.button.borderColor.secondary};
@@ -92,4 +102,19 @@ const StyledButton = styled.button<{ customDisabled?: boolean }>`
     }
 `;
 
+const CopyContainer = styled(FlexDiv)`
+    font-size: 17px;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    & > span {
+        margin-right: 5px;
+    }
+`;
+
+const CopyIcon = styled.i`
+    color: ${(props) => props.theme.button.borderColor.secondary};
+    cursor: pointer;
+`;
+
 export default ReferralButton;

src/components/RefferalModal/RefferalModal.tsx

@@ -0,0 +1,175 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import axios from 'axios';
+import Modal from 'components/Modal';
+import styled from 'styled-components';
+import { FlexDivColumnCentered, FlexDivRowCentered, FlexDivCentered } from 'styles/common';
+import { useSelector } from 'react-redux';
+import { RootState } from 'redux/rootReducer';
+import { getWalletAddress } from 'redux/modules/wallet';
+import { toast } from 'react-toastify';
+import networkConnector from 'utils/networkConnector';
+import { generalConfig } from 'config/general';
+import { buildReffererLink } from 'utils/routes';
+import { useTranslation } from 'react-i18next';
+import useGetReffererIdQuery from 'queries/referral/useGetReffererIdQuery';
+
+type RefferalModalProps = {
+    onClose: () => void;
+};
+
+export const RefferalModal: React.FC<RefferalModalProps> = ({ onClose }) => {
+    const { t } = useTranslation();
+    const [reffererID, setReffererID] = useState('');
+    const [savedReffererID, setSavedReffererID] = useState('');
+    const walletAddress = useSelector((state: RootState) => getWalletAddress(state));
+
+    const reffererIDQuery = useGetReffererIdQuery(walletAddress || '', { enabled: !!walletAddress });
+
+    useEffect(() => {
+        if (reffererIDQuery.isSuccess && reffererIDQuery.data) {
+            setReffererID(reffererIDQuery.data);
+            setSavedReffererID(reffererIDQuery.data);
+        }
+    }, [reffererIDQuery.isSuccess, reffererIDQuery.data]);
+
+    const onSubmit = useCallback(async () => {
+        const signature = await (networkConnector as any).signer.signMessage(reffererID);
+        const response = await axios.post(`${generalConfig.API_URL}/update-refferer-id`, {
+            walletAddress,
+            reffererID,
+            signature,
+            previousReffererID: savedReffererID,
+        });
+        if (response.data.error) {
+            toast(t('common.referral.id-exists'), { type: 'error' });
+        } else {
+            setSavedReffererID(reffererID);
+            toast(t('common.referral.id-create-success'), { type: 'success' });
+        }
+    }, [reffererID, walletAddress, savedReffererID, t]);
+
+    const referralClickHandler = () => {
+        if (!walletAddress) {
+            return;
+        }
+
+        const referralLink = buildReffererLink(savedReffererID);
+
+        navigator.clipboard.writeText(referralLink);
+        toast(t('common.referral.link-copied'), { type: 'success' });
+    };
+
+    return (
+        <Modal
+            customStyle={{ content: { maxWidth: '100%' } }}
+            title={t('common.referral.modal.title')}
+            onClose={onClose}
+        >
+            <Container>
+                <Description>{t('common.referral.modal.description')}</Description>
+                <FlexDivRowCentered>
+                    <StyledInput value={reffererID} onChange={(e) => setReffererID(e.target.value)} />
+                    <SubmitButton disabled={!reffererID || savedReffererID === reffererID} onClick={onSubmit}>
+                        {t('common.referral.modal.submit-button')}
+                    </SubmitButton>
+                </FlexDivRowCentered>
+                <FlexDivCentered style={{ marginTop: '30px' }}>
+                    <CopyToClipboardButton
+                        onClick={referralClickHandler}
+                        disabled={!savedReffererID}
+                        customDisabled={!savedReffererID}
+                    >
+                        {t('common.referral.modal.copy-button')}
+                    </CopyToClipboardButton>
+                </FlexDivCentered>
+            </Container>
+        </Modal>
+    );
+};
+
+const Container = styled(FlexDivColumnCentered)`
+    width: 400px;
+    margin-top: 30px;
+    @media (max-width: 575px) {
+        width: auto;
+    }
+`;
+
+const Description = styled.div`
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 20px;
+    margin-bottom: 15px;
+    color: ${(props) => props.theme.textColor.primary};
+    p {
+        margin-bottom: 10px;
+    }
+    a {
+        cursor: pointer;
+        color: #91bced;
+        &:hover {
+            color: #00f9ff;
+        }
+    }
+`;
+
+const StyledInput = styled.input`
+    background: #ffffff;
+    border-radius: 5px;
+    border: 2px solid #1a1c2b;
+    color: #1a1c2b;
+    width: 300px;
+    height: 34px;
+    padding-left: 10px;
+    padding-right: 60px;
+    font-size: 18px;
+    outline: none;
+    @media (max-width: 575px) {
+        width: 250px;
+    }
+`;
+
+const SubmitButton = styled.button`
+    background: linear-gradient(88.84deg, #2fc9dd 19.98%, #1ca6b9 117.56%);
+    border-radius: 8px;
+    margin: 0 20px;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 23px;
+    color: #1a1c2b;
+    width: 252px;
+    border: none;
+    padding: 5px;
+    cursor: pointer;
+    text-transform: uppercase;
+    &:disabled {
+        opacity: 0.4;
+        cursor: default;
+    }
+`;
+
+const CopyToClipboardButton = styled.button<{ customDisabled?: boolean }>`
+    background: ${(props) => props.theme.button.background.tertiary};
+    border: 2px solid ${(props) => props.theme.button.borderColor.secondary};
+    color: ${(props) => props.theme.button.textColor.quaternary};
+    border-radius: 5px;
+    padding: 1px 20px 0px 20px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12.5px;
+    text-align: center;
+    outline: none;
+    text-transform: none;
+    cursor: pointer;
+    min-height: 28px;
+    width: fit-content;
+    white-space: nowrap;
+    opacity: ${(props) => (props.customDisabled ? '0.4' : '1')};
+    &:hover {
+        cursor: ${(props) => (props.customDisabled ? 'default' : 'pointer')};
+        opacity: ${(props) => (props.customDisabled ? '0.4' : '0.8')};
+    }
+`;
+
+export default RefferalModal;

src/components/RefferalModal/index.ts

@@ -0,0 +1 @@
+export { default } from './RefferalModal';

src/constants/queryKeys.ts

@@ -61,6 +61,7 @@ export const QUERY_KEYS = {
         walletAddress,
         networkId,
     ],
+    ReferrerID: (walletAddress: string) => ['referrerId', walletAddress],
     Referrers: (networkId: NetworkId) => ['referrers', networkId],
     ReferredTraders: (walletAddress: string, networkId: NetworkId) => ['referredTraders', walletAddress, networkId],
     ReferralOverview: (walletAddress: string, networkId: NetworkId) => ['referralOverview', walletAddress, networkId],
@@ -114,6 +115,7 @@ export const QUERY_KEYS = {
         ],
         AllVaultsUserData: (walletAddress: string, networkId: NetworkId) => ['data', walletAddress, networkId],
         Trades: (vaultAddress: string, networkId: NetworkId) => [vaultAddress, 'trades', networkId],
+        ParlayTrades: (vaultAddress: string, networkId: NetworkId) => [vaultAddress, 'parlayTrades', networkId],
         PnL: (vaultAddress: string, networkId: NetworkId) => [vaultAddress, 'pnl', networkId],
         UserTransactions: (vaultAddress: string, networkId: NetworkId) => [vaultAddress, 'userTransactions', networkId],
     },

src/constants/tags.ts

@@ -347,7 +347,7 @@ export const SPORT_PERIODS_MAP: SportsMap = {
     9002: 'quarter',
     9003: 'inning',
     9004: 'quarter',
-    9005: 'quarter',
+    9005: 'half',
     9006: 'period',
     9007: 'round',
     9008: 'quarter',

src/constants/vault.ts

@@ -35,6 +35,14 @@ export const VAULT_MAP: Record<string, any> = {
             420: '',
         },
     },
+    'parlay-discount-vault': {
+        addresses: {
+            5: '',
+            10: '0x8285047F33c26c1Bf5B387f2b07F21A2aF29Ace2',
+            42: '',
+            420: '0x7e415D74eb5B01531B2059D1901aCe751c6B26B3',
+        },
+    },
 };
 
 export enum VaultTransaction {

src/i18n/cn.json

@@ -48,7 +48,16 @@
                 "label": "通过推广赚取收益",
                 "disbled-tooltip": "链接钱包生成一个推广链接",
                 "enabled-tooltip": "邀请朋友在Overtime参与比赛预测，同时赚取收益分成。"
-            }
+            },
+            "modal": {
+                "submit-button": "提交",
+                "description": "选择您的推荐人 ID",
+                "title": "推荐编号",
+                "copy-button": "复制推荐链接"
+            },
+            "id-create-success": "成功设置推荐人ID",
+            "id-exists": "推荐 ID 已存在",
+            "your-referral-id": "您的推荐 ID"
         },
         "swap": {
             "title": "获取 美元",
@@ -853,7 +862,9 @@
                 "bonus": "奖金",
                 "place": "地方",
                 "my-total-score": "我的总分",
-                "points": "积分"
+                "points": "积分",
+                "rank-volume": "按体积排名",
+                "rank-games": "按猜的游戏排名"
             },
             "round-1": "第二轮",
             "round-5": "最终的",
@@ -1013,4 +1024,4 @@
             }
         }
     }
-}
+}