-
-
+ setAutoWithdrawal(event.currentTarget.checked)}
+ />
+
+ );
+};
+
+AutoWithdrawal.propTypes = {
+ checked: PropTypes.bool,
+ disabled: PropTypes.bool
+};
diff --git a/workspace/apps/starkgate/web/src/components/Features/AutoWithdrawal/AutoWithdrawal.module.scss b/workspace/apps/starkgate/web/src/components/Features/AutoWithdrawal/AutoWithdrawal.module.scss
new file mode 100644
index 00000000..130f7646
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/Features/AutoWithdrawal/AutoWithdrawal.module.scss
@@ -0,0 +1,3 @@
+.autoWithdrawal {
+ margin: 16px 0;
+}
diff --git a/workspace/apps/starkgate/web/src/components/Features/FastWithdrawal/FastWithdrawal.jsx b/workspace/apps/starkgate/web/src/components/Features/FastWithdrawal/FastWithdrawal.jsx
new file mode 100644
index 00000000..3485f8af
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/Features/FastWithdrawal/FastWithdrawal.jsx
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {toClasses} from '@starkware-webapps/utils-browser';
+
+import styles from './FastWithdrawal.module.scss';
+import {FastWithdrawalCheckbox} from './FastWithdrawalCheckbox';
+import {FastWithdrawalDisclaimer} from './FastWithdrawalDisclaimer/FastWithdrawalDisclaimer';
+
+export const FastWithdrawal = ({checked, disabled}) => {
+ return (
+
+
+ );
+};
+
+FastWithdrawal.propTypes = {
+ checked: PropTypes.bool,
+ disabled: PropTypes.bool
+};
diff --git a/workspace/apps/starkgate/web/src/components/Features/FastWithdrawal/FastWithdrawal.module.scss b/workspace/apps/starkgate/web/src/components/Features/FastWithdrawal/FastWithdrawal.module.scss
new file mode 100644
index 00000000..47538e57
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/Features/FastWithdrawal/FastWithdrawal.module.scss
@@ -0,0 +1,15 @@
+@import '../../../index';
+
+.fastWithdrawal {
+ display: flex;
+ flex-direction: column;
+ margin: 16px 0;
+
+ &.disabled {
+ opacity: 0.5;
+
+ & * {
+ pointer-events: none !important;
+ }
+ }
+}
diff --git a/workspace/apps/starkgate/web/src/components/Features/FastWithdrawal/FastWithdrawalCheckbox.jsx b/workspace/apps/starkgate/web/src/components/Features/FastWithdrawal/FastWithdrawalCheckbox.jsx
new file mode 100644
index 00000000..9bd291f5
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/Features/FastWithdrawal/FastWithdrawalCheckbox.jsx
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {useConstants, useTransferTranslation} from '@hooks';
+import {useTransfer} from '@providers';
+import {CheckboxWithText} from '@ui';
+
+export const FastWithdrawalCheckbox = ({checked}) => {
+ const {setFastWithdrawal} = useTransfer();
+ const {enableFastWithdrawal, readMoreTxt} = useTransferTranslation();
+ const {MAKER_TELEPORT_LEARN_MORE_URL} = useConstants();
+
+ return (
+
+
+ );
+};
diff --git a/workspace/apps/starkgate/web/src/components/Features/FastWithdrawal/FastWithdrawalDisclaimer/FastWithdrawalDisclaimer.module.scss b/workspace/apps/starkgate/web/src/components/Features/FastWithdrawal/FastWithdrawalDisclaimer/FastWithdrawalDisclaimer.module.scss
new file mode 100644
index 00000000..07e46b0c
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/Features/FastWithdrawal/FastWithdrawalDisclaimer/FastWithdrawalDisclaimer.module.scss
@@ -0,0 +1,49 @@
+@import '../../../../index';
+
+.fastWithdrawalDisclaimer {
+ display: flex;
+ margin-top: 16px;
+ color: $--color-raptures-light;
+ border: 1px solid $--color-orange-soda;
+ border-radius: 12px;
+ padding: 12px 16px;
+
+ .disclaimerIcon {
+ svg path {
+ stroke: $--color-raptures-light;
+ }
+ }
+
+ .disclaimerText {
+ margin-left: 14px;
+
+ .disclaimerTitle {
+ line-height: 20px;
+ font-size: 14px;
+ font-weight: 600;
+ margin-bottom: 4px;
+ }
+
+ .disclaimerMessage {
+ line-height: 18px;
+ font-size: 12px;
+ margin-bottom: 8px;
+ }
+
+ .disclaimerLearnMore {
+ line-height: 20px;
+ font-size: 12px;
+ color: $--color-raptures-light;
+ font-weight: 600;
+ display: flex;
+
+ svg {
+ padding-left: 8px;
+
+ path {
+ stroke: $--color-raptures-light;
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/Features/ProvidersMenu/ProvidersMenu.js b/workspace/apps/starkgate/web/src/components/Features/ProvidersMenu/ProvidersMenu.jsx
similarity index 73%
rename from src/components/Features/ProvidersMenu/ProvidersMenu.js
rename to workspace/apps/starkgate/web/src/components/Features/ProvidersMenu/ProvidersMenu.jsx
index bd898447..105103a5 100644
--- a/src/components/Features/ProvidersMenu/ProvidersMenu.js
+++ b/workspace/apps/starkgate/web/src/components/Features/ProvidersMenu/ProvidersMenu.jsx
@@ -1,14 +1,20 @@
-import {ChainType} from '@starkware-industries/commons-js-enums';
-import {buildDynamicURL, evaluate, openInNewTab} from '@starkware-industries/commons-js-utils';
import React from 'react';
-import {sources, providers, depositConfig, withdrawConfig} from '../../../config/sources';
-import {useEnvs, useProvidersTranslation, useSourceTranslation} from '../../../hooks';
-import {useSource} from '../../../providers/SourceProvider';
-import {useIsL1} from '../../../providers/TransferProvider';
-import {useL2Wallet} from '../../../providers/WalletsProvider';
-import {Badge, ChoiceItemType, CircleLogoSize, MenuBackground, MultiChoiceList} from '../../UI';
-import {SourceSelect} from '../../UI/SourceSelect/SourceSelect';
+import {depositConfig, providers, sources, withdrawConfig} from '@config/sources';
+import {useEnvs, useProvidersTranslation, useSourceTranslation} from '@hooks';
+import {useIsL1, useL2Wallet, useSource} from '@providers';
+import {ChainType} from '@starkware-webapps/enums';
+import {evaluate} from '@starkware-webapps/utils';
+import {buildDynamicURL, openInNewTab} from '@starkware-webapps/utils-browser';
+import {
+ Badge,
+ ChoiceItemType,
+ CircleLogoSize,
+ MenuBackground,
+ MultiChoiceList,
+ SourceSelect
+} from '@ui';
+
import styles from './ProvidersMenu.module.scss';
export const ProvidersMenu = () => {
diff --git a/src/components/Features/ProvidersMenu/ProvidersMenu.module.scss b/workspace/apps/starkgate/web/src/components/Features/ProvidersMenu/ProvidersMenu.module.scss
similarity index 100%
rename from src/components/Features/ProvidersMenu/ProvidersMenu.module.scss
rename to workspace/apps/starkgate/web/src/components/Features/ProvidersMenu/ProvidersMenu.module.scss
diff --git a/src/components/Features/SelectToken/SelectToken.js b/workspace/apps/starkgate/web/src/components/Features/SelectToken/SelectToken.jsx
similarity index 75%
rename from src/components/Features/SelectToken/SelectToken.js
rename to workspace/apps/starkgate/web/src/components/Features/SelectToken/SelectToken.jsx
index 8088b651..aeb22696 100644
--- a/src/components/Features/SelectToken/SelectToken.js
+++ b/workspace/apps/starkgate/web/src/components/Features/SelectToken/SelectToken.jsx
@@ -1,13 +1,11 @@
import React, {useEffect, useState} from 'react';
-import L1Logo from '../../../assets/svg/chains/ethereum.svg';
-import L2Logo from '../../../assets/svg/chains/starknet.svg';
-import {useColors, useSelectTokenTranslation, useSelectTokenTracking} from '../../../hooks';
-import {useLogin} from '../../../providers/AppProvider';
-import {useMenu} from '../../../providers/MenuProvider';
-import {useTokens} from '../../../providers/TokensProvider';
-import {useTransfer} from '../../../providers/TransferProvider';
-import {BackButton, Menu, MenuTitle, RefreshIcon, SearchToken, SelectTokenList} from '../../UI';
+import L1Logo from '@assets/svg/chains/ethereum.svg';
+import L2Logo from '@assets/svg/chains/starknet.svg';
+import {useColors, useSelectTokenTracking, useSelectTokenTranslation} from '@hooks';
+import {useLogin, useMenu, useTokens, useTransfer} from '@providers';
+import {BackButton, Menu, MenuTitle, RefreshIcon, SearchToken, SelectTokenList} from '@ui';
+
import styles from './SelectToken.module.scss';
export const SelectToken = () => {
@@ -27,7 +25,7 @@ export const SelectToken = () => {
const onTokenSelect = tokenData => {
const {symbol} = tokenData;
- trackSelectToken(symbol);
+ trackSelectToken({symbol});
selectToken(symbol);
showSourceMenu();
};
diff --git a/src/components/Features/SelectToken/SelectToken.module.scss b/workspace/apps/starkgate/web/src/components/Features/SelectToken/SelectToken.module.scss
similarity index 100%
rename from src/components/Features/SelectToken/SelectToken.module.scss
rename to workspace/apps/starkgate/web/src/components/Features/SelectToken/SelectToken.module.scss
diff --git a/src/components/Features/Source/Source.js b/workspace/apps/starkgate/web/src/components/Features/Source/Source.jsx
similarity index 57%
rename from src/components/Features/Source/Source.js
rename to workspace/apps/starkgate/web/src/components/Features/Source/Source.jsx
index 0ed3818e..6f7320df 100644
--- a/src/components/Features/Source/Source.js
+++ b/workspace/apps/starkgate/web/src/components/Features/Source/Source.jsx
@@ -1,16 +1,16 @@
-import {NetworkType} from '@starkware-industries/commons-js-enums';
import React from 'react';
-import {ActionType} from '../../../enums';
-import {useSourceTranslation, useTransferTracking} from '../../../hooks';
-import {useSource} from '../../../providers/SourceProvider';
-import {useIsL1, useIsL2, useTransfer} from '../../../providers/TransferProvider';
-import {ProvidersMenu, Transfer} from '../../Features';
-import {Menu, SourceMenuTab} from '../../UI';
+import {ProvidersMenu, Transfer} from '@features';
+import {useSourceTranslation, useTransferTracking} from '@hooks';
+import {useIsL1, useIsL2, useSource, useTransfer} from '@providers';
+import {TransferType, isDeposit, isWithdrawal} from '@starkgate/shared';
+import {isL1Network} from '@starkware-webapps/enums';
+import {Menu, SourceMenuTab} from '@ui';
+
import styles from './Source.module.scss';
export const Source = () => {
- const [trackSwapNetworks] = useTransferTracking();
+ const [, trackSwapNetworks] = useTransferTracking();
const [, swapToL1] = useIsL1();
const [isL2, swapToL2] = useIsL2();
const {action} = useTransfer();
@@ -20,16 +20,16 @@ export const Source = () => {
const tabs = [
{
text: depositTxt,
- isActive: action === ActionType.TRANSFER_TO_L2,
+ isActive: isDeposit(action),
onClick: () => {
- onNetworkTabClick(ActionType.TRANSFER_TO_L2);
+ onNetworkTabClick(TransferType.DEPOSIT);
}
},
{
text: withdrawTxt,
- isActive: action === ActionType.TRANSFER_TO_L1,
+ isActive: isWithdrawal(action),
onClick: () => {
- onNetworkTabClick(ActionType.TRANSFER_TO_L1);
+ onNetworkTabClick(TransferType.WITHDRAWAL);
}
}
];
@@ -58,7 +58,7 @@ export const Source = () => {
);
diff --git a/src/components/Features/Source/Source.module.scss b/workspace/apps/starkgate/web/src/components/Features/Source/Source.module.scss
similarity index 100%
rename from src/components/Features/Source/Source.module.scss
rename to workspace/apps/starkgate/web/src/components/Features/Source/Source.module.scss
diff --git a/src/components/Features/ToastManager/ToastManager.js b/workspace/apps/starkgate/web/src/components/Features/ToastManager/ToastManager.jsx
similarity index 67%
rename from src/components/Features/ToastManager/ToastManager.js
rename to workspace/apps/starkgate/web/src/components/Features/ToastManager/ToastManager.jsx
index d161a0c9..3d3712e1 100644
--- a/src/components/Features/ToastManager/ToastManager.js
+++ b/workspace/apps/starkgate/web/src/components/Features/ToastManager/ToastManager.jsx
@@ -1,29 +1,27 @@
-import {
- isConsumed,
- isOnChain,
- isRejected,
- NetworkType
-} from '@starkware-industries/commons-js-enums';
-import {usePrevious, useDidMountEffect} from '@starkware-industries/commons-js-hooks';
-import {getCookie, getFullTime, setCookie} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
-import {toast, Toaster} from 'react-hot-toast';
+import {useEffect} from 'react';
+import {Toaster, toast} from 'react-hot-toast';
import useBreakpoint from 'use-breakpoint';
import useDeepCompareEffect from 'use-deep-compare-effect';
+import {ReactComponent as FastIcon} from '@assets/svg/icons/fast.svg';
+import {ALPHA_DISCLAIMER_COOKIE_NAME, HIDE_ELEMENT_COOKIE_DURATION_DAYS} from '@config/constants';
+import {Breakpoint, ToastType, isMobile} from '@enums';
+import {useCompleteTransferToL1, useCompleteTransferToastTranslation} from '@hooks';
+import {useIsL1, useIsL2, useL1Wallet, useMenu, useTransfers} from '@providers';
+import {isDeposit, isPendingWithdrawal} from '@starkgate/shared';
+import {NetworkType, isConsumed, isRejected} from '@starkware-webapps/enums';
+import {useDidMountEffect, usePrevious} from '@starkware-webapps/ui';
+import {getFullTime} from '@starkware-webapps/utils';
+import {getCookie, setCookie} from '@starkware-webapps/utils-browser';
import {
- ALPHA_DISCLAIMER_COOKIE_NAME,
- HIDE_ELEMENT_COOKIE_DURATION_DAYS
-} from '../../../config/constants';
-import {ActionType, Breakpoint, isMobile, ToastType} from '../../../enums';
-import {useCompleteTransferToL1} from '../../../hooks';
-import {useMenu} from '../../../providers/MenuProvider';
-import {useIsL1, useIsL2} from '../../../providers/TransferProvider';
-import {useTransfersLog} from '../../../providers/TransfersLogProvider';
-import {useAccountHash} from '../../../providers/WalletsProvider';
-import {CompleteTransferToL1Toast, ToastBody, TransferToast, Bullet} from '../../UI';
-import {AlphaDisclaimerToast} from '../../UI/Toast/AlphaDisclaimerToast/AlphaDisclaimerToast';
+ AlphaDisclaimerToast,
+ Bullet,
+ CompleteTransferToL1Toast,
+ ToastBody,
+ TransferToast
+} from '@ui';
+
import styles from './ToastManager.module.scss';
let toastsMap = {};
@@ -32,18 +30,14 @@ let toastsDismissed = {};
const ALPHA_DISCLAIMER_TOAST_ID = 'alphaDisclaimer';
export const ToastManager = () => {
- const {transfers} = useTransfersLog();
+ const transfers = useTransfers();
const prevTransfers = usePrevious(transfers);
const completeTransferToL1 = useCompleteTransferToL1();
const {showAccountMenu} = useMenu();
const [, swapToL1] = useIsL1();
const [, swapToL2] = useIsL2();
const {breakpoint} = useBreakpoint(Breakpoint);
- const accountHash = useAccountHash();
-
- useDidMountEffect(() => {
- clearToasts();
- }, [accountHash]);
+ const {account: accountL1} = useL1Wallet();
useEffect(() => {
const alphaDisclaimerCookie = getCookie(ALPHA_DISCLAIMER_COOKIE_NAME);
@@ -52,10 +46,12 @@ export const ToastManager = () => {
}
}, [breakpoint]);
+ useDidMountEffect(() => {
+ clearToasts();
+ }, [accountL1]);
+
useDeepCompareEffect(() => {
- if (accountHash) {
- renderToasts();
- }
+ accountL1 && renderToasts();
}, [transfers]);
const renderToasts = () => {
@@ -66,21 +62,19 @@ export const ToastManager = () => {
};
const handleToast = (transfer, prevTransfer) => {
- const {status, type, l1hash} = transfer;
- const isChanged = prevTransfer && status !== prevTransfer.status;
- if (isChanged && isConsumed(status)) {
+ const {l2TxStatus, l1TxHash, l1Address} = transfer;
+ const isChanged = prevTransfer && l2TxStatus !== prevTransfer.l2TxStatus;
+ if (isChanged && isConsumed(l2TxStatus)) {
return showConsumedTransferToast(transfer);
}
- if (isChanged && isRejected(status)) {
+ if (isChanged && isRejected(l2TxStatus)) {
return showRejectedTransferToast(transfer);
}
- if (type === ActionType.TRANSFER_TO_L1) {
- if (!l1hash && isOnChain(status)) {
- return showCompleteTransferToL1Toast(transfer);
- }
- if (l1hash && isToastRendered(transfer.id, ToastType.COMPLETE_TRANSFER_TO_L1)) {
- return dismissToast(transfer.id, ToastType.COMPLETE_TRANSFER_TO_L1);
- }
+ if (isPendingWithdrawal(transfer) && l1Address?.toLowerCase() === accountL1?.toLowerCase()) {
+ return showCompleteTransferToL1Toast(transfer);
+ }
+ if (l1TxHash && isToastRendered(transfer.id, ToastType.COMPLETE_TRANSFER_TO_L1)) {
+ return dismissToast(transfer.id, ToastType.COMPLETE_TRANSFER_TO_L1);
}
};
@@ -175,12 +169,12 @@ export const ToastManager = () => {
const onCompleteTransferClick = async transfer => {
await completeTransferToL1(transfer);
- dismissToast(transfer);
+ dismissToast(transfer.id);
};
- const goToTransferLog = transfer => {
- transfer.type === ActionType.TRANSFER_TO_L2 ? swapToL1() : swapToL2();
- showAccountMenu({transferId: transfer.id});
+ const goToTransferLog = ({id, type}) => {
+ isDeposit(type) ? swapToL1() : swapToL2();
+ showAccountMenu({transferId: id});
};
const clearToasts = () => {
@@ -208,24 +202,38 @@ export const ToastManager = () => {
};
export const TransferData = ({transfer}) => {
+ const {type, l1TxTimestamp, l2TxTimestamp} = transfer;
+ const {fastIndicationTxt} = useCompleteTransferToastTranslation();
const bodyStyle = {
fontSize: '12px',
lineHeight: '18px',
- paddingRight: '0'
+ paddingRight: '0',
+ display: 'flex'
};
return (
<>
+
+
+
+ {fastWithdrawalDisclaimerTitle}
+
+ {evaluate(fastWithdrawalDisclaimerTxt, {feeAmount})}
+
+ }
+ link={MAKER_TELEPORT_LEARN_MORE_URL}
+ openInNewTab={true}
+ text={learnMoreTxt}
+ type={LinkType.URL}
+ />
+
+
+ )}
+
}
style={bodyStyle}
/>
{fastIndicationTxt}
+
-
diff --git a/workspace/apps/starkgate/web/src/components/Features/ToastManager/ToastManager.module.scss b/workspace/apps/starkgate/web/src/components/Features/ToastManager/ToastManager.module.scss
new file mode 100644
index 00000000..38a76a75
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/Features/ToastManager/ToastManager.module.scss
@@ -0,0 +1,15 @@
+@import '../../../index';
+
+.toastManager {
+ margin-top: #{$--header-height}px;
+}
+
+.fastIndication {
+ display: flex;
+ margin-left: 8px;
+
+ .fastIndicationText {
+ color: $--color-orange-soda;
+ margin-left: 4px;
+ }
+}
diff --git a/src/components/Features/Transfer/Transfer.js b/workspace/apps/starkgate/web/src/components/Features/Transfer/Transfer.jsx
similarity index 83%
rename from src/components/Features/Transfer/Transfer.js
rename to workspace/apps/starkgate/web/src/components/Features/Transfer/Transfer.jsx
index 27891217..996c2984 100644
--- a/src/components/Features/Transfer/Transfer.js
+++ b/workspace/apps/starkgate/web/src/components/Features/Transfer/Transfer.jsx
@@ -1,37 +1,42 @@
-import {NetworkType} from '@starkware-industries/commons-js-enums';
-import {afterDecimal, evaluate, isNegative, isZero} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {Fragment, useEffect, useState} from 'react';
+import {AutoWithdrawal, FastWithdrawal} from '@features';
import {
useConstants,
+ useEnvs,
useTransferToL1,
useTransferToL2,
useTransferTracking,
useTransferTranslation
-} from '../../../hooks';
-import {useLogin} from '../../../providers/AppProvider';
-import {useMenu} from '../../../providers/MenuProvider';
-import {useL1Token, useL2Token, useTokens} from '../../../providers/TokensProvider';
+} from '@hooks';
import {
useAmount,
+ useBridgeIsFull,
useIsL1,
useIsL2,
- useBridgeIsFull,
+ useL1Token,
+ useL2Token,
+ useLogin,
+ useMenu,
+ useTokens,
useTransfer
-} from '../../../providers/TransferProvider';
+} from '@providers';
+import {NetworkType} from '@starkware-webapps/enums';
+import {afterDecimal, evaluate, isNegative, isZero} from '@starkware-webapps/utils';
import {
+ Link,
+ LinkType,
Loading,
LoadingSize,
+ LoginWalletButton,
+ MenuBackground,
NetworkMenu,
NetworkSwap,
TokenInput,
- TransferButton,
- MenuBackground,
- LinkType,
- Link,
- LoginWalletButton
-} from '../../UI';
+ TransferButton
+} from '@ui';
+
import styles from './Transfer.module.scss';
export const Transfer = ({onNetworkSwap}) => {
@@ -49,7 +54,7 @@ export const Transfer = ({onNetworkSwap}) => {
const [errorMsg, setErrorMsg] = useState('');
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
const {showSelectTokenMenu} = useMenu();
- const {selectToken, selectedToken} = useTransfer();
+ const {selectToken, selectedToken, autoWithdrawal, fastWithdrawal} = useTransfer();
const {tokens, updateTokenBalance} = useTokens();
const {bridgeIsFull} = useBridgeIsFull();
const transferToL2 = useTransferToL2();
@@ -57,6 +62,7 @@ export const Transfer = ({onNetworkSwap}) => {
const getL1Token = useL1Token();
const getL2Token = useL2Token();
const {isLoggedIn} = useLogin();
+ const {ENABLE_AUTO_WITHDRAWAL, ENABLE_FAST_WITHDRAWAL} = useEnvs();
useEffect(() => {
if (!selectedToken) {
@@ -115,7 +121,15 @@ export const Transfer = ({onNetworkSwap}) => {
setAmount(event.target.value);
};
- const onTransferClick = async () => (isL1 ? transferToL2(amount) : transferToL1(amount));
+ const onTransferClick = async () => {
+ isL1
+ ? await transferToL2(amount)
+ : await transferToL1(
+ amount,
+ !!selectedToken.autoWithdrawal && autoWithdrawal,
+ !!selectedToken.fastWithdrawal && fastWithdrawal
+ );
+ };
const onRefreshTokenBalanceClick = () => {
updateTokenBalance(selectedToken.symbol);
@@ -178,6 +192,12 @@ export const Transfer = ({onNetworkSwap}) => {
- {!isOnChain(status)
- ? TransactionStatusFriendlyMessage[status || TransactionStatus.NOT_RECEIVED]
+
+ }
+ iconRight={
+ <>
+
+ {!isOnChain(l2TxStatus)
+ ? TransactionStatusFriendlyMessage[l2TxStatus || TransactionStatus.NOT_RECEIVED]
: ''}
);
};
const renderL1TxButton = () => {
- return !l1hash && isL1 && isOnChain(status) ? (
+ return !l1TxHash &&
+ isL1 &&
+ isWithdrawal(type) &&
+ ((!fastWithdrawal && isOnChain(l2TxStatus)) || (fastWithdrawal && customData)) ? (
-
)
},
- {
- question: 'Why are there restrictions on using the browser?',
- answer: (
- <>
-
-
+
+ ) : null;
+};
+
+CircleLogo.propTypes = {
+ color: PropTypes.string,
+ size: PropTypes.number,
+ path: PropTypes.string,
+ background: PropTypes.bool
+};
diff --git a/src/components/UI/CircleLogo/CircleLogo.module.scss b/workspace/apps/starkgate/web/src/components/UI/CircleLogo/CircleLogo.module.scss
similarity index 100%
rename from src/components/UI/CircleLogo/CircleLogo.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/CircleLogo/CircleLogo.module.scss
diff --git a/src/components/UI/CollapseExpand/CollapseExpand.js b/workspace/apps/starkgate/web/src/components/UI/CollapseExpand/CollapseExpand.jsx
similarity index 77%
rename from src/components/UI/CollapseExpand/CollapseExpand.js
rename to workspace/apps/starkgate/web/src/components/UI/CollapseExpand/CollapseExpand.jsx
index b5ec8d38..e0e9b0e0 100644
--- a/src/components/UI/CollapseExpand/CollapseExpand.js
+++ b/workspace/apps/starkgate/web/src/components/UI/CollapseExpand/CollapseExpand.jsx
@@ -1,8 +1,9 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
-import {ReactComponent as CollapseExpandIcon} from '../../../assets/svg/icons/collapse.svg';
+import {ReactComponent as CollapseExpandIcon} from '@assets/svg/icons/collapse.svg';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
import styles from './CollapseExpand.module.scss';
export const CollapseExpand = ({isCollapsed, size, onClick}) => {
diff --git a/src/components/UI/CollapseExpand/CollapseExpand.module.scss b/workspace/apps/starkgate/web/src/components/UI/CollapseExpand/CollapseExpand.module.scss
similarity index 100%
rename from src/components/UI/CollapseExpand/CollapseExpand.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/CollapseExpand/CollapseExpand.module.scss
diff --git a/src/components/UI/Divider/Divider.js b/workspace/apps/starkgate/web/src/components/UI/Divider/Divider.jsx
similarity index 100%
rename from src/components/UI/Divider/Divider.js
rename to workspace/apps/starkgate/web/src/components/UI/Divider/Divider.jsx
diff --git a/src/components/UI/Divider/Divider.module.scss b/workspace/apps/starkgate/web/src/components/UI/Divider/Divider.module.scss
similarity index 100%
rename from src/components/UI/Divider/Divider.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Divider/Divider.module.scss
diff --git a/workspace/apps/starkgate/web/src/components/UI/DynamicIcon/DynamicIcon.jsx b/workspace/apps/starkgate/web/src/components/UI/DynamicIcon/DynamicIcon.jsx
new file mode 100644
index 00000000..bcd753a3
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/DynamicIcon/DynamicIcon.jsx
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+import {useQuery} from '@tanstack/react-query';
+import {Image} from '@ui';
+
+export const DynamicIcon = ({path, size}) => {
+ const isUrlPath = path.startsWith('data:image');
+ const {data, isLoading} = useQuery({
+ queryKey: ['dynamic_import', path],
+ queryFn: () => import(`@assets/svg/${path}.svg`),
+ refetchIntervalInBackground: false,
+ staleTime: Infinity,
+ enabled: !isUrlPath
+ });
+
+ if (isUrlPath) {
+ return 
;
+};
+
+Image.propTypes = {
+ src: PropTypes.string,
+ width: PropTypes.number,
+ height: PropTypes.number,
+ forceSizes: PropTypes.bool
+};
diff --git a/workspace/apps/starkgate/web/src/components/UI/Image/Image.module.scss b/workspace/apps/starkgate/web/src/components/UI/Image/Image.module.scss
new file mode 100644
index 00000000..a7417aa3
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/Image/Image.module.scss
@@ -0,0 +1,5 @@
+.image {
+ display: block;
+ width: auto;
+ height: auto;
+}
diff --git a/src/components/UI/Input/Input.js b/workspace/apps/starkgate/web/src/components/UI/Input/Input.jsx
similarity index 82%
rename from src/components/UI/Input/Input.js
rename to workspace/apps/starkgate/web/src/components/UI/Input/Input.jsx
index ccae76b5..00938225 100644
--- a/src/components/UI/Input/Input.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Input/Input.jsx
@@ -1,8 +1,9 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {forwardRef} from 'react';
-import styles from './Input.Module.scss';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
+import styles from './Input.module.scss';
export const Input = forwardRef(({isDisabled, placeholderColor, style, ...props}, ref) => (
- {text || link}
+ {text || link} {icon}
);
};
Link.propTypes = {
className: PropTypes.string,
+ icon: PropTypes.object,
link: PropTypes.string,
text: PropTypes.string,
type: PropTypes.string,
diff --git a/src/components/UI/Link/Link.module.scss b/workspace/apps/starkgate/web/src/components/UI/Link/Link.module.scss
similarity index 100%
rename from src/components/UI/Link/Link.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Link/Link.module.scss
diff --git a/src/components/UI/LinkButton/LinkButton.js b/workspace/apps/starkgate/web/src/components/UI/LinkButton/LinkButton.jsx
similarity index 77%
rename from src/components/UI/LinkButton/LinkButton.js
rename to workspace/apps/starkgate/web/src/components/UI/LinkButton/LinkButton.jsx
index f9109605..df1b56fd 100644
--- a/src/components/UI/LinkButton/LinkButton.js
+++ b/workspace/apps/starkgate/web/src/components/UI/LinkButton/LinkButton.jsx
@@ -1,8 +1,9 @@
-import {openInNewTab, toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
-import {ReactComponent as RedirectIcon} from '../../../assets/svg/icons/redirect.svg';
+import {ReactComponent as RedirectIcon} from '@assets/svg/icons/redirect.svg';
+import {openInNewTab, toClasses} from '@starkware-webapps/utils-browser';
+
import styles from './LinkButton.module.scss';
export const LinkButton = ({text, url, isDisabled, onClick}) => {
diff --git a/src/components/UI/LinkButton/LinkButton.module.scss b/workspace/apps/starkgate/web/src/components/UI/LinkButton/LinkButton.module.scss
similarity index 100%
rename from src/components/UI/LinkButton/LinkButton.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/LinkButton/LinkButton.module.scss
diff --git a/src/components/UI/Loading/Loading.js b/workspace/apps/starkgate/web/src/components/UI/Loading/Loading.jsx
similarity index 99%
rename from src/components/UI/Loading/Loading.js
rename to workspace/apps/starkgate/web/src/components/UI/Loading/Loading.jsx
index 94d14112..ad486562 100644
--- a/src/components/UI/Loading/Loading.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Loading/Loading.jsx
@@ -1,7 +1,8 @@
-import {CircularProgress, LinearProgress} from '@mui/material';
import PropTypes from 'prop-types';
import React from 'react';
+import {CircularProgress, LinearProgress} from '@mui/material';
+
export const LoadingType = {
CIRCULAR: 0,
LINEAR: 1
diff --git a/src/components/UI/LoginWalletButton/LoginWalletButton.js b/workspace/apps/starkgate/web/src/components/UI/LoginWalletButton/LoginWalletButton.jsx
similarity index 58%
rename from src/components/UI/LoginWalletButton/LoginWalletButton.js
rename to workspace/apps/starkgate/web/src/components/UI/LoginWalletButton/LoginWalletButton.jsx
index 3c6f9e7f..b015aa80 100644
--- a/src/components/UI/LoginWalletButton/LoginWalletButton.js
+++ b/workspace/apps/starkgate/web/src/components/UI/LoginWalletButton/LoginWalletButton.jsx
@@ -1,10 +1,9 @@
-import {NetworkType, WalletStatus} from '@starkware-industries/commons-js-enums';
import React from 'react';
-import {useConnectWalletTracking, useTransferTranslation} from '../../../hooks';
-import {useLoginModal} from '../../../providers/ModalProvider';
-import {useWalletsStatus} from '../../../providers/WalletsProvider';
-import {MainMenuButton} from '../MainMenuButton/MainMenuButton';
+import {useConnectWalletTracking, useTransferTranslation} from '@hooks';
+import {useLoginModal, useWalletsStatus} from '@providers';
+import {NetworkType, isConnected} from '@starkware-webapps/enums';
+import {MainMenuButton} from '@ui';
export const LoginWalletButton = props => {
const {statusL1} = useWalletsStatus();
@@ -13,7 +12,7 @@ export const LoginWalletButton = props => {
const [trackConnectWalletClick] = useConnectWalletTracking();
const handleConnectWallets = () => {
- const networkName = statusL1 === WalletStatus.CONNECTED ? NetworkType.L2 : NetworkType.L1;
+ const networkName = isConnected(statusL1) ? NetworkType.L2 : NetworkType.L1;
trackConnectWalletClick();
showLoginModal(networkName);
};
diff --git a/src/components/UI/LogoutButton/LogoutButton.js b/workspace/apps/starkgate/web/src/components/UI/LogoutButton/LogoutButton.jsx
similarity index 86%
rename from src/components/UI/LogoutButton/LogoutButton.js
rename to workspace/apps/starkgate/web/src/components/UI/LogoutButton/LogoutButton.jsx
index 887c1a77..8a7d500c 100644
--- a/src/components/UI/LogoutButton/LogoutButton.js
+++ b/workspace/apps/starkgate/web/src/components/UI/LogoutButton/LogoutButton.jsx
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {useAccountTranslation, useColors} from '../../../hooks';
-import {Button} from '../index';
+import {useAccountTranslation, useColors} from '@hooks';
+import {Button} from '@ui';
export const LogoutButton = ({onClick, isDisabled}) => {
const {logoutBtnTxt} = useAccountTranslation();
diff --git a/src/components/UI/MainMenuButton/MainMenuButton.js b/workspace/apps/starkgate/web/src/components/UI/MainMenuButton/MainMenuButton.jsx
similarity index 79%
rename from src/components/UI/MainMenuButton/MainMenuButton.js
rename to workspace/apps/starkgate/web/src/components/UI/MainMenuButton/MainMenuButton.jsx
index e4e479d5..7b6f5fb5 100644
--- a/src/components/UI/MainMenuButton/MainMenuButton.js
+++ b/workspace/apps/starkgate/web/src/components/UI/MainMenuButton/MainMenuButton.jsx
@@ -1,9 +1,10 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
-import {useColors} from '../../../hooks';
-import {Button} from '../index';
+import {useColors} from '@hooks';
+import {toClasses} from '@starkware-webapps/utils-browser';
+import {Button} from '@ui';
+
import styles from './MainMenuButton.module.scss';
export const MainMenuButton = props => {
diff --git a/src/components/UI/MainMenuButton/MainMenuButton.module.scss b/workspace/apps/starkgate/web/src/components/UI/MainMenuButton/MainMenuButton.module.scss
similarity index 100%
rename from src/components/UI/MainMenuButton/MainMenuButton.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/MainMenuButton/MainMenuButton.module.scss
diff --git a/src/components/UI/MaxButton/MaxButton.js b/workspace/apps/starkgate/web/src/components/UI/MaxButton/MaxButton.jsx
similarity index 86%
rename from src/components/UI/MaxButton/MaxButton.js
rename to workspace/apps/starkgate/web/src/components/UI/MaxButton/MaxButton.jsx
index 2fb32ab6..daf9fce8 100644
--- a/src/components/UI/MaxButton/MaxButton.js
+++ b/workspace/apps/starkgate/web/src/components/UI/MaxButton/MaxButton.jsx
@@ -1,7 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {useTransferTranslation} from '../../../hooks';
+import {useTransferTranslation} from '@hooks';
+
import styles from './MaxButton.module.scss';
export const MaxButton = ({onClick}) => {
diff --git a/src/components/UI/MaxButton/MaxButton.module.scss b/workspace/apps/starkgate/web/src/components/UI/MaxButton/MaxButton.module.scss
similarity index 100%
rename from src/components/UI/MaxButton/MaxButton.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/MaxButton/MaxButton.module.scss
diff --git a/src/components/UI/Menu/Menu.js b/workspace/apps/starkgate/web/src/components/UI/Menu/Menu.jsx
similarity index 89%
rename from src/components/UI/Menu/Menu.js
rename to workspace/apps/starkgate/web/src/components/UI/Menu/Menu.jsx
index e9944189..c62a892c 100644
--- a/src/components/UI/Menu/Menu.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Menu/Menu.jsx
@@ -1,7 +1,8 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {useEffect, useState} from 'react';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
import styles from './Menu.module.scss';
export const Menu = ({children}) => {
diff --git a/src/components/UI/Menu/Menu.module.scss b/workspace/apps/starkgate/web/src/components/UI/Menu/Menu.module.scss
similarity index 100%
rename from src/components/UI/Menu/Menu.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Menu/Menu.module.scss
diff --git a/src/components/UI/MenuBackground/MenuBackground.js b/workspace/apps/starkgate/web/src/components/UI/MenuBackground/MenuBackground.jsx
similarity index 100%
rename from src/components/UI/MenuBackground/MenuBackground.js
rename to workspace/apps/starkgate/web/src/components/UI/MenuBackground/MenuBackground.jsx
diff --git a/src/components/UI/MenuBackground/MenuBackground.module.scss b/workspace/apps/starkgate/web/src/components/UI/MenuBackground/MenuBackground.module.scss
similarity index 100%
rename from src/components/UI/MenuBackground/MenuBackground.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/MenuBackground/MenuBackground.module.scss
diff --git a/src/components/UI/MenuTitle/MenuTitle.js b/workspace/apps/starkgate/web/src/components/UI/MenuTitle/MenuTitle.jsx
similarity index 100%
rename from src/components/UI/MenuTitle/MenuTitle.js
rename to workspace/apps/starkgate/web/src/components/UI/MenuTitle/MenuTitle.jsx
diff --git a/src/components/UI/MenuTitle/MenuTitle.module.scss b/workspace/apps/starkgate/web/src/components/UI/MenuTitle/MenuTitle.module.scss
similarity index 100%
rename from src/components/UI/MenuTitle/MenuTitle.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/MenuTitle/MenuTitle.module.scss
diff --git a/workspace/apps/starkgate/web/src/components/UI/Modal/BlockedAddressModal/BlockedAddressModal.jsx b/workspace/apps/starkgate/web/src/components/UI/Modal/BlockedAddressModal/BlockedAddressModal.jsx
new file mode 100644
index 00000000..a8cbcddb
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/BlockedAddressModal/BlockedAddressModal.jsx
@@ -0,0 +1,15 @@
+import {useBlockedAddressModalTranslation} from '@hooks';
+
+import styles from './BlockedAddressModal.module.scss';
+
+const BlockedAddressModal = () => {
+ const {descriptionTxt} = useBlockedAddressModalTranslation();
+
+ return (
+
);
};
TransferLogContainer.propTypes = {
- children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
transferIndex: PropTypes.number,
- onShowTransfers: PropTypes.func
+ isLoading: PropTypes.bool,
+ onShowTransfers: PropTypes.func,
+ onScrollEnd: PropTypes.func,
+ children: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
};
diff --git a/src/components/UI/TransferLogContainer/TransferLogContainer.module.scss b/workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.module.scss
similarity index 97%
rename from src/components/UI/TransferLogContainer/TransferLogContainer.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.module.scss
index aaae3243..1010ce19 100644
--- a/src/components/UI/TransferLogContainer/TransferLogContainer.module.scss
+++ b/workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.module.scss
@@ -2,7 +2,7 @@
.transferLogContainer {
color: $--color-white;
- padding: 16px 0 16px 16px;
+ padding: 15px;
border-radius: 8px;
border: 1px solid $--color-indigo;
margin: 16px 0;
diff --git a/src/components/UI/WalletButton/WalletButton.js b/workspace/apps/starkgate/web/src/components/UI/WalletButton/WalletButton.jsx
similarity index 86%
rename from src/components/UI/WalletButton/WalletButton.js
rename to workspace/apps/starkgate/web/src/components/UI/WalletButton/WalletButton.jsx
index e712ecb7..35ff4475 100644
--- a/src/components/UI/WalletButton/WalletButton.js
+++ b/workspace/apps/starkgate/web/src/components/UI/WalletButton/WalletButton.jsx
@@ -1,10 +1,12 @@
-import {WalletStatus} from '@starkware-industries/commons-js-enums';
-import {evaluate, shortenAddress, toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
-import {useColors, useHeaderTranslation} from '../../../hooks';
-import {Button, DynamicIcon} from '../index';
+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';
export const WalletButtonIconSize = {
@@ -14,7 +16,7 @@ export const WalletButtonIconSize = {
};
export const WalletButton = ({account, chain, network, logoPath, status, onClick}) => {
- return status === WalletStatus.CONNECTED ? (
+ return isConnected(status) ? (
+
+
diff --git a/workspace/apps/starkgate/web/src/components/Features/TransferLog/TransferLog.module.scss b/workspace/apps/starkgate/web/src/components/Features/TransferLog/TransferLog.module.scss
new file mode 100644
index 00000000..5b4fcd1e
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/Features/TransferLog/TransferLog.module.scss
@@ -0,0 +1,49 @@
+@import '../../../index';
+
+.transferLog {
+ display: flex;
+ flex-direction: column;
+ padding: 16px 8px;
+ position: relative;
+
+ & > * {
+ margin: 2px;
+ }
+
+ .dataRow {
+ display: flex;
+ justify-content: space-between;
+
+ .left {
+ display: flex;
+ }
+
+ .label {
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 20px;
+ }
+
+ .data {
+ color: $--color-toolbox;
+ height: 16px;
+
+ &.error {
+ color: $--color-jasper;
+ }
+ }
+ }
+
+ .linksRow {
+ display: flex;
+ justify-content: flex-end;
+
+ & > * {
+ margin-left: 4px;
+ }
+ }
+
+ &:not(:last-child) {
+ border-bottom: 1px solid $--color-indigo;
+ }
+}
diff --git a/src/components/Features/index.js b/workspace/apps/starkgate/web/src/components/Features/index.jsx
similarity index 74%
rename from src/components/Features/index.js
rename to workspace/apps/starkgate/web/src/components/Features/index.jsx
index f4923590..85d64221 100644
--- a/src/components/Features/index.js
+++ b/workspace/apps/starkgate/web/src/components/Features/index.jsx
@@ -5,3 +5,5 @@ export * from './TransferLog/TransferLog';
export * from './ToastManager/ToastManager';
export * from './Source/Source';
export * from './ProvidersMenu/ProvidersMenu';
+export * from './AutoWithdrawal/AutoWithdrawal';
+export * from './FastWithdrawal/FastWithdrawal';
diff --git a/src/components/UI/AccountAddress/AccountAddress.js b/workspace/apps/starkgate/web/src/components/UI/AccountAddress/AccountAddress.jsx
similarity index 76%
rename from src/components/UI/AccountAddress/AccountAddress.js
rename to workspace/apps/starkgate/web/src/components/UI/AccountAddress/AccountAddress.jsx
index 8c8ebf99..51a5b3a7 100644
--- a/src/components/UI/AccountAddress/AccountAddress.js
+++ b/workspace/apps/starkgate/web/src/components/UI/AccountAddress/AccountAddress.jsx
@@ -1,10 +1,12 @@
-import {useAnimation} from '@starkware-industries/commons-js-hooks';
-import {shortenAddress, toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {useRef} from 'react';
-import {ReactComponent as CopyIcon} from '../../../assets/svg/icons/copy.svg';
-import {useAccountTranslation} from '../../../hooks';
+import {ReactComponent as CopyIcon} from '@assets/svg/icons/copy.svg';
+import {useAccountTranslation} from '@hooks';
+import {useAnimation} from '@starkware-webapps/ui';
+import {shortenAddress} from '@starkware-webapps/utils';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
import styles from './AccountAddress.module.scss';
const COPIED_ANIMATION_TIMEOUT_INTERVAL = 1000;
diff --git a/src/components/UI/AccountAddress/AccountAddress.module.scss b/workspace/apps/starkgate/web/src/components/UI/AccountAddress/AccountAddress.module.scss
similarity index 100%
rename from src/components/UI/AccountAddress/AccountAddress.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/AccountAddress/AccountAddress.module.scss
diff --git a/src/components/UI/Alert/Alert.js b/workspace/apps/starkgate/web/src/components/UI/Alert/Alert.jsx
similarity index 81%
rename from src/components/UI/Alert/Alert.js
rename to workspace/apps/starkgate/web/src/components/UI/Alert/Alert.jsx
index f808948c..cf653b12 100644
--- a/src/components/UI/Alert/Alert.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Alert/Alert.jsx
@@ -1,10 +1,11 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
-import {ReactComponent as InfoIcon} from '../../../assets/svg/icons/info.svg';
-import {ReactComponent as SuccessIcon} from '../../../assets/svg/icons/success.svg';
-import {ReactComponent as WarningIcon} from '../../../assets/svg/icons/warning.svg';
+import {ReactComponent as InfoIcon} from '@assets/svg/icons/info.svg';
+import {ReactComponent as SuccessIcon} from '@assets/svg/icons/success.svg';
+import {ReactComponent as WarningIcon} from '@assets/svg/icons/warning.svg';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
import styles from './Alert.module.scss';
export const AlertType = {
diff --git a/src/components/UI/Alert/Alert.module.scss b/workspace/apps/starkgate/web/src/components/UI/Alert/Alert.module.scss
similarity index 100%
rename from src/components/UI/Alert/Alert.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Alert/Alert.module.scss
diff --git a/src/components/UI/BackButton/BackButton.js b/workspace/apps/starkgate/web/src/components/UI/BackButton/BackButton.jsx
similarity index 74%
rename from src/components/UI/BackButton/BackButton.js
rename to workspace/apps/starkgate/web/src/components/UI/BackButton/BackButton.jsx
index 1f00540b..7c22aed3 100644
--- a/src/components/UI/BackButton/BackButton.js
+++ b/workspace/apps/starkgate/web/src/components/UI/BackButton/BackButton.jsx
@@ -1,8 +1,9 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {ReactComponent as BackIcon} from '../../../assets/svg/icons/back.svg';
-import {useMenusTranslation} from '../../../hooks';
+import {ReactComponent as BackIcon} from '@assets/svg/icons/back.svg';
+import {useMenusTranslation} from '@hooks';
+
import styles from './BackButton.module.scss';
export const BackButton = ({onClick}) => {
diff --git a/src/components/UI/BackButton/BackButton.module.scss b/workspace/apps/starkgate/web/src/components/UI/BackButton/BackButton.module.scss
similarity index 100%
rename from src/components/UI/BackButton/BackButton.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/BackButton/BackButton.module.scss
diff --git a/src/components/UI/Badge/Badge.js b/workspace/apps/starkgate/web/src/components/UI/Badge/Badge.jsx
similarity index 100%
rename from src/components/UI/Badge/Badge.js
rename to workspace/apps/starkgate/web/src/components/UI/Badge/Badge.jsx
diff --git a/src/components/UI/Badge/Badge.module.scss b/workspace/apps/starkgate/web/src/components/UI/Badge/Badge.module.scss
similarity index 100%
rename from src/components/UI/Badge/Badge.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Badge/Badge.module.scss
diff --git a/src/components/UI/Bullet/Bullet.js b/workspace/apps/starkgate/web/src/components/UI/Bullet/Bullet.jsx
similarity index 100%
rename from src/components/UI/Bullet/Bullet.js
rename to workspace/apps/starkgate/web/src/components/UI/Bullet/Bullet.jsx
diff --git a/src/components/UI/Bullet/Bullet.module.scss b/workspace/apps/starkgate/web/src/components/UI/Bullet/Bullet.module.scss
similarity index 100%
rename from src/components/UI/Bullet/Bullet.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Bullet/Bullet.module.scss
diff --git a/src/components/UI/BurgerMenu/BurgerMenu.js b/workspace/apps/starkgate/web/src/components/UI/BurgerMenu/BurgerMenu.jsx
similarity index 87%
rename from src/components/UI/BurgerMenu/BurgerMenu.js
rename to workspace/apps/starkgate/web/src/components/UI/BurgerMenu/BurgerMenu.jsx
index 84e41650..00662ceb 100644
--- a/src/components/UI/BurgerMenu/BurgerMenu.js
+++ b/workspace/apps/starkgate/web/src/components/UI/BurgerMenu/BurgerMenu.jsx
@@ -1,8 +1,9 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {useState} from 'react';
-import {BurgerMenuItem} from '../BurgerMenuItem/BurgerMenuItem';
+import {toClasses} from '@starkware-webapps/utils-browser';
+import {BurgerMenuItem} from '@ui';
+
import styles from './BurgerMenu.module.scss';
export const BurgerMenu = ({items}) => {
diff --git a/src/components/UI/BurgerMenu/BurgerMenu.module.scss b/workspace/apps/starkgate/web/src/components/UI/BurgerMenu/BurgerMenu.module.scss
similarity index 100%
rename from src/components/UI/BurgerMenu/BurgerMenu.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/BurgerMenu/BurgerMenu.module.scss
diff --git a/src/components/UI/BurgerMenuItem/BurgerMenuItem.js b/workspace/apps/starkgate/web/src/components/UI/BurgerMenuItem/BurgerMenuItem.jsx
similarity index 87%
rename from src/components/UI/BurgerMenuItem/BurgerMenuItem.js
rename to workspace/apps/starkgate/web/src/components/UI/BurgerMenuItem/BurgerMenuItem.jsx
index a1725ff3..c4199bfc 100644
--- a/src/components/UI/BurgerMenuItem/BurgerMenuItem.js
+++ b/workspace/apps/starkgate/web/src/components/UI/BurgerMenuItem/BurgerMenuItem.jsx
@@ -1,7 +1,8 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
import styles from './BurgerMenuItem.module.scss';
export const BurgerMenuItem = ({label, isActive, onClick}) => {
diff --git a/src/components/UI/BurgerMenuItem/BurgerMenuItem.module.scss b/workspace/apps/starkgate/web/src/components/UI/BurgerMenuItem/BurgerMenuItem.module.scss
similarity index 100%
rename from src/components/UI/BurgerMenuItem/BurgerMenuItem.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/BurgerMenuItem/BurgerMenuItem.module.scss
diff --git a/src/components/UI/Button/Button.js b/workspace/apps/starkgate/web/src/components/UI/Button/Button.jsx
similarity index 93%
rename from src/components/UI/Button/Button.js
rename to workspace/apps/starkgate/web/src/components/UI/Button/Button.jsx
index a6d25d82..4f20bbbf 100644
--- a/src/components/UI/Button/Button.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Button/Button.jsx
@@ -1,8 +1,9 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {useState} from 'react';
-import {Loading, LoadingSize} from '../Loading/Loading';
+import {toClasses} from '@starkware-webapps/utils-browser';
+import {Loading, LoadingSize} from '@ui';
+
import styles from './Button.module.scss';
export const Button = ({
diff --git a/src/components/UI/Button/Button.module.scss b/workspace/apps/starkgate/web/src/components/UI/Button/Button.module.scss
similarity index 100%
rename from src/components/UI/Button/Button.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Button/Button.module.scss
diff --git a/src/components/UI/ChainSelect/ChainSelect.js b/workspace/apps/starkgate/web/src/components/UI/ChainSelect/ChainSelect.jsx
similarity index 74%
rename from src/components/UI/ChainSelect/ChainSelect.js
rename to workspace/apps/starkgate/web/src/components/UI/ChainSelect/ChainSelect.jsx
index d5a1efd6..6f13d1c9 100644
--- a/src/components/UI/ChainSelect/ChainSelect.js
+++ b/workspace/apps/starkgate/web/src/components/UI/ChainSelect/ChainSelect.jsx
@@ -1,10 +1,11 @@
-import {Select, MenuItem} from '@mui/material';
-import {ChainInfo, ChainType} from '@starkware-industries/commons-js-enums';
-import {openInNewTab} from '@starkware-industries/commons-js-utils';
import React from 'react';
-import {APP_URL_GOERLI, APP_URL_MAINNET} from '../../../config/constants';
-import {useEnvs} from '../../../hooks';
+import {APP_URL_GOERLI, APP_URL_MAINNET} from '@config/constants';
+import {useEnvs} from '@hooks';
+import {MenuItem, Select} from '@mui/material';
+import {ChainInfo, ChainType} from '@starkware-webapps/enums';
+import {openInNewTab} from '@starkware-webapps/utils-browser';
+
import {ChainSelectTheme} from './ChainSelect.theme';
export const ChainSelect = () => {
diff --git a/src/components/UI/ChainSelect/ChainSelect.theme.js b/workspace/apps/starkgate/web/src/components/UI/ChainSelect/ChainSelect.theme.jsx
similarity index 90%
rename from src/components/UI/ChainSelect/ChainSelect.theme.js
rename to workspace/apps/starkgate/web/src/components/UI/ChainSelect/ChainSelect.theme.jsx
index b98043a7..4cd7a331 100644
--- a/src/components/UI/ChainSelect/ChainSelect.theme.js
+++ b/workspace/apps/starkgate/web/src/components/UI/ChainSelect/ChainSelect.theme.jsx
@@ -1,10 +1,10 @@
-import {createTheme, ThemeProvider} from '@mui/material';
import PropTypes from 'prop-types';
import React from 'react';
-import CollapseIcon from '../../../assets/svg/icons/collapse.svg';
-import SelectedIcon from '../../../assets/svg/icons/selected.svg';
-import {useColors, useFonts} from '../../../hooks';
+import CollapseIcon from '@assets/svg/icons/collapse.svg';
+import SelectedIcon from '@assets/svg/icons/selected.svg';
+import {useColors, useFonts} from '@hooks';
+import {ThemeProvider, createTheme} from '@mui/material';
export const ChainSelectTheme = ({children}) => {
const {colorWhite, colorSpaceCadet, colorSpaceCadet2} = useColors();
diff --git a/workspace/apps/starkgate/web/src/components/UI/CheckboxWithText/CheckboxWithText.jsx b/workspace/apps/starkgate/web/src/components/UI/CheckboxWithText/CheckboxWithText.jsx
new file mode 100644
index 00000000..714ee436
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/CheckboxWithText/CheckboxWithText.jsx
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {useColors} from '@hooks';
+import {Checkbox} from '@starkware-webapps/ui';
+import {toClasses} from '@starkware-webapps/utils-browser';
+import {Link, LinkType} from '@ui';
+
+import styles from './CheckboxWithText.module.scss';
+
+export const CheckboxWithText = ({checked, disabled, message, linkTxt, linkUrl, onChange}) => {
+ const {colorOrangeSoda} = useColors();
+
+ return (
+
+
-
+
- {name}
- {`${getFullTime(timestamp)}`}
{sign} {amount} {symbol.toUpperCase()}
+
+
+ {`${getFullTime(
+ isDeposit(type) ? l1TxTimestamp : l2TxTimestamp
+ )}`}
{renderTransferStatus()}
-
- {renderL1TxButton()}
- {renderL2TxButton()}
-
+
+ {renderL1TxButton()}
+ {renderL2TxButton()}
+
+ );
+};
+
+CheckboxWithText.propTypes = {
+ checked: PropTypes.bool,
+ disabled: PropTypes.bool,
+ message: PropTypes.string,
+ linkTxt: PropTypes.string,
+ linkUrl: PropTypes.string,
+ onChange: PropTypes.func
+};
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
new file mode 100644
index 00000000..94eb08eb
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/CheckboxWithText/CheckboxWithText.module.scss
@@ -0,0 +1,24 @@
+@import '../../../index';
+
+.checkboxWithText {
+ display: flex;
+ align-items: center;
+
+ &.disabled {
+ opacity: 0.5;
+
+ & * {
+ pointer-events: none !important;
+ }
+ }
+}
+
+.message {
+ font-size: 12px;
+ line-height: 18px;
+ color: $--color-white;
+}
+
+.readMore {
+ color: $--color-very-light-azure;
+}
diff --git a/src/components/UI/Circle/Circle.js b/workspace/apps/starkgate/web/src/components/UI/Circle/Circle.jsx
similarity index 100%
rename from src/components/UI/Circle/Circle.js
rename to workspace/apps/starkgate/web/src/components/UI/Circle/Circle.jsx
diff --git a/src/components/UI/Circle/Circle.module.scss b/workspace/apps/starkgate/web/src/components/UI/Circle/Circle.module.scss
similarity index 100%
rename from src/components/UI/Circle/Circle.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Circle/Circle.module.scss
diff --git a/workspace/apps/starkgate/web/src/components/UI/CircleLogo/CircleLogo.jsx b/workspace/apps/starkgate/web/src/components/UI/CircleLogo/CircleLogo.jsx
new file mode 100644
index 00000000..c62c041b
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/CircleLogo/CircleLogo.jsx
@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {Circle, DynamicIcon} from '@ui';
+
+import styles from './CircleLogo.module.scss';
+
+const CIRCLE_LOGO_SIZE_DIFF = 8;
+
+export const CircleLogoSize = {
+ XS: 22,
+ SMALL: 32,
+ MEDIUM: 40,
+ LARGE: 50
+};
+
+export const CircleLogo = ({color, size, path, background = true}) => {
+ return path ? (
+
+
+
+ {message}{' '}
+
+
+
+
+
+
+ );
+};
+
+export default BlockedAddressModal;
diff --git a/src/components/UI/Modal/BlockedAddressModal/BlockedAddressModal.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/BlockedAddressModal/BlockedAddressModal.module.scss
similarity index 53%
rename from src/components/UI/Modal/BlockedAddressModal/BlockedAddressModal.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/BlockedAddressModal/BlockedAddressModal.module.scss
index ed3d44ed..4a34a54b 100644
--- a/src/components/UI/Modal/BlockedAddressModal/BlockedAddressModal.module.scss
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/BlockedAddressModal/BlockedAddressModal.module.scss
@@ -4,12 +4,4 @@
color: $--color-black;
margin: 0 auto 24px;
line-height: 24px;
-
- .complianceEmailLink {
- color: $--color-orange-soda;
- }
-
- .compliance {
- margin-top: 20px;
- }
}
diff --git a/src/components/UI/Modal/ErrorModal/ErrorModal.js b/workspace/apps/starkgate/web/src/components/UI/Modal/ErrorModal/ErrorModal.jsx
similarity index 100%
rename from src/components/UI/Modal/ErrorModal/ErrorModal.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ErrorModal/ErrorModal.jsx
diff --git a/src/components/UI/Modal/ErrorModal/ErrorModal.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/ErrorModal/ErrorModal.module.scss
similarity index 100%
rename from src/components/UI/Modal/ErrorModal/ErrorModal.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ErrorModal/ErrorModal.module.scss
diff --git a/src/components/UI/Modal/LoginModal/LoginModal.js b/workspace/apps/starkgate/web/src/components/UI/Modal/LoginModal/LoginModal.jsx
similarity index 71%
rename from src/components/UI/Modal/LoginModal/LoginModal.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/LoginModal/LoginModal.jsx
index 80ebce48..6064de02 100644
--- a/src/components/UI/Modal/LoginModal/LoginModal.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/LoginModal/LoginModal.jsx
@@ -1,14 +1,12 @@
-import {NetworkType, WalletStatus} from '@starkware-industries/commons-js-enums';
-import {useDidMountEffect, useLogger} from '@starkware-industries/commons-js-hooks';
-import {evaluate} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {useEffect, useState} from 'react';
-import {useLoginTracking, useLoginTranslation, useWalletHandlers} from '../../../../hooks';
-import {useLogin} from '../../../../providers/AppProvider';
-import {useHideModal} from '../../../../providers/ModalProvider';
-import {useWalletsStatus} from '../../../../providers/WalletsProvider';
-import {MultiChoiceMenu} from '../../index';
+import {useLoginTracking, useLoginTranslation, useWalletHandlers} from '@hooks';
+import {useHideModal, useLogin, useWalletsStatus} from '@providers';
+import {NetworkType, isConnected, isL1Network, isL2Network} from '@starkware-webapps/enums';
+import {useDidMountEffect, useLogger} from '@starkware-webapps/ui';
+import {evaluate} from '@starkware-webapps/utils';
+import {MultiChoiceMenu} from '@ui';
const LoginModal = ({networkName}) => {
const logger = useLogger('LoginModal');
@@ -22,11 +20,11 @@ const LoginModal = ({networkName}) => {
const hideModal = useHideModal();
useDidMountEffect(() => {
- if (network === NetworkType.L2 && statusL2 === WalletStatus.CONNECTED) {
+ if (isL2Network(network) && isConnected(statusL2)) {
setNetwork(NetworkType.L1);
}
- if (network === NetworkType.L1 && statusL1 === WalletStatus.CONNECTED) {
+ if (isL1Network(network) && isConnected(statusL1)) {
setNetwork(NetworkType.L2);
}
}, [statusL1, statusL2]);
@@ -48,13 +46,13 @@ const LoginModal = ({networkName}) => {
useEffect(() => {
if (error) {
- trackLoginError(error);
+ trackLoginError({error});
}
}, [error]);
const walletChoiceClick = async walletHandler => {
const {name} = walletHandler;
- trackWalletClick(name);
+ trackWalletClick({name});
logger.log(`connect to ${name}`);
await walletHandler.connect();
};
diff --git a/src/components/UI/Modal/LoginModal/LoginModal.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/LoginModal/LoginModal.module.scss
similarity index 100%
rename from src/components/UI/Modal/LoginModal/LoginModal.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/LoginModal/LoginModal.module.scss
diff --git a/workspace/apps/starkgate/web/src/components/UI/Modal/Modal/Modal.jsx b/workspace/apps/starkgate/web/src/components/UI/Modal/Modal/Modal.jsx
new file mode 100644
index 00000000..f9a4050e
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/Modal/Modal.jsx
@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import {createPortal} from 'react-dom';
+
+import {toClasses} from '@starkware-webapps/utils-browser';
+
+import styles from './Modal.module.scss';
+
+export const ModalSize = {
+ AUTO: {
+ width: 'auto',
+ height: 'auto'
+ },
+ SMALL: {
+ width: 450,
+ height: 200
+ },
+ MEDIUM: {
+ width: 550,
+ height: 300
+ },
+ LARGE: {
+ width: 700,
+ height: 500
+ }
+};
+
+export const ModalType = {
+ INFO: 'info',
+ SUCCESS: 'success',
+ WARNING: 'warning',
+ ERROR: 'error'
+};
+
+export const Modal = ({
+ show,
+ type = ModalType.INFO,
+ size = ModalSize.MEDIUM,
+ children,
+ containerStyle,
+ exitable,
+ hideModal
+}) => {
+ const {width} = size;
+
+ const ignoreClickOnBlurryPart = e => {
+ e.stopPropagation();
+ };
+
+ const handleClickOnBlurryPart = () => {
+ exitable && hideModal();
+ };
+
+ return show
+ ? createPortal(
+ {descriptionTxt}
+
+
,
+ document.body
+ )
+ : null;
+};
+
+Modal.propTypes = {
+ show: PropTypes.bool,
+ type: PropTypes.string,
+ size: PropTypes.object,
+ containerStyle: PropTypes.object,
+ exitable: PropTypes.bool,
+ hideModal: PropTypes.func,
+ children: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+};
diff --git a/src/components/UI/Modal/Modal/Modal.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/Modal/Modal.module.scss
similarity index 96%
rename from src/components/UI/Modal/Modal/Modal.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/Modal/Modal.module.scss
index 718a7641..aab22a62 100644
--- a/src/components/UI/Modal/Modal/Modal.module.scss
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/Modal/Modal.module.scss
@@ -13,7 +13,7 @@
.container {
top: 50%;
left: 50%;
- position: absolute;
+ position: relative;
transform: translate(-50%, -50%);
background: $--color-white;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
diff --git a/src/components/UI/Modal/ModalBody/ModalBody.js b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalBody/ModalBody.jsx
similarity index 86%
rename from src/components/UI/Modal/ModalBody/ModalBody.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ModalBody/ModalBody.jsx
index 1ba87580..388e0b79 100644
--- a/src/components/UI/Modal/ModalBody/ModalBody.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalBody/ModalBody.jsx
@@ -1,7 +1,8 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
import {ModalType} from '../Modal/Modal';
import styles from './ModalBody.module.scss';
diff --git a/src/components/UI/Modal/ModalBody/ModalBody.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalBody/ModalBody.module.scss
similarity index 100%
rename from src/components/UI/Modal/ModalBody/ModalBody.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ModalBody/ModalBody.module.scss
diff --git a/workspace/apps/starkgate/web/src/components/UI/Modal/ModalFooter/ModalFooter.jsx b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalFooter/ModalFooter.jsx
new file mode 100644
index 00000000..6d6edd80
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalFooter/ModalFooter.jsx
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {useColors} from '@hooks';
+import {toClasses} from '@starkware-webapps/utils-browser';
+import {Button, ModalType} from '@ui';
+
+import styles from './ModalFooter.module.scss';
+
+export const ModalFooter = ({type, onClose, buttonProps, children}) => {
+ const {colorJasper, colorIndigo, colorWhite} = useColors();
+ const color = type === ModalType.ERROR ? colorJasper : colorIndigo;
+
+ return (
+
+ {children}
+
+
+ {children}
+
+
+ );
+};
+
+ModalFooter.propTypes = {
+ type: PropTypes.string,
+ buttonProps: PropTypes.object,
+ onClose: PropTypes.func,
+ children: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+};
diff --git a/src/components/UI/Modal/ModalFooter/ModalFooter.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalFooter/ModalFooter.module.scss
similarity index 100%
rename from src/components/UI/Modal/ModalFooter/ModalFooter.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ModalFooter/ModalFooter.module.scss
diff --git a/src/components/UI/Modal/ModalHeader/ModalHeader.js b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalHeader/ModalHeader.jsx
similarity index 86%
rename from src/components/UI/Modal/ModalHeader/ModalHeader.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ModalHeader/ModalHeader.jsx
index bffd2662..af391061 100644
--- a/src/components/UI/Modal/ModalHeader/ModalHeader.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalHeader/ModalHeader.jsx
@@ -1,7 +1,8 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
import {ModalType} from '../Modal/Modal';
import styles from './ModalHeader.module.scss';
diff --git a/src/components/UI/Modal/ModalHeader/ModalHeader.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalHeader/ModalHeader.module.scss
similarity index 100%
rename from src/components/UI/Modal/ModalHeader/ModalHeader.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ModalHeader/ModalHeader.module.scss
diff --git a/src/components/UI/Modal/ModalHeaderWithIcon/ModalHeaderWithIcon.js b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalHeaderWithIcon/ModalHeaderWithIcon.jsx
similarity index 95%
rename from src/components/UI/Modal/ModalHeaderWithIcon/ModalHeaderWithIcon.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ModalHeaderWithIcon/ModalHeaderWithIcon.jsx
index 154ba99d..117f6d9a 100644
--- a/src/components/UI/Modal/ModalHeaderWithIcon/ModalHeaderWithIcon.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalHeaderWithIcon/ModalHeaderWithIcon.jsx
@@ -16,7 +16,7 @@ const ModalHeaderWithIcon = ({title, subtitle, icon: Icon}) => {
ModalHeaderWithIcon.propTypes = {
title: PropTypes.string,
subtitle: PropTypes.string,
- icon: PropTypes.object
+ icon: PropTypes.func
};
export default ModalHeaderWithIcon;
diff --git a/src/components/UI/Modal/ModalHeaderWithIcon/ModalHeaderWithIcon.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalHeaderWithIcon/ModalHeaderWithIcon.module.scss
similarity index 100%
rename from src/components/UI/Modal/ModalHeaderWithIcon/ModalHeaderWithIcon.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ModalHeaderWithIcon/ModalHeaderWithIcon.module.scss
diff --git a/src/components/UI/Modal/ModalText/ModalText.js b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalText/ModalText.jsx
similarity index 100%
rename from src/components/UI/Modal/ModalText/ModalText.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ModalText/ModalText.jsx
diff --git a/src/components/UI/Modal/ModalText/ModalText.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalText/ModalText.module.scss
similarity index 100%
rename from src/components/UI/Modal/ModalText/ModalText.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ModalText/ModalText.module.scss
diff --git a/src/components/UI/Modal/ModalTitle/ModalTitle.js b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalTitle/ModalTitle.jsx
similarity index 100%
rename from src/components/UI/Modal/ModalTitle/ModalTitle.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ModalTitle/ModalTitle.jsx
diff --git a/src/components/UI/Modal/ModalTitle/ModalTitle.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalTitle/ModalTitle.module.scss
similarity index 100%
rename from src/components/UI/Modal/ModalTitle/ModalTitle.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ModalTitle/ModalTitle.module.scss
diff --git a/src/components/UI/Modal/ModalWrapper.js b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalWrapper.jsx
similarity index 89%
rename from src/components/UI/Modal/ModalWrapper.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ModalWrapper.jsx
index 9eb5c907..27afd51f 100644
--- a/src/components/UI/Modal/ModalWrapper.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/ModalWrapper.jsx
@@ -1,6 +1,6 @@
-import React, {lazy, Suspense} from 'react';
+import React, {Suspense, lazy} from 'react';
-import {useHideModal, useModal} from '../../../providers/ModalProvider';
+import {useHideModal, useModal} from '@providers';
import {
DynamicIcon,
Loading,
@@ -9,9 +9,9 @@ import {
ModalBody,
ModalFooter,
ModalHeader,
+ ModalText,
ModalTitle
-} from '../index';
-import {ModalText} from './ModalText/ModalText';
+} from '@ui';
export const ModalWrapper = () => {
const modal = useModal();
@@ -27,7 +27,7 @@ export const ModalWrapper = () => {
const getComponents = components => {
return components
? components.map(c => ({
- component: lazy(() => import(`../../${c.path}`)),
+ component: lazy(c.import),
props: c.props
}))
: [];
diff --git a/src/components/UI/Modal/OnboardingModal/OnboardingModal.js b/workspace/apps/starkgate/web/src/components/UI/Modal/OnboardingModal/OnboardingModal.jsx
similarity index 88%
rename from src/components/UI/Modal/OnboardingModal/OnboardingModal.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/OnboardingModal/OnboardingModal.jsx
index 7c5a630f..ee332a8d 100644
--- a/src/components/UI/Modal/OnboardingModal/OnboardingModal.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/OnboardingModal/OnboardingModal.jsx
@@ -1,6 +1,7 @@
import React from 'react';
-import {useOnboardingModalTranslation} from '../../../../hooks';
+import {useOnboardingModalTranslation} from '@hooks';
+
import styles from './OnboardingModal.module.scss';
const OnboardingModal = () => {
diff --git a/src/components/UI/Modal/OnboardingModal/OnboardingModal.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/OnboardingModal/OnboardingModal.module.scss
similarity index 100%
rename from src/components/UI/Modal/OnboardingModal/OnboardingModal.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/OnboardingModal/OnboardingModal.module.scss
diff --git a/src/components/UI/Modal/ProgressModal/ProgressModalBody/ProgressModalBody.js b/workspace/apps/starkgate/web/src/components/UI/Modal/ProgressModal/ProgressModalBody/ProgressModalBody.jsx
similarity index 88%
rename from src/components/UI/Modal/ProgressModal/ProgressModalBody/ProgressModalBody.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ProgressModal/ProgressModalBody/ProgressModalBody.jsx
index 8340b705..54df21cb 100644
--- a/src/components/UI/Modal/ProgressModal/ProgressModalBody/ProgressModalBody.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/ProgressModal/ProgressModalBody/ProgressModalBody.jsx
@@ -1,7 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {ModalText} from '../../ModalText/ModalText';
+import {ModalText} from '@ui';
+
import styles from './ProgressModalBody.module.scss';
const ProgressModalBody = ({message}) => {
diff --git a/src/components/UI/Modal/ProgressModal/ProgressModalBody/ProgressModalBody.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/ProgressModal/ProgressModalBody/ProgressModalBody.module.scss
similarity index 100%
rename from src/components/UI/Modal/ProgressModal/ProgressModalBody/ProgressModalBody.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ProgressModal/ProgressModalBody/ProgressModalBody.module.scss
diff --git a/src/components/UI/Modal/ProgressModal/ProgressModalHeader/ProgressModalHeader.js b/workspace/apps/starkgate/web/src/components/UI/Modal/ProgressModal/ProgressModalHeader/ProgressModalHeader.jsx
similarity index 85%
rename from src/components/UI/Modal/ProgressModal/ProgressModalHeader/ProgressModalHeader.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ProgressModal/ProgressModalHeader/ProgressModalHeader.jsx
index 0a5836cb..0fcd1eb0 100644
--- a/src/components/UI/Modal/ProgressModal/ProgressModalHeader/ProgressModalHeader.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/ProgressModal/ProgressModalHeader/ProgressModalHeader.jsx
@@ -1,7 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {Loading, LoadingType, LoadingSize} from '../../../Loading/Loading';
+import {Loading, LoadingSize, LoadingType} from '@ui';
+
import styles from './ProgressModalHeader.module.scss';
const ProgressModalHeader = ({title}) => {
diff --git a/src/components/UI/Modal/ProgressModal/ProgressModalHeader/ProgressModalHeader.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/ProgressModal/ProgressModalHeader/ProgressModalHeader.module.scss
similarity index 100%
rename from src/components/UI/Modal/ProgressModal/ProgressModalHeader/ProgressModalHeader.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ProgressModal/ProgressModalHeader/ProgressModalHeader.module.scss
diff --git a/src/components/UI/Modal/ProgressModal/index.js b/workspace/apps/starkgate/web/src/components/UI/Modal/ProgressModal/index.jsx
similarity index 100%
rename from src/components/UI/Modal/ProgressModal/index.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/ProgressModal/index.jsx
diff --git a/workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalBody/TransactionSubmittedModalBody.jsx b/workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalBody/TransactionSubmittedModalBody.jsx
new file mode 100644
index 00000000..e1d74bed
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalBody/TransactionSubmittedModalBody.jsx
@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {useColors, useTransactionSubmittedModalTranslation} from '@hooks';
+import {isDeposit, isWithdrawal} from '@starkgate/shared';
+import {Alert, AlertType, ModalText} from '@ui';
+
+import styles from './TransactionSubmittedModalBody.module.scss';
+
+const TransactionSubmittedModalBody = ({transfer}) => {
+ const {
+ completeTransferToL1Txt,
+ transferToL1Txt,
+ transferToL2Txt,
+ transferToL2AlertTxt,
+ transferAlertTitle
+ } = useTransactionSubmittedModalTranslation();
+ const {colorIris} = useColors();
+ const {type, l2TxHash, l1TxHash, fastWithdrawal, autoWithdrawal} = transfer;
+ const isTransferCompleted = l1TxHash && l2TxHash;
+
+ const textMessage = isDeposit(type)
+ ? transferToL2Txt
+ : isTransferCompleted
+ ? completeTransferToL1Txt
+ : fastWithdrawal || autoWithdrawal
+ ? ''
+ : transferToL1Txt;
+
+ const textStyle = {
+ ...(isWithdrawal(type) && !isTransferCompleted ? {color: colorIris} : {width: '50%'})
+ };
+
+ return (
+
+ {textMessage}
+ {isDeposit(type) && (
+
+ );
+};
+
+TransactionSubmittedModalBody.propTypes = {
+ transfer: PropTypes.object
+};
+
+export default TransactionSubmittedModalBody;
diff --git a/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalBody/TransactionSubmittedModalBody.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalBody/TransactionSubmittedModalBody.module.scss
similarity index 100%
rename from src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalBody/TransactionSubmittedModalBody.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalBody/TransactionSubmittedModalBody.module.scss
diff --git a/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalButton.js b/workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalButton.jsx
similarity index 60%
rename from src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalButton.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalButton.jsx
index 429254ed..71e2e11c 100644
--- a/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalButton.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalButton.jsx
@@ -1,55 +1,50 @@
-import {openInNewTab, evaluate} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
-import {ReactComponent as EtherscanLogo} from '../../../../assets/svg/etherscan.svg';
-import {ReactComponent as StarkScanLogo} from '../../../../assets/svg/starkscan.svg';
-import {ReactComponent as VoyagerLogo} from '../../../../assets/svg/voyager.svg';
-import {ActionType} from '../../../../enums';
-import {
- useColors,
- useConstants,
- useEnvs,
- useTransactionSubmittedModalTranslation
-} from '../../../../hooks';
-import {Button} from '../../Button/Button';
-import {Circle} from '../../Circle/Circle';
+import {ReactComponent as EtherscanLogo} from '@assets/svg/etherscan.svg';
+import {ReactComponent as StarkScanLogo} from '@assets/svg/starkscan.svg';
+import {ReactComponent as VoyagerLogo} from '@assets/svg/voyager.svg';
+import {useColors, useConstants, useEnvs, useTransactionSubmittedModalTranslation} from '@hooks';
+import {isDeposit, isWithdrawal} from '@starkgate/shared';
+import {evaluate} from '@starkware-webapps/utils';
+import {openInNewTab} from '@starkware-webapps/utils-browser';
+import {Button, Circle} from '@ui';
const TransactionSubmittedModalButton = ({transfer, buttonProps}) => {
const {ETHERSCAN, VOYAGER, STARKSCAN} = useConstants();
const {ETHERSCAN_TX_URL, VOYAGER_TX_URL, STARKSCAN_TX_URL, STARKSCAN_ETH_TX_URL} = useEnvs();
const {colorIndigo, colorWhite, colorGainsboro} = useColors();
const {btnTxt} = useTransactionSubmittedModalTranslation();
- const {type, l2hash, l1hash} = transfer;
- const isTransferCompleted = l1hash && l2hash;
+ const {type, l2TxHash, l1TxHash} = transfer;
+ const isTransferCompleted = l1TxHash && l2TxHash;
let explorers;
- if (type === ActionType.TRANSFER_TO_L2 || isTransferCompleted) {
+ if (isDeposit(type) || isTransferCompleted) {
explorers = [
{
name: ETHERSCAN,
- url: ETHERSCAN_TX_URL(l1hash),
+ url: ETHERSCAN_TX_URL(l1TxHash),
logo:
+ {icon && {getTitleTxt()}
+
+ );
+};
+
+TransactionSubmittedModalHeader.propTypes = {
+ transfer: PropTypes.object
+};
+export default TransactionSubmittedModalHeader;
diff --git a/workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalHeader/TransactionSubmittedModalHeader.module.scss b/workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalHeader/TransactionSubmittedModalHeader.module.scss
new file mode 100644
index 00000000..5268710b
--- /dev/null
+++ b/workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModalHeader/TransactionSubmittedModalHeader.module.scss
@@ -0,0 +1,6 @@
+.transactionSubmittedModalHeader {
+ display: flex;
+ align-items: center;
+ text-align: center;
+ flex-direction: column;
+}
diff --git a/src/components/UI/Modal/TransactionSubmittedModal/index.js b/workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/index.jsx
similarity index 100%
rename from src/components/UI/Modal/TransactionSubmittedModal/index.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/TransactionSubmittedModal/index.jsx
diff --git a/src/components/UI/Modal/index.js b/workspace/apps/starkgate/web/src/components/UI/Modal/index.jsx
similarity index 100%
rename from src/components/UI/Modal/index.js
rename to workspace/apps/starkgate/web/src/components/UI/Modal/index.jsx
diff --git a/src/components/UI/MultiChoiceItem/MultiChoiceItem.js b/workspace/apps/starkgate/web/src/components/UI/MultiChoiceItem/MultiChoiceItem.jsx
similarity index 85%
rename from src/components/UI/MultiChoiceItem/MultiChoiceItem.js
rename to workspace/apps/starkgate/web/src/components/UI/MultiChoiceItem/MultiChoiceItem.jsx
index 59df764f..6669f166 100644
--- a/src/components/UI/MultiChoiceItem/MultiChoiceItem.js
+++ b/workspace/apps/starkgate/web/src/components/UI/MultiChoiceItem/MultiChoiceItem.jsx
@@ -1,10 +1,11 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
-import {ReactComponent as ForwardIcon} from '../../../assets/svg/icons/forward.svg';
-import {ReactComponent as LinkIcon} from '../../../assets/svg/icons/link.svg';
-import {CircleLogoSize, DynamicIcon, Loading, LoadingType} from '../index';
+import {ReactComponent as ForwardIcon} from '@assets/svg/icons/forward.svg';
+import {ReactComponent as LinkIcon} from '@assets/svg/icons/link.svg';
+import {toClasses} from '@starkware-webapps/utils-browser';
+import {CircleLogoSize, DynamicIcon, Loading, LoadingType} from '@ui';
+
import styles from './MultiChoiceItem.module.scss';
export const ChoiceItemType = {
diff --git a/src/components/UI/MultiChoiceItem/MultiChoiceItem.module.scss b/workspace/apps/starkgate/web/src/components/UI/MultiChoiceItem/MultiChoiceItem.module.scss
similarity index 100%
rename from src/components/UI/MultiChoiceItem/MultiChoiceItem.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/MultiChoiceItem/MultiChoiceItem.module.scss
diff --git a/src/components/UI/MultiChoiceList/MultiChoiceList.js b/workspace/apps/starkgate/web/src/components/UI/MultiChoiceList/MultiChoiceList.jsx
similarity index 79%
rename from src/components/UI/MultiChoiceList/MultiChoiceList.js
rename to workspace/apps/starkgate/web/src/components/UI/MultiChoiceList/MultiChoiceList.jsx
index 92f73925..2a3afea5 100644
--- a/src/components/UI/MultiChoiceList/MultiChoiceList.js
+++ b/workspace/apps/starkgate/web/src/components/UI/MultiChoiceList/MultiChoiceList.jsx
@@ -1,8 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {Menu} from '../Menu/Menu';
-import {MultiChoiceItem} from '../MultiChoiceItem/MultiChoiceItem';
+import {Menu, MultiChoiceItem} from '@ui';
export const MultiChoiceList = ({choices}) => {
const renderChoiceItems = () => {
diff --git a/src/components/UI/MultiChoiceMenu/MultiChoiceMenu.js b/workspace/apps/starkgate/web/src/components/UI/MultiChoiceMenu/MultiChoiceMenu.jsx
similarity index 94%
rename from src/components/UI/MultiChoiceMenu/MultiChoiceMenu.js
rename to workspace/apps/starkgate/web/src/components/UI/MultiChoiceMenu/MultiChoiceMenu.jsx
index 5e11e560..9097d107 100644
--- a/src/components/UI/MultiChoiceMenu/MultiChoiceMenu.js
+++ b/workspace/apps/starkgate/web/src/components/UI/MultiChoiceMenu/MultiChoiceMenu.jsx
@@ -1,7 +1,8 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
import {Alert, AlertType} from '../Alert/Alert';
import {Menu} from '../Menu/Menu';
import {MultiChoiceList} from '../MultiChoiceList/MultiChoiceList';
diff --git a/src/components/UI/MultiChoiceMenu/MultiChoiceMenu.module.scss b/workspace/apps/starkgate/web/src/components/UI/MultiChoiceMenu/MultiChoiceMenu.module.scss
similarity index 100%
rename from src/components/UI/MultiChoiceMenu/MultiChoiceMenu.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/MultiChoiceMenu/MultiChoiceMenu.module.scss
diff --git a/src/components/UI/NetworkMenu/NetworkMenu.js b/workspace/apps/starkgate/web/src/components/UI/NetworkMenu/NetworkMenu.jsx
similarity index 71%
rename from src/components/UI/NetworkMenu/NetworkMenu.js
rename to workspace/apps/starkgate/web/src/components/UI/NetworkMenu/NetworkMenu.jsx
index 8c865972..fb6d240a 100644
--- a/src/components/UI/NetworkMenu/NetworkMenu.js
+++ b/workspace/apps/starkgate/web/src/components/UI/NetworkMenu/NetworkMenu.jsx
@@ -1,13 +1,10 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {useSourceTranslation} from '../../../hooks';
-import {useLogin} from '../../../providers/AppProvider';
-import {useIsL1, useIsL2} from '../../../providers/TransferProvider';
-import {NetworkTitle} from '../NetworkTitle/NetworkTitle';
-import {SourceSelect} from '../SourceSelect/SourceSelect';
-import {TokenBalance} from '../TokenBalance/TokenBalance';
-import {Badge} from '../index';
+import {useSourceTranslation} from '@hooks';
+import {useIsL1, useIsL2, useLogin} from '@providers';
+import {Badge, NetworkTitle, SourceSelect, TokenBalance} from '@ui';
+
import styles from './NetworkMenu.module.scss';
export const NetworkMenu = ({networkName, tokenData, isTarget, onRefreshClick, children}) => {
diff --git a/src/components/UI/NetworkMenu/NetworkMenu.module.scss b/workspace/apps/starkgate/web/src/components/UI/NetworkMenu/NetworkMenu.module.scss
similarity index 100%
rename from src/components/UI/NetworkMenu/NetworkMenu.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/NetworkMenu/NetworkMenu.module.scss
diff --git a/src/components/UI/NetworkSwap/NetworkSwap.js b/workspace/apps/starkgate/web/src/components/UI/NetworkSwap/NetworkSwap.jsx
similarity index 73%
rename from src/components/UI/NetworkSwap/NetworkSwap.js
rename to workspace/apps/starkgate/web/src/components/UI/NetworkSwap/NetworkSwap.jsx
index 305998eb..edce4e6c 100644
--- a/src/components/UI/NetworkSwap/NetworkSwap.js
+++ b/workspace/apps/starkgate/web/src/components/UI/NetworkSwap/NetworkSwap.jsx
@@ -1,10 +1,11 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
-import {ReactComponent as SwapIcon} from '../../../assets/svg/icons/swap.svg';
-import {useColors} from '../../../hooks';
-import {Circle, CircleLogoSize} from '../index';
+import {ReactComponent as SwapIcon} from '@assets/svg/icons/swap.svg';
+import {useColors} from '@hooks';
+import {toClasses} from '@starkware-webapps/utils-browser';
+import {Circle, CircleLogoSize} from '@ui';
+
import styles from './NetworkSwap.module.scss';
export const NetworkSwap = ({isFlipped, onClick}) => {
diff --git a/src/components/UI/NetworkSwap/NetworkSwap.module.scss b/workspace/apps/starkgate/web/src/components/UI/NetworkSwap/NetworkSwap.module.scss
similarity index 100%
rename from src/components/UI/NetworkSwap/NetworkSwap.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/NetworkSwap/NetworkSwap.module.scss
diff --git a/src/components/UI/NetworkTitle/NetworkTitle.js b/workspace/apps/starkgate/web/src/components/UI/NetworkTitle/NetworkTitle.jsx
similarity index 80%
rename from src/components/UI/NetworkTitle/NetworkTitle.js
rename to workspace/apps/starkgate/web/src/components/UI/NetworkTitle/NetworkTitle.jsx
index d53ead3c..dd7fe504 100644
--- a/src/components/UI/NetworkTitle/NetworkTitle.js
+++ b/workspace/apps/starkgate/web/src/components/UI/NetworkTitle/NetworkTitle.jsx
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {CircleLogoSize} from '../CircleLogo/CircleLogo';
-import {CircleLogo} from '../index';
+import {CircleLogo, CircleLogoSize} from '@ui';
+
import styles from './NetworkTitle.module.scss';
export const NetworkTitle = ({networkName}) => (
diff --git a/src/components/UI/NetworkTitle/NetworkTitle.module.scss b/workspace/apps/starkgate/web/src/components/UI/NetworkTitle/NetworkTitle.module.scss
similarity index 100%
rename from src/components/UI/NetworkTitle/NetworkTitle.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/NetworkTitle/NetworkTitle.module.scss
diff --git a/src/components/UI/NetworkWalletButton/NetworkWalletButton.js b/workspace/apps/starkgate/web/src/components/UI/NetworkWalletButton/NetworkWalletButton.jsx
similarity index 71%
rename from src/components/UI/NetworkWalletButton/NetworkWalletButton.js
rename to workspace/apps/starkgate/web/src/components/UI/NetworkWalletButton/NetworkWalletButton.jsx
index 0f198c43..d426ca44 100644
--- a/src/components/UI/NetworkWalletButton/NetworkWalletButton.js
+++ b/workspace/apps/starkgate/web/src/components/UI/NetworkWalletButton/NetworkWalletButton.jsx
@@ -1,18 +1,16 @@
-import {NetworkType, WalletStatus} from '@starkware-industries/commons-js-enums';
import PropTypes from 'prop-types';
import {useEffect} from 'react';
-import {useConnectWalletTracking} from '../../../hooks';
-import {useApp} from '../../../providers/AppProvider';
-import {useMenu} from '../../../providers/MenuProvider';
-import {useLoginModal} from '../../../providers/ModalProvider';
-import {WalletButton} from '../index';
+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, trackConnectStaknetWalletClick] =
+ const [, trackConnectEthereumWalletClick, trackConnectStarknetWalletClick] =
useConnectWalletTracking();
useEffect(() => {
@@ -39,9 +37,7 @@ export const NetworkWalletButton = ({account, chain, logoPath, network, status,
};
const handleConnectWallet = () => {
- network === NetworkType.L1
- ? trackConnectEthereumWalletClick()
- : trackConnectStaknetWalletClick();
+ isL1Network(network) ? trackConnectEthereumWalletClick() : trackConnectStarknetWalletClick();
showLoginModal(network);
};
diff --git a/src/components/UI/RefreshIcon/RefreshIcon.js b/workspace/apps/starkgate/web/src/components/UI/RefreshIcon/RefreshIcon.jsx
similarity index 84%
rename from src/components/UI/RefreshIcon/RefreshIcon.js
rename to workspace/apps/starkgate/web/src/components/UI/RefreshIcon/RefreshIcon.jsx
index fc9e628a..fb9050f8 100644
--- a/src/components/UI/RefreshIcon/RefreshIcon.js
+++ b/workspace/apps/starkgate/web/src/components/UI/RefreshIcon/RefreshIcon.jsx
@@ -1,8 +1,9 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {useEffect, useState} from 'react';
-import {ReactComponent as RefreshSvg} from '../../../assets/svg/icons/refresh.svg';
+import {ReactComponent as RefreshSvg} from '@assets/svg/icons/refresh.svg';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
import styles from './RefreshIcon.module.scss';
export const RefreshIconSize = {
diff --git a/src/components/UI/RefreshIcon/RefreshIcon.module.scss b/workspace/apps/starkgate/web/src/components/UI/RefreshIcon/RefreshIcon.module.scss
similarity index 100%
rename from src/components/UI/RefreshIcon/RefreshIcon.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/RefreshIcon/RefreshIcon.module.scss
diff --git a/src/components/UI/SearchToken/SearchToken.js b/workspace/apps/starkgate/web/src/components/UI/SearchToken/SearchToken.jsx
similarity index 84%
rename from src/components/UI/SearchToken/SearchToken.js
rename to workspace/apps/starkgate/web/src/components/UI/SearchToken/SearchToken.jsx
index eeef98d0..40783dcb 100644
--- a/src/components/UI/SearchToken/SearchToken.js
+++ b/workspace/apps/starkgate/web/src/components/UI/SearchToken/SearchToken.jsx
@@ -1,9 +1,10 @@
import PropTypes from 'prop-types';
import React, {useEffect, useState} from 'react';
-import {ReactComponent as SearchIcon} from '../../../assets/svg/icons/search.svg';
-import {useColors, useSelectTokenTranslation} from '../../../hooks';
-import {Input} from '../index';
+import {ReactComponent as SearchIcon} from '@assets/svg/icons/search.svg';
+import {useColors, useSelectTokenTranslation} from '@hooks';
+import {Input} from '@ui';
+
import styles from './SearchToken.module.scss';
export const SearchToken = ({tokens, onSearchResults}) => {
diff --git a/src/components/UI/SearchToken/SearchToken.module.scss b/workspace/apps/starkgate/web/src/components/UI/SearchToken/SearchToken.module.scss
similarity index 100%
rename from src/components/UI/SearchToken/SearchToken.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/SearchToken/SearchToken.module.scss
diff --git a/src/components/UI/SelectTokenList/SelectTokenList.js b/workspace/apps/starkgate/web/src/components/UI/SelectTokenList/SelectTokenList.jsx
similarity index 87%
rename from src/components/UI/SelectTokenList/SelectTokenList.js
rename to workspace/apps/starkgate/web/src/components/UI/SelectTokenList/SelectTokenList.jsx
index 6629217d..e47f8497 100644
--- a/src/components/UI/SelectTokenList/SelectTokenList.js
+++ b/workspace/apps/starkgate/web/src/components/UI/SelectTokenList/SelectTokenList.jsx
@@ -1,7 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {SelectTokenRow} from '../SelectTokenRow/SelectTokenRow';
+import {SelectTokenRow} from '@ui';
+
import styles from './SelectTokenList.module.scss';
export const SelectTokenList = ({tokens, onClick}) => (
diff --git a/src/components/UI/SelectTokenList/SelectTokenList.module.scss b/workspace/apps/starkgate/web/src/components/UI/SelectTokenList/SelectTokenList.module.scss
similarity index 100%
rename from src/components/UI/SelectTokenList/SelectTokenList.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/SelectTokenList/SelectTokenList.module.scss
diff --git a/src/components/UI/SelectTokenRow/SelectTokenRow.js b/workspace/apps/starkgate/web/src/components/UI/SelectTokenRow/SelectTokenRow.jsx
similarity index 87%
rename from src/components/UI/SelectTokenRow/SelectTokenRow.js
rename to workspace/apps/starkgate/web/src/components/UI/SelectTokenRow/SelectTokenRow.jsx
index a17ca9df..0f626864 100644
--- a/src/components/UI/SelectTokenRow/SelectTokenRow.js
+++ b/workspace/apps/starkgate/web/src/components/UI/SelectTokenRow/SelectTokenRow.jsx
@@ -1,9 +1,10 @@
-import {formatBalance, toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
-import {CircleLogoSize} from '../CircleLogo/CircleLogo';
-import {CircleLogo, Loading, LoadingSize} from '../index';
+import {formatBalance} from '@starkware-webapps/utils';
+import {toClasses} from '@starkware-webapps/utils-browser';
+import {CircleLogo, CircleLogoSize, Loading, LoadingSize} from '@ui';
+
import styles from './SelectTokenRow.module.scss';
export const SelectTokenRow = ({tokenData, onClick}) => {
diff --git a/src/components/UI/SelectTokenRow/SelectTokenRow.module.scss b/workspace/apps/starkgate/web/src/components/UI/SelectTokenRow/SelectTokenRow.module.scss
similarity index 94%
rename from src/components/UI/SelectTokenRow/SelectTokenRow.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/SelectTokenRow/SelectTokenRow.module.scss
index aed33c04..311b818e 100644
--- a/src/components/UI/SelectTokenRow/SelectTokenRow.module.scss
+++ b/workspace/apps/starkgate/web/src/components/UI/SelectTokenRow/SelectTokenRow.module.scss
@@ -36,7 +36,6 @@
font-weight: 500;
font-size: 14px;
line-height: 20px;
- text-transform: uppercase;
transition: 0.4s ease-in-out;
}
@@ -57,7 +56,6 @@
font-size: 12px;
line-height: 16px;
color: $--color-ceil;
- text-transform: uppercase;
transition: 0.4s ease-in-out;
}
}
diff --git a/src/components/UI/SideButton/SideButton.js b/workspace/apps/starkgate/web/src/components/UI/SideButton/SideButton.jsx
similarity index 84%
rename from src/components/UI/SideButton/SideButton.js
rename to workspace/apps/starkgate/web/src/components/UI/SideButton/SideButton.jsx
index 8909f777..f0fe8369 100644
--- a/src/components/UI/SideButton/SideButton.js
+++ b/workspace/apps/starkgate/web/src/components/UI/SideButton/SideButton.jsx
@@ -1,8 +1,9 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {useVars} from '../../../hooks';
-import {useApp} from '../../../providers/AppProvider';
+import {useVars} from '@hooks';
+import {useApp} from '@providers';
+
import styles from './SideButton.module.scss';
export const SideButton = ({icon, onClick}) => {
diff --git a/src/components/UI/SideButton/SideButton.module.scss b/workspace/apps/starkgate/web/src/components/UI/SideButton/SideButton.module.scss
similarity index 100%
rename from src/components/UI/SideButton/SideButton.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/SideButton/SideButton.module.scss
diff --git a/src/components/UI/SourceMenuTab/SourceMenuTab.js b/workspace/apps/starkgate/web/src/components/UI/SourceMenuTab/SourceMenuTab.jsx
similarity index 86%
rename from src/components/UI/SourceMenuTab/SourceMenuTab.js
rename to workspace/apps/starkgate/web/src/components/UI/SourceMenuTab/SourceMenuTab.jsx
index 11373d03..fe68c059 100644
--- a/src/components/UI/SourceMenuTab/SourceMenuTab.js
+++ b/workspace/apps/starkgate/web/src/components/UI/SourceMenuTab/SourceMenuTab.jsx
@@ -1,7 +1,8 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
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}) => (
diff --git a/src/components/UI/SourceMenuTab/SourceMenuTab.module.scss b/workspace/apps/starkgate/web/src/components/UI/SourceMenuTab/SourceMenuTab.module.scss
similarity index 100%
rename from src/components/UI/SourceMenuTab/SourceMenuTab.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/SourceMenuTab/SourceMenuTab.module.scss
diff --git a/src/components/UI/SourceSelect/SourceSelect.js b/workspace/apps/starkgate/web/src/components/UI/SourceSelect/SourceSelect.jsx
similarity index 77%
rename from src/components/UI/SourceSelect/SourceSelect.js
rename to workspace/apps/starkgate/web/src/components/UI/SourceSelect/SourceSelect.jsx
index 6a3176ba..c1448f84 100644
--- a/src/components/UI/SourceSelect/SourceSelect.js
+++ b/workspace/apps/starkgate/web/src/components/UI/SourceSelect/SourceSelect.jsx
@@ -1,10 +1,10 @@
-import {Select, MenuItem, ListSubheader} from '@mui/material';
import React from 'react';
-import {categories, sources, depositConfig, withdrawConfig} from '../../../config/sources';
-import {useSource} from '../../../providers/SourceProvider';
-import {useIsL1} from '../../../providers/TransferProvider';
-import {CircleLogo, CircleLogoSize} from '../CircleLogo/CircleLogo';
+import {categories, depositConfig, sources, withdrawConfig} from '@config/sources';
+import {ListSubheader, MenuItem, Select} from '@mui/material';
+import {useIsL1, useSource} from '@providers';
+import {CircleLogo, CircleLogoSize} from '@ui';
+
import {SourceSelectTheme} from './SourceSelect.theme';
export const SourceSelect = () => {
diff --git a/src/components/UI/SourceSelect/SourceSelect.theme.js b/workspace/apps/starkgate/web/src/components/UI/SourceSelect/SourceSelect.theme.jsx
similarity index 92%
rename from src/components/UI/SourceSelect/SourceSelect.theme.js
rename to workspace/apps/starkgate/web/src/components/UI/SourceSelect/SourceSelect.theme.jsx
index 8f0cd11e..e9b85cfc 100644
--- a/src/components/UI/SourceSelect/SourceSelect.theme.js
+++ b/workspace/apps/starkgate/web/src/components/UI/SourceSelect/SourceSelect.theme.jsx
@@ -1,10 +1,10 @@
-import {createTheme, ThemeProvider} from '@mui/material';
import PropTypes from 'prop-types';
import React from 'react';
-import CollapseIcon from '../../../assets/svg/icons/collapse.svg';
-import SelectedIcon from '../../../assets/svg/icons/selected.svg';
-import {useColors, useFonts} from '../../../hooks';
+import CollapseIcon from '@assets/svg/icons/collapse.svg';
+import SelectedIcon from '@assets/svg/icons/selected.svg';
+import {useColors, useFonts} from '@hooks';
+import {ThemeProvider, createTheme} from '@mui/material';
export const SourceSelectTheme = ({children}) => {
const {
diff --git a/src/components/UI/StarknetWalletButton/StarknetWalletButton.js b/workspace/apps/starkgate/web/src/components/UI/StarknetWalletButton/StarknetWalletButton.jsx
similarity index 65%
rename from src/components/UI/StarknetWalletButton/StarknetWalletButton.js
rename to workspace/apps/starkgate/web/src/components/UI/StarknetWalletButton/StarknetWalletButton.jsx
index d867a316..e614c7d0 100644
--- a/src/components/UI/StarknetWalletButton/StarknetWalletButton.js
+++ b/workspace/apps/starkgate/web/src/components/UI/StarknetWalletButton/StarknetWalletButton.jsx
@@ -1,11 +1,10 @@
-import {ChainInfo, NetworkType} from '@starkware-industries/commons-js-enums';
import React from 'react';
import {addAddressPadding} from 'starknet';
-import {useEnvs} from '../../../hooks';
-import {useIsL2} from '../../../providers/TransferProvider';
-import {useL2Wallet} from '../../../providers/WalletsProvider';
-import {NetworkWalletButton} from '../index';
+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();
diff --git a/src/components/UI/Stepper/Stepper.js b/workspace/apps/starkgate/web/src/components/UI/Stepper/Stepper.jsx
similarity index 91%
rename from src/components/UI/Stepper/Stepper.js
rename to workspace/apps/starkgate/web/src/components/UI/Stepper/Stepper.jsx
index 003f55c7..58673793 100644
--- a/src/components/UI/Stepper/Stepper.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Stepper/Stepper.jsx
@@ -1,7 +1,8 @@
-import {Step, StepLabel, Stepper as MuiStepper} from '@mui/material';
import PropTypes from 'prop-types';
import React from 'react';
+import {Stepper as MuiStepper, Step, StepLabel} from '@mui/material';
+
import styles from './Stepper.module.scss';
import {StepperTheme} from './Stepper.theme';
diff --git a/src/components/UI/Stepper/Stepper.module.scss b/workspace/apps/starkgate/web/src/components/UI/Stepper/Stepper.module.scss
similarity index 100%
rename from src/components/UI/Stepper/Stepper.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Stepper/Stepper.module.scss
diff --git a/src/components/UI/Stepper/Stepper.theme.js b/workspace/apps/starkgate/web/src/components/UI/Stepper/Stepper.theme.jsx
similarity index 92%
rename from src/components/UI/Stepper/Stepper.theme.js
rename to workspace/apps/starkgate/web/src/components/UI/Stepper/Stepper.theme.jsx
index 6aeb7ce9..fe75f44c 100644
--- a/src/components/UI/Stepper/Stepper.theme.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Stepper/Stepper.theme.jsx
@@ -1,8 +1,8 @@
-import {createTheme, ThemeProvider} from '@mui/material';
import PropTypes from 'prop-types';
import React from 'react';
-import {useColors} from '../../../hooks';
+import {useColors} from '@hooks';
+import {ThemeProvider, createTheme} from '@mui/material';
export const StepperTheme = ({children}) => {
const {colorGainsboro1, colorSpaceCadet, colorLightSteelBlue} = useColors();
diff --git a/src/components/UI/StyledBackground/StyledBackground.js b/workspace/apps/starkgate/web/src/components/UI/StyledBackground/StyledBackground.jsx
similarity index 85%
rename from src/components/UI/StyledBackground/StyledBackground.js
rename to workspace/apps/starkgate/web/src/components/UI/StyledBackground/StyledBackground.jsx
index c5d5690a..ea997e69 100644
--- a/src/components/UI/StyledBackground/StyledBackground.js
+++ b/workspace/apps/starkgate/web/src/components/UI/StyledBackground/StyledBackground.jsx
@@ -1,8 +1,9 @@
import PropTypes from 'prop-types';
import React from 'react';
-import lightAccentBackgroundPath from '../../../assets/img/light-accent.png';
-import starsBackgroundPath from '../../../assets/img/stars.png';
+import lightAccentBackgroundPath from '@assets/img/light-accent.png';
+import starsBackgroundPath from '@assets/img/stars.png';
+
import styles from './StyledBackground.module.scss';
export const StyledBackground = ({withStars = true, withLightAccent = true, children}) => {
diff --git a/src/components/UI/StyledBackground/StyledBackground.module.scss b/workspace/apps/starkgate/web/src/components/UI/StyledBackground/StyledBackground.module.scss
similarity index 100%
rename from src/components/UI/StyledBackground/StyledBackground.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/StyledBackground/StyledBackground.module.scss
diff --git a/src/components/UI/Tab/Tab.js b/workspace/apps/starkgate/web/src/components/UI/Tab/Tab.jsx
similarity index 86%
rename from src/components/UI/Tab/Tab.js
rename to workspace/apps/starkgate/web/src/components/UI/Tab/Tab.jsx
index 67c8d30c..a45cbf24 100644
--- a/src/components/UI/Tab/Tab.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Tab/Tab.jsx
@@ -1,7 +1,8 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
import styles from './Tab.module.scss';
export const Tab = ({text, isActive, icon, onClick}) => {
diff --git a/src/components/UI/Tab/Tab.module.scss b/workspace/apps/starkgate/web/src/components/UI/Tab/Tab.module.scss
similarity index 100%
rename from src/components/UI/Tab/Tab.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Tab/Tab.module.scss
diff --git a/src/components/UI/Tabs/Tabs.js b/workspace/apps/starkgate/web/src/components/UI/Tabs/Tabs.jsx
similarity index 82%
rename from src/components/UI/Tabs/Tabs.js
rename to workspace/apps/starkgate/web/src/components/UI/Tabs/Tabs.jsx
index 722a430e..8ce522be 100644
--- a/src/components/UI/Tabs/Tabs.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Tabs/Tabs.jsx
@@ -1,8 +1,7 @@
import PropTypes from 'prop-types';
import React, {Fragment} from 'react';
-import {Divider} from '../Divider/Divider';
-import {Tab} from '../Tab/Tab';
+import {Divider, Tab} from '@ui';
export const Tabs = ({tabs}) => {
return tabs.map((tab, index) => {
diff --git a/src/components/UI/Toast/AlphaDisclaimerToast/AlphaDisclaimerToast.js b/workspace/apps/starkgate/web/src/components/UI/Toast/AlphaDisclaimerToast/AlphaDisclaimerToast.jsx
similarity index 72%
rename from src/components/UI/Toast/AlphaDisclaimerToast/AlphaDisclaimerToast.js
rename to workspace/apps/starkgate/web/src/components/UI/Toast/AlphaDisclaimerToast/AlphaDisclaimerToast.jsx
index 8af1c504..4fe7db8e 100644
--- a/src/components/UI/Toast/AlphaDisclaimerToast/AlphaDisclaimerToast.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Toast/AlphaDisclaimerToast/AlphaDisclaimerToast.jsx
@@ -1,9 +1,9 @@
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 '../CallToActionToast/CallToActionToast';
+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();
diff --git a/src/components/UI/Toast/CallToActionToast/CallToActionToast.js b/workspace/apps/starkgate/web/src/components/UI/Toast/CallToActionToast/CallToActionToast.jsx
similarity index 86%
rename from src/components/UI/Toast/CallToActionToast/CallToActionToast.js
rename to workspace/apps/starkgate/web/src/components/UI/Toast/CallToActionToast/CallToActionToast.jsx
index 156ad10a..0b3586a4 100644
--- a/src/components/UI/Toast/CallToActionToast/CallToActionToast.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Toast/CallToActionToast/CallToActionToast.jsx
@@ -1,14 +1,11 @@
-import {Transition} from '@headlessui/react';
-import {hexToRgba} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
-import {useColors} from '../../../../hooks';
-import {ToastBody} from '../ToastBody/ToastBody';
-import {ToastButton, ToastButtons} from '../ToastButton/ToastButton';
-import {ToastFooter} from '../ToastFooter/ToastFooter';
-import {ToastHeader} from '../ToastHeader/ToastHeader';
-import {ToastSeparator} from '../ToastSeparator/ToastSeparator';
+import {Transition} from '@headlessui/react';
+import {useColors} from '@hooks';
+import {hexToRgba} from '@starkware-webapps/utils-browser';
+import {ToastBody, ToastButton, ToastButtons, ToastFooter, ToastHeader, ToastSeparator} from '@ui';
+
import styles from './CallToActionToast.module.scss';
export const CallToActionToast = ({
diff --git a/src/components/UI/Toast/CallToActionToast/CallToActionToast.module.scss b/workspace/apps/starkgate/web/src/components/UI/Toast/CallToActionToast/CallToActionToast.module.scss
similarity index 100%
rename from src/components/UI/Toast/CallToActionToast/CallToActionToast.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Toast/CallToActionToast/CallToActionToast.module.scss
diff --git a/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.js b/workspace/apps/starkgate/web/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.jsx
similarity index 72%
rename from src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.js
rename to workspace/apps/starkgate/web/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.jsx
index 351e25df..6a610bed 100644
--- a/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.jsx
@@ -1,12 +1,11 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {ReactComponent as EthereumIcon} from '../../../../assets/svg/chains/ethereum.svg';
-import {ReactComponent as ArrowRight} from '../../../../assets/svg/icons/arrow-right.svg';
-import {useColors, useCompleteTransferToastTranslation} from '../../../../hooks';
-import {TransferData} from '../../../Features';
-import {CallToActionToast} from '../CallToActionToast/CallToActionToast';
-import {TransferLogLink} from '../ToastFooter/ToastFooter';
+import {ReactComponent as EthereumIcon} from '@assets/svg/chains/ethereum.svg';
+import {ReactComponent as ArrowRight} from '@assets/svg/icons/arrow-right.svg';
+import {TransferData} from '@features';
+import {useColors, useCompleteTransferToastTranslation} from '@hooks';
+import {CallToActionToast, TransferLogLink} from '@ui';
export const CompleteTransferToL1Toast = ({
t,
diff --git a/src/components/UI/Toast/ErrorToast/ErrorToast.js b/workspace/apps/starkgate/web/src/components/UI/Toast/ErrorToast/ErrorToast.jsx
similarity index 81%
rename from src/components/UI/Toast/ErrorToast/ErrorToast.js
rename to workspace/apps/starkgate/web/src/components/UI/Toast/ErrorToast/ErrorToast.jsx
index f9f56097..6ff9af88 100644
--- a/src/components/UI/Toast/ErrorToast/ErrorToast.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Toast/ErrorToast/ErrorToast.jsx
@@ -1,9 +1,10 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React, {useState} from 'react';
-import {ReactComponent as WarningIcon} from '../../../../assets/svg/icons/warning.svg';
-import {CollapseExpand} from '../../CollapseExpand/CollapseExpand';
+import {ReactComponent as WarningIcon} from '@assets/svg/icons/warning.svg';
+import {toClasses} from '@starkware-webapps/utils-browser';
+import {CollapseExpand} from '@ui';
+
import styles from './ErrorToast.module.scss';
export const ErrorToast = ({title, msg, isCollapsable}) => {
diff --git a/src/components/UI/Toast/ErrorToast/ErrorToast.module.scss b/workspace/apps/starkgate/web/src/components/UI/Toast/ErrorToast/ErrorToast.module.scss
similarity index 100%
rename from src/components/UI/Toast/ErrorToast/ErrorToast.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Toast/ErrorToast/ErrorToast.module.scss
diff --git a/src/components/UI/Toast/ToastBody/ToastBody.js b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastBody/ToastBody.jsx
similarity index 81%
rename from src/components/UI/Toast/ToastBody/ToastBody.js
rename to workspace/apps/starkgate/web/src/components/UI/Toast/ToastBody/ToastBody.jsx
index e59a18db..41b66614 100644
--- a/src/components/UI/Toast/ToastBody/ToastBody.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastBody/ToastBody.jsx
@@ -12,6 +12,6 @@ export const ToastBody = ({body, style}) => {
};
ToastBody.propTypes = {
- body: PropTypes.string,
+ body: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
style: PropTypes.object
};
diff --git a/src/components/UI/Toast/ToastBody/ToastBody.module.scss b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastBody/ToastBody.module.scss
similarity index 100%
rename from src/components/UI/Toast/ToastBody/ToastBody.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Toast/ToastBody/ToastBody.module.scss
diff --git a/src/components/UI/Toast/ToastButton/ToastButton.js b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastButton/ToastButton.jsx
similarity index 100%
rename from src/components/UI/Toast/ToastButton/ToastButton.js
rename to workspace/apps/starkgate/web/src/components/UI/Toast/ToastButton/ToastButton.jsx
diff --git a/src/components/UI/Toast/ToastButton/ToastButton.module.scss b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastButton/ToastButton.module.scss
similarity index 100%
rename from src/components/UI/Toast/ToastButton/ToastButton.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Toast/ToastButton/ToastButton.module.scss
diff --git a/src/components/UI/Toast/ToastFooter/ToastFooter.js b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastFooter/ToastFooter.jsx
similarity index 91%
rename from src/components/UI/Toast/ToastFooter/ToastFooter.js
rename to workspace/apps/starkgate/web/src/components/UI/Toast/ToastFooter/ToastFooter.jsx
index eb97863f..de8a1efe 100644
--- a/src/components/UI/Toast/ToastFooter/ToastFooter.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastFooter/ToastFooter.jsx
@@ -1,7 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {useToastsTranslation} from '../../../../hooks';
+import {useToastsTranslation} from '@hooks';
+
import styles from './ToastFooter.module.scss';
export const ToastFooter = ({children}) => {
diff --git a/src/components/UI/Toast/ToastFooter/ToastFooter.module.scss b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastFooter/ToastFooter.module.scss
similarity index 100%
rename from src/components/UI/Toast/ToastFooter/ToastFooter.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Toast/ToastFooter/ToastFooter.module.scss
diff --git a/src/components/UI/Toast/ToastHeader/ToastHeader.js b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastHeader/ToastHeader.jsx
similarity index 86%
rename from src/components/UI/Toast/ToastHeader/ToastHeader.js
rename to workspace/apps/starkgate/web/src/components/UI/Toast/ToastHeader/ToastHeader.jsx
index 98aad88b..01bf2631 100644
--- a/src/components/UI/Toast/ToastHeader/ToastHeader.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastHeader/ToastHeader.jsx
@@ -1,7 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {ReactComponent as CloseIcon} from '../../../../assets/svg/icons/close.svg';
+import {ReactComponent as CloseIcon} from '@assets/svg/icons/close.svg';
+
import styles from './ToastHeader.module.scss';
export const ToastHeader = ({title, onClose, withClose}) => {
diff --git a/src/components/UI/Toast/ToastHeader/ToastHeader.module.scss b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastHeader/ToastHeader.module.scss
similarity index 100%
rename from src/components/UI/Toast/ToastHeader/ToastHeader.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Toast/ToastHeader/ToastHeader.module.scss
diff --git a/src/components/UI/Toast/ToastSeparator/ToastSeparator.js b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastSeparator/ToastSeparator.jsx
similarity index 100%
rename from src/components/UI/Toast/ToastSeparator/ToastSeparator.js
rename to workspace/apps/starkgate/web/src/components/UI/Toast/ToastSeparator/ToastSeparator.jsx
diff --git a/src/components/UI/Toast/ToastSeparator/ToastSeparator.module.scss b/workspace/apps/starkgate/web/src/components/UI/Toast/ToastSeparator/ToastSeparator.module.scss
similarity index 100%
rename from src/components/UI/Toast/ToastSeparator/ToastSeparator.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/Toast/ToastSeparator/ToastSeparator.module.scss
diff --git a/src/components/UI/Toast/TransferToast/TransferToast.js b/workspace/apps/starkgate/web/src/components/UI/Toast/TransferToast/TransferToast.jsx
similarity index 61%
rename from src/components/UI/Toast/TransferToast/TransferToast.js
rename to workspace/apps/starkgate/web/src/components/UI/Toast/TransferToast/TransferToast.jsx
index 047dd60b..80134171 100644
--- a/src/components/UI/Toast/TransferToast/TransferToast.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Toast/TransferToast/TransferToast.jsx
@@ -1,25 +1,23 @@
-import {isConsumed, isPending, isRejected} from '@starkware-industries/commons-js-enums';
import PropTypes from 'prop-types';
import React from 'react';
-import {usePendingTransferToastTranslation} from '../../../../hooks';
-import {TransferData} from '../../../Features';
-import {ToastFooter, TransferLogLink} from '../ToastFooter/ToastFooter';
-import {ToastHeader} from '../ToastHeader/ToastHeader';
-import {ToastSeparator} from '../ToastSeparator/ToastSeparator';
+import {TransferData} from '@features';
+import {usePendingTransferToastTranslation} from '@hooks';
+import {isConsumed, isPending, isRejected} from '@starkware-webapps/enums';
+import {ToastFooter, ToastHeader, ToastSeparator, TransferLogLink} from '@ui';
export const TransferToast = ({transfer, isLoading, onTransferLogLinkClick, onClose}) => {
const {pendingTxt, consumedTxt, rejectedTxt} = usePendingTransferToastTranslation();
const getTitle = () => {
- const {status} = transfer;
- if (isPending(status)) {
+ const {l2TxStatus} = transfer;
+ if (isPending(l2TxStatus)) {
return pendingTxt;
}
- if (isConsumed(status)) {
+ if (isConsumed(l2TxStatus)) {
return consumedTxt;
}
- if (isRejected(status)) {
+ if (isRejected(l2TxStatus)) {
return rejectedTxt;
}
};
diff --git a/src/components/UI/Toast/index.js b/workspace/apps/starkgate/web/src/components/UI/Toast/index.jsx
similarity index 67%
rename from src/components/UI/Toast/index.js
rename to workspace/apps/starkgate/web/src/components/UI/Toast/index.jsx
index 1a8437c0..8896de71 100644
--- a/src/components/UI/Toast/index.js
+++ b/workspace/apps/starkgate/web/src/components/UI/Toast/index.jsx
@@ -1,7 +1,10 @@
+export * from './ToastFooter/ToastFooter';
export * from './ToastBody/ToastBody';
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/src/components/UI/TokenBalance/TokenBalance.js b/workspace/apps/starkgate/web/src/components/UI/TokenBalance/TokenBalance.jsx
similarity index 84%
rename from src/components/UI/TokenBalance/TokenBalance.js
rename to workspace/apps/starkgate/web/src/components/UI/TokenBalance/TokenBalance.jsx
index c4fac6e2..5e979ce2 100644
--- a/src/components/UI/TokenBalance/TokenBalance.js
+++ b/workspace/apps/starkgate/web/src/components/UI/TokenBalance/TokenBalance.jsx
@@ -1,9 +1,11 @@
-import {formatBalance, shortenBalance, toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
-import {useTransferTranslation} from '../../../hooks';
-import {Loading, LoadingSize, RefreshIcon, RefreshIconSize} from '../index';
+import {useTransferTranslation} from '@hooks';
+import {formatBalance, shortenBalance} from '@starkware-webapps/utils';
+import {toClasses} from '@starkware-webapps/utils-browser';
+import {Loading, LoadingSize, RefreshIcon, RefreshIconSize} from '@ui';
+
import styles from './TokenBalance.module.scss';
export const TokenBalance = ({tokenData, onRefreshClick}) => {
diff --git a/src/components/UI/TokenBalance/TokenBalance.module.scss b/workspace/apps/starkgate/web/src/components/UI/TokenBalance/TokenBalance.module.scss
similarity index 100%
rename from src/components/UI/TokenBalance/TokenBalance.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/TokenBalance/TokenBalance.module.scss
diff --git a/src/components/UI/TokenInput/TokenInput.js b/workspace/apps/starkgate/web/src/components/UI/TokenInput/TokenInput.jsx
similarity index 83%
rename from src/components/UI/TokenInput/TokenInput.js
rename to workspace/apps/starkgate/web/src/components/UI/TokenInput/TokenInput.jsx
index b4f06a43..875c2f0c 100644
--- a/src/components/UI/TokenInput/TokenInput.js
+++ b/workspace/apps/starkgate/web/src/components/UI/TokenInput/TokenInput.jsx
@@ -1,11 +1,11 @@
-import {toClasses} from '@starkware-industries/commons-js-utils';
import PropTypes from 'prop-types';
import React from 'react';
-import {useTransferTranslation} from '../../../hooks';
+import {useTransferTranslation} from '@hooks';
+import {toClasses} from '@starkware-webapps/utils-browser';
// import {MaxButton} from '../MaxButton/MaxButton';
-import {TokenSelector} from '../TokenSelector/TokenSelector';
-import {Input} from '../index';
+import {Input, TokenSelector} from '@ui';
+
import styles from './TokenInput.module.scss';
export const TokenInput = ({
@@ -13,7 +13,6 @@ export const TokenInput = ({
hasError,
tokenData,
isInputDisabled,
- onMaxClick,
onTokenSelect,
onInputChange
}) => {
diff --git a/src/components/UI/TokenInput/TokenInput.module.scss b/workspace/apps/starkgate/web/src/components/UI/TokenInput/TokenInput.module.scss
similarity index 100%
rename from src/components/UI/TokenInput/TokenInput.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/TokenInput/TokenInput.module.scss
diff --git a/src/components/UI/TokenSelector/TokenSelector.js b/workspace/apps/starkgate/web/src/components/UI/TokenSelector/TokenSelector.jsx
similarity index 55%
rename from src/components/UI/TokenSelector/TokenSelector.js
rename to workspace/apps/starkgate/web/src/components/UI/TokenSelector/TokenSelector.jsx
index 042de472..91db0b9c 100644
--- a/src/components/UI/TokenSelector/TokenSelector.js
+++ b/workspace/apps/starkgate/web/src/components/UI/TokenSelector/TokenSelector.jsx
@@ -1,10 +1,10 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {ReactComponent as DownArrowIcon} from '../../../assets/svg/icons/collapse.svg';
-import {useColors} from '../../../hooks';
-import {CircleLogoSize} from '../CircleLogo/CircleLogo';
-import {CircleLogo, Icon} from '../index';
+import {ReactComponent as DownArrowIcon} from '@assets/svg/icons/collapse.svg';
+import {useColors} from '@hooks';
+import {CircleLogo, CircleLogoSize, Icon} from '@ui';
+
import styles from './TokenSelector.module.scss';
export const TokenSelector = ({tokenData, onClick}) => {
@@ -12,12 +12,16 @@ export const TokenSelector = ({tokenData, onClick}) => {
return (
-
diff --git a/src/components/UI/TokenSelector/TokenSelector.module.scss b/workspace/apps/starkgate/web/src/components/UI/TokenSelector/TokenSelector.module.scss
similarity index 91%
rename from src/components/UI/TokenSelector/TokenSelector.module.scss
rename to workspace/apps/starkgate/web/src/components/UI/TokenSelector/TokenSelector.module.scss
index 8418bd3a..833ff87d 100644
--- a/src/components/UI/TokenSelector/TokenSelector.module.scss
+++ b/workspace/apps/starkgate/web/src/components/UI/TokenSelector/TokenSelector.module.scss
@@ -7,7 +7,6 @@
font-size: 14px;
line-height: 24px;
color: $--color-white;
- text-transform: capitalize;
cursor: pointer;
background: $--color-dark-slate-blue;
border-radius: 8px;
diff --git a/src/components/UI/TransferButton/TransferButton.js b/workspace/apps/starkgate/web/src/components/UI/TransferButton/TransferButton.jsx
similarity index 77%
rename from src/components/UI/TransferButton/TransferButton.js
rename to workspace/apps/starkgate/web/src/components/UI/TransferButton/TransferButton.jsx
index ff4eefa7..3421d66a 100644
--- a/src/components/UI/TransferButton/TransferButton.js
+++ b/workspace/apps/starkgate/web/src/components/UI/TransferButton/TransferButton.jsx
@@ -1,9 +1,9 @@
import PropTypes from 'prop-types';
import React from 'react';
-import {useTransferTranslation} from '../../../hooks';
-import {useAmount} from '../../../providers/TransferProvider';
-import {MainMenuButton} from '../index';
+import {useTransferTranslation} from '@hooks';
+import {useAmount} from '@providers';
+import {MainMenuButton} from '@ui';
export const TransferButton = ({isDisabled, ...props}) => {
const {transferBtnTxt, amountBtnTxt} = useTransferTranslation();
diff --git a/src/components/UI/TransferLogContainer/TransferLogContainer.js b/workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.jsx
similarity index 66%
rename from src/components/UI/TransferLogContainer/TransferLogContainer.js
rename to workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.jsx
index 3663890f..856f0f2d 100644
--- a/src/components/UI/TransferLogContainer/TransferLogContainer.js
+++ b/workspace/apps/starkgate/web/src/components/UI/TransferLogContainer/TransferLogContainer.jsx
@@ -1,12 +1,19 @@
import PropTypes from 'prop-types';
import React, {useState} from 'react';
-import {useTransferLogContainerTranslation} from '../../../hooks';
-import {useMenu} from '../../../providers/MenuProvider';
-import {CollapseExpand} from '../CollapseExpand/CollapseExpand';
+import {useTransferLogContainerTranslation} from '@hooks';
+import {useMenu} from '@providers';
+import {CollapseExpand, Loading, LoadingType} from '@ui';
+
import styles from './TransferLogContainer.module.scss';
-export const TransferLogContainer = ({transferIndex, children, onShowTransfers}) => {
+export const TransferLogContainer = ({
+ transferIndex,
+ isLoading,
+ onShowTransfers,
+ onScrollEnd,
+ children
+}) => {
const {resetMenuProps} = useMenu();
const {titleTxt, singleOverviewTxt, overviewTxt, emptyMsgTxt, viewMoreTxt, viewLessTxt} =
useTransferLogContainerTranslation();
@@ -18,6 +25,13 @@ export const TransferLogContainer = ({transferIndex, children, onShowTransfers})
show && onShowTransfers();
};
+ const handleScroll = ({target: {scrollHeight, scrollTop, clientHeight}}) => {
+ const scrollEnd = scrollHeight - scrollTop === clientHeight;
+ if (scrollEnd) {
+ onScrollEnd();
+ }
+ };
+
const renderChildren = () => {
if (!children) {
return
- {renderChildren()}
+ {isLoading ? {emptyMsgTxt}
;
@@ -29,14 +43,12 @@ export const TransferLogContainer = ({transferIndex, children, onShowTransfers})
? `${children.length} ${overviewTxt}`
: `1 ${singleOverviewTxt}`}{' '}
{showChildren ? viewLessTxt : viewMoreTxt}
- {showChildren || transferIndex > -1 ? (
+ {(showChildren || transferIndex > -1) && (
-
);
@@ -48,13 +60,15 @@ export const TransferLogContainer = ({transferIndex, children, onShowTransfers})
{titleTxt}
+
- ) : (
- ''
)}
{children}
- In StarkGate Alpha, your transfer’s log history is saved in the local storage of the - browser. -
-As a result:
--
-
- Clearing the local storage will cause this data to be lost -
- Logging to StarkGate using multiple devices/browsers can cause data inconsistency -
Therefore, we recommend when using StarkGate Alpha:
--
-
- Refrain from closing or switching browsers (or PC) -
- Do not refresh the page while the transfer is being processed -
- Do not delete the local storage of the browser -
- // We have opened a{' '} - // - // community channel on Discord - // {' '} - // to help each other use StarkGate. - //
- // ) - // }, { question: 'Why can’t I use StarkGate with {insert favorite}Token?', answer: ({chain}
;
+};
+
+ChainLabel.propTypes = {
+ chain: PropTypes.string
+};
diff --git a/workspace/packages/ui/src/components/WalletButton/ChainLabel/ChainLabel.module.scss b/workspace/packages/ui/src/components/WalletButton/ChainLabel/ChainLabel.module.scss
new file mode 100644
index 00000000..d4eb5a31
--- /dev/null
+++ b/workspace/packages/ui/src/components/WalletButton/ChainLabel/ChainLabel.module.scss
@@ -0,0 +1,19 @@
+@import '@styles';
+
+.chainLabel {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ padding: 4px 7px;
+ background: $--color-indigo;
+ border: 1px solid $--color-light-steel-blue;
+ border-radius: 4px;
+ font-weight: 600;
+ font-size: 10px;
+ line-height: 1;
+ letter-spacing: 0.01em;
+
+ @media only screen and (max-width: $--breakpoint-mobile) {
+ display: none;
+ }
+}
diff --git a/workspace/packages/ui/src/components/WalletButton/ConnectWalletButton/ConnectWalletButton.jsx b/workspace/packages/ui/src/components/WalletButton/ConnectWalletButton/ConnectWalletButton.jsx
new file mode 100644
index 00000000..4bad0f70
--- /dev/null
+++ b/workspace/packages/ui/src/components/WalletButton/ConnectWalletButton/ConnectWalletButton.jsx
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {useColors, useTranslation} from '@hooks';
+import {WalletStatus} from '@starkware-webapps/enums';
+import {evaluate} from '@starkware-webapps/utils';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
+import {Button} from '../../Button/Button';
+import styles from './ConnectWalletButton.module.scss';
+
+export const ConnectWalletButton = ({network, status, texts, onClick}) => {
+ const {colorOrangeSoda, colorFlame, colorWhite} = useColors();
+ const {CONNECT_TXT, CONNECTING_TXT} = useTranslation('WalletButton', texts);
+
+ return (
+
+ );
+};
+
+ConnectWalletButton.propTypes = {
+ network: PropTypes.string,
+ status: PropTypes.string,
+ texts: PropTypes.object,
+ onClick: PropTypes.func
+};
diff --git a/workspace/packages/ui/src/components/WalletButton/ConnectWalletButton/ConnectWalletButton.module.scss b/workspace/packages/ui/src/components/WalletButton/ConnectWalletButton/ConnectWalletButton.module.scss
new file mode 100644
index 00000000..623e2dad
--- /dev/null
+++ b/workspace/packages/ui/src/components/WalletButton/ConnectWalletButton/ConnectWalletButton.module.scss
@@ -0,0 +1,11 @@
+.connectWalletButton {
+ padding: 12px 16px;
+ font-size: 12px;
+ line-height: 18px;
+ font-weight: 600;
+ border-width: 0;
+
+ &.connecting {
+ pointer-events: none;
+ }
+}
diff --git a/workspace/packages/ui/src/components/WalletButton/WalletButton/WalletButton.jsx b/workspace/packages/ui/src/components/WalletButton/WalletButton/WalletButton.jsx
new file mode 100644
index 00000000..d986e6ad
--- /dev/null
+++ b/workspace/packages/ui/src/components/WalletButton/WalletButton/WalletButton.jsx
@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {WalletStatus} from '@starkware-webapps/enums';
+
+import {AccountWalletButton} from '../AccountWalletButton/AccountWalletButton';
+import {ConnectWalletButton} from '../ConnectWalletButton/ConnectWalletButton';
+import {WalletErrorAlert} from '../WalletErrorAlert/WalletErrorAlert';
+import styles from './WalletButton.module.scss';
+
+export const WalletButton = ({
+ account,
+ chain,
+ network,
+ logoPath,
+ status,
+ error,
+ menuOptions,
+ texts = {},
+ onClick
+}) => {
+ return (
+
+ {status === WalletStatus.CONNECTED ? (
+
+ );
+};
+
+WalletButton.propTypes = {
+ account: PropTypes.string,
+ chain: PropTypes.string,
+ network: PropTypes.string,
+ logoPath: PropTypes.string,
+ status: PropTypes.string,
+ error: PropTypes.object,
+ menuOptions: PropTypes.object,
+ texts: PropTypes.object,
+ onClick: PropTypes.func
+};
diff --git a/workspace/packages/ui/src/components/WalletButton/WalletButton/WalletButton.module.scss b/workspace/packages/ui/src/components/WalletButton/WalletButton/WalletButton.module.scss
new file mode 100644
index 00000000..fe079651
--- /dev/null
+++ b/workspace/packages/ui/src/components/WalletButton/WalletButton/WalletButton.module.scss
@@ -0,0 +1,5 @@
+.walletButton {
+ display: inline-flex;
+ flex-direction: row;
+ position: relative;
+}
diff --git a/workspace/packages/ui/src/components/WalletButton/WalletErrorAlert/WalletErrorAlert.jsx b/workspace/packages/ui/src/components/WalletButton/WalletErrorAlert/WalletErrorAlert.jsx
new file mode 100644
index 00000000..16b950ce
--- /dev/null
+++ b/workspace/packages/ui/src/components/WalletButton/WalletErrorAlert/WalletErrorAlert.jsx
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React, {useEffect, useState} from 'react';
+
+import {Alert, AlertType} from '../../Alert/Alert';
+import styles from './WalletErrorAlert.module.scss';
+
+export const WalletErrorAlert = ({error}) => {
+ const [showError, setShowError] = useState(true);
+
+ useEffect(() => {
+ setShowError(true);
+ }, [error]);
+
+ const onAlertClose = () => {
+ setShowError(false);
+ };
+
+ return error && showError ? (
+
+
+ ) : null;
+};
+
+WalletErrorAlert.propTypes = {
+ error: PropTypes.object
+};
diff --git a/workspace/packages/ui/src/components/WalletButton/WalletErrorAlert/WalletErrorAlert.module.scss b/workspace/packages/ui/src/components/WalletButton/WalletErrorAlert/WalletErrorAlert.module.scss
new file mode 100644
index 00000000..ad96ed55
--- /dev/null
+++ b/workspace/packages/ui/src/components/WalletButton/WalletErrorAlert/WalletErrorAlert.module.scss
@@ -0,0 +1,9 @@
+@import '@styles';
+
+.walletErrorAlert {
+ position: fixed;
+ margin-top: #{$--header-height}px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 99999;
+}
diff --git a/workspace/packages/ui/src/components/WalletButton/WalletMenu/WalletMenu.jsx b/workspace/packages/ui/src/components/WalletButton/WalletMenu/WalletMenu.jsx
new file mode 100644
index 00000000..9bae4db6
--- /dev/null
+++ b/workspace/packages/ui/src/components/WalletButton/WalletMenu/WalletMenu.jsx
@@ -0,0 +1,116 @@
+import PropTypes from 'prop-types';
+import React, {useEffect, useState} from 'react';
+
+import {ReactComponent as CopyIcon} from '@assets/svg/copy.svg';
+import {ReactComponent as DisconnectIcon} from '@assets/svg/disconnect.svg';
+import {ReactComponent as LinkIcon} from '@assets/svg/link.svg';
+import {useTranslation} from '@hooks';
+import {mergeDeep, shortenAddress} from '@starkware-webapps/utils';
+import {copyToClipboard, openInNewTab, toClasses} from '@starkware-webapps/utils-browser';
+
+import {DynamicIcon} from '../../DynamicIcon/DynamicIcon';
+import {TransactionLogContainer, TransactionLogItem} from '../../TransactionLog';
+import {WalletMenuItem} from '../WalletMenuItem/WalletMenuItem';
+import styles from './WalletMenu.module.scss';
+
+const FADE_IN_OUT_DELAY = 100;
+const COPIED_FEEDBACK_DELAY = 1500;
+
+export const WalletMenu = ({
+ isOpen,
+ account,
+ transactions = [],
+ logoPath,
+ explorerUrl,
+ texts = {},
+ onDisconnect
+}) => {
+ const {EXPLORE_TXT, DISCONNECT_TXT, COPY_TXT, COPIED_TXT} = mergeDeep(
+ useTranslation('WalletButton.WalletMenu'),
+ texts
+ );
+ const [show, setShow] = useState(false);
+ const [copyTooltip, setCopyTooltip] = useState(COPY_TXT);
+
+ useEffect(() => {
+ const timeoutId = setTimeout(() => setShow(isOpen), FADE_IN_OUT_DELAY);
+ return () => {
+ clearTimeout(timeoutId);
+ };
+ }, [isOpen]);
+
+ const items = [
+ {
+ icon:
+ {renderTransactions()}
+
+ );
+};
+
+WalletMenu.propTypes = {
+ isOpen: PropTypes.bool,
+ account: PropTypes.string,
+ transactions: PropTypes.array,
+ logoPath: PropTypes.string,
+ explorerUrl: PropTypes.string,
+ texts: PropTypes.object,
+ onDisconnect: PropTypes.func
+};
diff --git a/workspace/packages/ui/src/components/WalletButton/WalletMenu/WalletMenu.module.scss b/workspace/packages/ui/src/components/WalletButton/WalletMenu/WalletMenu.module.scss
new file mode 100644
index 00000000..209f799c
--- /dev/null
+++ b/workspace/packages/ui/src/components/WalletButton/WalletMenu/WalletMenu.module.scss
@@ -0,0 +1,57 @@
+@import '@styles';
+
+.walletMenu {
+ opacity: 0;
+ pointer-events: none;
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ right: 0;
+ top: #{$--header-height}px;
+ background: $--color-space-cadet;
+ border: 1px solid $--color-indigo;
+ box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
+ border-radius: 8px;
+ padding: 7px 10px;
+ z-index: 99999;
+ transition: 0.3s ease-in-out;
+
+ .items {
+ background: $--color-indigo;
+ border-radius: 7px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 8px 8px 16px;
+ gap: 8px;
+ margin-bottom: 8px;
+
+ & div:not(:last-child) {
+ margin-right: 8px;
+ }
+
+ .left {
+ display: inherit;
+ margin-right: 25px;
+ pointer-events: none;
+
+ .address {
+ color: $--color-white;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ margin-left: 10px;
+ }
+ }
+
+ .right {
+ display: inherit;
+ margin-left: 25px;
+ }
+ }
+
+ &.isOpen {
+ opacity: 1;
+ pointer-events: all;
+ }
+}
diff --git a/workspace/packages/ui/src/components/WalletButton/WalletMenuItem/WalletMenuItem.jsx b/workspace/packages/ui/src/components/WalletButton/WalletMenuItem/WalletMenuItem.jsx
new file mode 100644
index 00000000..7c83e9d3
--- /dev/null
+++ b/workspace/packages/ui/src/components/WalletButton/WalletMenuItem/WalletMenuItem.jsx
@@ -0,0 +1,34 @@
+import {PropTypes} from 'prop-types';
+import React, {useState} from 'react';
+
+import {useColors} from '@hooks';
+import {toClasses} from '@starkware-webapps/utils-browser';
+
+import {Tooltip} from '../../Tooltip/Tooltip';
+import styles from './WalletMenuItem.module.scss';
+
+export const WalletMenuItem = ({icon, disable, tooltip, onClick}) => {
+ const {colorVeryLightAzure, colorWhite} = useColors();
+ const [color, setColor] = useState(colorWhite);
+
+ return (
+
+
+
+
+ {shortenAddress(account)}
+ {renderItems()}
+ setColor(colorVeryLightAzure)}
+ onMouseLeave={() => setColor(colorWhite)}
+ >
+ {icon}
+
+
+
+ );
+};
+
+Header.propTypes = {
+ leftChildren: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+ rightChildren: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
+};
diff --git a/workspace/packages/ui/src/containers/Header/Header.module.scss b/workspace/packages/ui/src/containers/Header/Header.module.scss
new file mode 100644
index 00000000..c506bc56
--- /dev/null
+++ b/workspace/packages/ui/src/containers/Header/Header.module.scss
@@ -0,0 +1,35 @@
+@import '@styles';
+
+.header {
+ height: #{$--header-height}px;
+ border-bottom: 1px solid transparent;
+ justify-content: space-between;
+ background: $--color-dark-slate-blue;
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
+ transition: 0.3s ease-in-out;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+
+ @media only screen and (max-width: $--breakpoint-mobile) {
+ justify-content: space-evenly;
+ }
+
+ .left {
+ padding: 16px 24px;
+ display: flex;
+ align-items: flex-start;
+ }
+
+ .right {
+ padding: 16px 24px;
+ display: flex;
+ flex-direction: row;
+
+ > div,
+ > button {
+ margin-left: 24px;
+ }
+ }
+}
diff --git a/workspace/packages/ui/src/containers/Main/Main.jsx b/workspace/packages/ui/src/containers/Main/Main.jsx
new file mode 100644
index 00000000..a29a9c7b
--- /dev/null
+++ b/workspace/packages/ui/src/containers/Main/Main.jsx
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {toClasses} from '@starkware-webapps/utils-browser';
+
+import styles from './Main.module.scss';
+
+export const Main = ({children, ...props}) => {
+ return (
+ {leftChildren}
+ {{rightChildren}
}
+
+ {children}
+
+ );
+};
+
+Main.propTypes = {
+ className: PropTypes.string,
+ children: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
+};
diff --git a/workspace/packages/ui/src/containers/Main/Main.module.scss b/workspace/packages/ui/src/containers/Main/Main.module.scss
new file mode 100644
index 00000000..c131563a
--- /dev/null
+++ b/workspace/packages/ui/src/containers/Main/Main.module.scss
@@ -0,0 +1,4 @@
+.main {
+ position: absolute;
+ overflow: auto;
+}
diff --git a/workspace/packages/ui/src/containers/index.jsx b/workspace/packages/ui/src/containers/index.jsx
new file mode 100644
index 00000000..4574e2ee
--- /dev/null
+++ b/workspace/packages/ui/src/containers/index.jsx
@@ -0,0 +1,4 @@
+export * from './Footer/Footer';
+export * from './Header/Header';
+export * from './Main/Main';
+export {default as translations} from './translations';
diff --git a/workspace/packages/ui/src/containers/translations.ts b/workspace/packages/ui/src/containers/translations.ts
new file mode 100644
index 00000000..461b160c
--- /dev/null
+++ b/workspace/packages/ui/src/containers/translations.ts
@@ -0,0 +1,5 @@
+export default {
+ Footer: {
+ RIGHTS_TXT: '© {{fullYear}} StarkWare Industries Ltd. All Rights Reserved'
+ }
+};
diff --git a/workspace/packages/ui/src/declaration.d.ts b/workspace/packages/ui/src/declaration.d.ts
new file mode 100644
index 00000000..3bb09f27
--- /dev/null
+++ b/workspace/packages/ui/src/declaration.d.ts
@@ -0,0 +1,2 @@
+declare module '*.scss';
+declare module '*.svg';
diff --git a/workspace/packages/ui/src/hooks/index.tsx b/workspace/packages/ui/src/hooks/index.tsx
new file mode 100644
index 00000000..12afff34
--- /dev/null
+++ b/workspace/packages/ui/src/hooks/index.tsx
@@ -0,0 +1,14 @@
+export * from './useColors';
+export * from './useFonts';
+export * from './useVars';
+export * from './useAnimation';
+export * from './useLogger';
+export * from './useFetchData';
+export * from './usePrevious';
+export * from './useDidMountEffect';
+export * from './useConstants';
+export * from './useEnvs';
+export * from './useContract';
+export * from './useTracking';
+export * from './useTranslation';
+export * from './useIsMounted';
diff --git a/workspace/packages/ui/src/hooks/useAnimation.tsx b/workspace/packages/ui/src/hooks/useAnimation.tsx
new file mode 100644
index 00000000..ba2d3e1e
--- /dev/null
+++ b/workspace/packages/ui/src/hooks/useAnimation.tsx
@@ -0,0 +1,21 @@
+import {useState} from 'react';
+
+type Timeout = ReturnType