feat: update connect wallets (#2249)

KyberNetwork · Oct 13, 2023 · 0e82e56 · 0e82e56
1 parent 4cb133c
commit 0e82e56
Show file tree

Hide file tree

Showing 28 changed files with 45 additions and 62 deletions.
diff --git a/src/components/Header/web3/SelectWallet.tsx b/src/components/Header/web3/SelectWallet.tsx
@@ -198,7 +198,7 @@ function Web3StatusInner() {
       id={TutorialIds.BUTTON_CONNECT_WALLET}
       data-testid="button-connect-wallet"
     >
-      <Trans>Connect Wallet</Trans>
+      <Trans>Connect</Trans>
     </ButtonLight>
   )
 }

diff --git a/src/components/Header/web3/WalletModal/index.tsx b/src/components/Header/web3/WalletModal/index.tsx
@@ -32,7 +32,6 @@ import {
   useWalletModalToggle,
 } from 'state/application/hooks'
 import { useIsConnectingWallet } from 'state/authen/hooks'
-import { useIsAcceptedTerm } from 'state/user/hooks'
 import { ExternalLink } from 'theme'
 import { isEVMWallet, isOverriddenWallet, isSolanaWallet } from 'utils'
 
@@ -62,7 +61,7 @@ const ContentWrapper = styled.div`
 `
 
 const TermAndCondition = styled.div`
-  padding: 8px;
+  padding: 8px 16px;
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;
@@ -158,8 +157,6 @@ export default function WalletModal() {
 
   const previousAccount = usePrevious(account)
 
-  const [isAcceptedTerm, setIsAcceptedTerm] = useIsAcceptedTerm()
-
   const location = useLocation()
   const { mixpanelHandler } = useMixpanel()
 
@@ -316,36 +313,19 @@ export default function WalletModal() {
           </CloseIcon>
         </RowBetween>
         {(walletView === WALLET_VIEWS.ACCOUNT || walletView === WALLET_VIEWS.CHANGE_WALLET) && (
-          <TermAndCondition
-            onClick={() => {
-              if (!isAcceptedTerm) {
-                mixpanelHandler(MIXPANEL_TYPE.WALLET_CONNECT_ACCEPT_TERM_CLICK)
-              }
-              setIsAcceptedTerm(!isAcceptedTerm)
-            }}
-          >
-            <input
-              onChange={() => {
-                //
-              }}
-              type="checkbox"
-              checked={isAcceptedTerm}
-              data-testid="accept-term"
-              style={{ marginRight: '12px', height: '14px', width: '14px', minWidth: '14px', cursor: 'pointer' }}
-            />
+          <TermAndCondition>
             <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 fontSize={10} as="span">
-                <Trans>Last updated: {dayjs(TERM_FILES_PATH.VERSION).format('DD MMM YYYY')}</Trans>
-              </Text>
+              <Trans>
+                By connecting a wallet, you accept{' '}
+                <ExternalLink href={TERM_FILES_PATH.KYBERSWAP_TERMS} onClick={e => e.stopPropagation()}>
+                  KyberSwap&lsquo;s Terms of Use
+                </ExternalLink>{' '}
+                and consent to its{' '}
+                <ExternalLink href={TERM_FILES_PATH.PRIVACY_POLICY} onClick={e => e.stopPropagation()}>
+                  Privacy Policy
+                </ExternalLink>
+                . Last updated: {dayjs(TERM_FILES_PATH.VERSION).format('DD MMM YYYY')}
+              </Trans>
             </Text>
           </TermAndCondition>
         )}

diff --git a/src/components/Menu/FaucetModal.tsx b/src/components/Menu/FaucetModal.tsx
@@ -177,7 +177,7 @@ function FaucetModal() {
             }}
             style={{ borderRadius: '24px', height: '44px' }}
           >
-            <Trans>Connect Wallet</Trans>
+            <Trans>Connect</Trans>
           </ButtonPrimary>
         )}
       </Flex>

diff --git a/src/components/SwapForm/SwapActionButton/index.tsx b/src/components/SwapForm/SwapActionButton/index.tsx
@@ -194,7 +194,7 @@ const SwapActionButton: React.FC<Props> = ({
     if (!account) {
       return (
         <ButtonLight onClick={toggleWalletModal}>
-          <Trans>Connect Wallet</Trans>
+          <Trans>Connect</Trans>
         </ButtonLight>
       )
     }

diff --git a/src/components/YieldPools/ListItem.tsx b/src/components/YieldPools/ListItem.tsx
@@ -708,7 +708,7 @@ const ListItem = ({ farm }: ListItemProps) => {
               <Flex marginTop="20px">
                 {!account ? (
                   <ButtonLight onClick={toggleWalletModal}>
-                    <Trans>Connect Wallet</Trans>
+                    <Trans>Connect</Trans>
                   </ButtonLight>
                 ) : (
                   approvalState === ApprovalState.UNKNOWN && <Dots></Dots>

diff --git a/src/components/swapv2/LimitOrder/ActionButtonLimitOrder.tsx b/src/components/swapv2/LimitOrder/ActionButtonLimitOrder.tsx
@@ -75,7 +75,7 @@ export default function ActionButtonLimitOrder({
   if (!account)
     return (
       <ButtonLight onClick={toggleWalletModal}>
-        <Trans>Connect Wallet</Trans>
+        <Trans>Connect</Trans>
       </ButtonLight>
     )
 

diff --git a/src/pages/AddLiquidity/TokenPair.tsx b/src/pages/AddLiquidity/TokenPair.tsx
@@ -682,7 +682,7 @@ const TokenPair = ({
 
             {!account ? (
               <ButtonLight onClick={toggleWalletModal}>
-                <Trans>Connect Wallet</Trans>
+                <Trans>Connect</Trans>
               </ButtonLight>
             ) : (
               <AutoColumn gap={'md'}>

diff --git a/src/pages/AddLiquidity/ZapIn.tsx b/src/pages/AddLiquidity/ZapIn.tsx
@@ -727,7 +727,7 @@ const ZapIn = ({
 
             {!account ? (
               <ButtonLight onClick={toggleWalletModal}>
-                <Trans>Connect Wallet</Trans>
+                <Trans>Connect</Trans>
               </ButtonLight>
             ) : (
               <AutoColumn gap={'md'}>

diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx
@@ -731,7 +731,7 @@ export default function AddLiquidity() {
   const Buttons = () =>
     !account ? (
       <ButtonLight onClick={toggleWalletModal} width={upToMedium ? '100%' : 'fit-content'} minWidth="164px !important">
-        <Trans>Connect Wallet</Trans>
+        <Trans>Connect</Trans>
       </ButtonLight>
     ) : (
       <Flex

diff --git a/src/pages/Bridge/SwapForm.tsx b/src/pages/Bridge/SwapForm.tsx
@@ -486,7 +486,7 @@ export default function SwapForm() {
             )}
             {!account ? (
               <ButtonLight onClick={toggleWalletModal}>
-                <Trans>Connect Wallet</Trans>
+                <Trans>Connect</Trans>
               </ButtonLight>
             ) : (
               showApproveFlow && (

diff --git a/src/pages/BuyCrypto/index.tsx b/src/pages/BuyCrypto/index.tsx
@@ -473,7 +473,7 @@ function BuyCrypto() {
 
                 {!account ? (
                   <ButtonLight margin={'16px 0 0'} width={upToSmall ? '100%' : '50%'} onClick={toggleWalletModal}>
-                    Connect your wallet
+                    Connect
                   </ButtonLight>
                 ) : (
                   <Address>

diff --git a/src/pages/Campaign/CampaignContent.tsx b/src/pages/Campaign/CampaignContent.tsx
@@ -571,7 +571,7 @@ export default function Campaign({ refreshListCampaign, ...props }: CampaignProp
                       style={{ gridColumn: '1 / -1', padding: '8px', margin: '0', borderRadius: '18px' }}
                       onClick={toggleWalletModal}
                     >
-                      <Trans>Connect Wallet</Trans>
+                      <Trans>Connect</Trans>
                     </ButtonLight>
                   )
                 ) : (

diff --git a/src/pages/CreatePool/index.tsx b/src/pages/CreatePool/index.tsx
@@ -744,7 +744,7 @@ export default function CreatePool() {
 
                 {!account ? (
                   <ButtonLight onClick={toggleWalletModal}>
-                    <Trans>Connect Wallet</Trans>
+                    <Trans>Connect</Trans>
                   </ButtonLight>
                 ) : (
                   <AutoColumn gap={'md'}>

diff --git a/src/pages/CrossChain/SwapForm/index.tsx b/src/pages/CrossChain/SwapForm/index.tsx
@@ -386,7 +386,7 @@ export default function SwapForm() {
           />
         ) : (
           <ButtonLight onClick={toggleWalletModal}>
-            <Trans>Connect Wallet</Trans>
+            <Trans>Connect</Trans>
           </ButtonLight>
         )}
 

diff --git a/src/pages/IncreaseLiquidity/index.tsx b/src/pages/IncreaseLiquidity/index.tsx
@@ -352,7 +352,7 @@ export default function IncreaseLiquidity() {
       </ButtonPrimary>
     ) : !account ? (
       <ButtonLight onClick={toggleWalletModal}>
-        <Trans>Connect Wallet</Trans>
+        <Trans>Connect</Trans>
       </ButtonLight>
     ) : (
       <>

diff --git a/src/pages/KyberDAO/KNCUtility/GasRefundBox.tsx b/src/pages/KyberDAO/KNCUtility/GasRefundBox.tsx
@@ -199,7 +199,7 @@ export default function GasRefundBox() {
                 )
               ) : (
                 <ButtonLight onClick={toggleWalletModal} padding="10px 12px">
-                  <Trans>Connect Wallet</Trans>
+                  <Trans>Connect</Trans>
                 </ButtonLight>
               )
             ) : selectedTab === KNCUtilityTabs.Pending && nextCycleStartTime ? (

diff --git a/src/pages/KyberDAO/StakeKNC/MigrateModal.tsx b/src/pages/KyberDAO/StakeKNC/MigrateModal.tsx
@@ -166,7 +166,7 @@ export default function MigrateModal({
               </>
             ) : (
               <ButtonLight onClick={toggleWalletModal}>
-                <Trans>Connect Wallet</Trans>
+                <Trans>Connect</Trans>
               </ButtonLight>
             )}
           </Row>

diff --git a/src/pages/KyberDAO/StakeKNC/StakeKNCComponent.tsx b/src/pages/KyberDAO/StakeKNC/StakeKNCComponent.tsx
@@ -529,7 +529,7 @@ export default function StakeKNCComponent() {
                     style={{ marginRight: '5px' }}
                     placement="top"
                   />
-                  <Trans>Connect Wallet</Trans>
+                  <Trans>Connect</Trans>
                 </ButtonLight>
               )}
             </>
@@ -603,7 +603,7 @@ export default function StakeKNCComponent() {
                     style={{ marginRight: '5px' }}
                     placement="top"
                   />
-                  <Trans>Connect Wallet</Trans>
+                  <Trans>Connect</Trans>
                 </ButtonLight>
               )}
             </>

diff --git a/src/pages/KyberDAO/Vote/ProposalItem/index.tsx b/src/pages/KyberDAO/Vote/ProposalItem/index.tsx
@@ -178,7 +178,7 @@ const VoteButton = ({
           </ButtonPrimary>
         ) : (
           <ButtonLight width={isMobile ? '100%' : '200px'} onClick={toggleWalletModal}>
-            <Trans>Connect Wallet</Trans>
+            <Trans>Connect</Trans>
           </ButtonLight>
         )
       ) : (

diff --git a/src/pages/KyberDAO/Vote/index.tsx b/src/pages/KyberDAO/Vote/index.tsx
@@ -421,7 +421,7 @@ export default function Vote() {
                 )
               ) : (
                 <ButtonLight onClick={toggleWalletModal}>
-                  <Trans>Connect Your Wallet</Trans>
+                  <Trans>Connect</Trans>
                 </ButtonLight>
               )}
             </AutoColumn>

diff --git a/src/pages/MyEarnings/Placeholder.tsx b/src/pages/MyEarnings/Placeholder.tsx
@@ -65,7 +65,7 @@ const Placeholder = () => {
           }}
           onClick={toggleWalletModal}
         >
-          <Trans>Connect Wallet</Trans>
+          <Trans>Connect</Trans>
         </ButtonPrimary>
       </Flex>
     </Flex>

diff --git a/src/pages/RemoveLiquidity/TokenPair.tsx b/src/pages/RemoveLiquidity/TokenPair.tsx
@@ -753,7 +753,7 @@ export default function TokenPair({
               <div style={{ position: 'relative' }}>
                 {!account ? (
                   <ButtonLight onClick={toggleWalletModal}>
-                    <Trans>Connect Wallet</Trans>
+                    <Trans>Connect</Trans>
                   </ButtonLight>
                 ) : (
                   <RowBetween>

diff --git a/src/pages/RemoveLiquidity/ZapOut.tsx b/src/pages/RemoveLiquidity/ZapOut.tsx
@@ -818,7 +818,7 @@ export default function ZapOut({
               <div style={{ position: 'relative' }}>
                 {!account ? (
                   <ButtonLight onClick={toggleWalletModal}>
-                    <Trans>Connect Wallet</Trans>
+                    <Trans>Connect</Trans>
                   </ButtonLight>
                 ) : (
                   <RowBetween>

diff --git a/src/pages/SwapV2/index.tsx b/src/pages/SwapV2/index.tsx
@@ -541,7 +541,7 @@ export default function Swap() {
                     <BottomGrouping>
                       {!account ? (
                         <ButtonLight onClick={toggleWalletModal}>
-                          <Trans>Connect Wallet</Trans>
+                          <Trans>Connect</Trans>
                         </ButtonLight>
                       ) : showWrap ? (
                         <ButtonPrimary disabled={Boolean(wrapInputError)} onClick={onWrap}>

diff --git a/src/pages/TrueSightV2/components/RequireConnectWallet.tsx b/src/pages/TrueSightV2/components/RequireConnectWallet.tsx
@@ -78,7 +78,7 @@ export default function RequireConnectWalletWrapper({
           height="36px"
           style={{ boxShadow: '0 2px 4px 2px #00000030' }}
         >
-          <Trans>Connect Wallet</Trans>
+          <Trans>Connect</Trans>
         </ButtonPrimary>
       </StyledRequireConnectWalletWrapper>
     )

diff --git a/src/state/burn/proamm/hooks.tsx b/src/state/burn/proamm/hooks.tsx
@@ -122,7 +122,7 @@ export function useDerivedProAmmBurnInfo(
     pool && position ? pool.tickCurrent < position.tickLower || pool.tickCurrent >= position.tickUpper : false
   let error: ReactNode | undefined
   if (!account) {
-    error = <Trans>Connect Wallet</Trans>
+    error = <Trans>Connect</Trans>
   }
   // if (percent === 0) {
   //   error = error ?? <Trans>Enter a percent</Trans>

diff --git a/src/state/mint/proamm/hooks.tsx b/src/state/mint/proamm/hooks.tsx
@@ -515,7 +515,7 @@ export function useProAmmDerivedMintInfo(
   const currencyBalanceB = currencyBalances?.[Field.CURRENCY_B]
   const errorMessage: ReactNode | undefined = useMemo(() => {
     if (!account) {
-      return <Trans>Connect Wallet</Trans>
+      return <Trans>Connect</Trans>
     }
 
     if (poolState === PoolState.INVALID) {
@@ -1068,7 +1068,7 @@ export function useProAmmDerivedAllMintInfo(
 
   const errorMessage: ReactNode | undefined = useMemo(() => {
     if (!account) {
-      return <Trans>Connect Wallet</Trans>
+      return <Trans>Connect</Trans>
     }
 
     if (poolState === PoolState.INVALID) {

diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx
@@ -101,12 +101,14 @@ export function useUserLocaleManager(): [SupportedLocale | null, (newLocale: Sup
   return [locale, setLocale]
 }
 
+// unused for now, but may be added again in the future. So we should keep it here.
 export function useIsAcceptedTerm(): [boolean, (isAcceptedTerm: boolean) => void] {
   const dispatch = useAppDispatch()
   const acceptedTermVersion = useSelector<AppState, AppState['user']['acceptedTermVersion']>(
     state => state.user.acceptedTermVersion,
   )
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const isAcceptedTerm = !!acceptedTermVersion && acceptedTermVersion === TERM_FILES_PATH.VERSION
 
   const setIsAcceptedTerm = useCallback(
@@ -116,7 +118,8 @@ export function useIsAcceptedTerm(): [boolean, (isAcceptedTerm: boolean) => void
     [dispatch],
   )
 
-  return [isAcceptedTerm, setIsAcceptedTerm]
+  // return [isAcceptedTerm, setIsAcceptedTerm]
+  return [true, setIsAcceptedTerm]
 }
 
 export function useDegenModeManager(): [boolean, () => void] {