+
-
+ {/* */}
);
diff --git a/src/components/UI/TokenInput/TokenInput.module.scss b/src/components/UI/TokenInput/TokenInput.module.scss
index 5ab66c07..197218b5 100644
--- a/src/components/UI/TokenInput/TokenInput.module.scss
+++ b/src/components/UI/TokenInput/TokenInput.module.scss
@@ -19,7 +19,7 @@
padding: 0;
}
- &:hover {
+ &:not(.disable):hover {
background: $--color-indigo;
}
diff --git a/src/components/UI/TransferButton/TransferButton.js b/src/components/UI/TransferButton/TransferButton.js
index 61e4c15b..ff4eefa7 100644
--- a/src/components/UI/TransferButton/TransferButton.js
+++ b/src/components/UI/TransferButton/TransferButton.js
@@ -2,27 +2,26 @@ import PropTypes from 'prop-types';
import React from 'react';
import {useTransferTranslation} from '../../../hooks';
+import {useAmount} from '../../../providers/TransferProvider';
import {MainMenuButton} from '../index';
-export const TransferButton = ({isDisabled, hasInputError, ...props}) => {
- const {transferBtnTxt, disabledTransferBtnTxt} = useTransferTranslation();
+export const TransferButton = ({isDisabled, ...props}) => {
+ const {transferBtnTxt, amountBtnTxt} = useTransferTranslation();
+ const [amount] = useAmount();
- const textAndStyle =
- isDisabled && !hasInputError
- ? {
- text: disabledTransferBtnTxt,
- style: {
- textTransform: 'none'
- }
+ const textAndStyle = !amount
+ ? {
+ text: amountBtnTxt,
+ style: {
+ textTransform: 'none'
}
- : {
- text: transferBtnTxt
- };
-
+ }
+ : {
+ text: transferBtnTxt
+ };
return
;
};
TransferButton.propTypes = {
- isDisabled: PropTypes.bool,
- hasInputError: PropTypes.bool
+ isDisabled: PropTypes.bool
};
diff --git a/src/components/UI/index.js b/src/components/UI/index.js
index 75477cc4..a8406464 100644
--- a/src/components/UI/index.js
+++ b/src/components/UI/index.js
@@ -50,4 +50,4 @@ export * from './NetworkWalletButton/NetworkWalletButton';
export * from './MainMenuButton/MainMenuButton';
export * from './ChainSelect/ChainSelect';
export * from './MenuBackground/MenuBackground';
-export * from './ReadMore/ReadMore';
+export * from './Link/Link';
diff --git a/src/config/constants.js b/src/config/constants.js
index a7d915d0..20ed2237 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -1,11 +1,12 @@
export const ETHERSCAN = 'Etherscan';
export const VOYAGER = 'Voyager';
+export const STARKSCAN = 'StarkScan';
export const DISCORD_LINK_URL = 'https://starknet.io/discord';
export const FETCH_TOKEN_BALANCE_MAX_RETRY = 5;
export const STARKWARE_SITE_URL = 'https://starkware.co/';
export const STARKNET_SITE_URL = 'https://starknet.io';
-export const STARKNET_DOCS_URL = 'https://docs.starknet.io/docs';
-export const STARKGATE_DOCS_URL = `${STARKNET_DOCS_URL}/L1-L2%20Communication/token-bridge`;
+export const STARKNET_DOCS_URL = 'https://docs.starknet.io/documentation/develop';
+export const STARKGATE_DOCS_URL = `${STARKNET_DOCS_URL}/L1-L2_Communication/token-bridge`;
export const STARKGATE_MAIL_ADDRESS = 'starkgate@starknet.io';
export const STARKNET_ADDRESSES_REPO_URL = 'https://github.com/starkware-libs/starknet-addresses';
export const STARKGATE_FRONTEND_REPO_URL = 'https://github.com/starkware-libs/starkgate-frontend';
@@ -20,4 +21,5 @@ export const ALPHA_DISCLAIMER_COOKIE_NAME = 'sg_alpha_toast';
export const HIDE_ELEMENT_COOKIE_DURATION_DAYS = 1;
export const APP_URL_GOERLI = 'https://goerli.starkgate.starknet.io';
export const APP_URL_MAINNET = 'https://starkgate.starknet.io';
-export const STARKGATE_ALPHA_LIMITATIONS_URL = `${STARKGATE_DOCS_URL}/#starkgate-alpha-limitations`;
+export const STARKGATE_ALPHA_LIMITATIONS_URL = `${STARKGATE_DOCS_URL}/#starkgate_alpha_limitations`;
+export const STARKGATE_COMPLIANCE_MAIL_ADDRESS = 'compliance@starkware.com';
diff --git a/src/config/envs.js b/src/config/envs.js
index 7cb0ae86..beb4f137 100644
--- a/src/config/envs.js
+++ b/src/config/envs.js
@@ -19,5 +19,12 @@ export const VOYAGER_URL = env.REACT_APP_VOYAGER_URL;
export const VOYAGER_TX_URL = tx => evaluate(`${VOYAGER_URL}/tx/{{tx}}`, {tx});
export const VOYAGER_ACCOUNT_URL = contract =>
evaluate(`${VOYAGER_URL}/contract/{{contract}}`, {contract});
+export const STARKSCAN_URL = env.REACT_APP_STARKSCAN_URL;
+export const STARKSCAN_TX_URL = tx => evaluate(`${STARKSCAN_URL}/tx/{{tx}}`, {tx});
+export const STARKSCAN_ETH_TX_URL = tx => evaluate(`${STARKSCAN_URL}/eth-tx/{{tx}}`, {tx});
+export const STARKSCAN_ACCOUNT_URL = contract =>
+ evaluate(`${STARKSCAN_URL}/contract/{{contract}}`, {contract});
export const LOCAL_STORAGE_TRANSFERS_LOG_KEY = env.REACT_APP_LOCAL_STORAGE_TRANSFERS_LOG_KEY;
export const LOCAL_STORAGE_ACCEPT_TERMS_KEY = env.REACT_APP_LOCAL_STORAGE_ACCEPT_TERMS;
+export const API_ENDPOINT_URL = env.REACT_APP_API_ENDPOINT_URL;
+export const ENABLE_SCREENING = env.REACT_APP_ENABLE_SCREENING !== 'false';
diff --git a/src/config/tokens.js b/src/config/tokens.js
index c3cdf166..8a855fd3 100644
--- a/src/config/tokens.js
+++ b/src/config/tokens.js
@@ -55,8 +55,8 @@ export default {
symbol: 'DAI',
decimals: 18,
bridgeAddress: {
- [ChainType.L1.MAIN]: '0x659a00c33263d9254Fed382dE81349426C795BB6',
- [ChainType.L1.GOERLI]: '0xd8beAa22894Cd33F24075459cFba287a10a104E4'
+ [ChainType.L1.MAIN]: '0x9F96fE0633eE838D0298E8b8980E6716bE81388d',
+ [ChainType.L1.GOERLI]: '0xaB00D7EE6cFE37cCCAd006cEC4Db6253D7ED3a22'
},
tokenAddress: {
[ChainType.L1.MAIN]: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
@@ -135,8 +135,8 @@ export default {
symbol: 'DAI',
decimals: 18,
bridgeAddress: {
- [ChainType.L2.MAIN]: '0x001108cdbe5d82737b9057590adaf97d34e74b5452f0628161d237746b6fe69e',
- [ChainType.L2.GOERLI]: '0x0278f24c3e74cbf7a375ec099df306289beb0605a346277d200b791a7f811a19'
+ [ChainType.L2.MAIN]: '0x075ac198e734e289a6892baa8dd14b21095f13bf8401900f5349d5569c3f6e60',
+ [ChainType.L2.GOERLI]: '0x057b7fe4e59d295de5e7955c373023514ede5b972e872e9aa5dcdf563f5cfacb'
},
tokenAddress: {
[ChainType.L2.MAIN]: '0x00da114221cb83fa859dbdb4c44beeaa0bb37c7537ad5ae66fe5e0efd20e6eb3',
diff --git a/src/config/translations.js b/src/config/translations.js
new file mode 100644
index 00000000..ec25dcb2
--- /dev/null
+++ b/src/config/translations.js
@@ -0,0 +1,162 @@
+export default {
+ containers: {
+ header: {
+ chainTxt: 'Goerli testnet',
+ accountWalletBtnTxt: '{{address}}',
+ connectWalletBtnTxt: 'Connect {{network}} Wallet',
+ tabs: {
+ termsTxt: 'Terms',
+ faqTxt: 'FAQ'
+ }
+ },
+ footer: {
+ rightsTxt: '© 2022 StarkWare Industries Ltd. All Rights Reserved'
+ }
+ },
+ screens: {
+ faq: {
+ titleTxt: 'Frequently asked questions',
+ subtitleTxt: 'Everything you need to know about StarkGate.'
+ },
+ terms: {
+ titleTxt: 'Terms of Service',
+ lastRevisedTxt: 'Last Revised: April 4, 2022',
+ acceptBtnTxt: 'I Accept'
+ }
+ },
+ menus: {
+ backBtnTxt: 'Back',
+ account: {
+ titleTxt: '{{network}} Account',
+ copiedMsgTxt: 'Copied!',
+ logoutBtnTxt: 'Logout',
+ btnTxt: 'Account',
+ transferLogContainer: {
+ titleTxt: 'Transfers log',
+ singleOverviewTxt: 'recent transfer',
+ overviewTxt: 'recent transfers',
+ emptyMsgTxt: 'Transfers will appear here...',
+ viewMoreTxt: 'View more',
+ viewLessTxt: 'View less',
+ transferLog: {
+ completeTransferBtnTxt: 'Complete transfer'
+ }
+ }
+ },
+ selectToken: {
+ titleTxt: 'Select token from ',
+ searchPlaceholder: 'Search'
+ },
+ source: {
+ depositTxt: 'Deposit',
+ withdrawTxt: 'Withdraw',
+ toTxt: 'to',
+ fromTxt: 'from'
+ },
+ transfer: {
+ negativeValueErrorMsg: 'Amount must be a positive number',
+ tooManyDigitsErrorMsg: 'Too many decimal places',
+ insufficientBalanceErrorMsg: 'Insufficient balance',
+ maxDepositErrorMsg:
+ 'You have exceeded the maximum transfer amount ({{maxDeposit}} {{symbol}}). Please reduce the amount and try again.',
+ bridgeIsFullErrorMsg: 'The token bridge is currently full, try another token',
+ maxBtnTxt: 'Max',
+ balanceTitleTxt: 'Available balance',
+ inputPlaceholderTxt: '0.00',
+ transferBtnTxt: 'Transfer',
+ amountBtnTxt: 'Enter an amount',
+ loginWalletButtonTxt: 'Connect Wallet',
+ readMoreTxt: 'read more'
+ },
+ providers: {
+ descriptionTxt: 'Transfer crypto between {{source}} and StarkNet'
+ }
+ },
+ modals: {
+ login: {
+ titleTxt: 'Connect {{networkName}} Wallet',
+ unsupportedChainIdTxt: 'Please select {{chainName}} in your wallet',
+ unsupportedBrowserTxt:
+ "Note - The current version of StarkGate (Alpha) doesn't support your browser. Use Chrome or Firefox to connect."
+ },
+ transactionSubmitted: {
+ titleTxt: 'Transaction sent',
+ btnTxt: 'View on {{explorer}}',
+ transferAlertTitle: 'This is an Alpha version',
+ transferToL1Txt: 'Your transaction is now being processing on StarkNet.',
+ transferToL1AlertTxt:
+ 'The StarkNet → Ethereum transfer divided into two stages:\n• A waiting period of several hours is expected between the stages.\n• At the end of the first step, you will be required to sign in order to complete the transfer.',
+ transferToL2Txt: 'Your transaction has been successfully sent to StarkNet!',
+ transferToL2AlertTxt:
+ 'Completing a Ethereum → StarkNet transfer may take up to several hours depending on the congestion. It may take a while for your wallet balance to update.',
+ completeTransferToL1Txt: 'Your transfer is completed on Ethereum!'
+ },
+ transferProgress: {
+ approval: {
+ type: 'Approval required',
+ message: 'Requesting permission to access your {{symbol}} funds.'
+ },
+ deposit: {
+ type: 'Transfer in progress',
+ message: 'Transferring {{amount}} {{symbol}} to StarkNet...'
+ },
+ initiateWithdraw: {
+ type: 'Initiate transfer',
+ message: 'Initiating transfer of {{amount}} {{symbol}} from StarkNet...'
+ },
+ withdraw: {
+ type: 'Transfer in progress',
+ message: 'Transferring {{amount}} {{symbol}} to Ethereum...'
+ },
+ waitForConfirm: {
+ type: '{{walletName}} confirmation...',
+ message: 'Do not refresh or close the page while waiting for the operation to be completed.'
+ },
+ confirmTxt: 'Confirm this transaction in your wallet',
+ maxTotalBalanceErrorMsg:
+ "The maximal value allowed on StarkGate right now is {{maxTotalBalance}} {{symbol}} and the current value on StarkGate is {{currentTotalBalance}} {{symbol}}, so it's not possible to complete your deposit of {{amount}} {{symbol}}.\n\nPlease reduce your deposit amount and try again.",
+ errorTitle: 'Transaction error',
+ limitationErrorTitle: 'Limitation error'
+ },
+ onboarding: {
+ titleTxt: 'Before takeoff, a few important notes!',
+ subtitleTxt: 'While using StarkGate Alpha:',
+ bulletsTxt: [
+ 'Use Google Chrome or Mozilla Firefox',
+ 'Refrain from switching browsers',
+ 'Do not refresh the page while the transfer is being processed',
+ 'Do not delete the local storage of the browser'
+ ],
+ incognitoTxt:
+ 'The current StarkGate Alpha version
does not support browsing in incognito mode.'
+ },
+ blockedAddress: {
+ titleTxt: 'Blocked Address',
+ descriptionTxt:
+ 'This address is blocked on the starkgate bridge interface because it is associated with one or more blocked activities.',
+ complianceTxt:
+ 'If you believe this is an error, please send an email including your address to',
+ closeButtonTxt: 'Close'
+ }
+ },
+ toasts: {
+ alphaDisclaimerNotice: {
+ titleTxt: 'StarkNet Alpha',
+ bodyTxt:
+ 'This is an ALPHA version of StarkNet, and its Bridge. As such, delays may occur, and catastrophic bugs may lurk. Thanks, OGs, for trying it at this early stage.'
+ },
+ transferLogLink: 'View on Transfer Log',
+ pendingTransfer: {
+ pendingTxt: 'Waiting for transaction to be accepted on StarkNet',
+ consumedTxt: 'Transaction accepted on StarkNet',
+ rejectedTxt: 'Transaction rejected on StarkNet'
+ },
+ completeTransfer: {
+ titleTxt: 'StarkNet finished processing your transfer!',
+ bodyTxt:
+ 'Click on Complete Transfer to transfer the funds from StarkNet Bridge to your Ethereum address.',
+ dismissBtnTxt: 'Dismiss',
+ completeTransferBtnTxt: 'Complete Transfer'
+ }
+ }
+};
diff --git a/src/enums/TransferStep.js b/src/enums/TransferStep.js
index 7a2c9ac1..c348a0cc 100644
--- a/src/enums/TransferStep.js
+++ b/src/enums/TransferStep.js
@@ -3,8 +3,8 @@ export const TransferStep = {
CONFIRM_TX: 'Confirm transaction',
WAIT_FOR_TX: 'Wait for transaction to received',
INITIATE_WITHDRAW: 'Initiate transfer',
- WITHDRAW: 'Send L2→L1 transfer',
- DEPOSIT: 'Send L1→L2 transfer'
+ WITHDRAW: 'Send L2 > L1 transfer',
+ DEPOSIT: 'Send L1 > L2 transfer'
};
export const TransferToL2Steps = [
diff --git a/src/hooks/index.js b/src/hooks/index.js
index 0f5ca79c..f8639238 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -1,10 +1,5 @@
-export * from './useAnimation';
export * from './useColors';
export * from './useContract';
-export * from './useLogger';
-export * from './useWalletHandlerProvider';
-export * from './useFetchData';
-export * from './usePrevious';
export * from './useTransfer';
export * from './useTransferToL1';
export * from './useTransferToL2';
@@ -19,4 +14,7 @@ export * from './useVars';
export * from './useBridgeContractAPI';
export * from './useTokenContractAPI';
export * from './useFonts';
-export * from './useDidMountEffect';
+export * from './useWalletHandlerProvider';
+export * from './useScreening';
+export * from './useEthereumWallet';
+export * from './useStarknetWallet';
diff --git a/src/hooks/useColors.js b/src/hooks/useColors.js
index 71a34d85..0eca6d42 100644
--- a/src/hooks/useColors.js
+++ b/src/hooks/useColors.js
@@ -1,5 +1,5 @@
-import {useMemo} from 'react';
+import {useColorsGeneric} from '@starkware-industries/commons-js-hooks';
import colors from '../styles/colors.module.scss';
-export const useColors = () => useMemo(() => colors, []);
+export const useColors = () => useColorsGeneric(colors);
diff --git a/src/hooks/useConstants.js b/src/hooks/useConstants.js
index e4bf7e5d..8695ba7a 100644
--- a/src/hooks/useConstants.js
+++ b/src/hooks/useConstants.js
@@ -1,5 +1,5 @@
-import {useMemo} from 'react';
+import {useConstantsGeneric} from '@starkware-industries/commons-js-hooks';
import * as constants from '../config/constants';
-export const useConstants = () => useMemo(() => constants, []);
+export const useConstants = () => useConstantsGeneric(constants);
diff --git a/src/hooks/useContract.js b/src/hooks/useContract.js
index 0692690c..6c461414 100644
--- a/src/hooks/useContract.js
+++ b/src/hooks/useContract.js
@@ -1,3 +1,4 @@
+import {useContract} from '@starkware-industries/commons-js-hooks';
import {createContractL1, createContractL2} from '@starkware-industries/commons-js-utils';
import {useCallback, useMemo} from 'react';
@@ -14,20 +15,6 @@ import {useTransfer} from '../providers/TransferProvider';
import {useL1Wallet} from '../providers/WalletsProvider';
import {useEnvs} from './useEnvs';
-const cache = {};
-
-export const useContract = (abi, getContractHandler) => {
- return useCallback(
- address => {
- if (!cache[address]) {
- cache[address] = getContractHandler(address, abi);
- }
- return cache[address];
- },
- [abi, getContractHandler]
- );
-};
-
export const useTokenContract = () => {
const getL1TokenContract = useL1TokenContract();
const getL2TokenContract = useL2TokenContract();
diff --git a/src/hooks/useEnvs.js b/src/hooks/useEnvs.js
index 5690be48..1deafa68 100644
--- a/src/hooks/useEnvs.js
+++ b/src/hooks/useEnvs.js
@@ -1,5 +1,5 @@
-import {useMemo} from 'react';
+import {useEnvsGeneric} from '@starkware-industries/commons-js-hooks';
import * as envs from '../config/envs.js';
-export const useEnvs = () => useMemo(() => envs, []);
+export const useEnvs = () => useEnvsGeneric(envs);
diff --git a/src/hooks/useEthereumWallet.js b/src/hooks/useEthereumWallet.js
new file mode 100644
index 00000000..79a37498
--- /dev/null
+++ b/src/hooks/useEthereumWallet.js
@@ -0,0 +1,95 @@
+import {WalletStatus} from '@starkware-industries/commons-js-enums';
+import {useEffect, useState} from 'react';
+import {useWallet} from 'use-wallet';
+
+import {useBlockedAddressModal, useErrorModal} from '../providers/ModalProvider';
+import {useScreening} from './useScreening';
+import {useLoginTracking} from './useTracking';
+
+export const useEthereumWallet = ({enableScreening}) => {
+ const [wallet, setWallet] = useState({
+ error: null,
+ account: '',
+ chainId: -1,
+ chainName: '',
+ status: WalletStatus.DISCONNECTED
+ });
+ const {
+ account,
+ status,
+ error,
+ chainId,
+ reset,
+ networkName: chainName,
+ connect: connectWallet
+ } = useWallet();
+ const {
+ isScreening,
+ blocked,
+ error: screeningError
+ } = useScreening(enableScreening ? account : null);
+ const showBlockedAddressModal = useBlockedAddressModal();
+ const [, , trackBlockedAddress] = useLoginTracking();
+ const showErrorModal = useErrorModal();
+ const isBlockedOrError = blocked || screeningError;
+ const isUnblocked = !isScreening && !isBlockedOrError;
+
+ useEffect(() => {
+ if (enableScreening) {
+ if (!isScreening && !screeningError) {
+ if (blocked) {
+ showBlockedAddressModal(account);
+ trackBlockedAddress(account);
+ } else {
+ updateWallet();
+ }
+ }
+ }
+ }, [isScreening]);
+
+ useEffect(() => {
+ if (!enableScreening) {
+ updateWallet();
+ }
+ }, [account]);
+
+ useEffect(() => {
+ if (screeningError) {
+ const {title, message} = screeningError;
+ showErrorModal(title, message);
+ }
+ }, [screeningError]);
+
+ useEffect(() => {
+ // To support serializable object in the store
+ const serializedError = status === WalletStatus.ERROR ? {...error} : null;
+ if (isUnblocked) {
+ updateWallet({error: serializedError});
+ }
+ }, [status, error, isUnblocked]);
+
+ useEffect(() => {
+ if (status === WalletStatus.CONNECTED && isBlockedOrError) {
+ reset();
+ }
+ }, [status, isScreening]);
+
+ const updateWallet = (customValues = {}) => {
+ setWallet(prevWallet => ({
+ ...prevWallet,
+ account,
+ status,
+ error,
+ chainId,
+ chainName,
+ ...customValues
+ }));
+ };
+
+ const connect = async walletConfig => {
+ const {connectorId} = walletConfig;
+ return connectWallet(connectorId);
+ };
+
+ return {...wallet, connect, reset};
+};
diff --git a/src/hooks/useFonts.js b/src/hooks/useFonts.js
index 3ed9d532..716d6504 100644
--- a/src/hooks/useFonts.js
+++ b/src/hooks/useFonts.js
@@ -1,5 +1,5 @@
-import {useMemo} from 'react';
+import {useFontsGeneric} from '@starkware-industries/commons-js-hooks';
import fonts from '../styles/fonts.module.scss';
-export const useFonts = () => useMemo(() => fonts, []);
+export const useFonts = () => useFontsGeneric(fonts);
diff --git a/src/hooks/useScreening.js b/src/hooks/useScreening.js
new file mode 100644
index 00000000..786df519
--- /dev/null
+++ b/src/hooks/useScreening.js
@@ -0,0 +1,13 @@
+import {useFetchData} from '@starkware-industries/commons-js-hooks';
+
+import {screenAddress} from '../api';
+
+export const useScreening = address => {
+ const {
+ isLoading: isScreening,
+ data: blocked,
+ error
+ } = useFetchData(address ? () => screenAddress(address) : null, [address]);
+
+ return {isScreening, blocked, error};
+};
diff --git a/src/hooks/useStarknetWallet.js b/src/hooks/useStarknetWallet.js
new file mode 100644
index 00000000..9e10e73c
--- /dev/null
+++ b/src/hooks/useStarknetWallet.js
@@ -0,0 +1,101 @@
+import {
+ ChainInfo,
+ ChainType,
+ WalletErrorType,
+ WalletStatus
+} from '@starkware-industries/commons-js-enums';
+import {
+ connect as getStarknetWallet,
+ disconnect as resetStarknetWallet,
+ getStarknet
+} from '@starkware-industries/commons-js-libs/get-starknet';
+import {useState} from 'react';
+
+import {useEnvs} from './useEnvs';
+
+export const useStarknetWallet = () => {
+ const {AUTO_CONNECT, SUPPORTED_L2_CHAIN_ID} = useEnvs();
+ const [error, setError] = useState(null);
+ const [account, setAccount] = useState('');
+ const [chainId, setChainId] = useState('');
+ const [chainName, setChainName] = useState('');
+ const [status, setStatus] = useState(WalletStatus.DISCONNECTED);
+
+ const connect = async walletConfig => {
+ try {
+ const wallet = await getStarknetWallet({
+ modalOptions: {
+ theme: 'dark'
+ }
+ });
+ if (!wallet) {
+ return;
+ }
+ setStatus(WalletStatus.CONNECTING);
+ const enabled = await wallet
+ .enable(!AUTO_CONNECT && {showModal: true})
+ .then(address => address?.length && address[0]);
+ if (enabled) {
+ updateAccount();
+ addAccountChangedListener();
+ return {
+ ...walletConfig,
+ name: wallet.name || walletConfig.name,
+ logoPath: wallet.icon || walletConfig.logoPath
+ };
+ }
+ } catch {
+ setStatus(WalletStatus.ERROR);
+ }
+ };
+
+ const reset = () => {
+ const disconnected = resetStarknetWallet({clearLastWallet: true, clearDefaultWallet: true});
+ if (disconnected) {
+ setStatus(WalletStatus.DISCONNECTED);
+ setAccount('');
+ }
+ };
+
+ const addAccountChangedListener = () => {
+ getStarknet().on('accountsChanged', () => {
+ updateAccount();
+ });
+ };
+
+ const updateAccount = () => {
+ const chainId = getCurrentChainId();
+ setChainId(chainId);
+ setChainName(ChainInfo.L2[chainId].NAME);
+ if (chainId === SUPPORTED_L2_CHAIN_ID) {
+ const {selectedAddress} = getStarknet();
+ setAccount(selectedAddress);
+ setStatus(selectedAddress ? WalletStatus.CONNECTED : WalletStatus.DISCONNECTED);
+ setError(null);
+ } else {
+ setStatus(WalletStatus.ERROR);
+ setError({name: WalletErrorType.CHAIN_UNSUPPORTED_ERROR});
+ }
+ };
+
+ const getCurrentChainId = () => {
+ const {baseUrl} = getStarknet().provider;
+ if (baseUrl.includes('alpha-mainnet.starknet.io')) {
+ return ChainType.L2.MAIN;
+ } else if (baseUrl.includes('alpha4.starknet.io')) {
+ return ChainType.L2.GOERLI;
+ } else if (baseUrl.match(/^https?:\/\/localhost.*/)) {
+ return 'localhost';
+ }
+ };
+
+ return {
+ account,
+ chainId,
+ chainName,
+ status,
+ error,
+ connect,
+ reset
+ };
+};
diff --git a/src/hooks/useTracking.js b/src/hooks/useTracking.js
index 316953d1..9fc1a370 100644
--- a/src/hooks/useTracking.js
+++ b/src/hooks/useTracking.js
@@ -1,20 +1,11 @@
+import {useTracking} from '@starkware-industries/commons-js-hooks';
import {useCallback} from 'react';
import {track, TrackEvent} from '../analytics';
import {MenuType} from '../enums';
-export const useTracking = events => {
- if (typeof events === 'string') {
- events = [events];
- }
-
- const trackEvent = useCallback(event => data => track(event, data), []);
-
- return events.map(trackEvent, [events]);
-};
-
export const useMenuTracking = () => {
- const [trackAccountMenu, trackTransferMenu, trackSelectTokenMenu] = useTracking([
+ const [trackAccountMenu, trackTransferMenu, trackSelectTokenMenu] = useTracking(track, [
TrackEvent.ACCOUNT_MENU,
TrackEvent.TRANSFER_MENU,
TrackEvent.SELECT_TOKEN_MENU
@@ -37,41 +28,49 @@ export const useMenuTracking = () => {
};
export const useLoginTracking = () => {
- return useTracking([...Object.values(TrackEvent.LOGIN)]);
+ return useTracking(track, [...Object.values(TrackEvent.LOGIN)]);
};
export const useTermsTracking = () => {
- return useTracking([TrackEvent.TERMS_SCREEN, ...Object.values(TrackEvent.TERMS)]);
+ return useTracking(track, [TrackEvent.TERMS_SCREEN, ...Object.values(TrackEvent.TERMS)]);
};
export const useTransferTracking = () => {
- return useTracking([TrackEvent.TRANSFER.MAX_CLICK, TrackEvent.TRANSFER.SWAP_NETWORK]);
+ return useTracking(track, [TrackEvent.TRANSFER.MAX_CLICK, TrackEvent.TRANSFER.SWAP_NETWORK]);
};
export const useTransferToL1Tracking = () => {
- return useTracking([...Object.values(TrackEvent.TRANSFER.TRANSFER_TO_L1)]);
+ return useTracking(track, [...Object.values(TrackEvent.TRANSFER.TRANSFER_TO_L1)]);
};
export const useTransferToL2Tracking = () => {
- return useTracking([...Object.values(TrackEvent.TRANSFER.TRANSFER_TO_L2)]);
+ return useTracking(track, [...Object.values(TrackEvent.TRANSFER.TRANSFER_TO_L2)]);
};
export const useCompleteTransferToL1Tracking = () => {
- return useTracking([...Object.values(TrackEvent.TRANSFER.COMPLETE_TRANSFER_TO_L1)]);
+ return useTracking(track, [...Object.values(TrackEvent.TRANSFER.COMPLETE_TRANSFER_TO_L1)]);
};
export const useAccountTracking = () => {
- return useTracking([...Object.values(TrackEvent.ACCOUNT)]);
+ return useTracking(track, [...Object.values(TrackEvent.ACCOUNT)]);
};
export const useSelectTokenTracking = () => {
- return useTracking([...Object.values(TrackEvent.SELECT_TOKEN)]);
+ return useTracking(track, [...Object.values(TrackEvent.SELECT_TOKEN)]);
};
export const useConnectWalletTracking = () => {
- return useTracking([
+ return useTracking(track, [
TrackEvent.CONNECT_WALLET_CLICK,
TrackEvent.CONNECT_ETHEREUM_WALLET_CLICK,
TrackEvent.CONNECT_STARKNET_WALLET_CLICK
]);
};
+
+export const useFaqTracking = () => {
+ return useTracking(track, TrackEvent.FAQ_SCREEN);
+};
+
+export const useDiscordTabTracking = () => {
+ return useTracking(track, TrackEvent.DISCORD_TAB_CLICK);
+};
diff --git a/src/hooks/useTransferToL1.js b/src/hooks/useTransferToL1.js
index fe07c968..62e422f6 100644
--- a/src/hooks/useTransferToL1.js
+++ b/src/hooks/useTransferToL1.js
@@ -1,4 +1,5 @@
import {EventName, TransactionStatus} from '@starkware-industries/commons-js-enums';
+import {useLogger} from '@starkware-industries/commons-js-hooks';
import {waitForTransaction} from '@starkware-industries/commons-js-utils';
import {useCallback} from 'react';
@@ -13,7 +14,6 @@ import {
import {useSelectedToken} from '../providers/TransferProvider';
import {useL1Wallet, useL2Wallet} from '../providers/WalletsProvider';
import {useBridgeContractAPI} from './useBridgeContractAPI';
-import {useLogger} from './useLogger';
import {useCompleteTransferToL1Tracking, useTransferToL1Tracking} from './useTracking';
import {useTransfer} from './useTransfer';
import {useTransferProgress} from './useTransferProgress';
diff --git a/src/hooks/useTransferToL2.js b/src/hooks/useTransferToL2.js
index 8b9bccd1..529aa657 100644
--- a/src/hooks/useTransferToL2.js
+++ b/src/hooks/useTransferToL2.js
@@ -1,4 +1,5 @@
import {EventName} from '@starkware-industries/commons-js-enums';
+import {useLogger} from '@starkware-industries/commons-js-hooks';
import {constants} from '@starkware-industries/commons-js-libs/starknet';
import {promiseHandler, addToken} from '@starkware-industries/commons-js-utils';
import {useCallback} from 'react';
@@ -10,7 +11,6 @@ import {useL1Wallet, useL2Wallet} from '../providers/WalletsProvider';
import {isEth} from '../utils';
import {useBridgeContractAPI} from './useBridgeContractAPI';
import {useIsMaxTotalBalanceExceeded} from './useIsMaxTotalBalanceExceeded';
-import {useLogger} from './useLogger';
import {useTokenContractAPI} from './useTokenContractAPI';
import {useTransferToL2Tracking} from './useTracking';
import {useTransfer} from './useTransfer';
diff --git a/src/hooks/useTranslation.js b/src/hooks/useTranslation.js
index f6301712..d4aadb4c 100644
--- a/src/hooks/useTranslation.js
+++ b/src/hooks/useTranslation.js
@@ -1,12 +1,9 @@
-import {getPropertyPath} from '@starkware-industries/commons-js-utils';
-import {useMemo} from 'react';
+import {chainPath, useTranslation} from '@starkware-industries/commons-js-hooks';
-import Strings from '../config/strings';
-
-export const useTranslation = path => useMemo(() => getTranslation(path), [path]);
+import translations from '../config/translations';
export const useContainersTranslation = path => {
- return useTranslation(chainPath('containers', path));
+ return useTranslation(translations, chainPath('containers', path));
};
export const useHeaderTranslation = path => {
@@ -18,7 +15,7 @@ export const useFooterTranslation = () => {
};
export const useMenusTranslation = path => {
- return useTranslation(chainPath('menus', path));
+ return useTranslation(translations, chainPath('menus', path));
};
export const useAccountTranslation = path => {
@@ -42,7 +39,7 @@ export const useProvidersTranslation = path => {
};
export const useToastsTranslation = path => {
- return useTranslation(chainPath('toasts', path));
+ return useTranslation(translations, chainPath('toasts', path));
};
export const useCompleteTransferToastTranslation = () => {
@@ -54,7 +51,7 @@ export const usePendingTransferToastTranslation = () => {
};
export const useModalsTranslation = path => {
- return useTranslation(chainPath('modals', path));
+ return useTranslation(translations, chainPath('modals', path));
};
export const useLoginTranslation = path => {
@@ -77,8 +74,12 @@ export const useOnboardingModalTranslation = () => {
return useModalsTranslation('onboarding');
};
+export const useBlockedAddressModalTranslation = () => {
+ return useModalsTranslation('blockedAddress');
+};
+
export const useScreensTranslation = path => {
- return useTranslation(chainPath('screens', path));
+ return useTranslation(translations, chainPath('screens', path));
};
export const useFaqTranslation = () => {
@@ -100,9 +101,3 @@ export const useTransferLogTranslation = () => {
export const useTabsTranslation = () => {
return useHeaderTranslation('tabs');
};
-
-const chainPath = (basePath, constitutivePath) => {
- return constitutivePath ? `${basePath}.${constitutivePath}` : basePath;
-};
-
-const getTranslation = path => getPropertyPath(Strings, path);
diff --git a/src/hooks/useVars.js b/src/hooks/useVars.js
index 39f2f316..4d28a534 100644
--- a/src/hooks/useVars.js
+++ b/src/hooks/useVars.js
@@ -1,5 +1,5 @@
-import {useMemo} from 'react';
+import {useVarsGeneric} from '@starkware-industries/commons-js-hooks';
import vars from '../styles/variables.module.scss';
-export const useVars = () => useMemo(() => vars, []);
+export const useVars = () => useVarsGeneric(vars);
diff --git a/src/hooks/useWalletHandlerProvider.js b/src/hooks/useWalletHandlerProvider.js
index 04c6c5e2..8db4a862 100644
--- a/src/hooks/useWalletHandlerProvider.js
+++ b/src/hooks/useWalletHandlerProvider.js
@@ -1,7 +1,7 @@
import {NetworkType} from '@starkware-industries/commons-js-enums';
import {useMemo} from 'react';
-import Wallets from '../config/wallets.js';
+import Wallets from '../config/wallets';
import {GetStarknetWallet, MetaMask} from '../wallets';
import {WalletHandler} from '../wallets/wallet-handler';
@@ -23,6 +23,7 @@ const configMap = {
export const useWalletHandlerProvider = network => {
return useMemo(() => {
const {wallets, registry} = configMap[network];
+
return wallets
.map(walletConfig => {
const {id} = walletConfig;
diff --git a/src/index.scss b/src/index.scss
index b97571b5..35673b26 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -101,15 +101,6 @@ body {
max-height: 7px;
}
-.MuiStep-root {
- .MuiSvgIcon-root {
- &.Mui-completed,
- &.Mui-active {
- color: $--color-space-cadet !important;
- }
- }
-}
-
.MuiLinearProgress-root {
background-color: rgba($--color-orange-soda, 0.3) !important;
diff --git a/src/providers/BlockHashProvider/BlockHashProvider.js b/src/providers/BlockHashProvider/BlockHashProvider.js
index 972e6d01..780c775a 100644
--- a/src/providers/BlockHashProvider/BlockHashProvider.js
+++ b/src/providers/BlockHashProvider/BlockHashProvider.js
@@ -1,9 +1,10 @@
+import {useLogger} from '@starkware-industries/commons-js-hooks';
import {getStarknet} from '@starkware-industries/commons-js-libs/get-starknet';
import {promiseHandler} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {useCallback, useState} from 'react';
-import {useAccountChange, useEnvs, useLogger} from '../../hooks';
+import {useAccountChange, useEnvs} from '../../hooks';
import {BlockHashContext} from './block-hash-context';
export const BlockHashProvider = ({children}) => {
diff --git a/src/providers/ModalProvider/ModalProvider.js b/src/providers/ModalProvider/ModalProvider.js
index ef5a0db8..1924406b 100644
--- a/src/providers/ModalProvider/ModalProvider.js
+++ b/src/providers/ModalProvider/ModalProvider.js
@@ -8,6 +8,7 @@ export const ModalProvider = ({children}) => {
const [state, dispatch] = useReducer(reducer, initialState);
const showModal = payload => {
+ hideModal();
dispatch({
type: actions.SHOW_MODAL,
payload
diff --git a/src/providers/ModalProvider/modal-hooks.js b/src/providers/ModalProvider/modal-hooks.js
index 1f4859b2..3c1623b8 100644
--- a/src/providers/ModalProvider/modal-hooks.js
+++ b/src/providers/ModalProvider/modal-hooks.js
@@ -4,7 +4,7 @@ import {useCallback, useContext} from 'react';
import {ReactComponent as AlertIcon} from '../../assets/svg/icons/alert-circle.svg';
import {ReactComponent as WarningIcon} from '../../assets/svg/icons/warning-circle.svg';
import {ModalType} from '../../components/UI';
-import {useOnboardingModalTranslation} from '../../hooks';
+import {useOnboardingModalTranslation, useBlockedAddressModalTranslation} from '../../hooks';
import {ModalContext} from './modal-context';
const TRANSACTION_MODAL_STYLE = {
@@ -18,7 +18,7 @@ const TRANSACTION_MODAL_STYLE = {
fontSize: '12px',
fontWeight: '600',
lineHeight: '18px',
- margin: '0 5px'
+ margin: '8px 8px'
}
}
};
@@ -243,3 +243,44 @@ export const useLoginModal = () => {
[showModal]
);
};
+
+export const useBlockedAddressModal = () => {
+ const {showModal} = useContext(ModalContext);
+ const {titleTxt, closeButtonTxt} = useBlockedAddressModalTranslation();
+ const {buttonProps, containerStyle} = MODAL_HEADER_WITH_ICON_STYLE;
+
+ return useCallback(
+ account => {
+ showModal({
+ header: {
+ components: [
+ {
+ path: 'UI/Modal/ModalHeaderWithIcon/ModalHeaderWithIcon',
+ props: {
+ icon: WarningIcon,
+ title: titleTxt,
+ subtitle: account
+ }
+ }
+ ]
+ },
+ body: {
+ components: [
+ {
+ path: 'UI/Modal/BlockedAddressModal/BlockedAddressModal'
+ }
+ ]
+ },
+ footer: {
+ withButtons: true,
+ buttonProps: {
+ ...buttonProps,
+ text: closeButtonTxt
+ }
+ },
+ containerStyle
+ });
+ },
+ [showModal]
+ );
+};
diff --git a/src/providers/TokensProvider/TokensProvider.js b/src/providers/TokensProvider/TokensProvider.js
index d8631b0f..fdb3be2c 100644
--- a/src/providers/TokensProvider/TokensProvider.js
+++ b/src/providers/TokensProvider/TokensProvider.js
@@ -1,8 +1,9 @@
+import {useLogger} from '@starkware-industries/commons-js-hooks';
import {promiseHandler} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {useReducer} from 'react';
-import {useAccountChange, useBridgeContractAPI, useConstants, useLogger} from '../../hooks';
+import {useAccountChange, useBridgeContractAPI, useConstants} from '../../hooks';
import {useL1TokenBalance, useL2TokenBalance} from '../../hooks/useTokenBalance';
import {useL1Wallet, useL2Wallet} from '../WalletsProvider';
import {TokensContext} from './tokens-context';
diff --git a/src/providers/TransfersLogProvider/TransfersLogProvider.js b/src/providers/TransfersLogProvider/TransfersLogProvider.js
index c2ea0830..bf32f290 100644
--- a/src/providers/TransfersLogProvider/TransfersLogProvider.js
+++ b/src/providers/TransfersLogProvider/TransfersLogProvider.js
@@ -5,6 +5,7 @@ import {
SelectorName,
TransactionHashPrefix
} from '@starkware-industries/commons-js-enums';
+import {useLogger} from '@starkware-industries/commons-js-hooks';
import {getStarknet} from '@starkware-industries/commons-js-libs/get-starknet';
import {hash} from '@starkware-industries/commons-js-libs/starknet';
import {
@@ -18,7 +19,7 @@ import PropTypes from 'prop-types';
import React, {useReducer} from 'react';
import useDeepCompareEffect from 'use-deep-compare-effect';
-import {useAccountChange, useEnvs, useLogger, useStarknetContract} from '../../hooks';
+import {useAccountChange, useEnvs, useStarknetContract} from '../../hooks';
import {useBlockHash} from '../BlockHashProvider';
import {useTokens} from '../TokensProvider';
import {useAccountHash, useL2Wallet} from '../WalletsProvider';
@@ -105,7 +106,7 @@ export const TransfersLogProvider = ({children}) => {
contract: starknetContract,
eventName: EventName.L1.LOG_MESSAGE_TO_L2,
filter: {
- from_address: depositEvent.address,
+ fromAddress: depositEvent.address,
selector: hash.getSelectorFromName(SelectorName.HANDLE_DEPOSIT)
},
options: {
@@ -124,14 +125,14 @@ export const TransfersLogProvider = ({children}) => {
const messageToL2Event = await getMessageToL2(transfer.event);
if (messageToL2Event) {
logger.log('Found L2 message. calculating L2 transaction hash...', {messageToL2Event});
- const {to_address, from_address, selector, payload, nonce} = messageToL2Event.returnValues;
+ const {toAddress, fromAddress, selector, payload, nonce} = messageToL2Event.returnValues;
delete transfer.event;
return {
...transfer,
l2hash: getTransactionHash(
TransactionHashPrefix.L1_HANDLER,
- from_address,
- to_address,
+ fromAddress,
+ toAddress,
selector,
payload,
chainIdL2,
diff --git a/src/providers/WalletsProvider/WalletsProvider.js b/src/providers/WalletsProvider/WalletsProvider.js
index e2a418b6..24bf5dbc 100644
--- a/src/providers/WalletsProvider/WalletsProvider.js
+++ b/src/providers/WalletsProvider/WalletsProvider.js
@@ -1,17 +1,16 @@
-import {WalletStatus} from '@starkware-industries/commons-js-enums';
import {calcAccountHash} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {useEffect, useReducer, useState} from 'react';
-import {useWallet} from 'use-wallet';
+import {useEnvs, useEthereumWallet, useStarknetWallet} from '../../hooks';
import {WalletsContext} from './wallets-context';
-import {useStarknetWallet} from './wallets-hooks';
import {actions, initialState, reducer} from './wallets-reducer';
export const WalletsProvider = ({children}) => {
+ const {ENABLE_SCREENING} = useEnvs();
const [state, dispatch] = useReducer(reducer, initialState);
const [accountHash, setAccountHash] = useState('');
- const walletL1 = useWallet();
+ const walletL1 = useEthereumWallet({enableScreening: ENABLE_SCREENING});
const walletL2 = useStarknetWallet();
const {account: accountL1, status: statusL1, error: errorL1} = walletL1;
@@ -22,18 +21,14 @@ export const WalletsProvider = ({children}) => {
}, [accountL2, statusL2, errorL2]);
useEffect(() => {
- // To support serializable object in the store
- const serializedError = statusL1 === WalletStatus.ERROR ? {...errorL1} : null;
- updateWalletL1({
- ...walletL1,
- error: serializedError,
- isConnected: walletL1.isConnected()
- });
+ updateWalletL1(walletL1);
}, [accountL1, statusL1, errorL1]);
useEffect(() => {
if (accountL1 && accountL2) {
setAccountHash(calcAccountHash(accountL1, accountL2));
+ } else if (accountHash) {
+ setAccountHash('');
}
}, [accountL1, accountL2]);
diff --git a/src/providers/WalletsProvider/wallets-hooks.js b/src/providers/WalletsProvider/wallets-hooks.js
index 07f64cdd..8e955b23 100644
--- a/src/providers/WalletsProvider/wallets-hooks.js
+++ b/src/providers/WalletsProvider/wallets-hooks.js
@@ -1,18 +1,6 @@
-import {
- ChainInfo,
- ChainType,
- NetworkType,
- WalletErrorType,
- WalletStatus
-} from '@starkware-industries/commons-js-enums';
-import {
- getStarknet,
- connect as getStarknetWallet,
- disconnect as resetStarknetWallet
-} from '@starkware-industries/commons-js-libs/get-starknet';
-import {useCallback, useContext, useState} from 'react';
-
-import {useEnvs} from '../../hooks';
+import {NetworkType} from '@starkware-industries/commons-js-enums';
+import {useCallback, useContext} from 'react';
+
import {useTransfer} from '../TransferProvider';
import {WalletsContext} from './wallets-context';
@@ -71,94 +59,6 @@ export const useL2Wallet = () => {
};
};
-export const useStarknetWallet = () => {
- const {AUTO_CONNECT, SUPPORTED_L2_CHAIN_ID} = useEnvs();
- const [error, setError] = useState(null);
- const [account, setAccount] = useState('');
- const [chainId, setChainId] = useState('');
- const [chainName, setChainName] = useState('');
- const [status, setStatus] = useState(WalletStatus.DISCONNECTED);
-
- const connect = async walletConfig => {
- try {
- const wallet = await getStarknetWallet({
- modalOptions: {
- theme: 'dark'
- }
- });
- if (!wallet) {
- return;
- }
- setStatus(WalletStatus.CONNECTING);
- const enabled = await wallet
- .enable(!AUTO_CONNECT && {showModal: true})
- .then(address => address?.length && address[0]);
- if (enabled) {
- updateAccount();
- addAccountChangedListener();
- return {
- ...walletConfig,
- name: wallet.name || walletConfig.name,
- logoPath: wallet.icon || walletConfig.logoPath
- };
- }
- } catch {
- setStatus(WalletStatus.ERROR);
- }
- };
-
- const reset = () => {
- const disconnected = resetStarknetWallet({clearLastWallet: true, clearDefaultWallet: true});
- if (disconnected) {
- setStatus(WalletStatus.DISCONNECTED);
- setAccount('');
- }
- };
-
- const addAccountChangedListener = () => {
- getStarknet().on('accountsChanged', () => {
- updateAccount();
- });
- };
-
- const updateAccount = () => {
- const chainId = getCurrentChainId();
- setChainId(chainId);
- setChainName(ChainInfo.L2[chainId].NAME);
- if (chainId === SUPPORTED_L2_CHAIN_ID) {
- const {selectedAddress} = getStarknet();
- setAccount(selectedAddress);
- setStatus(selectedAddress ? WalletStatus.CONNECTED : WalletStatus.DISCONNECTED);
- setError(null);
- } else {
- setStatus(WalletStatus.ERROR);
- setError({name: WalletErrorType.CHAIN_UNSUPPORTED_ERROR});
- }
- };
-
- const getCurrentChainId = () => {
- const {baseUrl} = getStarknet().provider;
- if (baseUrl.includes('alpha-mainnet.starknet.io')) {
- return ChainType.L2.MAIN;
- } else if (baseUrl.includes('alpha4.starknet.io')) {
- return ChainType.L2.GOERLI;
- } else if (baseUrl.match(/^https?:\/\/localhost.*/)) {
- return 'localhost';
- }
- };
-
- return {
- account,
- chainId,
- chainName,
- status,
- error,
- connect,
- reset,
- isConnected: getStarknet().isConnected
- };
-};
-
export const useLoginWallet = network => {
const walletL1 = useL1Wallet();
const walletL2 = useL2Wallet();
diff --git a/src/providers/WalletsProvider/wallets-reducer.js b/src/providers/WalletsProvider/wallets-reducer.js
index 09c1af37..b75070e5 100644
--- a/src/providers/WalletsProvider/wallets-reducer.js
+++ b/src/providers/WalletsProvider/wallets-reducer.js
@@ -9,7 +9,6 @@ export const actions = {
const initialWalletState = {
account: '',
- isConnected: false,
status: WalletStatus.DISCONNECTED,
chainName: '',
chainId: null,
diff --git a/src/routes/Faq/Faq.js b/src/routes/Faq/Faq.js
index c83875f5..d3c2e4c1 100644
--- a/src/routes/Faq/Faq.js
+++ b/src/routes/Faq/Faq.js
@@ -1,16 +1,15 @@
import PropTypes from 'prop-types';
import React, {useEffect, useState} from 'react';
-import {TrackEvent} from '../../analytics';
import {ReactComponent as MinusCircle} from '../../assets/svg/icons/minus-circle.svg';
import {ReactComponent as PlusCircle} from '../../assets/svg/icons/plus-circle.svg';
import {FullScreenContainer} from '../../components/UI';
import Faqs from '../../config/faqs';
-import {useTracking, useFaqTranslation} from '../../hooks';
+import {useFaqTracking, useFaqTranslation} from '../../hooks';
import styles from './Faq.module.scss';
export const Faq = () => {
- const [trackFaqScreen] = useTracking(TrackEvent.FAQ_SCREEN);
+ const [trackFaqScreen] = useFaqTracking();
useEffect(() => {
trackFaqScreen();
diff --git a/src/routes/Terms/Terms.js b/src/routes/Terms/Terms.js
index db1ac4ef..6a3da077 100644
--- a/src/routes/Terms/Terms.js
+++ b/src/routes/Terms/Terms.js
@@ -1,3 +1,4 @@
+import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {useEffect, useRef, useState} from 'react';
import {useNavigate} from 'react-router-dom';
@@ -54,7 +55,7 @@ const AcceptButton = ({isDisabled}) => {
const [, trackAcceptClick] = useTermsTracking();
const {acceptBtnTxt} = useTermsTranslation();
const {acceptTerms} = useTerms();
- const {colorDodgerBlue, colorBrilliantAzure, colorWhite} = useColors();
+ const {colorBrilliantAzure, colorWhite, colorBrightNavyBlue, colorLapizLazuli} = useColors();
const {account: accountL1} = useL1Wallet();
const {account: accountL2} = useL2Wallet();
const navigate = useNavigate();
@@ -70,15 +71,15 @@ const AcceptButton = ({isDisabled}) => {
-
+
By clicking the "I Accept" button, you are accepting our{' '}
Terms of Service
diff --git a/src/routes/Terms/Terms.module.scss b/src/routes/Terms/Terms.module.scss
index ae2cbf2c..b51bd983 100644
--- a/src/routes/Terms/Terms.module.scss
+++ b/src/routes/Terms/Terms.module.scss
@@ -91,13 +91,21 @@
font-weight: 400;
font-size: 16px;
line-height: 24px;
- color: $--color-auro-metal-saurus;
+ color: $--color-light-steel-blue;
a {
font-weight: 600;
color: $--color-white;
text-decoration: none;
}
+
+ &.disabled {
+ color: $--color-auro-metal-saurus;
+
+ a {
+ color: $--color-light-steel-blue;
+ }
+ }
}
}
}
diff --git a/src/styles/colors.module.scss b/src/styles/colors.module.scss
index da6c1abb..9a172bfb 100644
--- a/src/styles/colors.module.scss
+++ b/src/styles/colors.module.scss
@@ -41,11 +41,14 @@ $--color-dark-blue-gray: #65668c;
$--color-brilliant-azure: #4295f7;
$--color-international-orange-aerospace: #ff4f0a;
$--color-dark-jungle-green: #101828;
+$--color-bright-navy-blue: #287adb;
+$--color-lapis-lazuli: #3467a3;
:export {
colorBlack: $--color-black;
colorWhite: $--color-white;
colorGainsboro: $--color-gainsboro;
+ colorGainsboro1: $--color-gainsboro-1;
colorSpaceCadet: $--color-space-cadet;
colorSpaceCadet2: $--color-space-cadet-2;
colorOrangeSoda: $--color-orange-soda;
@@ -62,7 +65,9 @@ $--color-dark-jungle-green: #101828;
colorVeryLightAzure: $--color-very-light-azure;
colorDodgerBlue: $--color-dodger-blue;
colorFlame: $--color-flame;
+ colorInternationalOrangeAerospace: $--color-international-orange-aerospace;
colorDarkBlueGray: $--color-dark-blue-gray;
colorBrilliantAzure: $--color-brilliant-azure;
- colorInternationalOrangeAerospace: $--color-international-orange-aerospace;
+ colorBrightNavyBlue: $--color-bright-navy-blue;
+ colorLapizLazuli: $--color-lapis-lazuli;
}
diff --git a/src/wallets/get-starknet-wallet.js b/src/wallets/get-starknet-wallet.js
index 27fb69b1..7691d21a 100644
--- a/src/wallets/get-starknet-wallet.js
+++ b/src/wallets/get-starknet-wallet.js
@@ -4,13 +4,15 @@ import {WalletHandler} from './wallet-handler';
export class GetStarknetWallet extends WalletHandler {
isInstalled() {
- const version = window.starknet?.version;
+ const version = window.starknet?.version || window.starknet_braavos?.version;
return version && version !== 'uninstalled';
}
install() {
if (this.isBrowserSupported()) {
- return getStarknet().enable({showModal: true});
+ return getStarknet().enable({
+ showModal: true
+ });
}
}
}
diff --git a/src/wallets/wallet-handler.js b/src/wallets/wallet-handler.js
index ed4f4277..74110cdb 100644
--- a/src/wallets/wallet-handler.js
+++ b/src/wallets/wallet-handler.js
@@ -1,6 +1,6 @@
import {getPropertyPath, isChrome, isFirefox} from '@starkware-industries/commons-js-utils';
-import strings from '../config/strings';
+import translations from '../config/translations';
export class WalletHandler {
constructor(config) {
@@ -10,7 +10,7 @@ export class WalletHandler {
isBrowserSupported() {
const isBrowserSupported = isChrome() || isFirefox();
if (!isBrowserSupported) {
- throw new Error(getPropertyPath(strings, 'modals.login.unsupportedBrowserTxt'));
+ throw new Error(getPropertyPath(translations, 'modals.login.unsupportedBrowserTxt'));
}
return true;
}
diff --git a/yarn.lock b/yarn.lock
index f25554fe..85b0b5db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2386,15 +2386,20 @@
resolved "https://registry.yarnpkg.com/@splitbee/web/-/web-0.3.0.tgz#676ebe877b6d82a10ece6527a07f70b1994d242e"
integrity sha512-jNPDKg0GQGa4jCaBc6JQsv0NHmBA80WCwZE49nFyhcbo32WF0GyqXeice7ZApy7OUHI16bAUAzm4MOQw3gvxfQ==
-"@starkware-industries/commons-js-enums@1.1.0-dev.3":
- version "1.1.0-dev.3"
- resolved "https://registry.yarnpkg.com/@starkware-industries/commons-js-enums/-/commons-js-enums-1.1.0-dev.3.tgz#42f25129c91d31d90730f56c42f4e872e3291ae3"
- integrity sha512-wghtEEr//0q04JKgZFnzxsMAQKntRdNsFPJI8Pnu8K9zBVzICsDR0fkph4r20wTdtwVvCFi2U3+MoY1a7NFpGg==
+"@starkware-industries/commons-js-enums@1.1.0":
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/@starkware-industries/commons-js-enums/-/commons-js-enums-1.1.0.tgz#f661378a75132e8fe514684252fe38603206d035"
+ integrity sha512-vb9RMhl3cPXBVzJNLdgCsHaxWQ1DM9Y/jMNYmnZcsIGNVZTPLHIGvfydfvH2UTbcx3sdczyvDrwrIYewuYLz1g==
+
+"@starkware-industries/commons-js-hooks@1.0.0":
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/@starkware-industries/commons-js-hooks/-/commons-js-hooks-1.0.0.tgz#f554eec73f266a90bebdd0d8a9d2723046fb8b45"
+ integrity sha512-wBkhifM27jVPWFELB7K7JZE4ZH4XI5Nxs2is3yijbREANukTzYZghNsUllGhIU6mahAHC4xoWHtjg8r7+H12rQ==
-"@starkware-industries/commons-js-libs@1.2.0-dev.4":
- version "1.2.0-dev.4"
- resolved "https://registry.yarnpkg.com/@starkware-industries/commons-js-libs/-/commons-js-libs-1.2.0-dev.4.tgz#1b7ef0d1e4f12ea09fad9a0f66cea1e12583bed9"
- integrity sha512-oXqcuumdGY1nAY9qby4VMHyAe7GfcgLWjYKnseOB2wNRiZVnflqvjLEHXVPafWLRNdH2Rn86WA7ScCHKbC7s5g==
+"@starkware-industries/commons-js-libs@1.2.1":
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/@starkware-industries/commons-js-libs/-/commons-js-libs-1.2.1.tgz#9b164a7a935b49b954d22f9f639cd6920608d11b"
+ integrity sha512-vRkxJjEbAJ3aXQLInvQnusReo03M28XBOc7l1iQmKNY21MlMUTl1IpsIMukRAE1kQp56m4xVOj+t0i4mfBaqfQ==
dependencies:
"@metamask/onboarding" "^1.0.1"
get-starknet "^1.4.4"
@@ -2403,14 +2408,12 @@
web3-eth-contract "^1.7.5"
web3-utils "^1.7.5"
-"@starkware-industries/commons-js-utils@1.0.0-dev.5":
- version "1.0.0-dev.5"
- resolved "https://registry.yarnpkg.com/@starkware-industries/commons-js-utils/-/commons-js-utils-1.0.0-dev.5.tgz#75215f58498728dd6dd99c9883a9528803d07552"
- integrity sha512-4Oy8D3rFGYZQppZye9A/Vhr86kVCjL2yuUP9xUPiGRLlFZUg+t/3D9Ph7Ij4Ph6C1OUTuy2neBs8nV3GdqC6cA==
+"@starkware-industries/commons-js-utils@1.1.0":
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/@starkware-industries/commons-js-utils/-/commons-js-utils-1.1.0.tgz#30b7d0f345cbd073bc6dd2e79c2c0e22b6f9b5e7"
+ integrity sha512-XNXMPw2RKofFbyvlBe2zW9Vjvps2OoYaWVMbzM1lpqoLiOsYkpr/tYSQm7s71YNgcKCOBIP3L1bPlHZ/Oliylg==
dependencies:
"@normalizex/ethjs-unit" "^0.1.8"
- "@starkware-industries/commons-js-enums" "1.1.0-dev.3"
- "@starkware-industries/commons-js-libs" "1.2.0-dev.4"
"@types/uuid" "^8.3.4"
axios "^0.26.0"
js-logger "^1.6.1"