+
+
-
- {message}{' '}
-
-
+
{message}
+
);
};
diff --git a/workspace/apps/starkgate/web/src/components/UI/CheckboxWithText/CheckboxWithText.module.scss b/workspace/apps/starkgate/web/src/components/UI/CheckboxWithText/CheckboxWithText.module.scss
index 94eb08eb..d214851e 100644
--- a/workspace/apps/starkgate/web/src/components/UI/CheckboxWithText/CheckboxWithText.module.scss
+++ b/workspace/apps/starkgate/web/src/components/UI/CheckboxWithText/CheckboxWithText.module.scss
@@ -4,21 +4,22 @@
display: flex;
align-items: center;
- &.disabled {
+ .disabled {
opacity: 0.5;
& * {
pointer-events: none !important;
}
}
-}
-.message {
- font-size: 12px;
- line-height: 18px;
- color: $--color-white;
-}
+ .message {
+ font-size: 12px;
+ line-height: 18px;
+ white-space: break-spaces;
+ color: $--color-white;
+ }
-.readMore {
- color: $--color-very-light-azure;
+ .readMore {
+ color: $--color-very-light-azure;
+ }
}
diff --git a/workspace/apps/starkgate/web/src/components/UI/DynamicIcon/DynamicIcon.jsx b/workspace/apps/starkgate/web/src/components/UI/DynamicIcon/DynamicIcon.jsx
index bcd753a3..60d56872 100644
--- a/workspace/apps/starkgate/web/src/components/UI/DynamicIcon/DynamicIcon.jsx
+++ b/workspace/apps/starkgate/web/src/components/UI/DynamicIcon/DynamicIcon.jsx
@@ -4,7 +4,7 @@ import {useQuery} from '@tanstack/react-query';
import {Image} from '@ui';
export const DynamicIcon = ({path, size}) => {
- const isUrlPath = path.startsWith('data:image');
+ const isUrlPath = path.startsWith('data:image') || path.startsWith('https');
const {data, isLoading} = useQuery({
queryKey: ['dynamic_import', path],
queryFn: () => import(`@assets/svg/${path}.svg`),
diff --git a/workspace/apps/starkgate/web/src/components/UI/EthereumWalletButton/EthereumWalletButton.jsx b/workspace/apps/starkgate/web/src/components/UI/EthereumWalletButton/EthereumWalletButton.jsx
deleted file mode 100644
index cc9197cf..00000000
--- a/workspace/apps/starkgate/web/src/components/UI/EthereumWalletButton/EthereumWalletButton.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import {useEnvs} from '@hooks';
-import {useIsL1, useL1Wallet} from '@providers';
-import {ChainInfo, NetworkType} from '@starkware-webapps/enums';
-import {NetworkWalletButton} from '@ui';
-
-export const EthereumWalletButton = () => {
- const {account, config, error, status} = useL1Wallet();
- const {SUPPORTED_L1_CHAIN_ID} = useEnvs();
- const [, swapToL1] = useIsL1();
-
- return (
-
- );
-};
diff --git a/workspace/apps/starkgate/web/src/components/UI/LinkButton/LinkButton.jsx b/workspace/apps/starkgate/web/src/components/UI/LinkButton/LinkButton.jsx
index df1b56fd..34a7ec1b 100644
--- a/workspace/apps/starkgate/web/src/components/UI/LinkButton/LinkButton.jsx
+++ b/workspace/apps/starkgate/web/src/components/UI/LinkButton/LinkButton.jsx
@@ -6,7 +6,7 @@ import {openInNewTab, toClasses} from '@starkware-webapps/utils-browser';
import styles from './LinkButton.module.scss';
-export const LinkButton = ({text, url, isDisabled, onClick}) => {
+export const LinkButton = ({text, url, isDisabled, style, onClick}) => {
const onClickInternal = () => {
openInNewTab(url);
onClick();
@@ -15,6 +15,7 @@ export const LinkButton = ({text, url, isDisabled, onClick}) => {
return (
{text}
@@ -27,5 +28,6 @@ LinkButton.propTypes = {
text: PropTypes.string,
url: PropTypes.string,
isDisabled: PropTypes.bool,
+ style: PropTypes.object,
onClick: PropTypes.func
};
diff --git a/workspace/apps/starkgate/web/src/components/UI/LoginWalletButton/LoginWalletButton.jsx b/workspace/apps/starkgate/web/src/components/UI/LoginWalletButton/LoginWalletButton.jsx
index b015aa80..b327be5c 100644
--- a/workspace/apps/starkgate/web/src/components/UI/LoginWalletButton/LoginWalletButton.jsx
+++ b/workspace/apps/starkgate/web/src/components/UI/LoginWalletButton/LoginWalletButton.jsx
@@ -1,21 +1,28 @@
-import React from 'react';
+import {useMemo} from 'react';
import {useConnectWalletTracking, useTransferTranslation} from '@hooks';
-import {useLoginModal, useWalletsStatus} from '@providers';
-import {NetworkType, isConnected} from '@starkware-webapps/enums';
+import {useWalletLogin} from '@providers';
+import {NetworkType} from '@starkware-webapps/enums';
+import {evaluate} from '@starkware-webapps/utils';
import {MainMenuButton} from '@ui';
export const LoginWalletButton = props => {
- const {statusL1} = useWalletsStatus();
- const {loginWalletButtonTxt} = useTransferTranslation();
- const showLoginModal = useLoginModal();
+ const {loginWalletsButtonTxt, loginWalletButtonTxt} = useTransferTranslation();
const [trackConnectWalletClick] = useConnectWalletTracking();
+ const {login, isDisconnected, isEthereumWalletConnected} = useWalletLogin();
+
+ const text = useMemo(() => {
+ return isDisconnected
+ ? loginWalletsButtonTxt
+ : evaluate(loginWalletButtonTxt, {
+ networkName: isEthereumWalletConnected ? NetworkType.L2 : NetworkType.L1
+ });
+ }, [isDisconnected, isEthereumWalletConnected]);
const handleConnectWallets = () => {
- const networkName = isConnected(statusL1) ? NetworkType.L2 : NetworkType.L1;
trackConnectWalletClick();
- showLoginModal(networkName);
+ login();
};
- return
;
+ return
;
};
diff --git a/workspace/apps/starkgate/web/src/components/UI/LogoutButton/LogoutButton.jsx b/workspace/apps/starkgate/web/src/components/UI/LogoutButton/LogoutButton.jsx
deleted file mode 100644
index 8a7d500c..00000000
--- a/workspace/apps/starkgate/web/src/components/UI/LogoutButton/LogoutButton.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import {useAccountTranslation, useColors} from '@hooks';
-import {Button} from '@ui';
-
-export const LogoutButton = ({onClick, isDisabled}) => {
- const {logoutBtnTxt} = useAccountTranslation();
- const {colorIndigo, colorWhite} = useColors();
-
- return (
-
- );
-};
-
-LogoutButton.propTypes = {
- onClick: PropTypes.func,
- isDisabled: PropTypes.bool
-};
diff --git a/workspace/apps/starkgate/web/src/components/UI/MainMenuButton/MainMenuButton.jsx b/workspace/apps/starkgate/web/src/components/UI/MainMenuButton/MainMenuButton.jsx
index 7b6f5fb5..535957ca 100644
--- a/workspace/apps/starkgate/web/src/components/UI/MainMenuButton/MainMenuButton.jsx
+++ b/workspace/apps/starkgate/web/src/components/UI/MainMenuButton/MainMenuButton.jsx
@@ -7,11 +7,11 @@ import {Button} from '@ui';
import styles from './MainMenuButton.module.scss';
-export const MainMenuButton = props => {
+export const MainMenuButton = ({className, ...props}) => {
const {colorOrangeSoda, colorWhite, colorFlame, colorIndigo} = useColors();
return (
{children}
diff --git a/workspace/apps/starkgate/web/src/components/UI/NetworkSwap/NetworkSwap.module.scss b/workspace/apps/starkgate/web/src/components/UI/NetworkSwap/NetworkSwap.module.scss
index 282f5f6b..cc5ae79e 100644
--- a/workspace/apps/starkgate/web/src/components/UI/NetworkSwap/NetworkSwap.module.scss
+++ b/workspace/apps/starkgate/web/src/components/UI/NetworkSwap/NetworkSwap.module.scss
@@ -1,6 +1,5 @@
.networkSwap {
position: absolute;
- z-index: 1;
left: 50%;
transform: translate(-50%, calc(-50% - 2px));
cursor: pointer;
diff --git a/workspace/apps/starkgate/web/src/components/UI/NetworkWalletButton/NetworkWalletButton.jsx b/workspace/apps/starkgate/web/src/components/UI/NetworkWalletButton/NetworkWalletButton.jsx
deleted file mode 100644
index d426ca44..00000000
--- a/workspace/apps/starkgate/web/src/components/UI/NetworkWalletButton/NetworkWalletButton.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import PropTypes from 'prop-types';
-import {useEffect} from 'react';
-
-import {useConnectWalletTracking} from '@hooks';
-import {useApp, useLoginModal, useMenu} from '@providers';
-import {WalletStatus, isL1Network} from '@starkware-webapps/enums';
-import {WalletButton} from '@ui';
-
-export const NetworkWalletButton = ({account, chain, logoPath, network, status, error, swapFn}) => {
- const {navigateToRoute} = useApp();
- const {showAccountMenu} = useMenu();
- const showLoginModal = useLoginModal();
- const [, trackConnectEthereumWalletClick, trackConnectStarknetWalletClick] =
- useConnectWalletTracking();
-
- useEffect(() => {
- error && handleWalletError(error);
- }, [error]);
-
- const handleWalletButtonClick = () => {
- switch (status) {
- case WalletStatus.ERROR:
- case WalletStatus.CONNECTING:
- case WalletStatus.DISCONNECTED:
- return handleConnectWallet();
- case WalletStatus.CONNECTED:
- return handleConnectedWallet();
- default:
- break;
- }
- };
-
- const handleConnectedWallet = () => {
- swapFn();
- showAccountMenu();
- navigateToRoute('/');
- };
-
- const handleConnectWallet = () => {
- isL1Network(network) ? trackConnectEthereumWalletClick() : trackConnectStarknetWalletClick();
- showLoginModal(network);
- };
-
- const handleWalletError = () => {
- // TODO
- };
-
- return (
-
- );
-};
-
-NetworkWalletButton.propTypes = {
- account: PropTypes.string,
- chain: PropTypes.string,
- logoPath: PropTypes.string,
- network: PropTypes.string,
- status: PropTypes.string,
- error: PropTypes.object,
- swapFn: PropTypes.func
-};
diff --git a/workspace/apps/starkgate/web/src/components/UI/SourceMenuTab/SourceMenuTab.jsx b/workspace/apps/starkgate/web/src/components/UI/SourceMenuTab/SourceMenuTab.jsx
deleted file mode 100644
index fe68c059..00000000
--- a/workspace/apps/starkgate/web/src/components/UI/SourceMenuTab/SourceMenuTab.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import {toClasses} from '@starkware-webapps/utils-browser';
-
-import styles from './SourceMenuTab.module.scss';
-
-export const SourceMenuTab = ({text, isActive, onClick}) => (
-
- {text}
-
-);
-
-SourceMenuTab.propTypes = {
- text: PropTypes.string,
- isActive: PropTypes.bool,
- onClick: PropTypes.func
-};
diff --git a/workspace/apps/starkgate/web/src/components/UI/SourceMenuTab/SourceMenuTab.module.scss b/workspace/apps/starkgate/web/src/components/UI/SourceMenuTab/SourceMenuTab.module.scss
deleted file mode 100644
index 488a4527..00000000
--- a/workspace/apps/starkgate/web/src/components/UI/SourceMenuTab/SourceMenuTab.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import '../../../index';
-
-.sourceMenuTab {
- display: flex;
- justify-content: space-around;
- align-items: center;
- border-radius: 8px;
- font-weight: 500;
- font-size: 16px;
- line-height: 24px;
- color: rgba($--color-white, 0.5);
- width: 100%;
- height: 32px;
- text-transform: capitalize;
- cursor: pointer;
- transition: 0.3s ease-in-out;
-
- &:hover {
- color: $--color-white;
- }
-
- &.isActive {
- color: $--color-white;
- background: $--color-dark-slate-blue;
- }
-}
diff --git a/workspace/apps/starkgate/web/src/components/UI/StarknetWalletButton/StarknetWalletButton.jsx b/workspace/apps/starkgate/web/src/components/UI/StarknetWalletButton/StarknetWalletButton.jsx
deleted file mode 100644
index e614c7d0..00000000
--- a/workspace/apps/starkgate/web/src/components/UI/StarknetWalletButton/StarknetWalletButton.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import {addAddressPadding} from 'starknet';
-
-import {useEnvs} from '@hooks';
-import {useIsL2, useL2Wallet} from '@providers';
-import {ChainInfo, NetworkType} from '@starkware-webapps/enums';
-import {NetworkWalletButton} from '@ui';
-
-export const StarknetWalletButton = () => {
- const {account, config, error, status} = useL2Wallet();
- const {SUPPORTED_L2_CHAIN_ID} = useEnvs();
- const [, swapToL2] = useIsL2();
-
- return (
-
- );
-};
diff --git a/workspace/apps/starkgate/web/src/components/UI/TermsDisclaimer/TermsDisclaimer.jsx b/workspace/apps/starkgate/web/src/components/UI/TermsDisclaimer/TermsDisclaimer.jsx
new file mode 100644
index 00000000..552c4184
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/TermsDisclaimer/TermsDisclaimer.jsx
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+
+export const TermsDisclaimer = ({text, link}) => {
+ const style = {
+ padding: '4px 25px',
+ fontSize: '14px',
+ fontFamily: 'Inter',
+ textAlign: 'center',
+ fontWeight: 400,
+ lineHeight: 1.5
+ };
+
+ const textStyle = {
+ color: 'white'
+ };
+
+ const linkStyle = {
+ color: '#69a5ff'
+ };
+
+ return (
+
+ );
+};
+
+TermsDisclaimer.propTypes = {
+ text: PropTypes.string,
+ link: PropTypes.string
+};
diff --git a/workspace/apps/starkgate/web/src/components/UI/Toast/AlphaDisclaimerToast/AlphaDisclaimerToast.jsx b/workspace/apps/starkgate/web/src/components/UI/Toast/AlphaDisclaimerToast/AlphaDisclaimerToast.jsx
deleted file mode 100644
index 4fe7db8e..00000000
--- a/workspace/apps/starkgate/web/src/components/UI/Toast/AlphaDisclaimerToast/AlphaDisclaimerToast.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import {ReactComponent as StarknetIcon} from '@assets/svg/chains/starknet.svg';
-import {useColors, useToastsTranslation} from '@hooks';
-import {CallToActionToast} from '@ui';
-
-export const AlphaDisclaimerToast = ({t, onDismiss}) => {
- const {alphaDisclaimerNotice} = useToastsTranslation();
- const {colorInternationalOrangeAerospace} = useColors();
-
- return (
-
}
- t={t}
- titleTxt={alphaDisclaimerNotice.titleTxt}
- onDismiss={onDismiss}
- />
- );
-};
-
-AlphaDisclaimerToast.propTypes = {
- t: PropTypes.object,
- onDismiss: PropTypes.func
-};
diff --git a/workspace/apps/starkgate/web/src/components/UI/Toast/index.jsx b/workspace/apps/starkgate/web/src/components/UI/Toast/index.jsx
index 8896de71..a1916d7e 100644
--- a/workspace/apps/starkgate/web/src/components/UI/Toast/index.jsx
+++ b/workspace/apps/starkgate/web/src/components/UI/Toast/index.jsx
@@ -4,7 +4,6 @@ export * from './ToastButton/ToastButton';
export * from './ToastHeader/ToastHeader';
export * from './ToastSeparator/ToastSeparator';
export * from './CompleteTransferToL1Toast/CompleteTransferToL1Toast';
-export * from './AlphaDisclaimerToast/AlphaDisclaimerToast';
export * from './TransferToast/TransferToast';
export * from './ErrorToast/ErrorToast';
export * from './CallToActionToast/CallToActionToast';
diff --git a/workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.jsx b/workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.jsx
index 856f0f2d..84012c0c 100644
--- a/workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.jsx
+++ b/workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.jsx
@@ -9,14 +9,22 @@ import styles from './TransferLogContainer.module.scss';
export const TransferLogContainer = ({
transferIndex,
+ isError,
isLoading,
onShowTransfers,
onScrollEnd,
children
}) => {
const {resetMenuProps} = useMenu();
- const {titleTxt, singleOverviewTxt, overviewTxt, emptyMsgTxt, viewMoreTxt, viewLessTxt} =
- useTransferLogContainerTranslation();
+ const {
+ titleTxt,
+ singleOverviewTxt,
+ overviewTxt,
+ errorMsgTxt,
+ emptyMsgTxt,
+ viewMoreTxt,
+ viewLessTxt
+ } = useTransferLogContainerTranslation();
const [showChildren, setShowChildren] = useState(false);
const toggleShowChildren = () => {
@@ -33,6 +41,9 @@ export const TransferLogContainer = ({
};
const renderChildren = () => {
+ if (isError) {
+ return
{errorMsgTxt}
;
+ }
if (!children) {
return
{emptyMsgTxt}
;
}
@@ -58,7 +69,7 @@ export const TransferLogContainer = ({
{titleTxt}
-
+ {children && }
{isLoading ?
: renderChildren()}
@@ -67,6 +78,7 @@ export const TransferLogContainer = ({
TransferLogContainer.propTypes = {
transferIndex: PropTypes.number,
+ isError: PropTypes.bool,
isLoading: PropTypes.bool,
onShowTransfers: PropTypes.func,
onScrollEnd: PropTypes.func,
diff --git a/workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.module.scss b/workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.module.scss
index 1010ce19..eed5ce02 100644
--- a/workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.module.scss
+++ b/workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.module.scss
@@ -19,6 +19,11 @@
padding-right: 16px;
}
+ .error {
+ color: $--color-jasper;
+ font-size: 12px;
+ }
+
.empty {
color: $--color-gainsboro;
font-size: 12px;
diff --git a/workspace/apps/starkgate/web/src/components/UI/WalletButton/WalletButton.jsx b/workspace/apps/starkgate/web/src/components/UI/WalletButton/WalletButton.jsx
index 35ff4475..97fb7472 100644
--- a/workspace/apps/starkgate/web/src/components/UI/WalletButton/WalletButton.jsx
+++ b/workspace/apps/starkgate/web/src/components/UI/WalletButton/WalletButton.jsx
@@ -2,9 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import {useColors, useHeaderTranslation} from '@hooks';
-import {isConnected, isConnecting} from '@starkware-webapps/enums';
import {evaluate, shortenAddress} from '@starkware-webapps/utils';
-import {toClasses} from '@starkware-webapps/utils-browser';
import {Button, DynamicIcon} from '@ui';
import styles from './WalletButton.module.scss';
@@ -15,11 +13,11 @@ export const WalletButtonIconSize = {
LARGE: 30
};
-export const WalletButton = ({account, chain, network, logoPath, status, onClick}) => {
- return isConnected(status) ? (
+export const WalletButton = ({account, chain, network, logoPath, isConnected, onClick}) => {
+ return isConnected ? (
) : (
-
+
);
};
@@ -28,7 +26,7 @@ WalletButton.propTypes = {
chain: PropTypes.string,
network: PropTypes.string,
logoPath: PropTypes.string,
- status: PropTypes.string,
+ isConnected: PropTypes.bool,
onClick: PropTypes.func
};
@@ -58,18 +56,17 @@ AccountWalletButton.propTypes = {
onClick: PropTypes.func
};
-const ConnectWalletButton = ({onClick, network, status}) => {
+const ConnectWalletButton = ({onClick, network}) => {
const {colorOrangeSoda, colorFlame, colorWhite} = useColors();
- const {connectWalletBtnTxt, connectingWalletBtnTxt} = useHeaderTranslation();
- const connecting = isConnecting(status);
+ const {connectWalletBtnTxt} = useHeaderTranslation();
return (
);
@@ -77,8 +74,7 @@ const ConnectWalletButton = ({onClick, network, status}) => {
ConnectWalletButton.propTypes = {
onClick: PropTypes.func,
- network: PropTypes.string,
- status: PropTypes.string
+ network: PropTypes.string
};
const ChainLabel = ({chain}) => {
diff --git a/workspace/apps/starkgate/web/src/components/UI/WalletButton/WalletButton.module.scss b/workspace/apps/starkgate/web/src/components/UI/WalletButton/WalletButton.module.scss
index 6ad9ce52..499f8bda 100644
--- a/workspace/apps/starkgate/web/src/components/UI/WalletButton/WalletButton.module.scss
+++ b/workspace/apps/starkgate/web/src/components/UI/WalletButton/WalletButton.module.scss
@@ -5,7 +5,7 @@
font-weight: 500;
font-size: 12px;
line-height: 17px;
- padding: 10px 5px 10px 7px;
+ padding: 10px 20px;
.networkLabel {
display: flex;
@@ -29,7 +29,3 @@
font-weight: 600;
border-width: 0;
}
-
-.connecting {
- pointer-events: none;
-}
diff --git a/workspace/apps/starkgate/web/src/components/UI/index.jsx b/workspace/apps/starkgate/web/src/components/UI/index.jsx
index 4665179c..95f8e63a 100644
--- a/workspace/apps/starkgate/web/src/components/UI/index.jsx
+++ b/workspace/apps/starkgate/web/src/components/UI/index.jsx
@@ -1,5 +1,6 @@
export * from './BackButton/BackButton';
export * from './Badge/Badge';
+export * from './BlockExplorer/BlockExplorer';
export * from './Button/Button';
export * from './Modal';
export * from './Toast';
@@ -26,12 +27,10 @@ export * from './TokenBalance/TokenBalance';
export * from './TokenInput/TokenInput';
export * from './TokenSelector/TokenSelector';
export * from './TransferButton/TransferButton';
-export * from './SourceMenuTab/SourceMenuTab';
export * from './SearchToken/SearchToken';
export * from './SelectTokenList/SelectTokenList';
export * from './SelectTokenRow/SelectTokenRow';
export * from './TransferLogContainer/TransferLogContainer';
-export * from './LogoutButton/LogoutButton';
export * from './AccountAddress/AccountAddress';
export * from './RefreshIcon/RefreshIcon';
export * from './Stepper/Stepper';
@@ -46,13 +45,11 @@ export * from './BurgerMenu/BurgerMenu';
export * from './BurgerMenuItem/BurgerMenuItem';
export * from './Bullet/Bullet';
export * from './CollapseExpand/CollapseExpand';
-export * from './StarknetWalletButton/StarknetWalletButton';
-export * from './EthereumWalletButton/EthereumWalletButton';
export * from './LoginWalletButton/LoginWalletButton';
-export * from './NetworkWalletButton/NetworkWalletButton';
export * from './MainMenuButton/MainMenuButton';
export * from './ChainSelect/ChainSelect';
export * from './MenuBackground/MenuBackground';
export * from './Link/Link';
export * from './Image/Image';
export * from './SideButton/SideButton';
+export * from './TermsDisclaimer/TermsDisclaimer';
diff --git a/workspace/apps/starkgate/web/src/config/block-explorers.js b/workspace/apps/starkgate/web/src/config/block-explorers.js
new file mode 100644
index 00000000..5e8e2198
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/config/block-explorers.js
@@ -0,0 +1,46 @@
+import {ReactComponent as EtherscanLogo} from '@assets/svg/etherscan.svg';
+import {ReactComponent as StarkScanLogo} from '@assets/svg/starkscan.svg';
+import {ReactComponent as Viewblock} from '@assets/svg/viewblock.svg';
+import {ReactComponent as VoyagerLogo} from '@assets/svg/voyager.svg';
+import {
+ ETHERSCAN_ACCOUNT_URL,
+ ETHERSCAN_TX_URL,
+ STARKSCAN_ACCOUNT_URL,
+ STARKSCAN_TX_URL,
+ VIEWBLOCK_ACCOUNT_URL,
+ VIEWBLOCK_TX_URL,
+ VOYAGER_ACCOUNT_URL,
+ VOYAGER_TX_URL
+} from '@config/envs';
+import {NetworkType} from '@starkware-webapps/enums';
+
+export const blockExplorers = {
+ [NetworkType.L1]: {
+ etherscan: {
+ name: 'Etherscan',
+ accountUrl: ETHERSCAN_ACCOUNT_URL,
+ txUrl: ETHERSCAN_TX_URL,
+ Logo: EtherscanLogo
+ }
+ },
+ [NetworkType.L2]: {
+ starkscan: {
+ name: 'Starkscan',
+ accountUrl: STARKSCAN_ACCOUNT_URL,
+ txUrl: STARKSCAN_TX_URL,
+ Logo: StarkScanLogo
+ },
+ viewblock: {
+ name: 'ViewBlock',
+ accountUrl: VIEWBLOCK_ACCOUNT_URL,
+ txUrl: VIEWBLOCK_TX_URL,
+ Logo: Viewblock
+ },
+ voyager: {
+ name: 'Voyager',
+ accountUrl: VOYAGER_ACCOUNT_URL,
+ txUrl: VOYAGER_TX_URL,
+ Logo: VoyagerLogo
+ }
+ }
+};
diff --git a/workspace/apps/starkgate/web/src/config/constants.js b/workspace/apps/starkgate/web/src/config/constants.js
index 742cbcae..22f89f02 100644
--- a/workspace/apps/starkgate/web/src/config/constants.js
+++ b/workspace/apps/starkgate/web/src/config/constants.js
@@ -1,9 +1,9 @@
// Values
export const HIDE_ELEMENT_COOKIE_DURATION_DAYS = 1;
export const TELEPORT_FEE_MULTIPLIER = 0.0001;
-export const MONITOR_TRANSFERS_INTERVAL = 5000;
export const MONITOR_ATTESTATIONS_INTERVAL = 5000;
-export const GET_TRANSFERS_REFETCH_INTERVAL = 1000 * 30; // 30 seconds
+export const GET_TRANSFERS_MAX_RETRY = 3;
+export const GET_TRANSFERS_REFETCH_INTERVAL = 1000 * 60; // 60 seconds
export const GET_PENDING_WITHDRAWALS_REFETCH_INTERVAL = 1000 * 60 * 3; // 3 minutes
export const FETCH_TOKEN_BALANCE_MAX_RETRY = 5;
@@ -11,9 +11,8 @@ export const FETCH_TOKEN_BALANCE_MAX_RETRY = 5;
export const ETHERSCAN = 'Etherscan';
export const VOYAGER = 'Voyager';
export const STARKSCAN = 'StarkScan';
-export const CONNECTED_L1_WALLET_ID_COOKIE_NAME = 'sg_connected_l1_wallet_id';
-export const CONNECTED_L2_WALLET_ID_COOKIE_NAME = 'sg_connected_l2_wallet_id';
-export const ALPHA_DISCLAIMER_COOKIE_NAME = 'sg_alpha_toast';
+export const BLOCK_EXPLORER_STORAGE_KEY = 'sg_l2_block_explorer';
+export const APPROVE_AMOUNT = (2n ** 96n - 1n).toString();
// URLs
export const DISCORD_LINK_URL = 'https://starknet.io/discord';
@@ -36,7 +35,6 @@ export const FEEDBACK_FORM_URL_MAINNET =
'https://forms.reform.app/TeRuSp/StarkGate-Feedback-Mainnet/bcoscx';
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 STARKNET_ECOSYSTEM_URL = 'https://starknet-ecosystem.com';
export const MAKER_TELEPORT_LEARN_MORE_URL =
'https://forum.makerdao.com/t/signal-request-launch-maker-teleport-with-1-basis-point-fee/15109';
diff --git a/workspace/apps/starkgate/web/src/config/envs.js b/workspace/apps/starkgate/web/src/config/envs.js
index e419dac3..0ab2c84e 100644
--- a/workspace/apps/starkgate/web/src/config/envs.js
+++ b/workspace/apps/starkgate/web/src/config/envs.js
@@ -1,16 +1,13 @@
-import {ChainType, isL1Testnet} from '@starkware-webapps/enums';
-import {evaluate} from '@starkware-webapps/utils';
+import {evaluate, mergeDeep} from '@starkware-webapps/utils';
+import {toEthereumChainId, toStarknetChainId} from '@starkware-webapps/web3-utils';
-const env = {...import.meta.env, ...window['__env__']};
+const env = mergeDeep({}, import.meta.env, window['__env__']);
export const {DEV} = env;
-export const AUTO_CONNECT = import.meta.env.VITE_APP_AUTO_CONNECT === 'true';
-export const POLL_BLOCK_NUMBER_INTERVAL = Number(env.VITE_APP_POLL_BLOCK_NUMBER_INTERVAL);
export const SUPPORTED_TOKENS = env.VITE_APP_SUPPORTED_TOKENS.split(',');
-export const SUPPORTED_L1_CHAIN_ID = Number(env.VITE_APP_SUPPORTED_CHAIN_ID);
-export const SUPPORTED_L2_CHAIN_ID = isL1Testnet(SUPPORTED_L1_CHAIN_ID)
- ? ChainType.L2.GOERLI
- : ChainType.L2.MAIN;
+export const CHAIN = env.VITE_APP_CHAIN;
+export const SUPPORTED_L1_CHAIN_ID = toEthereumChainId(env.VITE_APP_CHAIN);
+export const SUPPORTED_L2_CHAIN_ID = toStarknetChainId(env.VITE_APP_CHAIN);
export const STARKNET_CONTRACT_ADDRESS = env.VITE_APP_STARKNET_CONTRACT_ADDRESS;
export const ETHERSCAN_URL = env.VITE_APP_ETHERSCAN_URL;
export const ETHERSCAN_TX_URL = tx => evaluate(`${ETHERSCAN_URL}/tx/{{tx}}`, {tx});
@@ -25,7 +22,10 @@ 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_ACCEPT_TERMS_KEY = env.VITE_APP_LOCAL_STORAGE_ACCEPT_TERMS;
+export const VIEWBLOCK_URL = env.VITE_APP_VIEWBLOCK_URL;
+export const VIEWBLOCK_TX_URL = tx => evaluate(VIEWBLOCK_URL, {path: `tx/${tx}`});
+export const VIEWBLOCK_ACCOUNT_URL = contract =>
+ evaluate(VIEWBLOCK_URL, {path: `contract/${contract}`});
export const API_ENDPOINT_URL = env.VITE_APP_API_ENDPOINT_URL;
export const SCREENING_SERVICE_URL = evaluate(`${API_ENDPOINT_URL}`, {
service: env.VITE_APP_SCREENING_SERVICE_NAME
@@ -45,3 +45,8 @@ export const ATTESTATIONS_ORACLE_URL = env.VITE_APP_ATTESTATIONS_ORACLE_URL;
export const GOOGLE_MEASURE_ID = env.VITE_APP_GOOGLE_MEASURE_ID;
export const RELAYER_CONTRACT_ADDRESS = env.VITE_APP_RELAYER_CONTRACT_ADDRESS;
export const RELAYER_GAS_COST_URL = env.VITE_APP_RELAYER_GAS_COST_URL;
+export const DYNAMIC_ENV_ID = env.VITE_APP_DYNAMIC_ENV_ID;
+export const RPC_PROVIDER_INFURA_API_KEY = env.VITE_APP_RPC_PROVIDER_INFURA_API_KEY;
+export const RPC_PROVIDER_BLAST_API_KEY = env.VITE_APP_RPC_PROVIDER_BLAST_API_KEY;
+export const RPC_PROVIDER_CHAINSTACK_API_KEY = env.VITE_APP_RPC_PROVIDER_CHAINSTACK_API_KEY;
+export const ETHEREUM_GAS_MULTIPLIER = Number(env.VITE_APP_ETHEREUM_GAS_MULTIPLIER || 1.15);
diff --git a/workspace/apps/starkgate/web/src/config/sources.js b/workspace/apps/starkgate/web/src/config/sources.js
index e9367c20..bc21420c 100644
--- a/workspace/apps/starkgate/web/src/config/sources.js
+++ b/workspace/apps/starkgate/web/src/config/sources.js
@@ -138,16 +138,31 @@ export const providers = [
}
}
}
+ },
+ {
+ id: 'rhinofi',
+ logoPath: 'providers/rhinofi',
+ label: 'Rhino.fi',
+ link: {
+ [ChainType.L1.MAIN]: {
+ url: 'https://app.rhino.fi/bridge/',
+ qsParams: {
+ token: 'ETH',
+ chainOut: 'STARKNET',
+ chain: 'ETHEREUM'
+ }
+ }
+ }
}
];
export const depositConfig = {
chains: {
[NetworkType.L1]: [],
- polygon: ['orbiter', 'layerswap'],
- arbitrum: ['orbiter', 'layerswap'],
- optimism: ['orbiter', 'layerswap'],
- other_chains: ['orbiter', 'layerswap']
+ polygon: ['orbiter', 'layerswap', 'rhinofi'],
+ arbitrum: ['orbiter', 'layerswap', 'rhinofi'],
+ optimism: ['orbiter', 'layerswap', 'rhinofi'],
+ other_chains: ['orbiter', 'layerswap', 'rhinofi']
},
fiat: {
card: ['banxa', 'ramp']
@@ -163,10 +178,10 @@ export const depositConfig = {
export const withdrawConfig = {
chains: {
[NetworkType.L1]: [],
- polygon: ['orbiter', 'layerswap'],
- arbitrum: ['orbiter', 'layerswap'],
- optimism: ['orbiter', 'layerswap'],
- other_chains: ['orbiter', 'layerswap']
+ polygon: ['orbiter', 'layerswap', 'rhinofi'],
+ arbitrum: ['orbiter', 'layerswap', 'rhinofi'],
+ optimism: ['orbiter', 'layerswap', 'rhinofi'],
+ other_chains: ['orbiter', 'layerswap', 'rhinofi']
},
exchanges: {
coinbase: ['layerswap'],
diff --git a/workspace/apps/starkgate/web/src/config/translations.js b/workspace/apps/starkgate/web/src/config/translations.js
index 6a7acb82..5df14a16 100644
--- a/workspace/apps/starkgate/web/src/config/translations.js
+++ b/workspace/apps/starkgate/web/src/config/translations.js
@@ -1,10 +1,25 @@
export const translations = {
+ head: {
+ title: {
+ bridge: {
+ goerli: 'Testnet Goerli StarkGate: Bridge Assets from Ethereum to Starknet',
+ main: 'StarkGate: Bridge Assets from Ethereum to Starknet'
+ },
+ faq: {
+ goerli: "Testnet Goerli StarkGate FAQ: Learn More About Starknet's Bridge to Ethereum",
+ main: "StarkGate FAQ: Learn More About Starknet's Bridge to Ethereum"
+ },
+ terms: {
+ goerli: 'Testnet Goerli StarkGate Terms of Service',
+ main: 'StarkGate Terms of Service'
+ }
+ }
+ },
containers: {
header: {
chainTxt: 'Goerli testnet',
accountWalletBtnTxt: '{{address}}',
connectWalletBtnTxt: 'Connect {{network}} Wallet',
- connectingWalletBtnTxt: 'Connecting {{network}} Wallet...',
tabs: {
discoverAppsTxt: 'Discover apps',
termsTxt: 'Terms',
@@ -38,6 +53,8 @@ export const translations = {
titleTxt: 'Transfer log',
singleOverviewTxt: 'recent transfer',
overviewTxt: 'recent transfers',
+ errorMsgTxt:
+ 'We are temporarily unable to show information about your transfers. Please check again in a few minutes.',
emptyMsgTxt: 'Transfers will appear here...',
viewMoreTxt: 'View more',
viewLessTxt: 'View less',
@@ -69,7 +86,8 @@ export const translations = {
inputPlaceholderTxt: '0.00',
transferBtnTxt: 'Transfer',
amountBtnTxt: 'Enter an amount',
- loginWalletButtonTxt: 'Connect Wallet',
+ loginWalletsButtonTxt: 'Connect Wallets',
+ loginWalletButtonTxt: 'Connect {{networkName}} Wallet',
readMoreTxt: 'read more',
enableAutoWithdrawal: 'Use the automatic withdrawal service by SpaceShard',
autoWithdrawalUnavailable: 'The automatic withdrawal service is temporarily not available',
@@ -89,15 +107,14 @@ export const translations = {
bodyTxt: 'For the best experience, please use a desktop or laptop.'
},
login: {
- titleTxt: 'Connect {{networkName}} Wallet',
- unsupportedChainIdTxt: 'Please select {{chainName}} in your wallet',
- installTxt: 'Install {{wallet}}'
+ termsDisclaimer: {
+ text: 'By connecting a wallet, you agree to our',
+ link: 'Terms of Service.'
+ }
},
transactionSubmitted: {
l1TxTitleTxt: 'Transaction sent',
l2TxTitleTxt: 'Transaction is being processed on Starknet',
- btnTxt: 'View on {{explorer}}',
- transferAlertTitle: 'This is an Alpha version',
transferToL1Txt: 'Please come back in ~12h to complete the withdrawal on Ethereum',
transferToL2Txt: 'Your transaction has been successfully sent to Starknet!',
transferToL2AlertTxt:
@@ -131,18 +148,6 @@ export const translations = {
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:
@@ -151,11 +156,6 @@ export const translations = {
}
},
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',
@@ -170,5 +170,10 @@ export const translations = {
completeTransferBtnTxt: 'Complete Transfer',
fastIndicationTxt: 'Fast Withdrawal'
}
+ },
+ components: {
+ blockExplorer: {
+ btnTxt: 'View on {{explorer}}'
+ }
}
};
diff --git a/workspace/apps/starkgate/web/src/config/wallets.js b/workspace/apps/starkgate/web/src/config/wallets.js
deleted file mode 100644
index 7f628fa7..00000000
--- a/workspace/apps/starkgate/web/src/config/wallets.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import {WalletIdL1, WalletIdL2} from '@starkware-webapps/enums';
-
-export const walletsConfig = {
- L1: [
- {
- id: WalletIdL1.METAMASK,
- name: 'MetaMask',
- connectorId: 'injected',
- logoPath: 'wallets/metamask'
- },
- {
- id: WalletIdL1.COINBASE,
- name: 'Coinbase Wallet',
- connectorId: 'walletlink',
- logoPath: 'wallets/coinbase-wallet'
- }
- ],
- L2: [
- {
- id: WalletIdL2.GSW,
- name: 'Starknet Wallets',
- logoPath: 'chains/starknet'
- }
- ]
-};
diff --git a/workspace/apps/starkgate/web/src/hooks/index.jsx b/workspace/apps/starkgate/web/src/hooks/index.jsx
index ea2951e6..1c637856 100644
--- a/workspace/apps/starkgate/web/src/hooks/index.jsx
+++ b/workspace/apps/starkgate/web/src/hooks/index.jsx
@@ -1,19 +1,14 @@
export * from './useAccountChange';
-export * from './useAutoConnect';
export * from './useBridgeContractAPI';
-export * from './useCoinbaseWallet';
export * from './useColors';
export * from './useConstants';
export * from './useContract';
export * from './useEnvs';
-export * from './useEthereumWallet';
export * from './useFastWithdrawal';
export * from './useFonts';
export * from './useGasCost';
-export * from './useGetStarknet';
export * from './useIsMaxTotalBalanceExceeded';
-export * from './useMetaMask';
-export * from './useStarknetWallet';
+export * from './useTitle';
export * from './useTokenContractAPI';
export * from './useTracking';
export * from './useTransfer';
@@ -22,5 +17,4 @@ export * from './useTransferToL1';
export * from './useTransferToL2';
export * from './useTranslation';
export * from './useVars';
-export * from './useWalletHandlers';
-export * from './useWeb3';
+export * from './useSendEthereumTransaction';
diff --git a/workspace/apps/starkgate/web/src/hooks/useAccountChange.jsx b/workspace/apps/starkgate/web/src/hooks/useAccountChange.jsx
index 07543024..d6e52702 100644
--- a/workspace/apps/starkgate/web/src/hooks/useAccountChange.jsx
+++ b/workspace/apps/starkgate/web/src/hooks/useAccountChange.jsx
@@ -1,19 +1,14 @@
import {useEffect} from 'react';
-import {useWeb3} from '@hooks';
-import {useAccountHash} from '@providers';
+import {useWallet} from '@providers';
export const useAccountChange = (fn, deps = []) => {
- const accountHash = useAccountHash();
- const web3 = useWeb3();
+ const {accountHash} = useWallet();
useEffect(() => {
- // either disconnecting the wallet or connecting and web3 is ready do use
- if (!accountHash || web3) {
- const unmountFn = fn(accountHash);
- return () => {
- unmountFn && unmountFn();
- };
- }
- }, [accountHash, web3, ...deps]);
+ const unmountFn = fn(accountHash);
+ return () => {
+ unmountFn && unmountFn();
+ };
+ }, [accountHash, ...deps]);
};
diff --git a/workspace/apps/starkgate/web/src/hooks/useAutoConnect.jsx b/workspace/apps/starkgate/web/src/hooks/useAutoConnect.jsx
deleted file mode 100644
index 6d114f01..00000000
--- a/workspace/apps/starkgate/web/src/hooks/useAutoConnect.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {useEffect} from 'react';
-
-import {useConstants, useEnvs, useWalletHandlersL1, useWalletHandlersL2} from '@hooks';
-import {getCookie} from '@starkware-webapps/utils-browser';
-
-export const useAutoConnect = () => {
- const {CONNECTED_L1_WALLET_ID_COOKIE_NAME, CONNECTED_L2_WALLET_ID_COOKIE_NAME} = useConstants();
- const {AUTO_CONNECT} = useEnvs();
- const walletHandlersL1 = useWalletHandlersL1();
- const walletHandlersL2 = useWalletHandlersL2();
-
- const autoConnectEthereum = () => {
- const doConnect = () => {
- setTimeout(() => {
- // Do not auto connect if the user locked the wallet
- if (ethereum.selectedAddress) {
- const connectedL1WalletIdCookie = getCookie(CONNECTED_L1_WALLET_ID_COOKIE_NAME);
- const walletHandler = walletHandlersL1.find(({id}) => id === connectedL1WalletIdCookie);
- walletHandler && walletHandler.connect();
- }
- });
- };
- const ethereum = window?.ethereum;
- if (ethereum) {
- if (ethereum.selectedAddress) {
- doConnect();
- } else {
- ethereum.once('connect', doConnect);
- }
- }
- };
-
- const autoConnectStarknet = () => {
- const connectedL2WalletIdCookie = getCookie(CONNECTED_L2_WALLET_ID_COOKIE_NAME);
- const walletHandler = walletHandlersL2.find(({id}) => id === connectedL2WalletIdCookie);
- walletHandler && walletHandler.connect({autoConnect: true});
- };
-
- useEffect(() => {
- if (AUTO_CONNECT) {
- autoConnectEthereum();
- autoConnectStarknet();
- }
- }, []);
-};
diff --git a/workspace/apps/starkgate/web/src/hooks/useBridgeContractAPI.jsx b/workspace/apps/starkgate/web/src/hooks/useBridgeContractAPI.jsx
index ee7c994e..3815cfb1 100644
--- a/workspace/apps/starkgate/web/src/hooks/useBridgeContractAPI.jsx
+++ b/workspace/apps/starkgate/web/src/hooks/useBridgeContractAPI.jsx
@@ -1,136 +1,120 @@
-import {getStarknet} from 'get-starknet';
+import {BigNumber} from 'ethers';
import {useCallback} from 'react';
-import {SequencerProvider, number} from 'starknet';
+import {num} from 'starknet';
-import {RELAYER_CONTRACT_ADDRESS, SUPPORTED_L2_CHAIN_ID} from '@config/envs';
+import {RELAYER_CONTRACT_ADDRESS} from '@config/envs';
import {
useConstants,
- useDaiTeleportGatewayContract,
useEnvs,
useGasCost,
useL1TokenBridgeContract,
- useL2EthTokenContract,
- useL2TokenBridgeContract,
- useL2TokenContract,
+ useSendEthereumTransaction,
useTeleportOracleAuthContract
} from '@hooks';
-import {useL1Token, useL1Wallet, useL2Token, useSelectedToken} from '@providers';
-import {ChainType} from '@starkware-webapps/enums';
+import {useL1Token, useL2Token, useSelectedToken, useWallets} from '@providers';
+import {Tokens} from '@starkgate/shared';
import {promiseHandler} from '@starkware-webapps/utils';
import {
- callContractL1,
parseFromDecimals,
parseToDecimals,
parseToFelt,
parseToUint256,
- sendTransactionL1,
sendTransactionL2
} from '@starkware-webapps/web3-utils';
import {isDai} from '@utils';
-const networkMap = {
- [ChainType.L2.MAIN]: 'mainnet-alpha',
- [ChainType.L2.GOERLI]: 'goerli-alpha'
-};
-
-const sequencerProvider = new SequencerProvider({
- network: networkMap[SUPPORTED_L2_CHAIN_ID]
-});
+const {hexToDecimalString} = num;
export const useBridgeContractAPI = () => {
- const {account: accountL1} = useL1Wallet();
+ const {ethereumAccount, getStarknetSigner, getStarknetProvider} = useWallets();
+ const sendEthereumTransaction = useSendEthereumTransaction();
const selectedToken = useSelectedToken();
const getL1BridgeContract = useL1TokenBridgeContract();
- const getL2BridgeContract = useL2TokenBridgeContract();
- const getL2TokenContract = useL2TokenContract();
const getL1Token = useL1Token();
const getL2Token = useL2Token();
- const {DAI_TELEPORT_TARGET_DOMAIN} = useEnvs();
const {TELEPORT_FEE_MULTIPLIER} = useConstants();
- const daiTeleportGatewayContract = useDaiTeleportGatewayContract();
- const teleportOracleAuthContract = useTeleportOracleAuthContract();
- const ethToken = useL2EthTokenContract();
+ const getTeleportOracleAuthContract = useTeleportOracleAuthContract();
const fetchGasCost = useGasCost();
-
- const estimateMessageFee = async (recipient, amount) => {
- const {hexToDecimalString} = number;
- const {bridgeAddress: l1bridgeAddress, decimals, symbol} = selectedToken;
- const {low, high} = parseToUint256(amount, decimals);
- const payload = [recipient, low, high];
- isDai(symbol) && payload.push(hexToDecimalString(accountL1));
- const {bridgeAddress: l2bridgeAddress} = getL2Token(symbol);
- // TODO use get-starknet().provider once sequencer provider will be supported
- const {overall_fee: estimatedFee} = await sequencerProvider.estimateMessageFee({
- from_address: l1bridgeAddress,
- to_address: l2bridgeAddress,
- entry_point_selector: 'handle_deposit',
- payload
- });
- return Number(estimatedFee);
- };
+ const {SUPPORTED_L2_CHAIN_ID, DAI_TELEPORT_GATEWAY_CONTRACT_ADDRESS, DAI_TELEPORT_TARGET_DOMAIN} =
+ useEnvs();
+
+ const estimateMessageFee = useCallback(
+ async (recipient, amount) => {
+ const provider = getStarknetProvider();
+ const {bridgeAddress: l1bridgeAddress, decimals, symbol} = selectedToken;
+ const {low, high} = parseToUint256(amount, decimals);
+ const payload = [recipient, low, high];
+ isDai(symbol) && payload.push(hexToDecimalString(ethereumAccount));
+ const {bridgeAddress: l2bridgeAddress} = getL2Token(symbol);
+ const {overall_fee: estimatedFee} = await provider.estimateMessageFee({
+ from_address: l1bridgeAddress,
+ to_address: l2bridgeAddress,
+ entry_point_selector: 'handle_deposit',
+ payload
+ });
+ return Number(estimatedFee);
+ },
+ [selectedToken, getStarknetProvider, ethereumAccount, getL2Token]
+ );
const deposit = useCallback(
- async ({recipient, amount, emitter}) => {
+ async ({recipient, amount}) => {
const {bridgeAddress, decimals} = selectedToken;
- const contract = getL1BridgeContract(bridgeAddress);
+ const contract = await getL1BridgeContract(bridgeAddress);
const estimatedL2Fee = await estimateMessageFee(recipient, amount);
-
- return sendTransactionL1(
+ return await sendEthereumTransaction({
contract,
- 'deposit',
- [parseToDecimals(amount, decimals), recipient],
- {from: accountL1, value: estimatedL2Fee},
- emitter
- );
+ method: 'deposit(uint256,uint256)',
+ args: [parseToDecimals(amount, decimals), recipient],
+ transaction: {
+ from: ethereumAccount,
+ value: BigNumber.from(estimatedL2Fee).toString()
+ }
+ });
},
- [selectedToken, accountL1, getL1BridgeContract]
+ [selectedToken, ethereumAccount, getL1BridgeContract, sendEthereumTransaction]
);
const depositEth = useCallback(
- async ({recipient, amount, emitter}) => {
+ async ({recipient, amount}) => {
const {bridgeAddress} = selectedToken;
- const contract = getL1BridgeContract(bridgeAddress);
+ const contract = await getL1BridgeContract(bridgeAddress);
const parsedAmount = parseToDecimals(amount);
const estimatedL2Fee = await estimateMessageFee(recipient, amount);
-
- return sendTransactionL1(
+ return await sendEthereumTransaction({
contract,
- 'deposit',
- [parsedAmount, recipient],
- {
- from: accountL1,
- value: Number(parsedAmount) + estimatedL2Fee
- },
- emitter
- );
+ method: 'deposit(uint256,uint256)',
+ args: [parsedAmount, recipient],
+ transaction: {
+ from: ethereumAccount,
+ value: BigNumber.from(parsedAmount).add(estimatedL2Fee).toString()
+ }
+ });
},
- [selectedToken, accountL1, getL1BridgeContract]
+ [selectedToken, ethereumAccount, getL1BridgeContract, sendEthereumTransaction]
);
const withdraw = useCallback(
- ({recipient, amount, symbol, emitter}) => {
+ async ({recipient, amount, symbol}) => {
const {bridgeAddress, decimals} = symbol ? getL1Token(symbol) : selectedToken;
- const contract = getL1BridgeContract(bridgeAddress);
-
- return sendTransactionL1(
+ const contract = await getL1BridgeContract(bridgeAddress);
+ return await sendEthereumTransaction({
contract,
- 'withdraw',
- [parseToDecimals(amount, decimals), recipient],
- {
- from: recipient
- },
- emitter
- );
+ method: 'withdraw(uint256,address)',
+ args: [parseToDecimals(amount, decimals), recipient],
+ transaction: {
+ from: ethereumAccount
+ }
+ });
},
- [selectedToken, getL1BridgeContract, getL1Token]
+ [selectedToken, getL1BridgeContract, getL1Token, sendEthereumTransaction]
);
const maxDeposit = useCallback(
async token => {
const {bridgeAddress, decimals} = token || selectedToken;
- const contract = getL1BridgeContract(bridgeAddress);
-
- const [maxDeposit, error] = await promiseHandler(callContractL1(contract, 'maxDeposit'));
+ const contract = await getL1BridgeContract(bridgeAddress);
+ const [maxDeposit, error] = await promiseHandler(contract.maxDeposit());
if (error) {
return Promise.reject(error);
}
@@ -142,10 +126,10 @@ export const useBridgeContractAPI = () => {
const maxTotalBalance = useCallback(
async token => {
const {bridgeAddress, decimals, symbol} = token || selectedToken;
- const contract = getL1BridgeContract(bridgeAddress);
+ const contract = await getL1BridgeContract(bridgeAddress);
const [maxTotalBalance, error] = await promiseHandler(
- callContractL1(contract, isDai(symbol) ? 'ceiling' : 'maxTotalBalance')
+ isDai(symbol) ? contract.ceiling() : contract.maxTotalBalance()
);
if (error) {
return Promise.reject(error);
@@ -158,17 +142,17 @@ export const useBridgeContractAPI = () => {
const initiateWithdraw = useCallback(
async ({recipient, amount, autoWithdrawal}) => {
const {bridgeAddress, tokenAddress, decimals, symbol} = selectedToken;
- const bridge = getL2BridgeContract(bridgeAddress);
- const token = getL2TokenContract(tokenAddress);
+ const ethTokenAddress = Tokens.L2.ETH.tokenAddress[SUPPORTED_L2_CHAIN_ID];
const gasCost = await (autoWithdrawal ? fetchGasCost() : Promise.resolve(0));
+ const signer = await getStarknetSigner();
const transactions = [
...(isDai(symbol)
? [
{
- contract: token,
+ address: tokenAddress,
method: 'increaseAllowance',
args: {
- spender: bridge.address,
+ spender: bridgeAddress,
amount: parseToUint256(amount, decimals)
}
}
@@ -177,7 +161,7 @@ export const useBridgeContractAPI = () => {
...(autoWithdrawal
? [
{
- contract: ethToken,
+ address: ethTokenAddress,
method: 'transfer',
args: {
user: parseToFelt(RELAYER_CONTRACT_ADDRESS),
@@ -187,7 +171,7 @@ export const useBridgeContractAPI = () => {
]
: []),
{
- contract: bridge,
+ address: bridgeAddress,
method: 'initiate_withdraw',
args: {
l1Recipient: parseToFelt(recipient),
@@ -195,26 +179,26 @@ export const useBridgeContractAPI = () => {
}
}
];
- return sendTransactionL2(getStarknet().account, transactions);
+ return sendTransactionL2(signer, transactions);
},
- [selectedToken, getL2BridgeContract, getL2TokenContract, ethToken, fetchGasCost]
+ [selectedToken, fetchGasCost, getStarknetSigner]
);
const initiateTeleport = useCallback(
async ({recipient, amount}) => {
const {tokenAddress, decimals} = selectedToken;
- const token = getL2TokenContract(tokenAddress);
+ const signer = await getStarknetSigner();
const transactions = [
{
- contract: token,
+ address: tokenAddress,
method: 'increaseAllowance',
args: {
- spender: daiTeleportGatewayContract.address,
+ spender: DAI_TELEPORT_GATEWAY_CONTRACT_ADDRESS,
amount: parseToUint256(amount, decimals)
}
},
{
- contract: daiTeleportGatewayContract,
+ address: DAI_TELEPORT_GATEWAY_CONTRACT_ADDRESS,
method: 'initiate_teleport',
args: {
target_domain: DAI_TELEPORT_TARGET_DOMAIN,
@@ -224,37 +208,37 @@ export const useBridgeContractAPI = () => {
}
}
];
- return sendTransactionL2(getStarknet().account, transactions);
+ return sendTransactionL2(signer, transactions);
},
- [selectedToken, getL2BridgeContract, getL2TokenContract]
+ [selectedToken, getStarknetSigner]
);
const teleportThreshold = useCallback(async () => {
- const [threshold, error] = await promiseHandler(
- callContractL1(teleportOracleAuthContract, 'threshold')
- );
+ const teleportOracleAuthContract = await getTeleportOracleAuthContract();
+ const [threshold, error] = await promiseHandler(teleportOracleAuthContract.threshold());
if (error) {
return Promise.reject(error);
}
return threshold;
- }, [teleportOracleAuthContract]);
+ }, [getTeleportOracleAuthContract]);
const requestMint = useCallback(
- async ({amount, customData, emitter}) => {
+ async ({amount, customData}) => {
+ const teleportOracleAuthContract = await getTeleportOracleAuthContract();
const {decimals} = selectedToken;
const maxFeePercentage = parseToDecimals(
(TELEPORT_FEE_MULTIPLIER * amount).toFixed(decimals),
decimals
);
- return sendTransactionL1(
- teleportOracleAuthContract,
- 'requestMint',
- [customData.teleportGUID, customData.signatures, maxFeePercentage, '0x0'],
- {from: accountL1},
- emitter
+ return teleportOracleAuthContract.requestMint(
+ customData.teleportGUID,
+ customData.signatures,
+ maxFeePercentage,
+ '0x0',
+ {from: ethereumAccount}
);
},
- [teleportOracleAuthContract, accountL1]
+ [getTeleportOracleAuthContract, ethereumAccount]
);
return {
deposit,
diff --git a/workspace/apps/starkgate/web/src/hooks/useCoinbaseWallet.jsx b/workspace/apps/starkgate/web/src/hooks/useCoinbaseWallet.jsx
deleted file mode 100644
index 09224e2f..00000000
--- a/workspace/apps/starkgate/web/src/hooks/useCoinbaseWallet.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {walletsConfig} from '@config/wallets';
-import {useWalletHandler} from '@hooks';
-import {NetworkType, WalletIdL1} from '@starkware-webapps/enums';
-
-const config = walletsConfig.L1.find(({id}) => id === WalletIdL1.COINBASE);
-
-export const useCoinbaseWallet = () => {
- const walletHandler = useWalletHandler(config, NetworkType.L1);
-
- return {
- ...walletHandler,
- ...config
- };
-};
diff --git a/workspace/apps/starkgate/web/src/hooks/useContract.jsx b/workspace/apps/starkgate/web/src/hooks/useContract.jsx
index 0c0a87a3..9d02edb5 100644
--- a/workspace/apps/starkgate/web/src/hooks/useContract.jsx
+++ b/workspace/apps/starkgate/web/src/hooks/useContract.jsx
@@ -1,135 +1,68 @@
-import {getStarknet} from 'get-starknet';
-import {useCallback, useMemo} from 'react';
-import {Contract} from 'starknet';
+import {ethers} from 'ethers';
+import {useCallback} from 'react';
import {
L1_DAI_BRIDGE_ABI,
L1_ERC20_ABI,
L1_ERC20_BRIDGE_ABI,
L1_ETH_BRIDGE_ABI,
- L1_MESSAGING_ABI,
- L1_TELEPORT_ORACLE_AUTH_ABI,
- L2_BRIDGE_ABI,
- L2_DAI_TELEPORT_GATEWAY,
- L2_ERC20_ABI
+ L1_TELEPORT_ORACLE_AUTH_ABI
} from '@abis';
-import {useEnvs, useWeb3} from '@hooks';
-import {useL1Wallet, useL2Wallet, useTransfer} from '@providers';
+import {useEnvs} from '@hooks';
+import {useEthereumWallet} from '@providers';
import {Tokens} from '@starkgate/shared';
import {useContract} from '@starkware-webapps/ui';
-export const useTokenContract = () => {
- const getL1TokenContract = useL1TokenContract();
- const getL2TokenContract = useL2TokenContract();
- const {isL1} = useTransfer();
-
- return useCallback(
- tokenAddress => {
- return isL1 ? getL1TokenContract(tokenAddress) : getL2TokenContract(tokenAddress);
- },
- [isL1, getL2TokenContract, getL1TokenContract]
- );
-};
-
-export const useTokenBridgeContract = () => {
- const getL1TokenBridgeContract = useL1TokenBridgeContract();
- const getL2TokenBridgeContract = useL2TokenBridgeContract();
- const {isL1} = useTransfer();
-
- return useCallback(
- bridgeAddress => {
- return isL1
- ? getL1TokenBridgeContract(bridgeAddress)
- : getL2TokenBridgeContract(bridgeAddress);
- },
- [isL1, getL1TokenBridgeContract, getL2TokenBridgeContract]
- );
-};
-
const useCreateContractL1 = () => {
- const web3 = useWeb3();
- return useCallback((address, abi) => web3 && new web3.eth.Contract(abi, address), [web3]);
-};
+ const {getEthereumSigner} = useEthereumWallet();
-const useCreateContractL2 = () => {
return useCallback(
- (address, abi) => getStarknet().provider && new Contract(abi, address, getStarknet().provider),
- [getStarknet().provider]
+ async (address, abi) => {
+ const signer = await getEthereumSigner();
+ if (signer) {
+ return new ethers.Contract(address, abi, signer);
+ }
+ },
+ [getEthereumSigner]
);
};
-export const useL2EthTokenContract = () => {
- const {chainId} = useL2Wallet();
- const createContractL2 = useCreateContractL2();
- const getContract = useContract(L2_ERC20_ABI, createContractL2);
- const ethTokenAddress = Tokens.L2.ETH.tokenAddress[chainId];
-
- return useMemo(() => getContract(ethTokenAddress), [ethTokenAddress]);
-};
-
-export const useL2TokenContract = () => {
- const createContractL2 = useCreateContractL2();
- const getContract = useContract(L2_ERC20_ABI, createContractL2);
-
- return useCallback(tokenAddress => getContract(tokenAddress), [getContract]);
-};
-
export const useL1TokenContract = () => {
const createContractL1 = useCreateContractL1();
const getContract = useContract(L1_ERC20_ABI, createContractL1);
- return useCallback(tokenAddress => getContract(tokenAddress), [getContract]);
-};
-
-export const useStarknetContract = () => {
- const createContractL1 = useCreateContractL1();
- const {STARKNET_CONTRACT_ADDRESS} = useEnvs();
- const getContract = useContract(L1_MESSAGING_ABI, createContractL1);
-
- return useMemo(() => getContract(STARKNET_CONTRACT_ADDRESS), [getContract]);
-};
-
-export const useDaiTeleportGatewayContract = () => {
- const createContractL2 = useCreateContractL2();
- const {DAI_TELEPORT_GATEWAY_CONTRACT_ADDRESS} = useEnvs();
- const getContract = useContract(L2_DAI_TELEPORT_GATEWAY, createContractL2);
-
- return useMemo(() => getContract(DAI_TELEPORT_GATEWAY_CONTRACT_ADDRESS), [getContract]);
+ return useCallback(tokenAddress => getContract(tokenAddress), [getContract, createContractL1]);
};
export const useTeleportOracleAuthContract = () => {
- const createContractL1 = useCreateContractL1();
const {TELEPORT_ORACLE_AUTH_CONTRACT_ADDRESS} = useEnvs();
+ const createContractL1 = useCreateContractL1();
const getContract = useContract(L1_TELEPORT_ORACLE_AUTH_ABI, createContractL1);
- return useMemo(() => getContract(TELEPORT_ORACLE_AUTH_CONTRACT_ADDRESS), [getContract]);
-};
-
-export const useL2TokenBridgeContract = () => {
- const createContractL2 = useCreateContractL2();
- const getContract = useContract(L2_BRIDGE_ABI, createContractL2);
-
- return useCallback(bridgeAddress => getContract(bridgeAddress), [getContract]);
+ return useCallback(
+ () => getContract(TELEPORT_ORACLE_AUTH_CONTRACT_ADDRESS),
+ [getContract, createContractL1]
+ );
};
export const useL1TokenBridgeContract = () => {
+ const {SUPPORTED_L1_CHAIN_ID} = useEnvs();
const createContractL1 = useCreateContractL1();
const getTokenBridgeContract = useContract(L1_ERC20_BRIDGE_ABI, createContractL1);
const getDAIBridgeContract = useContract(L1_DAI_BRIDGE_ABI, createContractL1);
const getEthBridgeContract = useContract(L1_ETH_BRIDGE_ABI, createContractL1);
- const {chainId} = useL1Wallet();
return useCallback(
bridgeAddress => {
switch (bridgeAddress) {
- case Tokens.L1.ETH.bridgeAddress[chainId]:
+ case Tokens.L1.ETH.bridgeAddress[SUPPORTED_L1_CHAIN_ID]:
return getEthBridgeContract(bridgeAddress);
- case Tokens.L1.DAI.bridgeAddress[chainId]:
+ case Tokens.L1.DAI.bridgeAddress[SUPPORTED_L1_CHAIN_ID]:
return getDAIBridgeContract(bridgeAddress);
default:
return getTokenBridgeContract(bridgeAddress);
}
},
- [getTokenBridgeContract, getEthBridgeContract, getDAIBridgeContract, chainId]
+ [getTokenBridgeContract, getEthBridgeContract, getDAIBridgeContract, createContractL1]
);
};
diff --git a/workspace/apps/starkgate/web/src/hooks/useEthereumWallet.jsx b/workspace/apps/starkgate/web/src/hooks/useEthereumWallet.jsx
deleted file mode 100644
index 2d38d8ba..00000000
--- a/workspace/apps/starkgate/web/src/hooks/useEthereumWallet.jsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import {useEffect, useRef, useState} from 'react';
-import {useWallet} from 'use-wallet';
-
-import {SCREENING_ENDPOINT, screenAddress} from '@api';
-import {CONNECTED_L1_WALLET_ID_COOKIE_NAME} from '@config/constants';
-import {useLoginTracking} from '@hooks';
-import {useBlockedAddressModal, useErrorModal} from '@providers';
-import {WalletStatus, isConnected, isError} from '@starkware-webapps/enums';
-import {useLogger} from '@starkware-webapps/ui';
-import {setCookie} from '@starkware-webapps/utils-browser';
-import {useQuery} from '@tanstack/react-query';
-
-export const useEthereumWallet = ({enableScreening}) => {
- const logger = useLogger('useEthereumWallet');
- const [wallet, setWallet] = useState({
- error: null,
- account: '',
- chainId: -1,
- chainName: '',
- status: WalletStatus.DISCONNECTED
- });
-
- const {
- account,
- status,
- error,
- chainId,
- reset: resetWallet,
- networkName: chainName,
- connect: connectWallet
- } = useWallet();
-
- const {
- data: blocked,
- error: screeningError,
- isFetching: isScreening
- } = useQuery({
- queryKey: [SCREENING_ENDPOINT, account],
- queryFn: () => screenAddress(account),
- enabled: !!(account && enableScreening),
- refetchIntervalInBackground: false
- });
-
- const showBlockedAddressModal = useBlockedAddressModal();
- const [, , trackBlockedAddress] = useLoginTracking();
- const showErrorModal = useErrorModal();
- const isBlocked = !isScreening && blocked;
- const isScreeningError = !isScreening && screeningError;
- const isBlockedOrError = isBlocked || isScreeningError;
- const isUnblocked = !isScreening && !isBlockedOrError;
- const [config, setConfig] = useState(null);
- const connectResolveRef = useRef();
-
- useEffect(() => {
- if (enableScreening) {
- if (!isScreening && !screeningError) {
- if (isBlocked) {
- showBlockedAddressModal(account);
- trackBlockedAddress({account});
- } else {
- updateWallet();
- }
- connectResolveRef.current?.resolve();
- }
- }
- }, [isScreening]);
-
- useEffect(() => {
- if (!enableScreening) {
- updateWallet();
- connectResolveRef.current?.resolve();
- }
- }, [account]);
-
- useEffect(() => {
- if (isScreeningError) {
- const {title, message} = screeningError;
- showErrorModal(title, message);
- }
- }, [isScreeningError]);
-
- useEffect(() => {
- // To support serializable object in the store
- const serializedError = isError(status) ? {...error} : null;
- if (isUnblocked) {
- updateWallet({error: serializedError});
- serializedError && connectResolveRef.current?.resolve();
- }
- }, [status, error, isUnblocked]);
-
- useEffect(() => {
- if (isConnected(status) && isBlockedOrError) {
- reset();
- }
- }, [status, isBlockedOrError]);
-
- useEffect(() => {
- if (isConnected(status)) {
- setCookie(CONNECTED_L1_WALLET_ID_COOKIE_NAME, config.id);
- }
- }, [status]);
-
- const updateWallet = (customValues = {}) => {
- setWallet(prevWallet => ({
- ...prevWallet,
- account,
- status,
- error,
- chainId,
- chainName,
- ...customValues
- }));
- };
-
- const reset = () => {
- logger.log('reset');
- setConfig(null);
- setCookie(CONNECTED_L1_WALLET_ID_COOKIE_NAME, '');
- return resetWallet();
- };
-
- const connect = async walletConfig => {
- logger.log('connect', walletConfig);
- const {connectorId} = walletConfig;
- setConfig(walletConfig);
- return new Promise(resolve => {
- connectResolveRef.current = {resolve};
- connectWallet(connectorId);
- });
- };
-
- return {...wallet, config, connect, reset};
-};
diff --git a/workspace/apps/starkgate/web/src/hooks/useFastWithdrawal.jsx b/workspace/apps/starkgate/web/src/hooks/useFastWithdrawal.jsx
index 72ffa927..43e05653 100644
--- a/workspace/apps/starkgate/web/src/hooks/useFastWithdrawal.jsx
+++ b/workspace/apps/starkgate/web/src/hooks/useFastWithdrawal.jsx
@@ -1,5 +1,5 @@
import {useCallback} from 'react';
-import {number} from 'starknet';
+import {num} from 'starknet';
import {fetchAttestations} from '@api';
import {useBridgeContractAPI, useConstants} from '@hooks';
@@ -7,6 +7,8 @@ import {useL2Tokens} from '@providers';
import {isConsumed, isOnChain} from '@starkware-webapps/enums';
import {useLogger} from '@starkware-webapps/ui';
+const {toBigInt} = num;
+
export const useFastWithdrawal = () => {
const logger = useLogger('useFastWithdrawal');
const tokensL2 = useL2Tokens();
@@ -28,10 +30,9 @@ export const useFastWithdrawal = () => {
);
const getSignatures = useCallback(attestations => {
- const {toBN} = number;
const signatures = attestations
.map(at => at.signatures.ethereum)
- .sort((a, b) => (toBN(`0x${a.signer}`).lt(toBN(`0x${b.signer}`)) ? -1 : 1))
+ .sort((a, b) => (toBigInt(`0x${a.signer}`).lt(toBigInt(`0x${b.signer}`)) ? -1 : 1))
.map(eth => eth.signature);
return `0x${signatures.join('')}`;
}, []);
diff --git a/workspace/apps/starkgate/web/src/hooks/useGetStarknet.jsx b/workspace/apps/starkgate/web/src/hooks/useGetStarknet.jsx
deleted file mode 100644
index 48980e6a..00000000
--- a/workspace/apps/starkgate/web/src/hooks/useGetStarknet.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {useCallback} from 'react';
-
-import {walletsConfig} from '@config/wallets';
-import {NetworkType, WalletIdL2} from '@starkware-webapps/enums';
-import {useLogger} from '@starkware-webapps/ui';
-
-import {useWalletHandler} from './useWalletHandlers';
-
-const config = walletsConfig.L2.find(w => w.id === WalletIdL2.GSW);
-
-export const useGetStarknet = () => {
- const walletHandler = useWalletHandler(config, NetworkType.L2);
- const logger = useLogger('useGetStarknet');
-
- const connect = useCallback(
- async params => {
- logger.log('connect', params);
- return await walletHandler.connect(params);
- },
- [walletHandler]
- );
-
- return {
- ...walletHandler,
- ...config,
- connect
- };
-};
diff --git a/workspace/apps/starkgate/web/src/hooks/useIsMaxTotalBalanceExceeded.jsx b/workspace/apps/starkgate/web/src/hooks/useIsMaxTotalBalanceExceeded.jsx
index acccc0f0..7da8fe7a 100644
--- a/workspace/apps/starkgate/web/src/hooks/useIsMaxTotalBalanceExceeded.jsx
+++ b/workspace/apps/starkgate/web/src/hooks/useIsMaxTotalBalanceExceeded.jsx
@@ -1,13 +1,16 @@
import {useCallback} from 'react';
import {useSelectedToken, useTransfer} from '@providers';
+import {isDai} from '@utils';
import {useL1TokenBalance} from './useTokenBalance';
export const useIsMaxTotalBalanceExceeded = () => {
- const selectedToken = useSelectedToken();
- const getTokenBridgeBalance = useL1TokenBalance(selectedToken?.bridgeAddress);
const {isL1} = useTransfer();
+ const selectedToken = useSelectedToken();
+ const getTokenBridgeBalance = useL1TokenBalance(
+ isDai(selectedToken?.symbol) ? selectedToken?.escrowAddress : selectedToken?.bridgeAddress
+ );
return useCallback(
async (amount = 0) => {
diff --git a/workspace/apps/starkgate/web/src/hooks/useMetaMask.jsx b/workspace/apps/starkgate/web/src/hooks/useMetaMask.jsx
deleted file mode 100644
index 3a5966e7..00000000
--- a/workspace/apps/starkgate/web/src/hooks/useMetaMask.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {useCallback, useEffect, useState} from 'react';
-
-import {walletsConfig} from '@config/wallets';
-import {useLoginTranslation, useWalletHandler} from '@hooks';
-import MetaMaskOnboarding from '@metamask/onboarding';
-import {NetworkType, WalletIdL1} from '@starkware-webapps/enums';
-import {useLogger} from '@starkware-webapps/ui';
-import {evaluate} from '@starkware-webapps/utils';
-
-const onboarding = new MetaMaskOnboarding();
-
-export const useMetaMask = () => {
- const logger = useLogger('useMetaMask');
- const [config, setConfig] = useState(walletsConfig.L1.find(({id}) => id === WalletIdL1.METAMASK));
- const walletHandler = useWalletHandler(config, NetworkType.L1);
- const {installTxt} = useLoginTranslation();
-
- const isInstalled = useCallback(() => MetaMaskOnboarding.isMetaMaskInstalled(), []);
-
- useEffect(() => {
- if (!isInstalled()) {
- const newConfig = {...config, name: evaluate(installTxt, {wallet: config.name})};
- logger.log('set config', newConfig);
- setConfig(newConfig);
- }
- }, []);
-
- const connect = useCallback(async () => {
- logger.log('connect');
- if (!isInstalled()) {
- logger.log('start onboarding');
- return onboarding.startOnboarding();
- }
- return await walletHandler.connect(config);
- }, [walletHandler]);
-
- return {
- ...walletHandler,
- ...config,
- connect
- };
-};
diff --git a/workspace/apps/starkgate/web/src/hooks/useSendEthereumTransaction.jsx b/workspace/apps/starkgate/web/src/hooks/useSendEthereumTransaction.jsx
new file mode 100644
index 00000000..8b7639ac
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/hooks/useSendEthereumTransaction.jsx
@@ -0,0 +1,31 @@
+import {ethers} from 'ethers';
+import {useCallback} from 'react';
+
+import {useEnvs} from '@hooks';
+import {useEthereumWallet} from '@providers';
+
+export const useSendEthereumTransaction = () => {
+ const {getEthereumProvider} = useEthereumWallet();
+ const {ETHEREUM_GAS_MULTIPLIER} = useEnvs();
+
+ return useCallback(
+ async ({contract, method, transaction, args}) => {
+ const provider = await getEthereumProvider();
+ const populatedTransaction = await contract.populateTransaction[method](...args, transaction);
+ // Estimate the gas required
+ const estimatedGas = await provider.estimateGas(populatedTransaction);
+ // Calculate the gas limit with the multiplier
+ const gasLimit = estimatedGas
+ .mul(ethers.BigNumber.from(Math.ceil(ETHEREUM_GAS_MULTIPLIER * 100)))
+ .div(100);
+ // Add the gas limit to the transaction object
+ const tx = {
+ ...transaction,
+ gasLimit
+ };
+ // Send the transaction with the calculated gas limit
+ return contract[method](...args, tx);
+ },
+ [getEthereumProvider, ETHEREUM_GAS_MULTIPLIER]
+ );
+};
diff --git a/workspace/apps/starkgate/web/src/hooks/useStarknetWallet.jsx b/workspace/apps/starkgate/web/src/hooks/useStarknetWallet.jsx
index a19dc5ae..e69de29b 100644
--- a/workspace/apps/starkgate/web/src/hooks/useStarknetWallet.jsx
+++ b/workspace/apps/starkgate/web/src/hooks/useStarknetWallet.jsx
@@ -1,132 +0,0 @@
-import {
- getStarknet,
- connect as getStarknetWallet,
- disconnect as resetStarknetWallet
-} from 'get-starknet';
-import {useState} from 'react';
-import {addAddressPadding} from 'starknet';
-
-import {useConstants, useEnvs} from '@hooks';
-import {
- ChainInfo,
- ChainType,
- WalletErrorType,
- WalletIdL2,
- WalletStatus
-} from '@starkware-webapps/enums';
-import {useLogger} from '@starkware-webapps/ui';
-import {setCookie} from '@starkware-webapps/utils-browser';
-
-export const useStarknetWallet = () => {
- const logger = useLogger('useStarknetWallet');
- const {CONNECTED_L2_WALLET_ID_COOKIE_NAME} = useConstants();
- const {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 [config, setConfig] = useState(null);
-
- const connect = async ({autoConnect} = {}) => {
- const doConnect = async () => {
- logger.log('connect');
- try {
- setStatus(WalletStatus.CONNECTING);
- const wallet = await getStarknetWallet({
- modalOptions: {
- theme: 'dark'
- },
- ...(autoConnect ? {showList: false} : {})
- });
- if (!wallet) {
- logger.warn('empty wallet');
- setStatus(WalletStatus.DISCONNECTED);
- reset();
- return;
- }
- const enabled = await wallet
- .enable({showModal: !autoConnect})
- .then(address => address?.length && address[0]);
- if (enabled) {
- logger.log('connect success');
- updateAccount();
- addAccountChangedListener();
- }
- } catch (ex) {
- logger.error('connect failed');
- setStatus(WalletStatus.ERROR);
- setError({
- name: WalletErrorType.CONNECTION_REJECTED_ERROR,
- message: ex.message
- });
- }
- };
-
- if (![WalletStatus.CONNECTED, WalletStatus.CONNECTING].includes(status)) {
- await doConnect();
- }
- };
-
- const reset = () => {
- logger.log('reset');
- const disconnected = resetStarknetWallet({clearLastWallet: true, clearDefaultWallet: true});
- if (disconnected) {
- setStatus(WalletStatus.DISCONNECTED);
- setAccount('');
- setConfig(null);
- setCookie(CONNECTED_L2_WALLET_ID_COOKIE_NAME, '');
- }
- };
-
- const addAccountChangedListener = () => {
- getStarknet().on('accountsChanged', () => {
- setStatus(WalletStatus.DISCONNECTED);
- updateAccount();
- });
- };
-
- const updateAccount = () => {
- const chainId = getCurrentChainId();
- const {selectedAddress, name, icon} = getStarknet();
- setConfig({
- id: WalletIdL2.GSW,
- name,
- logoPath: icon
- });
- if (chainId === SUPPORTED_L2_CHAIN_ID) {
- setChainId(chainId);
- setChainName(ChainInfo.L2[chainId].NAME);
- setAccount(addAddressPadding(selectedAddress));
- setStatus(selectedAddress ? WalletStatus.CONNECTED : WalletStatus.DISCONNECTED);
- setError(null);
- setCookie(CONNECTED_L2_WALLET_ID_COOKIE_NAME, WalletIdL2.GSW);
- } else {
- setAccount(null);
- 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,
- config,
- connect,
- reset
- };
-};
diff --git a/workspace/apps/starkgate/web/src/hooks/useTitle.jsx b/workspace/apps/starkgate/web/src/hooks/useTitle.jsx
new file mode 100644
index 00000000..ed761c75
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/hooks/useTitle.jsx
@@ -0,0 +1,11 @@
+import {useEffect} from 'react';
+
+function useTitle(title) {
+ useEffect(() => {
+ if (document.title !== title) {
+ document.title = title;
+ }
+ }, []);
+}
+
+export {useTitle};
diff --git a/workspace/apps/starkgate/web/src/hooks/useTokenContractAPI.jsx b/workspace/apps/starkgate/web/src/hooks/useTokenContractAPI.jsx
index 9e485587..ac7105f0 100644
--- a/workspace/apps/starkgate/web/src/hooks/useTokenContractAPI.jsx
+++ b/workspace/apps/starkgate/web/src/hooks/useTokenContractAPI.jsx
@@ -1,42 +1,36 @@
import {useCallback} from 'react';
-import {useL1TokenContract, useL2TokenContract, useWeb3} from '@hooks';
-import {useL1Wallet, useSelectedToken} from '@providers';
-import {TransactionStatus} from '@starkware-webapps/enums';
+import {useL1TokenContract, useSendEthereumTransaction} from '@hooks';
+import {useEthereumWallet, useSelectedToken, useStarknetWallet} from '@providers';
import {promiseHandler} from '@starkware-webapps/utils';
-import {
- callContractL1,
- callContractL2,
- parseFromDecimals,
- parseFromUint256,
- sendTransactionL1
-} from '@starkware-webapps/web3-utils';
+import {parseFromDecimals, parseFromUint256} from '@starkware-webapps/web3-utils';
export const useTokenContractAPI = () => {
const selectedToken = useSelectedToken();
const getL1TokenContract = useL1TokenContract();
- const getL2TokenContract = useL2TokenContract();
- const {account: accountL1} = useL1Wallet();
- const web3 = useWeb3();
+ const {ethereumAccount, getEthereumProvider} = useEthereumWallet();
+ const {getStarknetProvider} = useStarknetWallet();
+ const sendEthereumTransaction = useSendEthereumTransaction();
const approve = useCallback(
async ({spender, value}) => {
const {tokenAddress} = selectedToken;
- const contract = getL1TokenContract(tokenAddress);
-
- return sendTransactionL1(contract, 'approve', [spender, value], {from: accountL1});
+ const contract = await getL1TokenContract(tokenAddress);
+ return await sendEthereumTransaction({
+ contract,
+ method: 'approve',
+ transaction: {from: ethereumAccount},
+ args: [spender, value]
+ });
},
- [selectedToken, accountL1, getL1TokenContract]
+ [selectedToken, ethereumAccount, getL1TokenContract, sendEthereumTransaction]
);
const allowance = useCallback(
async ({owner, spender}) => {
const {tokenAddress, decimals} = selectedToken;
- const contract = getL1TokenContract(tokenAddress);
-
- const [allow, error] = await promiseHandler(
- callContractL1(contract, 'allowance', [owner, spender])
- );
+ const contract = await getL1TokenContract(tokenAddress);
+ const [allow, error] = await promiseHandler(contract.allowance(owner, spender));
if (error) {
return Promise.reject(error);
}
@@ -47,25 +41,23 @@ export const useTokenContractAPI = () => {
const balanceOfEth = useCallback(
async account => {
- if (web3) {
- const [balance, error] = await promiseHandler(web3.eth.getBalance(account));
+ const provider = await getEthereumProvider();
+ if (provider) {
+ const [balance, error] = await promiseHandler(provider.getBalance(account));
if (error) {
return Promise.reject(error);
}
return parseFromDecimals(balance);
}
},
- [web3]
+ [getEthereumProvider]
);
const balanceOfL1 = useCallback(
async ({account, token}) => {
const {tokenAddress, decimals} = token || selectedToken;
- const contract = getL1TokenContract(tokenAddress);
-
- const [balance, error] = await promiseHandler(
- callContractL1(contract, 'balanceOf', [account])
- );
+ const contract = await getL1TokenContract(tokenAddress);
+ const [balance, error] = await promiseHandler(contract.balanceOf(account));
if (error) {
return Promise.reject(error);
}
@@ -76,20 +68,25 @@ export const useTokenContractAPI = () => {
const balanceOfL2 = useCallback(
async ({account, token}) => {
+ const provider = getStarknetProvider();
const {tokenAddress, decimals} = token || selectedToken;
- const contract = getL2TokenContract(tokenAddress);
-
- const [{balance}, error] = await promiseHandler(
- callContractL2(contract, 'balanceOf', account, {
- blockIdentifier: TransactionStatus.PENDING.toLowerCase()
+ const [response, error] = await promiseHandler(
+ provider.callContract({
+ contractAddress: tokenAddress,
+ entrypoint: 'balanceOf',
+ calldata: [account]
})
);
if (error) {
return Promise.reject(error);
}
- return parseFromUint256(balance, decimals);
+ const {
+ result: [low, high]
+ } = response;
+
+ return parseFromUint256({low, high}, decimals);
},
- [selectedToken, getL2TokenContract]
+ [selectedToken, getStarknetProvider]
);
return {
diff --git a/workspace/apps/starkgate/web/src/hooks/useTracking.jsx b/workspace/apps/starkgate/web/src/hooks/useTracking.jsx
index dc50098a..a524f89d 100644
--- a/workspace/apps/starkgate/web/src/hooks/useTracking.jsx
+++ b/workspace/apps/starkgate/web/src/hooks/useTracking.jsx
@@ -32,7 +32,7 @@ export const useLoginTracking = () => {
};
export const useTermsTracking = () => {
- return useTracking(track, [TrackEventType.TERMS_SCREEN, ...Object.values(TrackEventType.TERMS)]);
+ return useTracking(track, TrackEventType.TERMS_SCREEN);
};
export const useTransferTracking = () => {
diff --git a/workspace/apps/starkgate/web/src/hooks/useTransferToL1.jsx b/workspace/apps/starkgate/web/src/hooks/useTransferToL1.jsx
index 464125a3..de004cd2 100644
--- a/workspace/apps/starkgate/web/src/hooks/useTransferToL1.jsx
+++ b/workspace/apps/starkgate/web/src/hooks/useTransferToL1.jsx
@@ -1,5 +1,5 @@
-import {getStarknet} from 'get-starknet';
import {useCallback} from 'react';
+import {TransactionExecutionStatus} from 'starknet';
import {
CompleteTransferToL1Steps,
@@ -15,19 +15,17 @@ import {
useTransferProgress,
useTransferToL1Tracking
} from '@hooks';
-import {useL1Wallet, useL2Wallet, useSelectedToken, useTransferLog} from '@providers';
+import {useSelectedToken, useTransferLog, useWallets} from '@providers';
import {TransferType} from '@starkgate/shared';
-import {EventName, TransactionStatus} from '@starkware-webapps/enums';
import {useLogger} from '@starkware-webapps/ui';
-import {waitForTransaction} from '@starkware-webapps/web3-utils';
+import {promiseHandler} from '@starkware-webapps/utils';
export const useTransferToL1 = () => {
const logger = useLogger('useTransferToL1');
const [trackInitiated, trackSuccess, trackError, , trackAutoWithdrawal] =
useTransferToL1Tracking();
const {initiateWithdraw, initiateTeleport} = useBridgeContractAPI();
- const {account: accountL1} = useL1Wallet();
- const {account: accountL2, config: configL2} = useL2Wallet();
+ const {ethereumAccount, getStarknetProvider, starknetAccount, starknetWalletName} = useWallets();
const selectedToken = useSelectedToken();
const {handleProgress, handleData, handleError} = useTransfer(TransferToL1Steps);
const progressOptions = useTransferProgress();
@@ -35,11 +33,12 @@ export const useTransferToL1 = () => {
return useCallback(
async (amount, autoWithdrawal, fastWithdrawal) => {
const {name, symbol} = selectedToken;
+ const provider = getStarknetProvider();
const sendInitiateWithdraw = () => {
const trackData = {
- fromAddress: accountL2,
- toAddress: accountL1,
+ fromAddress: starknetAccount,
+ toAddress: ethereumAccount,
amount,
symbol
};
@@ -51,11 +50,11 @@ export const useTransferToL1 = () => {
});
return fastWithdrawal
? initiateTeleport({
- recipient: accountL1,
+ recipient: ethereumAccount,
amount
})
: initiateWithdraw({
- recipient: accountL1,
+ recipient: ethereumAccount,
amount,
autoWithdrawal
});
@@ -65,7 +64,7 @@ export const useTransferToL1 = () => {
logger.log('TransferToL1 called');
handleProgress(
progressOptions.waitForConfirm(
- configL2.name,
+ starknetWalletName,
stepOf(TransferStep.CONFIRM_TX, TransferToL1Steps)
)
);
@@ -73,8 +72,8 @@ export const useTransferToL1 = () => {
const {transaction_hash: l2TxHash} = await sendInitiateWithdraw();
const transferData = {
type: TransferType.WITHDRAWAL,
- sender: accountL2,
- recipient: accountL1,
+ sender: starknetAccount,
+ recipient: ethereumAccount,
l2TxTimestamp: new Date().getTime(),
name,
symbol,
@@ -92,7 +91,9 @@ export const useTransferToL1 = () => {
)
);
logger.log('Waiting for tx to be received on L2');
- await waitForTransaction(getStarknet().provider, l2TxHash, TransactionStatus.RECEIVED);
+ await provider.waitForTransaction(l2TxHash, {
+ successStates: [TransactionExecutionStatus.SUCCEEDED]
+ });
logger.log('Done', {l2TxHash});
trackSuccess({l2TxHash, fastWithdrawal, autoWithdrawal});
handleData(transferData);
@@ -104,15 +105,16 @@ export const useTransferToL1 = () => {
},
[
initiateWithdraw,
- accountL1,
- accountL2,
- configL2,
+ ethereumAccount,
+ starknetAccount,
+ starknetWalletName,
handleData,
handleError,
handleProgress,
logger,
progressOptions,
- selectedToken
+ selectedToken,
+ getStarknetProvider
]
);
};
@@ -121,7 +123,7 @@ export const useCompleteTransferToL1 = () => {
const logger = useLogger('useCompleteTransferToL1');
const [trackInitiated, trackSuccess, trackError] = useCompleteTransferToL1Tracking();
const {withdraw, requestMint} = useBridgeContractAPI();
- const {account: accountL1, config: configL1} = useL1Wallet();
+ const {ethereumAccount, ethereumWalletName} = useWallets();
const {handleProgress, handleData, handleError} = useTransfer(CompleteTransferToL1Steps);
const progressOptions = useTransferProgress();
const {refetch} = useTransferLog();
@@ -130,35 +132,27 @@ export const useCompleteTransferToL1 = () => {
async transfer => {
const {symbol, amount, l2TxHash, customData, fastWithdrawal} = transfer;
- const sendWithdrawal = () => {
+ const sendWithdrawal = async () => {
trackInitiated({
- toAddress: accountL1,
+ toAddress: ethereumAccount,
l2TxHash,
amount,
symbol,
fastWithdrawal
});
- if (fastWithdrawal) {
- logger.log('Calling requestMint');
- return requestMint({
- amount,
- customData,
- emitter: onTransactionHash
- });
- } else {
- logger.log('Calling withdraw');
- return withdraw({
- recipient: accountL1,
- symbol,
- amount,
- emitter: onTransactionHash
- });
- }
- };
-
- const onTransactionHash = (error, transactionHash) => {
+ const withdrawalHandler = fastWithdrawal
+ ? requestMint({
+ amount,
+ customData
+ })
+ : withdraw({
+ recipient: ethereumAccount,
+ symbol,
+ amount
+ });
+ const [tx, error] = await promiseHandler(withdrawalHandler);
if (!error) {
- logger.log('Tx signed', {transactionHash});
+ logger.log('Tx signed', {transactionHash: tx.hash});
handleProgress(
progressOptions.withdraw(
amount,
@@ -166,12 +160,13 @@ export const useCompleteTransferToL1 = () => {
stepOf(TransferStep.WITHDRAW, CompleteTransferToL1Steps)
)
);
+ return tx;
}
+ throw error;
};
- const onWithdrawal = event => {
- logger.log('Withdrawal event dispatched', event);
- const {transactionHash: l1TxHash} = event;
+ const handleWithdrawalSuccess = receipt => {
+ const {transactionHash: l1TxHash} = receipt;
trackSuccess({l1TxHash});
const transferData = {...transfer, l1TxHash};
handleData(transferData);
@@ -182,12 +177,14 @@ export const useCompleteTransferToL1 = () => {
logger.log('CompleteTransferToL1 called');
handleProgress(
progressOptions.waitForConfirm(
- configL1.name,
+ ethereumWalletName,
stepOf(TransferStep.CONFIRM_TX, CompleteTransferToL1Steps)
)
);
- const receipt = await sendWithdrawal();
- onWithdrawal(receipt.events[fastWithdrawal ? 0 : EventName.L1.LOG_WITHDRAWAL]);
+ const tx = await sendWithdrawal();
+ const receipt = await tx.wait();
+ logger.log('Withdrawal tx mined', {receipt});
+ handleWithdrawalSuccess(receipt);
} catch (ex) {
trackError({error: ex});
logger.error(ex?.message, ex);
@@ -196,8 +193,8 @@ export const useCompleteTransferToL1 = () => {
},
[
withdraw,
- accountL1,
- configL1,
+ ethereumAccount,
+ ethereumWalletName,
handleData,
handleError,
handleProgress,
diff --git a/workspace/apps/starkgate/web/src/hooks/useTransferToL2.jsx b/workspace/apps/starkgate/web/src/hooks/useTransferToL2.jsx
index 6cc703b9..4f791a3b 100644
--- a/workspace/apps/starkgate/web/src/hooks/useTransferToL2.jsx
+++ b/workspace/apps/starkgate/web/src/hooks/useTransferToL2.jsx
@@ -1,20 +1,19 @@
-import {getStarknet} from 'get-starknet';
import {useCallback} from 'react';
-import {constants} from 'starknet';
import {TransferError, TransferStep, TransferToL2Steps, stepOf} from '@enums';
import {
useBridgeContractAPI,
+ useConstants,
useIsMaxTotalBalanceExceeded,
useTokenContractAPI,
useTransfer,
useTransferProgress,
useTransferToL2Tracking
} from '@hooks';
-import {useL1Wallet, useL2Token, useL2Wallet, useSelectedToken} from '@providers';
+import {useSelectedToken, useWallets} from '@providers';
import {TransferType} from '@starkgate/shared';
-import {EventName} from '@starkware-webapps/enums';
import {useLogger} from '@starkware-webapps/ui';
+import {promiseHandler} from '@starkware-webapps/utils';
import {isEth} from '@utils';
export const useTransferToL2 = () => {
@@ -22,56 +21,52 @@ export const useTransferToL2 = () => {
const [trackInitiated, trackSuccess, trackError, trackReject] = useTransferToL2Tracking();
const {deposit, depositEth} = useBridgeContractAPI();
const {allowance, approve} = useTokenContractAPI();
- const {account: accountL1, config: configL1} = useL1Wallet();
- const {account: accountL2} = useL2Wallet();
+ const {ethereumAccount, starknetAccount, ethereumWalletName} = useWallets();
const {handleProgress, handleData, handleError} = useTransfer(TransferToL2Steps);
const selectedToken = useSelectedToken();
const progressOptions = useTransferProgress();
- const getL2Token = useL2Token();
const isMaxTotalBalanceExceeded = useIsMaxTotalBalanceExceeded();
+ const {APPROVE_AMOUNT} = useConstants();
return useCallback(
async amount => {
const {symbol, name, bridgeAddress} = selectedToken;
- const tokenAddressL2 = getL2Token(symbol)?.tokenAddress;
const sendDeposit = async () => {
trackInitiated({
- fromAddress: accountL1,
- toAddress: accountL2,
+ fromAddress: ethereumAccount,
+ toAddress: starknetAccount,
amount,
symbol
});
const depositHandler = isEth(symbol) ? depositEth : deposit;
- return await depositHandler({
- recipient: accountL2,
- amount,
- emitter: onTransactionHash
- });
- };
-
- const onTransactionHash = (error, transactionHash) => {
+ const [tx, error] = await promiseHandler(
+ depositHandler({
+ recipient: starknetAccount,
+ amount
+ })
+ );
if (!error) {
- logger.log('Tx signed', {transactionHash});
+ logger.log('Tx signed', {transactionHash: tx.hash});
handleProgress(
progressOptions.deposit(amount, symbol, stepOf(TransferStep.DEPOSIT, TransferToL2Steps))
);
+ return tx;
}
+ throw error;
};
- const onDeposit = event => {
- logger.log('Deposit event dispatched', event);
- trackSuccess({hash: event.transactionHash});
+ const handleDepositSuccess = ({transactionHash}) => {
+ trackSuccess({transactionHash});
const transferData = {
type: TransferType.DEPOSIT,
- sender: accountL1,
- recipient: accountL2,
- l1TxHash: event.transactionHash,
+ sender: ethereumAccount,
+ recipient: starknetAccount,
+ l1TxHash: transactionHash,
l1TxTimestamp: new Date().getTime(),
name,
symbol,
- amount,
- event
+ amount
};
handleData(transferData);
};
@@ -98,36 +93,31 @@ export const useTransferToL2 = () => {
progressOptions.approval(symbol, stepOf(TransferStep.APPROVE, TransferToL2Steps))
);
const allow = await allowance({
- owner: accountL1,
+ owner: ethereumAccount,
spender: bridgeAddress
});
logger.log('Current allow value', {allow});
if (Number(allow) < Number(amount)) {
logger.log('Allow value is smaller then amount, sending approve tx...', {amount});
- await approve({
+ const tx = await approve({
spender: bridgeAddress,
- value: constants.MASK_250
+ value: APPROVE_AMOUNT
});
+ const receipt = await tx.wait();
+ logger.log('Approve tx mined', {receipt});
}
}
handleProgress(
progressOptions.waitForConfirm(
- configL1.name,
+ ethereumWalletName,
stepOf(TransferStep.CONFIRM_TX, TransferToL2Steps)
)
);
logger.log('Calling deposit');
- const receipt = await sendDeposit();
- onDeposit(receipt.events[EventName.L1.LOG_DEPOSIT]);
- await getStarknet().request({
- type: 'wallet_watchAsset',
- params: {
- type: 'ERC20',
- options: {
- address: tokenAddressL2
- }
- }
- });
+ const tx = await sendDeposit();
+ const receipt = await tx.wait();
+ logger.log('Deposit tx mined', {receipt});
+ handleDepositSuccess(receipt);
}
} catch (ex) {
trackError({error: ex});
@@ -141,10 +131,9 @@ export const useTransferToL2 = () => {
depositEth,
allowance,
approve,
- getL2Token,
- accountL1,
- accountL2,
- configL1,
+ ethereumAccount,
+ starknetAccount,
+ ethereumWalletName,
handleData,
handleError,
handleProgress,
diff --git a/workspace/apps/starkgate/web/src/hooks/useTranslation.jsx b/workspace/apps/starkgate/web/src/hooks/useTranslation.jsx
index 22958a8b..1707ec74 100644
--- a/workspace/apps/starkgate/web/src/hooks/useTranslation.jsx
+++ b/workspace/apps/starkgate/web/src/hooks/useTranslation.jsx
@@ -1,6 +1,10 @@
import {translations} from '@config/translations';
import {chainPath, useTranslation} from '@starkware-webapps/ui';
+export const useHeadTranslation = path => {
+ return useTranslation(chainPath('head', path), translations);
+};
+
export const useContainersTranslation = path => {
return useTranslation(chainPath('containers', path), translations);
};
@@ -73,10 +77,6 @@ export const useProgressModalTranslation = () => {
return useModalsTranslation('progress');
};
-export const useOnboardingModalTranslation = () => {
- return useModalsTranslation('onboarding');
-};
-
export const useBlockedAddressModalTranslation = () => {
return useModalsTranslation('blockedAddress');
};
@@ -104,3 +104,11 @@ export const useTransferLogTranslation = () => {
export const useTabsTranslation = () => {
return useHeaderTranslation('tabs');
};
+
+export const useComponentsTranslation = path => {
+ return useTranslation(chainPath('components', path), translations);
+};
+
+export const useBlockExplorerComponentTranslation = () => {
+ return useComponentsTranslation('blockExplorer');
+};
diff --git a/workspace/apps/starkgate/web/src/hooks/useWalletHandlers.jsx b/workspace/apps/starkgate/web/src/hooks/useWalletHandlers.jsx
deleted file mode 100644
index e35cae09..00000000
--- a/workspace/apps/starkgate/web/src/hooks/useWalletHandlers.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import {useCallback, useEffect, useState} from 'react';
-
-import {SUPPORTED_L1_CHAIN_ID, SUPPORTED_L2_CHAIN_ID} from '@config/envs';
-import {useGetStarknet, useLoginTranslation, useMetaMask} from '@hooks';
-import {useWallets} from '@providers';
-import {ChainInfo, LoginErrorType, WalletErrorType, isL1Network} from '@starkware-webapps/enums';
-import {useIsMounted, useLogger} from '@starkware-webapps/ui';
-import {evaluate, promiseHandler} from '@starkware-webapps/utils';
-
-export const useWalletHandler = (config, network) => {
- const logger = useLogger(`useWalletHandler(${config.id})`);
- const {unsupportedChainIdTxt} = useLoginTranslation();
- const {config: walletConfig, connectWallet, error: walletError} = useWallets(network);
- const [isLoading, setIsLoading] = useState(false);
- const [error, setError] = useState(null);
- const isMounted = useIsMounted();
-
- useEffect(() => {
- if (walletConfig?.id === config?.id) {
- if (walletError) {
- const error = handleWalletError(walletError);
- logger.log('set error', error);
- setError(error);
- } else {
- logger.log('clear error');
- setError(null);
- }
- }
- }, [walletError]);
-
- const handleWalletError = error => {
- if (walletError.name === WalletErrorType.CHAIN_UNSUPPORTED_ERROR) {
- const chainName = isL1Network(network)
- ? ChainInfo.L1[SUPPORTED_L1_CHAIN_ID].NAME
- : ChainInfo.L2[SUPPORTED_L2_CHAIN_ID].NAME;
- return {
- type: LoginErrorType.UNSUPPORTED_CHAIN_ID,
- message: evaluate(unsupportedChainIdTxt, {
- chainName
- })
- };
- }
- return error;
- };
-
- const connect = useCallback(
- async args => {
- logger.log('connect', args);
- setIsLoading(true);
- const [, error] = await promiseHandler(connectWallet(args));
- if (error) {
- logger.error(error.message);
- }
- if (isMounted.current) {
- setIsLoading(false);
- }
- },
- [config, connectWallet]
- );
-
- return {
- connect,
- isLoading,
- error
- };
-};
-
-export const useWalletHandlersL1 = () => {
- const metamaskApi = useMetaMask();
-
- return [metamaskApi];
-};
-
-export const useWalletHandlersL2 = () => {
- const getStarknetApi = useGetStarknet();
-
- return [getStarknetApi];
-};
-
-export const useWalletHandlers = network => {
- const walletHandlersL1 = useWalletHandlersL1();
- const walletHandlersL2 = useWalletHandlersL2();
-
- return isL1Network(network) ? walletHandlersL1 : walletHandlersL2;
-};
diff --git a/workspace/apps/starkgate/web/src/hooks/useWeb3.jsx b/workspace/apps/starkgate/web/src/hooks/useWeb3.jsx
deleted file mode 100644
index 30876466..00000000
--- a/workspace/apps/starkgate/web/src/hooks/useWeb3.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {useMemo} from 'react';
-import {useWallet} from 'use-wallet';
-import Web3 from 'web3';
-
-export const useWeb3 = () => {
- const {ethereum} = useWallet();
- // ethereum is the provider when there is only one wallet, otherwise is the ethereum.selectedProvider
- return useMemo(() => ethereum && new Web3(ethereum.selectedProvider || ethereum), [ethereum]);
-};
diff --git a/workspace/apps/starkgate/web/src/index.jsx b/workspace/apps/starkgate/web/src/index.jsx
index fb3e8082..1bf859c7 100644
--- a/workspace/apps/starkgate/web/src/index.jsx
+++ b/workspace/apps/starkgate/web/src/index.jsx
@@ -1,37 +1,43 @@
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom';
-import {DEV, SUPPORTED_L1_CHAIN_ID} from '@config/envs';
+import {DEV, GOOGLE_MEASURE_ID} from '@config/envs';
import {AppProviders} from '@providers';
-import splitbee from '@splitbee/web';
-import {isL1Testnet} from '@starkware-webapps/enums';
import {getLogger, setLogLevel} from '@starkware-webapps/js-logger';
import '@starkware-webapps/ui/style.css';
-import {getUrlParameter, printPackageInfo} from '@starkware-webapps/utils-browser';
+import {promiseHandler} from '@starkware-webapps/utils';
+import {
+ getUrlParameter,
+ loadGoogleAnalytics,
+ printPackageInfo
+} from '@starkware-webapps/utils-browser';
import {ModalWrapper} from '@ui';
import {App} from './App';
import './index.scss';
-printPackageInfo(APP_NAME, APP_VERSION, '#734d7e');
+async function renderApp() {
+ printPackageInfo(APP_NAME, APP_VERSION, '#734d7e');
-if (!DEV) {
- splitbee.init();
-}
+ if (DEV || getUrlParameter('debugApp')) {
+ setLogLevel(getLogger().DEBUG);
+ }
-if (DEV || getUrlParameter('debugApp')) {
- setLogLevel(getLogger().DEBUG);
-}
+ const [, error] = await promiseHandler(loadGoogleAnalytics(GOOGLE_MEASURE_ID));
+ if (error) {
+ getLogger().warn(error.message);
+ }
-document.title += `StarkGate ${isL1Testnet(SUPPORTED_L1_CHAIN_ID) ? 'Goerli' : ''} Alpha`;
+ const root = ReactDOM.createRoot(document.getElementById('root'));
-const root = ReactDOM.createRoot(document.getElementById('root'));
+ root.render(
+
+
+
+
+
+
+ );
+}
-root.render(
-
-
-
-
-
-
-);
+renderApp();
diff --git a/workspace/apps/starkgate/web/src/providers/AppProvider/AppProvider.jsx b/workspace/apps/starkgate/web/src/providers/AppProvider/AppProvider.jsx
index 3ff1f0c9..0eb5f975 100644
--- a/workspace/apps/starkgate/web/src/providers/AppProvider/AppProvider.jsx
+++ b/workspace/apps/starkgate/web/src/providers/AppProvider/AppProvider.jsx
@@ -1,19 +1,32 @@
import PropTypes from 'prop-types';
-import React, {useReducer} from 'react';
+import React, {useCallback, useEffect, useReducer} from 'react';
import {useLocation, useNavigate} from 'react-router-dom';
-import {useEnvs} from '@hooks';
+import {blockExplorers} from '@config/block-explorers';
+import {useConstants} from '@hooks';
+import {NetworkType} from '@starkware-webapps/enums';
import {setStorageItem} from '@starkware-webapps/utils-browser';
import {AppContext} from './app-context';
import {actions, initialState, reducer} from './app-reducer';
export const AppProvider = ({children}) => {
- const {LOCAL_STORAGE_ACCEPT_TERMS_KEY} = useEnvs();
const [state, dispatch] = useReducer(reducer, initialState);
const {pathname} = useLocation();
const navigate = useNavigate();
const isScrollActive = ['/terms', '/faq'].includes(pathname);
+ const {BLOCK_EXPLORER_STORAGE_KEY} = useConstants();
+
+ useEffect(() => {
+ const {blockExplorer: blockExplorerId} = state;
+ const blockExplorer = blockExplorers[NetworkType.L2][blockExplorerId];
+ if (!blockExplorer) {
+ const blockExplorerIds = Object.keys(blockExplorers[NetworkType.L2]);
+ const randomBlockExplorer =
+ blockExplorerIds[Math.floor(Math.random() * blockExplorerIds.length)];
+ selectBlockExplorer(randomBlockExplorer);
+ }
+ }, []);
const navigateToRoute = route => {
pathname !== route && navigate(route);
@@ -33,20 +46,21 @@ export const AppProvider = ({children}) => {
});
};
- const acceptTerms = () => {
- setStorageItem(LOCAL_STORAGE_ACCEPT_TERMS_KEY, true);
+ const selectBlockExplorer = useCallback(blockExplorer => {
+ setStorageItem(BLOCK_EXPLORER_STORAGE_KEY, blockExplorer);
dispatch({
- type: actions.SET_ACCEPT_TERMS
+ type: actions.SET_BLOCK_EXPLORER,
+ blockExplorer
});
- };
+ }, []);
const value = {
...state,
isScrollActive,
navigateToRoute,
- acceptTerms,
login,
- logout
+ logout,
+ selectBlockExplorer
};
return
{children};
diff --git a/workspace/apps/starkgate/web/src/providers/AppProvider/app-context.jsx b/workspace/apps/starkgate/web/src/providers/AppProvider/app-context.jsx
index 8b8d5e2a..75e361b5 100644
--- a/workspace/apps/starkgate/web/src/providers/AppProvider/app-context.jsx
+++ b/workspace/apps/starkgate/web/src/providers/AppProvider/app-context.jsx
@@ -6,7 +6,7 @@ export const AppContext = createContext({
...initialState,
isScrollActive: false,
navigateToRoute: () => ({}),
- acceptTerms: () => ({}),
login: () => ({}),
- logout: () => ({})
+ logout: () => ({}),
+ selectBlockExplorer: blockExplorer => blockExplorer
});
diff --git a/workspace/apps/starkgate/web/src/providers/AppProvider/app-hooks.jsx b/workspace/apps/starkgate/web/src/providers/AppProvider/app-hooks.jsx
index 955afac4..0dadd15f 100644
--- a/workspace/apps/starkgate/web/src/providers/AppProvider/app-hooks.jsx
+++ b/workspace/apps/starkgate/web/src/providers/AppProvider/app-hooks.jsx
@@ -1,23 +1,11 @@
import {useContext} from 'react';
-import {useL1Wallet, useL2Wallet} from '@providers';
-import {isConnected} from '@starkware-webapps/enums';
-
import {AppContext} from './app-context';
export const useApp = () => useContext(AppContext);
-export const useTerms = () => {
- const {isAcceptTerms, acceptTerms} = useApp();
-
- return {isAcceptTerms, acceptTerms};
-};
-
-export const useLogin = () => {
- const {status: statusL1, config: configL1} = useL1Wallet();
- const {status: statusL2, config: configL2} = useL2Wallet();
+export const useBlockExplorer = () => {
+ const {blockExplorer, selectBlockExplorer} = useApp();
- return {
- isLoggedIn: isConnected(statusL1) && !!configL1 && isConnected(statusL2) && !!configL2
- };
+ return {blockExplorer, selectBlockExplorer};
};
diff --git a/workspace/apps/starkgate/web/src/providers/AppProvider/app-reducer.jsx b/workspace/apps/starkgate/web/src/providers/AppProvider/app-reducer.jsx
index 9cf2297b..1e4f486b 100644
--- a/workspace/apps/starkgate/web/src/providers/AppProvider/app-reducer.jsx
+++ b/workspace/apps/starkgate/web/src/providers/AppProvider/app-reducer.jsx
@@ -1,29 +1,30 @@
-import {LOCAL_STORAGE_ACCEPT_TERMS_KEY} from '@config/envs';
+import {BLOCK_EXPLORER_STORAGE_KEY} from '@config/constants';
import {getStorageItem} from '@starkware-webapps/utils-browser';
export const actions = {
SET_ACCEPT_TERMS: 'App/SET_ACCEPT_TERMS',
- SET_IS_LOGGED_IN: 'App/SET_IS_LOGGED_IN'
+ SET_IS_LOGGED_IN: 'App/SET_IS_LOGGED_IN',
+ SET_BLOCK_EXPLORER: 'App/SET_BLOCK_EXPLORER'
};
export const initialState = {
- isAcceptTerms: getStorageItem(LOCAL_STORAGE_ACCEPT_TERMS_KEY),
+ blockExplorer: getStorageItem(BLOCK_EXPLORER_STORAGE_KEY),
isLoggedIn: false
};
export const reducer = (state, action) => {
switch (action.type) {
- case actions.SET_ACCEPT_TERMS: {
+ case actions.SET_IS_LOGGED_IN: {
return {
...state,
- isAcceptTerms: true
+ isLoggedIn: action.isLoggedIn
};
}
- case actions.SET_IS_LOGGED_IN: {
+ case actions.SET_BLOCK_EXPLORER: {
return {
...state,
- isLoggedIn: action.isLoggedIn
+ blockExplorer: action.blockExplorer
};
}
diff --git a/workspace/apps/starkgate/web/src/providers/DynamicProvider/DynamicProvider.jsx b/workspace/apps/starkgate/web/src/providers/DynamicProvider/DynamicProvider.jsx
new file mode 100644
index 00000000..74e9dc50
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/providers/DynamicProvider/DynamicProvider.jsx
@@ -0,0 +1,89 @@
+import PropTypes from 'prop-types';
+import {useCallback, useRef} from 'react';
+
+import {screenAddress} from '@api';
+import {EthereumWalletConnectors} from '@dynamic-labs/ethereum';
+import {EthersExtension} from '@dynamic-labs/ethers-v5';
+import {DynamicContextProvider} from '@dynamic-labs/sdk-react-core';
+import {StarknetWalletConnectors} from '@dynamic-labs/starknet';
+import {WalletBookContextProvider} from '@dynamic-labs/wallet-book';
+import {useEnvs, useLoginTracking, useLoginTranslation} from '@hooks';
+import {WalletProvider, useBlockedAddressModal, useErrorModal} from '@providers';
+import {promiseHandler} from '@starkware-webapps/utils';
+import '@styles/dynamic.theme.scss';
+import {TermsDisclaimer} from '@ui';
+
+export const DynamicProvider = ({children}) => {
+ const {termsDisclaimer} = useLoginTranslation();
+ const {DYNAMIC_ENV_ID, ENABLE_SCREENING} = useEnvs();
+ const showBlockedAddressModal = useBlockedAddressModal();
+ const [, , trackBlockedAddress] = useLoginTracking();
+ const showErrorModal = useErrorModal();
+ const cachedScreenedAddresses = useRef({});
+
+ const getIsAddressBlocked = useCallback(
+ async address => {
+ // Check if we already screened this address.
+ const cachedResult = cachedScreenedAddresses.current[address];
+ if (typeof cachedResult === 'boolean') {
+ return cachedResult;
+ }
+ return screenAddress(address);
+ },
+ [cachedScreenedAddresses]
+ );
+
+ const onBeforeConnectSuccessConfirmation = useCallback(
+ async ({address, chain}) => {
+ const [blocked, error] = await promiseHandler(
+ chain === 'EVM' && ENABLE_SCREENING ? getIsAddressBlocked(address) : Promise.resolve(false)
+ );
+ if (error) {
+ const {title, message} = error;
+ showErrorModal(title, message);
+ } else {
+ if (blocked) {
+ showBlockedAddressModal(address);
+ trackBlockedAddress({account: address});
+ }
+ // Cache the result, so we don't have to screen the same address again.
+ cachedScreenedAddresses.current[address] = blocked;
+ }
+ return Promise.resolve(!(blocked || error));
+ },
+ [showBlockedAddressModal, trackBlockedAddress, showErrorModal]
+ );
+
+ return (
+
+ ,
+ eventsCallbacks: {onBeforeConnectSuccessConfirmation},
+ bridgeChains: [
+ {
+ chain: 'EVM',
+ numberOfWallets: 1
+ },
+ {
+ chain: 'STARK',
+ numberOfWallets: 1
+ }
+ ],
+ walletConnectorExtensions: [EthersExtension],
+ walletConnectors: [EthereumWalletConnectors, StarknetWalletConnectors]
+ }}
+ >
+ {children}
+
+
+ );
+};
+
+DynamicProvider.displayName = 'DynamicProvider';
+
+DynamicProvider.propTypes = {
+ children: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+};
diff --git a/workspace/apps/starkgate/web/src/providers/ModalProvider/modal-hooks.jsx b/workspace/apps/starkgate/web/src/providers/ModalProvider/modal-hooks.jsx
index ecaf2ad1..d98d0173 100644
--- a/workspace/apps/starkgate/web/src/providers/ModalProvider/modal-hooks.jsx
+++ b/workspace/apps/starkgate/web/src/providers/ModalProvider/modal-hooks.jsx
@@ -1,15 +1,8 @@
-import {useCallback, useContext, useEffect} from 'react';
+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 {
- useBlockedAddressModalTranslation,
- useOnboardingModalTranslation,
- useUnsupportedModalTranslation
-} from '@hooks';
-import {useL2Wallet} from '@providers';
-import {NetworkType, isConnecting} from '@starkware-webapps/enums';
-import {usePrevious} from '@starkware-webapps/ui';
+import {useBlockedAddressModalTranslation, useUnsupportedModalTranslation} from '@hooks';
import {ModalSize, ModalType} from '@ui';
import {ModalContext} from './modal-context';
@@ -24,7 +17,8 @@ const importComponent = modulePath => modules[`../../components/UI/${modulePath}
const TRANSACTION_MODAL_STYLE = {
containerStyle: {
width: '495px',
- padding: '32px'
+ padding: '32px',
+ overflow: 'hidden'
},
buttonProps: {
height: '48px',
@@ -154,8 +148,7 @@ export const useTransactionSubmittedModal = steps => {
'Modal/TransactionSubmittedModal/TransactionSubmittedModalButton'
),
props: {
- transfer,
- buttonProps
+ transfer
}
}
],
@@ -233,76 +226,6 @@ export const useErrorModal = () => {
);
};
-export const useOnboardingModal = () => {
- const {showModal} = useContext(ModalContext);
- const {titleTxt} = useOnboardingModalTranslation();
- const {buttonProps, containerStyle} = MODAL_HEADER_WITH_ICON_STYLE;
-
- return useCallback(() => {
- showModal({
- header: {
- components: [
- {
- import: importComponent('Modal/ModalHeaderWithIcon/ModalHeaderWithIcon'),
- props: {
- icon: WarningIcon,
- title: titleTxt
- }
- }
- ]
- },
- body: {
- components: [
- {
- import: importComponent('Modal/OnboardingModal/OnboardingModal')
- }
- ]
- },
- footer: {
- withButtons: true,
- buttonProps
- },
- containerStyle
- });
- }, [showModal]);
-};
-
-export const useLoginModal = () => {
- const {showModal, show} = useContext(ModalContext);
- const prevShow = usePrevious(show);
- const {status, resetWallet} = useL2Wallet();
-
- useEffect(() => {
- // reset L2 wallet if the user closed the modal on connecting
- if (prevShow && !show && isConnecting(status)) {
- resetWallet();
- }
- }, [show, status]);
-
- return useCallback(
- (networkName = NetworkType.L1) => {
- showModal({
- withHeader: false,
- body: {
- components: [
- {
- import: importComponent('Modal/LoginModal/LoginModal'),
- props: {networkName}
- }
- ]
- },
- containerStyle: {
- background: 'unset',
- boxShadow: 'unset',
- width: '464px'
- },
- exitable: true
- });
- },
- [showModal]
- );
-};
-
export const useBlockedAddressModal = () => {
const {showModal} = useContext(ModalContext);
const {titleTxt, closeButtonTxt} = useBlockedAddressModalTranslation();
diff --git a/workspace/apps/starkgate/web/src/providers/TokensProvider/TokensProvider.jsx b/workspace/apps/starkgate/web/src/providers/TokensProvider/TokensProvider.jsx
index a17c8957..87490350 100644
--- a/workspace/apps/starkgate/web/src/providers/TokensProvider/TokensProvider.jsx
+++ b/workspace/apps/starkgate/web/src/providers/TokensProvider/TokensProvider.jsx
@@ -3,21 +3,17 @@ import React, {useReducer} from 'react';
import {useAccountChange, useBridgeContractAPI, useConstants} from '@hooks';
import {useL1TokenBalance, useL2TokenBalance} from '@hooks/useTokenBalance';
+import {TokensContext, actions, initialState, reducer, useWallets} from '@providers';
import {useLogger} from '@starkware-webapps/ui';
import {promiseHandler} from '@starkware-webapps/utils';
-import {useL1Wallet, useL2Wallet} from '../WalletsProvider';
-import {TokensContext} from './tokens-context';
-import {actions, initialState, reducer} from './tokens-reducer';
-
export const TokensProvider = ({children}) => {
const logger = useLogger(TokensProvider.displayName);
const {FETCH_TOKEN_BALANCE_MAX_RETRY} = useConstants();
const [tokens, dispatch] = useReducer(reducer, initialState);
- const {account: accountL1} = useL1Wallet();
- const {account: accountL2} = useL2Wallet();
- const getL1TokenBalance = useL1TokenBalance(accountL1);
- const getL2TokenBalance = useL2TokenBalance(accountL2);
+ const {ethereumAccount, starknetAccount} = useWallets();
+ const getL1TokenBalance = useL1TokenBalance(ethereumAccount);
+ const getL2TokenBalance = useL2TokenBalance(starknetAccount);
const {maxDeposit: fetchMaxDeposit, maxTotalBalance: fetchMaxTotalBalance} =
useBridgeContractAPI();
diff --git a/workspace/apps/starkgate/web/src/providers/TokensProvider/tokens-reducer.jsx b/workspace/apps/starkgate/web/src/providers/TokensProvider/tokens-reducer.jsx
index 6132ba3e..431311ac 100644
--- a/workspace/apps/starkgate/web/src/providers/TokensProvider/tokens-reducer.jsx
+++ b/workspace/apps/starkgate/web/src/providers/TokensProvider/tokens-reducer.jsx
@@ -12,6 +12,7 @@ const tokens = [
.map(t => ({
...t,
isL1: true,
+ escrowAddress: t.escrowAddress?.[SUPPORTED_L1_CHAIN_ID],
bridgeAddress: t.bridgeAddress?.[SUPPORTED_L1_CHAIN_ID],
tokenAddress: t.tokenAddress?.[SUPPORTED_L1_CHAIN_ID]
})),
diff --git a/workspace/apps/starkgate/web/src/providers/TransferLogProvider/TransferLogProvider.jsx b/workspace/apps/starkgate/web/src/providers/TransferLogProvider/TransferLogProvider.jsx
index 03d8fa5b..18cbf2e7 100644
--- a/workspace/apps/starkgate/web/src/providers/TransferLogProvider/TransferLogProvider.jsx
+++ b/workspace/apps/starkgate/web/src/providers/TransferLogProvider/TransferLogProvider.jsx
@@ -8,56 +8,77 @@ import {
fetchL2Transfers,
fetchPendingWithdrawals
} from '@api';
-import {
- GET_PENDING_WITHDRAWALS_REFETCH_INTERVAL,
- GET_TRANSFERS_REFETCH_INTERVAL
-} from '@config/constants';
-import {useL1Wallet, useL2Wallet} from '@providers';
+import {useConstants} from '@hooks';
+import {TransferLogContext, useWallets} from '@providers';
+import {TransferType} from '@starkgate/shared';
import {useInfiniteQuery, useQuery} from '@tanstack/react-query';
-import {TransferLogContext} from './transfer-log-context';
+const TOO_MANY_REQUESTS = 429;
export const TransferLogProvider = ({children}) => {
- const {account: accountL1} = useL1Wallet();
- const {account: accountL2} = useL2Wallet();
+ const {ethereumAccount, starknetAccount} = useWallets();
const [nextL1, setNextL1] = useState('');
const [nextL2, setNextL2] = useState('');
+ const {
+ GET_TRANSFERS_MAX_RETRY,
+ GET_PENDING_WITHDRAWALS_REFETCH_INTERVAL,
+ GET_TRANSFERS_REFETCH_INTERVAL
+ } = useConstants();
+
+ const retryFunc = useCallback(
+ (failureCount, error) =>
+ error.code !== TOO_MANY_REQUESTS && failureCount < GET_TRANSFERS_MAX_RETRY,
+ []
+ );
const pendingWithdrawalsQuery = useQuery({
- queryKey: [GET_PENDING_WITHDRAWALS_ENDPOINT, accountL1],
+ queryKey: [GET_PENDING_WITHDRAWALS_ENDPOINT, ethereumAccount],
queryFn: async () => {
- const {logs} = await fetchPendingWithdrawals(accountL1);
+ const {logs} = await fetchPendingWithdrawals(ethereumAccount);
return cloneLogsWithIds(logs);
},
- enabled: !!accountL1,
- refetchInterval: GET_PENDING_WITHDRAWALS_REFETCH_INTERVAL
+ enabled: !!ethereumAccount,
+ refetchInterval: GET_PENDING_WITHDRAWALS_REFETCH_INTERVAL,
+ refetchOnWindowFocus: false,
+ retry: retryFunc
});
const transfersQueryL1 = useInfiniteQuery({
- queryKey: [GET_TRANSFERS_ENDPOINT, accountL1],
+ queryKey: [GET_TRANSFERS_ENDPOINT, ethereumAccount],
queryFn: async ({pageParam = ''}) => {
- const {logs, next} = await fetchL1Transfers(accountL1, pageParam);
+ const {logs, next} = await fetchL1Transfers(ethereumAccount, pageParam);
setNextL1(next);
return cloneLogsWithIds(logs);
},
- enabled: !!accountL1,
+ enabled: !!ethereumAccount,
getNextPageParam: () => nextL1,
- refetchInterval: GET_TRANSFERS_REFETCH_INTERVAL
+ refetchInterval: GET_TRANSFERS_REFETCH_INTERVAL,
+ refetchOnWindowFocus: false,
+ retry: retryFunc
});
const transfersQueryL2 = useInfiniteQuery({
- queryKey: [GET_TRANSFERS_ENDPOINT, accountL2],
+ queryKey: [GET_TRANSFERS_ENDPOINT, starknetAccount],
queryFn: async ({pageParam = ''}) => {
- const {logs, next} = await fetchL2Transfers(accountL2, pageParam);
+ const {logs, next} = await fetchL2Transfers(starknetAccount, pageParam);
setNextL2(next);
return cloneLogsWithIds(logs);
},
- enabled: !!accountL2,
+ enabled: !!starknetAccount,
getNextPageParam: () => nextL2,
- refetchInterval: GET_TRANSFERS_REFETCH_INTERVAL
+ refetchInterval: GET_TRANSFERS_REFETCH_INTERVAL,
+ refetchOnWindowFocus: false,
+ retry: retryFunc
});
- const cloneLogsWithIds = useCallback(logs => logs.map(log => ({...log, id: log.l2TxHash})), []);
+ const cloneLogsWithIds = useCallback(
+ logs =>
+ logs.map(log => ({
+ ...log,
+ id: log.type === TransferType.DEPOSIT ? log.l1TxHash : log.l2TxHash
+ })),
+ []
+ );
const context = {
transfersQueryL1,
diff --git a/workspace/apps/starkgate/web/src/providers/TransferLogProvider/transfer-log-hooks.jsx b/workspace/apps/starkgate/web/src/providers/TransferLogProvider/transfer-log-hooks.jsx
index a1153e87..27fe6afb 100644
--- a/workspace/apps/starkgate/web/src/providers/TransferLogProvider/transfer-log-hooks.jsx
+++ b/workspace/apps/starkgate/web/src/providers/TransferLogProvider/transfer-log-hooks.jsx
@@ -1,6 +1,6 @@
import {useContext, useMemo} from 'react';
-import {useTransfer} from '@providers';
+import {useTransfer, useWallets} from '@providers';
import {isDeposit} from '@starkgate/shared';
import {TransferLogContext} from './transfer-log-context';
@@ -26,13 +26,15 @@ export const useTransfers = () => {
pendingWithdrawalsQuery: {data: withdrawals, isFetching: isFetchingWithdrawals}
} = useContext(TransferLogContext);
+ const {ethereumAccount, starknetAccount} = useWallets();
+
const doneFetching = !!(
!isFetchingL1 &&
!isFetchingL2 &&
!isFetchingWithdrawals &&
- transfersL1 &&
- transfersL2 &&
- withdrawals
+ (transfersL1 || !ethereumAccount) &&
+ (transfersL2 || !starknetAccount) &&
+ (withdrawals || !ethereumAccount)
);
return useMemo(() => {
diff --git a/workspace/apps/starkgate/web/src/providers/WalletProvider/WalletProvider.jsx b/workspace/apps/starkgate/web/src/providers/WalletProvider/WalletProvider.jsx
index 9467094b..b2a347f6 100644
--- a/workspace/apps/starkgate/web/src/providers/WalletProvider/WalletProvider.jsx
+++ b/workspace/apps/starkgate/web/src/providers/WalletProvider/WalletProvider.jsx
@@ -1,27 +1,222 @@
import PropTypes from 'prop-types';
-import React from 'react';
-import {UseWalletProvider as UseWalletProviderWrapper} from 'use-wallet';
+import {useCallback, useEffect, useMemo, useState} from 'react';
+import {hash} from 'starknet';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import {useDynamicContext, useUserWallets} from '@dynamic-labs/sdk-react-core';
import {useEnvs} from '@hooks';
+import {WalletContext, useTransfer} from '@providers';
+import {StarknetConnect} from '@starkware-webapps/starknet-connect';
+import {parseToFelt} from '@starkware-webapps/web3-utils';
export const WalletProvider = ({children}) => {
- const {pollBalanceInterval, POLL_BLOCK_NUMBER_INTERVAL, SUPPORTED_L1_CHAIN_ID} = useEnvs();
- return (
-
{
+ return wallets.find(wallet => wallet.chain === 'STARK');
+ }, [wallets]);
+
+ const starknetAccount = useMemo(() => {
+ return starknetWallet?.address;
+ }, [starknetWallet]);
+
+ const starknetWalletId = useMemo(() => {
+ return starknetWallet?.id;
+ }, [starknetWallet]);
+
+ const starknetWalletName = useMemo(() => {
+ return starknetWallet?.connector.name;
+ }, [starknetWallet]);
+
+ const isStarknetWalletConnected = useMemo(() => {
+ return !!starknetWallet;
+ }, [starknetWallet]);
+
+ const ethereumWallet = useMemo(() => {
+ return wallets.find(wallet => wallet.chain === 'EVM');
+ }, [wallets]);
+
+ const ethereumWalletId = useMemo(() => {
+ return ethereumWallet?.id;
+ }, [ethereumWallet]);
+
+ const ethereumWalletName = useMemo(() => {
+ return ethereumWallet?.connector.name;
+ }, [ethereumWallet]);
+
+ const ethereumAccount = useMemo(() => {
+ return ethereumWallet?.address;
+ }, [ethereumWallet]);
+
+ const isEthereumWalletConnected = useMemo(() => {
+ return !!ethereumWallet;
+ }, [ethereumWallet]);
+
+ const isConnected = useMemo(() => {
+ return isStarknetWalletConnected && isEthereumWalletConnected;
+ }, [isStarknetWalletConnected, isEthereumWalletConnected]);
+
+ const isDisconnected = useMemo(() => {
+ return !isStarknetWalletConnected && !isEthereumWalletConnected;
+ }, [isStarknetWalletConnected, isEthereumWalletConnected]);
+
+ const walletId = useMemo(() => {
+ return isL1 ? ethereumWalletId : starknetWalletId;
+ }, [isL1, starknetWalletId, ethereumWalletId]);
+
+ const account = useMemo(() => {
+ return isL1 ? ethereumAccount : starknetAccount;
+ }, [isL1, starknetAccount, ethereumAccount]);
+
+ const accountHash = useMemo(() => {
+ return (
+ isConnected &&
+ hash.computeHashOnElements([
+ parseToFelt(ethereumAccount).toString(),
+ parseToFelt(starknetAccount).toString()
+ ])
+ );
+ }, [isConnected, ethereumAccount, starknetAccount]);
+
+ const getStarknetSigner = useCallback(async () => {
+ if (isStarknetWalletConnected) {
+ return await starknetWallet.connector.getSigner();
+ }
+ }, [isStarknetWalletConnected, starknetWallet]);
+
+ const getEthereumSigner = useCallback(async () => {
+ if (isEthereumWalletConnected) {
+ return await ethereumWallet.connector.ethers.getSigner();
+ }
+ }, [isEthereumWalletConnected, ethereumWallet]);
+
+ const getEthereumProvider = useCallback(async () => {
+ if (isEthereumWalletConnected) {
+ return await ethereumWallet.connector.ethers.getWeb3Provider();
+ }
+ }, [isEthereumWalletConnected, ethereumWallet]);
+
+ const getStarknetProvider = useCallback(() => starknetProvider, [starknetProvider]);
+
+ const logout = useCallback(async () => {
+ if (wallets.length < 2) {
+ await handleLogOut();
+ } else {
+ await setPrimaryWallet(isL1 ? starknetWalletId : ethereumWalletId);
+ await handleUnlinkWallet(isL1 ? ethereumWalletId : starknetWalletId);
+ }
+ }, [
+ isL1,
+ wallets,
+ ethereumWalletId,
+ starknetWalletId,
+ handleUnlinkWallet,
+ setPrimaryWallet,
+ handleLogOut
+ ]);
+
+ const login = useCallback(() => {
+ setShowAuthFlow(true);
+ }, []);
+
+ const walletsByNetwork = useMemo(
+ () =>
+ userWallets.filter(
+ ({chain, network}) =>
+ network === (chain === 'EVM' ? SUPPORTED_L1_CHAIN_ID : SUPPORTED_L2_CHAIN_ID)
+ ),
+ [userWallets]
+ );
+
+ useEffect(() => {
+ const starknetConnect = StarknetConnect.create({
+ network: CHAIN,
+ providers: [
+ {
+ name: StarknetConnect.Provider.BLAST,
+ apiKey: RPC_PROVIDER_BLAST_API_KEY
+ },
+ {
+ name: StarknetConnect.Provider.CHAINSTACK,
+ nodeId: RPC_PROVIDER_CHAINSTACK_NODE_ID,
+ apiKey: RPC_PROVIDER_CHAINSTACK_API_KEY
}
+ ]
+ });
+
+ const provider = starknetConnect.getProvider();
+ setStarknetProvider(provider);
+ }, []);
+
+ useDeepCompareEffect(() => {
+ // update wallets only for deep changes
+ setWallets(prevWallets => {
+ if (prevWallets.length < 2) {
+ return walletsByNetwork;
+ } else {
+ // if there are two wallets, check if they are the same
+ const prevAddresses = prevWallets.map(wallet => wallet.address);
+ const newAddresses = walletsByNetwork.map(wallet => wallet.address);
+ const areEqual = prevAddresses.every(element => !!newAddresses.includes(element));
+ return areEqual ? prevWallets : walletsByNetwork;
+ }
+ });
+ }, [userWallets]);
+
+ useEffect(() => {
+ if (isConnected) {
+ // set primary wallet in accordance with the current chain
+ setPrimaryWallet(isL1 ? ethereumWalletId : starknetWalletId);
+ }
+ }, [isL1]);
+
+ return (
+
{children}
-
+
);
};
+WalletProvider.displayName = 'WalletManagerProvider';
+
WalletProvider.propTypes = {
- children: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+ children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+ isConnecting: PropTypes.bool,
+ setConnectingChain: PropTypes.func
};
diff --git a/workspace/apps/starkgate/web/src/providers/WalletProvider/index.jsx b/workspace/apps/starkgate/web/src/providers/WalletProvider/index.jsx
new file mode 100644
index 00000000..ccd490a5
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/providers/WalletProvider/index.jsx
@@ -0,0 +1,4 @@
+export * from './wallet-context';
+export * from './WalletProvider';
+export * from './WalletProvider';
+export * from './wallet-hooks';
diff --git a/workspace/apps/starkgate/web/src/providers/WalletProvider/wallet-context.jsx b/workspace/apps/starkgate/web/src/providers/WalletProvider/wallet-context.jsx
new file mode 100644
index 00000000..34223146
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/providers/WalletProvider/wallet-context.jsx
@@ -0,0 +1,29 @@
+import {createContext} from 'react';
+
+export const WalletContext = createContext({
+ // useWalletLogin
+ isConnected: false,
+ isDisconnected: false,
+ login: () => null,
+ isStarknetWalletConnected: () => false,
+ isEthereumWalletConnected: () => false,
+ // useWallet
+ logout: () => Promise.resolve(null),
+ account: null,
+ accountHash: null,
+ walletId: null,
+ // useEthereumWallet
+ ethereumWalletId: null,
+ ethereumWalletName: null,
+ ethereumWallet: null,
+ ethereumAccount: null,
+ getEthereumSigner: () => null,
+ getEthereumProvider: () => null,
+ // useStarknetWallet
+ starknetWalletId: null,
+ starknetWalletName: null,
+ starknetAccount: null,
+ starknetWallet: null,
+ getStarknetSigner: () => null,
+ getStarknetProvider: () => null
+});
diff --git a/workspace/apps/starkgate/web/src/providers/WalletProvider/wallet-hooks.jsx b/workspace/apps/starkgate/web/src/providers/WalletProvider/wallet-hooks.jsx
new file mode 100644
index 00000000..66f3e06b
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/providers/WalletProvider/wallet-hooks.jsx
@@ -0,0 +1,84 @@
+import {useContext} from 'react';
+
+import {WalletContext} from '@providers';
+
+export const useWallet = () => {
+ const {logout, account, accountHash, walletId} = useContext(WalletContext);
+
+ return {
+ logout,
+ account,
+ accountHash,
+ walletId
+ };
+};
+
+export const useEthereumWallet = () => {
+ const {
+ ethereumWalletId,
+ ethereumWalletName,
+ ethereumWallet,
+ ethereumAccount,
+ getEthereumSigner,
+ getEthereumProvider
+ } = useContext(WalletContext);
+
+ return {
+ ethereumWalletId,
+ ethereumWalletName,
+ ethereumWallet,
+ ethereumAccount,
+ getEthereumSigner,
+ getEthereumProvider
+ };
+};
+
+export const useStarknetWallet = () => {
+ const {
+ starknetWalletId,
+ starknetWalletName,
+ starknetAccount,
+ starknetWallet,
+ getStarknetSigner,
+ getStarknetProvider
+ } = useContext(WalletContext);
+
+ return {
+ starknetWalletId,
+ starknetWalletName,
+ starknetAccount,
+ starknetWallet,
+ getStarknetSigner,
+ getStarknetProvider
+ };
+};
+
+export const useWallets = () => {
+ const starknetWallet = useStarknetWallet();
+ const ethereumWallet = useEthereumWallet();
+
+ return {
+ ...starknetWallet,
+ ...ethereumWallet
+ };
+};
+
+export const useWalletLogin = () => {
+ const {
+ isConnected,
+ isConnecting,
+ isDisconnected,
+ isStarknetWalletConnected,
+ isEthereumWalletConnected,
+ login
+ } = useContext(WalletContext);
+
+ return {
+ isConnected,
+ isConnecting,
+ isDisconnected,
+ isStarknetWalletConnected,
+ isEthereumWalletConnected,
+ login
+ };
+};
diff --git a/workspace/apps/starkgate/web/src/providers/WalletsProvider/WalletsProvider.jsx b/workspace/apps/starkgate/web/src/providers/WalletsProvider/WalletsProvider.jsx
deleted file mode 100644
index b8f6dfbc..00000000
--- a/workspace/apps/starkgate/web/src/providers/WalletsProvider/WalletsProvider.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {useEffect, useReducer, useState} from 'react';
-import {hash} from 'starknet';
-
-import {useEnvs, useEthereumWallet, useStarknetWallet} from '@hooks';
-import {parseToFelt} from '@starkware-webapps/web3-utils';
-
-import {WalletsContext} from './wallets-context';
-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 = useEthereumWallet({
- enableScreening: ENABLE_SCREENING
- });
- const walletL2 = useStarknetWallet();
-
- const {account: accountL1, status: statusL1, error: errorL1, config: configL1} = walletL1;
- const {account: accountL2, status: statusL2, error: errorL2, config: configL2} = walletL2;
-
- useEffect(() => {
- updateWalletL2(walletL2);
- }, [accountL2, statusL2, errorL2]);
-
- useEffect(() => {
- updateWalletL1(walletL1);
- }, [accountL1, statusL1, errorL1]);
-
- useEffect(() => {
- if (accountL1 && accountL2) {
- setAccountHash(calcAccountHash(accountL1, accountL2));
- } else if (accountHash) {
- setAccountHash('');
- }
- }, [accountL1, accountL2]);
-
- useEffect(() => {
- setWalletConfigL1(configL1);
- }, [configL1]);
-
- useEffect(() => {
- setWalletConfigL2(configL2);
- }, [configL2]);
-
- const connectWalletL1 = async walletConfig => {
- return walletL1.connect(walletConfig);
- };
-
- const resetWalletL1 = () => {
- return walletL1.reset();
- };
-
- const connectWalletL2 = async params => {
- return walletL2.connect(params);
- };
-
- const resetWalletL2 = () => {
- return walletL2.reset();
- };
-
- const calcAccountHash = (account1, account2) => {
- return hash.computeHashOnElements([
- parseToFelt(account1).toString(),
- parseToFelt(account2).toString()
- ]);
- };
- const updateWalletL1 = payload => {
- dispatch({
- type: actions.UPDATE_WALLET_L1,
- payload
- });
- };
-
- const updateWalletL2 = payload => {
- dispatch({
- type: actions.UPDATE_WALLET_L2,
- payload
- });
- };
-
- const setWalletConfigL1 = payload => {
- dispatch({
- type: actions.SET_WALLET_CONFIG_L1,
- payload
- });
- };
-
- const setWalletConfigL2 = payload => {
- dispatch({
- type: actions.SET_WALLET_CONFIG_L2,
- payload
- });
- };
-
- const context = {
- ...state,
- accountHash,
- connectWalletL1,
- connectWalletL2,
- resetWalletL1,
- resetWalletL2
- };
-
- return
{children};
-};
-
-WalletsProvider.propTypes = {
- children: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
-};
diff --git a/workspace/apps/starkgate/web/src/providers/WalletsProvider/index.jsx b/workspace/apps/starkgate/web/src/providers/WalletsProvider/index.jsx
deleted file mode 100644
index dda2c834..00000000
--- a/workspace/apps/starkgate/web/src/providers/WalletsProvider/index.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './wallets-reducer';
-export * from './wallets-context';
-export * from './wallets-hooks';
-export * from './WalletsProvider';
diff --git a/workspace/apps/starkgate/web/src/providers/WalletsProvider/wallets-context.jsx b/workspace/apps/starkgate/web/src/providers/WalletsProvider/wallets-context.jsx
deleted file mode 100644
index d096114c..00000000
--- a/workspace/apps/starkgate/web/src/providers/WalletsProvider/wallets-context.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {createContext} from 'react';
-
-import {initialState} from './wallets-reducer';
-
-export const WalletsContext = createContext({
- ...initialState,
- accountHash: '',
- connectWalletL1: () => ({}),
- connectWalletL2: () => ({}),
- resetWalletL1: () => ({}),
- resetWalletL2: () => ({})
-});
diff --git a/workspace/apps/starkgate/web/src/providers/WalletsProvider/wallets-hooks.jsx b/workspace/apps/starkgate/web/src/providers/WalletsProvider/wallets-hooks.jsx
deleted file mode 100644
index fe8d7867..00000000
--- a/workspace/apps/starkgate/web/src/providers/WalletsProvider/wallets-hooks.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import {useCallback, useContext} from 'react';
-
-import {useTransfer} from '@providers';
-import {isL1Network} from '@starkware-webapps/enums';
-
-import {WalletsContext} from './wallets-context';
-
-export const useWallets = network => {
- const walletL1 = useL1Wallet();
- const walletL2 = useL2Wallet();
- const {isL1} = useTransfer();
-
- const getWallet = () => {
- if (network) {
- return isL1Network(network) ? walletL1 : walletL2;
- }
- return isL1 ? walletL1 : walletL2;
- };
-
- return getWallet();
-};
-
-export const useAccountHash = () => {
- const {accountHash} = useContext(WalletsContext);
- return accountHash;
-};
-
-export const useL1Wallet = () => {
- const wallets = useContext(WalletsContext);
-
- const connectWallet = useCallback(
- walletConfig => wallets.connectWalletL1(walletConfig),
- [wallets]
- );
-
- const resetWallet = useCallback(() => {
- return wallets.resetWalletL1();
- }, [wallets]);
-
- return {
- connectWallet,
- resetWallet,
- ...wallets.walletL1
- };
-};
-
-export const useL2Wallet = () => {
- const wallets = useContext(WalletsContext);
-
- const connectWallet = useCallback(params => wallets.connectWalletL2(params), [wallets]);
-
- const resetWallet = useCallback(() => {
- return wallets.resetWalletL2();
- }, [wallets]);
-
- return {
- connectWallet,
- resetWallet,
- ...wallets.walletL2
- };
-};
-
-export const useWalletsStatus = () => {
- const {status: statusL1} = useL1Wallet();
- const {status: statusL2} = useL2Wallet();
-
- return {
- statusL1,
- statusL2
- };
-};
diff --git a/workspace/apps/starkgate/web/src/providers/WalletsProvider/wallets-reducer.jsx b/workspace/apps/starkgate/web/src/providers/WalletsProvider/wallets-reducer.jsx
deleted file mode 100644
index d9b70ac5..00000000
--- a/workspace/apps/starkgate/web/src/providers/WalletsProvider/wallets-reducer.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import {WalletStatus} from '@starkware-webapps/enums';
-
-export const actions = {
- UPDATE_WALLET_L1: 'Wallets/UPDATE_WALLET_L1',
- UPDATE_WALLET_L2: 'Wallets/UPDATE_WALLET_L2',
- SET_WALLET_CONFIG_L1: 'Wallets/SET_WALLET_CONFIG_L1',
- SET_WALLET_CONFIG_L2: 'Wallets/SET_WALLET_CONFIG_L2'
-};
-
-const initialWalletState = {
- account: '',
- status: WalletStatus.DISCONNECTED,
- chainName: '',
- chainId: null,
- error: null,
- config: null
-};
-
-export const initialState = {
- walletL1: {
- ...initialWalletState
- },
- walletL2: {
- ...initialWalletState
- }
-};
-
-export const reducer = (state, action) => {
- switch (action.type) {
- case actions.UPDATE_WALLET_L1:
- return {
- ...state,
- walletL1: {...state.walletL1, ...action.payload}
- };
-
- case actions.UPDATE_WALLET_L2:
- return {
- ...state,
- walletL2: {...state.walletL2, ...action.payload}
- };
-
- case actions.SET_WALLET_CONFIG_L1:
- return {
- ...state,
- walletL1: {
- ...state.walletL1,
- config: action.payload
- }
- };
-
- case actions.SET_WALLET_CONFIG_L2:
- return {
- ...state,
- walletL2: {
- ...state.walletL2,
- config: action.payload
- }
- };
-
- default:
- return state;
- }
-};
diff --git a/workspace/apps/starkgate/web/src/providers/index.jsx b/workspace/apps/starkgate/web/src/providers/index.jsx
index 76c3fefb..164afc77 100644
--- a/workspace/apps/starkgate/web/src/providers/index.jsx
+++ b/workspace/apps/starkgate/web/src/providers/index.jsx
@@ -1,4 +1,5 @@
import {AppProvider} from './AppProvider';
+import {DynamicProvider} from './DynamicProvider/DynamicProvider';
import {MenuProvider} from './MenuProvider';
import {ModalProvider} from './ModalProvider';
import {QueryClientProvider} from './QueryClientProvider/QueryClientProvider';
@@ -6,8 +7,7 @@ import {SourceProvider} from './SourceProvider';
import {TokensProvider} from './TokensProvider';
import {TransferLogProvider} from './TransferLogProvider';
import {TransferProvider} from './TransferProvider';
-import {WalletProvider} from './WalletProvider/WalletProvider';
-import {WalletsProvider} from './WalletsProvider';
+import {WalletProvider} from './WalletProvider';
import {combineProviders} from './combine-providers';
export * from './AppProvider';
@@ -18,8 +18,7 @@ export * from './SourceProvider';
export * from './TokensProvider';
export * from './TransferLogProvider';
export * from './TransferProvider';
-export * from './WalletProvider/WalletProvider';
-export * from './WalletsProvider';
+export * from './WalletProvider';
export const AppProviders = combineProviders([
QueryClientProvider,
@@ -27,8 +26,8 @@ export const AppProviders = combineProviders([
MenuProvider,
TransferProvider,
ModalProvider,
+ DynamicProvider,
WalletProvider,
- WalletsProvider,
TokensProvider,
TransferLogProvider,
SourceProvider
diff --git a/workspace/apps/starkgate/web/src/routes/Bridge/Bridge.jsx b/workspace/apps/starkgate/web/src/routes/Bridge/Bridge.jsx
index a8ba39cf..90c53f18 100644
--- a/workspace/apps/starkgate/web/src/routes/Bridge/Bridge.jsx
+++ b/workspace/apps/starkgate/web/src/routes/Bridge/Bridge.jsx
@@ -3,29 +3,33 @@ import React, {useEffect} from 'react';
import {setUser} from '@analytics';
import {MenuType} from '@enums';
import {Account, SelectToken, Source, ToastManager} from '@features';
-import {useAccountChange, useIsMaxTotalBalanceExceeded, useMenuTracking} from '@hooks';
import {
- useBridgeIsFull,
- useL1Wallet,
- useL2Wallet,
- useLogin,
- useMenu,
- useSelectedToken
-} from '@providers';
+ useAccountChange,
+ useEnvs,
+ useHeadTranslation,
+ useIsMaxTotalBalanceExceeded,
+ useMenuTracking,
+ useTitle
+} from '@hooks';
+import {useBridgeIsFull, useMenu, useSelectedToken, useWalletLogin, useWallets} from '@providers';
import styles from './Bridge.module.scss';
export const Bridge = () => {
const trackMenu = useMenuTracking();
const {menu, menuProps} = useMenu();
- const {account: accountL1} = useL1Wallet();
- const {account: accountL2} = useL2Wallet();
+ const {ethereumAccount, starknetAccount} = useWallets();
+ const {isConnected} = useWalletLogin();
const {lockBridge, unlockBridge} = useBridgeIsFull();
const selectedToken = useSelectedToken();
const isMaxTotalBalanceExceeded = useIsMaxTotalBalanceExceeded();
- const {isLoggedIn} = useLogin();
+ const titles = useHeadTranslation('title.bridge');
+
+ const {CHAIN} = useEnvs();
+ useTitle(titles[CHAIN]);
+
useAccountChange(accountHash => {
- accountHash && setUser({accountL1, accountL2});
+ accountHash && setUser({ethereumAccount, starknetAccount});
}, []);
useEffect(() => {
@@ -38,8 +42,8 @@ export const Bridge = () => {
exceeded ? lockBridge() : unlockBridge();
}
- isLoggedIn && maybeLockBridge();
- }, [isMaxTotalBalanceExceeded, selectedToken, isLoggedIn]);
+ isConnected && maybeLockBridge();
+ }, [isMaxTotalBalanceExceeded, selectedToken, isConnected]);
const renderMenu = () => {
switch (menu) {
diff --git a/workspace/apps/starkgate/web/src/routes/Faq/Faq.jsx b/workspace/apps/starkgate/web/src/routes/Faq/Faq.jsx
index 09a606d4..240c6dd9 100644
--- a/workspace/apps/starkgate/web/src/routes/Faq/Faq.jsx
+++ b/workspace/apps/starkgate/web/src/routes/Faq/Faq.jsx
@@ -3,7 +3,7 @@ import React, {useEffect, useState} from 'react';
import {ReactComponent as MinusCircle} from '@assets/svg/icons/minus-circle.svg';
import {ReactComponent as PlusCircle} from '@assets/svg/icons/plus-circle.svg';
-import {useFaqTracking, useFaqTranslation} from '@hooks';
+import {useEnvs, useFaqTracking, useFaqTranslation, useHeadTranslation, useTitle} from '@hooks';
import {FullScreenContainer} from '@ui';
import styles from './Faq.module.scss';
@@ -11,6 +11,10 @@ import Faqs from './Faqs';
export const Faq = () => {
const [trackFaqScreen] = useFaqTracking();
+ const titles = useHeadTranslation('title.faq');
+
+ const {CHAIN} = useEnvs();
+ useTitle(titles[CHAIN]);
useEffect(() => {
trackFaqScreen();
diff --git a/workspace/apps/starkgate/web/src/routes/Terms/Terms.jsx b/workspace/apps/starkgate/web/src/routes/Terms/Terms.jsx
index 582280ca..ca213ce9 100644
--- a/workspace/apps/starkgate/web/src/routes/Terms/Terms.jsx
+++ b/workspace/apps/starkgate/web/src/routes/Terms/Terms.jsx
@@ -1,41 +1,28 @@
-import PropTypes from 'prop-types';
-import React, {useEffect, useRef, useState} from 'react';
-import {useNavigate} from 'react-router-dom';
+import React, {useEffect} from 'react';
-import {useColors, useTermsTracking, useTermsTranslation} from '@hooks';
-import {useL1Wallet, useL2Wallet, useTerms} from '@providers';
-import {toClasses} from '@starkware-webapps/utils-browser';
-import {Button, FullScreenContainer} from '@ui';
+import {useEnvs, useHeadTranslation, useTermsTracking, useTermsTranslation, useTitle} from '@hooks';
+import {FullScreenContainer} from '@ui';
import styles from './Terms.module.scss';
import TermsOfUse from './TermsOfUse';
export const Terms = () => {
const [trackTermsScreen] = useTermsTracking();
- const containerRef = useRef();
- const {isAcceptTerms} = useTerms();
- const [isAcceptButtonEnabled, setIsAcceptButtonEnabled] = useState(false);
+ const titles = useHeadTranslation('title.terms');
+
+ const {CHAIN} = useEnvs();
+ useTitle(titles[CHAIN]);
useEffect(() => {
trackTermsScreen();
}, []);
- const onScroll = () => {
- if (containerRef.current) {
- const {scrollTop, scrollHeight, clientHeight} = containerRef.current;
- if (Math.ceil(scrollTop + clientHeight) >= scrollHeight) {
- setIsAcceptButtonEnabled(true);
- }
- }
- };
-
return (
-
+
- {!isAcceptTerms && }
);
};
@@ -50,46 +37,3 @@ const Header = () => {
);
};
-
-const AcceptButton = ({isDisabled}) => {
- const [, trackAcceptClick] = useTermsTracking();
- const {acceptBtnTxt} = useTermsTranslation();
- const {acceptTerms} = useTerms();
- const {colorBrilliantAzure, colorWhite, colorBrightNavyBlue, colorLapizLazuli} = useColors();
- const {account: accountL1} = useL1Wallet();
- const {account: accountL2} = useL2Wallet();
- const navigate = useNavigate();
- const appUrl = window.location.origin;
-
- const accept = () => {
- trackAcceptClick({accountL1, accountL2});
- acceptTerms();
- navigate('/');
- };
-
- return (
-
- );
-};
-
-AcceptButton.propTypes = {
- isDisabled: PropTypes.bool
-};
diff --git a/workspace/apps/starkgate/web/src/routes/Terms/Terms.module.scss b/workspace/apps/starkgate/web/src/routes/Terms/Terms.module.scss
index 6ae15c4b..9b77a675 100644
--- a/workspace/apps/starkgate/web/src/routes/Terms/Terms.module.scss
+++ b/workspace/apps/starkgate/web/src/routes/Terms/Terms.module.scss
@@ -43,7 +43,6 @@
&::marker {
font-size: 18px;
- font-weight: bold;
font-weight: 700;
}
diff --git a/workspace/apps/starkgate/web/src/styles/colors.module.scss b/workspace/apps/starkgate/web/src/styles/colors.module.scss
index 64b7a828..2cd00c4b 100644
--- a/workspace/apps/starkgate/web/src/styles/colors.module.scss
+++ b/workspace/apps/starkgate/web/src/styles/colors.module.scss
@@ -6,7 +6,6 @@ $--color-raptures-light: #f7f3e7;
$--color-space-cadet: #16184e;
$--color-space-cadet-1: #1c1e52;
$--color-space-cadet-2: #23255b;
-$--color-space-cadet-3: #16184e;
$--color-indigo: #292c6c;
$--color-dark-slate-blue: #3f4183;
$--color-american-blue: #3b3e76;
diff --git a/workspace/apps/starkgate/web/src/styles/dynamic.theme.scss b/workspace/apps/starkgate/web/src/styles/dynamic.theme.scss
new file mode 100644
index 00000000..3822d81e
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/styles/dynamic.theme.scss
@@ -0,0 +1,73 @@
+body {
+ --BASE_1: #171543;
+ --BASE_2: #2a2852;
+ --BASE_3: #363564;
+ --BASE_4: #33315a;
+ --BASE_5: linear-gradient(180deg, #2c2c55 0%, #0f0d2c 100%);
+ --TEXT_BASE: 255, 255, 255;
+ --TEXT_PRIMARY: rgb(var(--TEXT_BASE), 95%);
+ --TEXT_SECONDARY: rgb(var(--TEXT_BASE), 55%);
+ --TEXT_TERTIARY: rgb(var(--TEXT_BASE), 40%);
+ --TEXT_LINK: #69a5ff;
+ --CONNECTION_GREEN_1: #46ffbc;
+ --CONNECTION_GREEN_2: rgba(70, 255, 188, 0.1);
+ --ERROR_1: #ff6a6a;
+ --ERROR_2: rgba(255, 106, 106, 0.2);
+ --OVERLAY: rgba(0, 0, 0, 0.56);
+ --HOVER: rgba(255, 255, 255, 0.12);
+ --LOADING_ANIMATION_GRADIENT: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0.1) 0%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ --dynamic-base-1: var(--BASE_1);
+ --dynamic-base-2: var(--BASE_2);
+ --dynamic-base-3: var(--BASE_3);
+ --dynamic-base-4: var(--BASE_4);
+ --dynamic-base-5: var(--BASE_5);
+ --dynamic-connection-green: var(--CONNECTION_GREEN_1);
+ --dynamic-hover: var(--HOVER);
+ --dynamic-error-1: var(--ERROR_1);
+ --dynamic-error-2: var(--ERROR_2);
+ --dynamic-footer-border-top: var(--BASE_4) 0.0625rem solid;
+ --dynamic-footer-background-color: var(--BASE_1);
+ --dynamic-footer-text-color: var(--TEXT_PRIMARY);
+ --dynamic-loading-animation-gradient: var(--LOADING_ANIMATION_GRADIENT);
+ --dynamic-overlay: var(--OVERLAY);
+ --dynamic-shadow-up-1: 0 --px-to-rem(-8) --px-to-rem(48) --px-to-rem(-8) rgba(109, 121, 165, 0.16);
+ --dynamic-text-link: var(--TEXT_LINK);
+ --dynamic-text-primary: var(--TEXT_PRIMARY);
+ --dynamic-text-secondary: var(--TEXT_SECONDARY);
+ --dynamic-text-tertiary: var(--TEXT_TERTIARY);
+ --dynamic-badge-background: var(--BASE_3);
+ --dynamic-badge-color: var(--TEXT_SECONDARY);
+ --dynamic-search-bar-background: var(--BASE_2);
+ --dynamic-search-bar-background-hover: var(--BASE_2);
+ --dynamic-search-bar-background-focus: var(--BASE_2);
+ --dynamic-search-bar-border: --px-to-rem(1) solid var(--BASE_3);
+ --dynamic-search-bar-border-hover: --px-to-rem(1) solid var(--BASE_4);
+ --dynamic-search-bar-border-focus: --px-to-rem(1) solid var(--BASE_4);
+ --dynamic-footer-border: --px-to-rem(1) solid var(--BASE_4);
+ --dynamic-wallet-list-tile-background: var(--BASE_3);
+ --dynamic-wallet-list-tile-background-hover: var(--BASE_4);
+ --dynamic-connect-button-background: var(--BASE_1);
+ --dynamic-connect-button-color: var(--TEXT_PRIMARY);
+ --dynamic-connect-button-border: --px-to-rem(1) solid var(--BASE_4);
+ --dynamic-connect-button-color-hover: var(--TEXT_PRIMARY);
+ --dynamic-connect-button-border-hover: --px-to-rem(1) solid var(--BASE_4);
+ --dynamic-tooltip-color: var(--TEXT_PRIMARY);
+ --dynamic-tooltip-text-color: var(--BASE_1);
+ --dynamic-modal-backdrop-background: rgba(52, 64, 84, 0.6);
+ --dynamic-modal-backdrop-filter: blur(20px);
+ --dynamic-button-primary-background: var(--BASE_2);
+ --dynamic-button-primary-border: var(--BASE_4);
+}
+
+[data-dynamic-theme-brand='bold'] {
+ --dynamic-footer-text-color: var(--TEXT_PRIMARY);
+}
+
+[data-dynamic-theme-brand='subtle'] {
+ --dynamic-footer-arrow-color: var(--TEXT_TERTIARY);
+ --dynamic-footer-icon-color: var(--TEXT_TERTIARY);
+}
diff --git a/workspace/apps/starkgate/web/vite.config.ts b/workspace/apps/starkgate/web/vite.config.ts
index 77055f34..fad207a3 100644
--- a/workspace/apps/starkgate/web/vite.config.ts
+++ b/workspace/apps/starkgate/web/vite.config.ts
@@ -5,6 +5,7 @@ import dynamicImport from 'vite-plugin-dynamic-import';
import VitePluginHtmlEnv from 'vite-plugin-html-env';
import svgr from 'vite-plugin-svgr';
+import {NodeGlobalsPolyfillPlugin} from '@esbuild-plugins/node-globals-polyfill';
import react from '@vitejs/plugin-react';
export default defineConfig(({mode}: ConfigEnv) => {
@@ -40,6 +41,15 @@ export default defineConfig(({mode}: ConfigEnv) => {
]
})
],
+ optimizeDeps: {
+ esbuildOptions: {
+ plugins: [
+ NodeGlobalsPolyfillPlugin({
+ process: true
+ })
+ ]
+ }
+ },
resolve: {
alias: [
{find: '@analytics', replacement: resolve(__dirname, 'src/analytics')},
@@ -55,11 +65,13 @@ export default defineConfig(({mode}: ConfigEnv) => {
{find: '@utils', replacement: resolve(__dirname, 'src/utils')},
{find: '@containers', replacement: resolve(__dirname, 'src/components/Containers')},
{find: '@ui', replacement: resolve(__dirname, 'src/components/UI')},
- {find: '@features', replacement: resolve(__dirname, 'src/components/Features')}
+ {find: '@features', replacement: resolve(__dirname, 'src/components/Features')},
+ {find: 'stream', replacement: 'stream-browserify'}
]
},
define: {
global: 'window',
+ 'process.env': {},
APP_VERSION: JSON.stringify(process.env.npm_package_version),
APP_NAME: JSON.stringify(process.env.npm_package_name)
},
diff --git a/workspace/packages/config/package.json b/workspace/packages/config/package.json
index 1602f932..b501ba11 100644
--- a/workspace/packages/config/package.json
+++ b/workspace/packages/config/package.json
@@ -18,7 +18,7 @@
],
"scripts": {
"prebuild": "pnpm run clean",
- "build": "pnpm run prebuild && vite build",
+ "build": "vite build",
"clean": "rm -rf ./dist",
"dev": "pnpm run prebuild && vite build --watch --mode development",
"docs:generate": "typedoc",
@@ -26,7 +26,8 @@
"format": "sort-package-json && prettier --write \"**/*.+(ts|js|cjs|json|md|html|yml)\"",
"lint": "eslint .",
"lint:fix": "eslint --fix .",
- "test": "echo \"No tests found\""
+ "test": "echo \"No tests found\"",
+ "ts-declarations": "tsc --emitDeclarationOnly"
},
"devDependencies": {
"@starkware-webapps/tsconfig": "workspace:*",
@@ -34,8 +35,7 @@
"eslint-config-ts": "workspace:*",
"typedoc": "^0.23.10",
"typedoc-plugin-markdown": "^3.13.4",
- "typescript": "^4.7.3",
- "vite": "^4.1.0",
- "vite-plugin-dts": "^2.0.1"
+ "typescript": "^5.3.3",
+ "vite": "^4.2.0"
}
}
diff --git a/workspace/packages/config/tsconfig.json b/workspace/packages/config/tsconfig.json
index 6c526268..2028799f 100644
--- a/workspace/packages/config/tsconfig.json
+++ b/workspace/packages/config/tsconfig.json
@@ -1,6 +1,7 @@
{
"extends": "@starkware-webapps/tsconfig/base.json",
"compilerOptions": {
+ "declarationDir": "dist/types",
"outDir": "dist"
},
"include": ["src"],
diff --git a/workspace/packages/config/tsconfig.node.json b/workspace/packages/config/tsconfig.node.json
index 2f1c89ad..410adea9 100644
--- a/workspace/packages/config/tsconfig.node.json
+++ b/workspace/packages/config/tsconfig.node.json
@@ -1,6 +1,7 @@
{
"extends": "@starkware-webapps/tsconfig/node.json",
"compilerOptions": {
+ "composite": true,
"module": "ESNext"
},
"include": ["vite.config.ts"]
diff --git a/workspace/packages/config/vite.config.ts b/workspace/packages/config/vite.config.ts
index dfb3fe63..e15172b8 100644
--- a/workspace/packages/config/vite.config.ts
+++ b/workspace/packages/config/vite.config.ts
@@ -1,6 +1,5 @@
import {resolve} from 'path';
import {defineConfig} from 'vite';
-import dts from 'vite-plugin-dts';
type ViteConfigInput = {
mode: string;
@@ -10,13 +9,8 @@ export default ({mode}: ViteConfigInput) => {
const prodMode = mode === 'production';
return defineConfig({
- plugins: [
- dts({
- insertTypesEntry: true,
- outputDir: 'dist/types'
- })
- ],
build: {
+ emptyOutDir: false,
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'WebAppsConfig',
diff --git a/workspace/packages/enums/package.json b/workspace/packages/enums/package.json
index d8c90439..38455070 100644
--- a/workspace/packages/enums/package.json
+++ b/workspace/packages/enums/package.json
@@ -18,7 +18,7 @@
],
"scripts": {
"prebuild": "pnpm run clean",
- "build": "pnpm run prebuild && vite build",
+ "build": "vite build",
"clean": "rm -rf ./dist",
"dev": "pnpm run prebuild && vite build --watch --mode development",
"docs:generate": "typedoc",
@@ -26,7 +26,8 @@
"format": "sort-package-json && prettier --write \"**/*.+(ts|js|cjs|json|md|html|yml)\"",
"lint": "eslint .",
"lint:fix": "eslint --fix .",
- "test": "echo \"No tests found\""
+ "test": "echo \"No tests found\"",
+ "ts-declarations": "tsc --emitDeclarationOnly"
},
"devDependencies": {
"@starkware-webapps/tsconfig": "workspace:*",
@@ -34,8 +35,7 @@
"eslint-config-ts": "workspace:*",
"typedoc": "^0.23.10",
"typedoc-plugin-markdown": "^3.13.4",
- "typescript": "^4.7.3",
- "vite": "^4.1.0",
- "vite-plugin-dts": "^2.0.1"
+ "typescript": "^5.3.3",
+ "vite": "^4.2.0"
}
}
diff --git a/workspace/packages/enums/src/ChainInfo.ts b/workspace/packages/enums/src/ChainInfo.ts
index 341d9f00..1515c4ea 100644
--- a/workspace/packages/enums/src/ChainInfo.ts
+++ b/workspace/packages/enums/src/ChainInfo.ts
@@ -4,7 +4,7 @@ export type IChainInfo = {
NAME: string;
EXPLORER_URL: string;
CHAIN?: string;
- ID_PREFIX?: string;
+ DISABLED?: boolean;
};
export type ChainsInfo = {
@@ -25,20 +25,28 @@ export const ChainInfo: ChainsInfo = {
[ChainTypeL1.GOERLI]: {
NAME: 'Ethereum Goerli',
EXPLORER_URL: 'https://goerli.etherscan.io'
+ },
+ [ChainTypeL1.SEPOLIA]: {
+ NAME: 'Ethereum Sepolia',
+ EXPLORER_URL: 'https://sepolia.etherscan.io'
}
},
L2: {
[ChainTypeL2.MAIN]: {
CHAIN: 'Mainnet',
NAME: 'Starknet Mainnet',
- ID_PREFIX: '23448594291968334',
EXPLORER_URL: 'https://starkscan.co'
},
[ChainTypeL2.GOERLI]: {
CHAIN: 'Goerli',
NAME: 'Starknet Goerli',
- ID_PREFIX: '1536727068981429685321',
EXPLORER_URL: 'https://testnet.starkscan.co'
+ },
+ [ChainTypeL2.SEPOLIA]: {
+ CHAIN: 'Sepolia',
+ NAME: 'Starknet Sepolia',
+ EXPLORER_URL: 'https://sepolia.starkscan.co',
+ DISABLED: true
}
}
};
diff --git a/workspace/packages/enums/src/ChainType.ts b/workspace/packages/enums/src/ChainType.ts
index e5a74ab3..52dcc758 100644
--- a/workspace/packages/enums/src/ChainType.ts
+++ b/workspace/packages/enums/src/ChainType.ts
@@ -4,12 +4,14 @@ export type IChainType = {
export enum ChainTypeL1 {
MAIN = 1,
- GOERLI = 5
+ GOERLI = 5,
+ SEPOLIA = 11155111
}
export enum ChainTypeL2 {
- MAIN = 'SN_MAIN',
- GOERLI = 'SN_GOERLI'
+ MAIN = '0x534e5f4d41494e',
+ GOERLI = '0x534e5f474f45524c49',
+ SEPOLIA = '0x534e5f5345504f4c4941'
}
export type ChainsType = {
@@ -22,7 +24,9 @@ export const ChainType: ChainsType = {
L2: ChainTypeL2
};
-export const isL2Testnet = (chain: ChainTypeL2) => chain === ChainTypeL2.GOERLI;
+export const isL2Testnet = (chain: ChainTypeL2) =>
+ chain === ChainTypeL2.GOERLI || chain === ChainTypeL2.SEPOLIA;
export const isL2Mainnet = (chain: ChainTypeL2) => chain === ChainTypeL2.MAIN;
-export const isL1Testnet = (chain: ChainTypeL1) => chain === ChainTypeL1.GOERLI;
+export const isL1Testnet = (chain: ChainTypeL1) =>
+ chain === ChainTypeL1.GOERLI || chain === ChainTypeL1.SEPOLIA;
export const isL1Mainnet = (chain: ChainTypeL1) => chain === ChainTypeL1.MAIN;
diff --git a/workspace/packages/enums/src/TransactionStatus.ts b/workspace/packages/enums/src/TransactionStatus.ts
index ab2d0abf..73fac8c6 100644
--- a/workspace/packages/enums/src/TransactionStatus.ts
+++ b/workspace/packages/enums/src/TransactionStatus.ts
@@ -1,10 +1,10 @@
export enum TransactionStatus {
- REJECTED = 'REJECTED',
NOT_RECEIVED = 'NOT_RECEIVED',
RECEIVED = 'RECEIVED',
- PENDING = 'PENDING',
ACCEPTED_ON_L2 = 'ACCEPTED_ON_L2',
- ACCEPTED_ON_L1 = 'ACCEPTED_ON_L1'
+ ACCEPTED_ON_L1 = 'ACCEPTED_ON_L1',
+ REJECTED = 'REJECTED',
+ REVERTED = 'REVERTED'
}
export const TransactionStatusFriendlyMessage: {
@@ -13,9 +13,9 @@ export const TransactionStatusFriendlyMessage: {
[TransactionStatus.REJECTED]: 'Invalid transaction',
[TransactionStatus.NOT_RECEIVED]: 'Waiting to be accepted on L2',
[TransactionStatus.RECEIVED]: 'Waiting to be accepted on L2',
- [TransactionStatus.PENDING]: 'Accepted on L2',
[TransactionStatus.ACCEPTED_ON_L2]: 'Accepted on L2',
- [TransactionStatus.ACCEPTED_ON_L1]: 'Proved and accepted on L1'
+ [TransactionStatus.ACCEPTED_ON_L1]: 'Proved and accepted on L1',
+ [TransactionStatus.REVERTED]: 'Transaction reverted'
};
export const TransactionPendingStatuses: Array