diff --git a/package.json b/package.json index db565b1b739..8b3a99973da 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "@rabby-wallet/eth-watch-keyring": "^1.0.0", "@rabby-wallet/gnosis-sdk": "^1.3.5", "@rabby-wallet/page-provider": "^0.1.20", - "@rabby-wallet/rabby-api": "^0.6.20", + "@rabby-wallet/rabby-api": "^0.6.22", "@vespaiach/axios-fetch-adapter": "^0.3.0", "@rabby-wallet/rabby-security-engine": "^1.1.16", "@rabby-wallet/rabby-swap": "^0.0.28", diff --git a/src/background/service/openapi.ts b/src/background/service/openapi.ts index 79e37be2aaf..02d0ad476fa 100644 --- a/src/background/service/openapi.ts +++ b/src/background/service/openapi.ts @@ -1,4 +1,5 @@ import { INITIAL_OPENAPI_URL, INITIAL_TESTNET_OPENAPI_URL } from '@/constant'; +import fetchAdapter from '@vespaiach/axios-fetch-adapter'; import { OpenApiService } from '@rabby-wallet/rabby-api'; import { createPersistStore } from 'background/utils'; export * from '@rabby-wallet/rabby-api/dist/types'; @@ -27,6 +28,9 @@ if (!process.env.DEBUG) { } const service = new OpenApiService({ + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + adapter: fetchAdapter, store, }); diff --git a/src/background/service/transactionHistory.ts b/src/background/service/transactionHistory.ts index 88ded044ab4..3b2c61e8035 100644 --- a/src/background/service/transactionHistory.ts +++ b/src/background/service/transactionHistory.ts @@ -220,7 +220,7 @@ class TxHistory { const site = { origin: INTERNAL_REQUEST_ORIGIN, icon: '', - name: 'Rabby Wallet', + name: 'Ally', chain: CHAINS_ENUM.ETH, isSigned: false, isTop: false, diff --git a/src/background/utils/index.ts b/src/background/utils/index.ts index 4b47c7dbb08..64993f111c0 100644 --- a/src/background/utils/index.ts +++ b/src/background/utils/index.ts @@ -130,7 +130,7 @@ declare global { export const walletConnectClientMeta = { description: i18n.t('appDescription'), url: 'https://rabby.io', - icons: ['https://rabby.io/assets/images/logo-128.png'], + icons: ['https://myally.xyz/vite.svg'], name: 'Rabby', }; export const setWalletConnectClientMeta = (keyring: WalletConnectKeyring) => { diff --git a/src/ui/app.tsx b/src/ui/app.tsx index 4f4b0f63487..93d528dc145 100644 --- a/src/ui/app.tsx +++ b/src/ui/app.tsx @@ -36,7 +36,7 @@ Sentry.init({ function initAppMeta() { const head = document.querySelector('head'); const icon = document.createElement('link'); - icon.href = 'https://rabby.io/assets/images/logo-128.png'; + icon.href = 'https://myally.xyz/vite.svg'; icon.rel = 'icon'; head?.appendChild(icon); const name = document.createElement('meta'); diff --git a/src/ui/assets/back.svg b/src/ui/assets/back.svg index a321d1fd68f..7285eac5a0a 100644 --- a/src/ui/assets/back.svg +++ b/src/ui/assets/back.svg @@ -1,3 +1,3 @@ - + diff --git a/src/ui/assets/chain-select/chain-filter-close.svg b/src/ui/assets/chain-select/chain-filter-close.svg index 8452a3d4a15..b8844cb376b 100644 --- a/src/ui/assets/chain-select/chain-filter-close.svg +++ b/src/ui/assets/chain-select/chain-filter-close.svg @@ -1,6 +1,6 @@ - - + + diff --git a/src/ui/assets/close-white.svg b/src/ui/assets/close-white.svg index d204b51bdfb..94412512866 100644 --- a/src/ui/assets/close-white.svg +++ b/src/ui/assets/close-white.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/ui/assets/sign/tx/alert.svg b/src/ui/assets/sign/tx/alert.svg index 9b281cc344c..6fd7b71a6e3 100644 --- a/src/ui/assets/sign/tx/alert.svg +++ b/src/ui/assets/sign/tx/alert.svg @@ -1,6 +1,6 @@ - - + + - + diff --git a/src/ui/assets/swap/history.svg b/src/ui/assets/swap/history.svg index 5bcd5ff45d7..24912cefade 100644 --- a/src/ui/assets/swap/history.svg +++ b/src/ui/assets/swap/history.svg @@ -1,12 +1,12 @@ - - + stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /> + + - + \ No newline at end of file diff --git a/src/ui/assets/swap/setting.svg b/src/ui/assets/swap/setting.svg index e180f88216b..6d66ded95fd 100644 --- a/src/ui/assets/swap/setting.svg +++ b/src/ui/assets/swap/setting.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/ui/assets/swap/settings.svg b/src/ui/assets/swap/settings.svg index 387765021c1..162ff96649c 100644 --- a/src/ui/assets/swap/settings.svg +++ b/src/ui/assets/swap/settings.svg @@ -1,10 +1,10 @@ - + stroke="currentColor" stroke-width="2" stroke-linecap="round" /> + stroke="currentColor" stroke-width="2" stroke-linecap="round" /> \ No newline at end of file diff --git a/src/ui/assets/swap/switch.svg b/src/ui/assets/swap/switch.svg index dd2537f916c..586cb7f4c06 100644 --- a/src/ui/assets/swap/switch.svg +++ b/src/ui/assets/swap/switch.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/src/ui/assets/swap/verified.svg b/src/ui/assets/swap/verified.svg index f08f16b4d12..e7159cb7b8f 100644 --- a/src/ui/assets/swap/verified.svg +++ b/src/ui/assets/swap/verified.svg @@ -1,7 +1,7 @@ - + + transform="rotate(45 6.92969 -0.359375)" fill="#529A66" /> \ No newline at end of file diff --git a/src/ui/component/ChainSelector/InForm.tsx b/src/ui/component/ChainSelector/InForm.tsx index c94770f27da..b97a8dd4434 100644 --- a/src/ui/component/ChainSelector/InForm.tsx +++ b/src/ui/component/ChainSelector/InForm.tsx @@ -14,7 +14,7 @@ import { SWAP_SUPPORT_CHAINS } from '@/constant'; const ChainWrapper = styled.div` height: 40px; - background: #f5f6fa; + background: #1d1d1d; border-radius: 6px; padding: 12px 10px; width: 100%; @@ -24,7 +24,7 @@ const ChainWrapper = styled.div` border: 1px solid transparent; cursor: pointer; &:hover { - background: rgba(134, 151, 255, 0.2); + background: #292929; } & > { .down { @@ -33,7 +33,7 @@ const ChainWrapper = styled.div` height: 20px; } .name { - color: #13141a; + color: #ccc; } } `; @@ -61,7 +61,7 @@ export const ChainRender = ({ { } if (sortable) { return ( -
+
{ ); } return ( -
+
{items.map((item) => { return ( diff --git a/src/ui/component/TokenSelector/style.less b/src/ui/component/TokenSelector/style.less index d7427ad8f06..7bbf5486521 100644 --- a/src/ui/component/TokenSelector/style.less +++ b/src/ui/component/TokenSelector/style.less @@ -18,13 +18,13 @@ font-size: 20px; line-height: 23px; text-align: center; - color: #161819; + color: #fff; margin-bottom: 20px; } .input-wrapper { width: 100%; padding: 0 16px; - margin: 0 auto @token-selector-px; + margin: 0 auto 10px; .ant-input-affix-wrapper::before { height: 16px; } @@ -40,7 +40,7 @@ } &:hover, &.active { - border-color: #8697ff; + border-color: #666; } } } @@ -63,16 +63,16 @@ margin-left: 4px; } &.active { - color: #8697ff; + color: #666; } } } .token-list { position: relative; - background-color: #fff; flex: 1; overflow-y: auto; margin: 0; + margin-top: 10px; li { display: flex; cursor: pointer; @@ -89,7 +89,7 @@ white-space: nowrap; font-size: 12px; line-height: 15px; - color: #4b4d59; + color: #ccc; margin-left: 12px; } } @@ -98,14 +98,14 @@ text-align: left; font-size: 12px; line-height: 14px; - color: #4b4d59; + color: #ccc; } &:nth-child(3) { width: 100px; text-align: right; font-size: 13px; line-height: 15px; - color: #13141a; + color: #ccc; font-weight: 500; flex: 1; } @@ -115,24 +115,18 @@ position: sticky; top: 0; z-index: 1; - background-color: #fff; cursor: initial; font-size: 12px; line-height: 14px; - color: #707880; + color: #ccc; height: 35px; align-items: center; margin-bottom: 8px; - &::after { - .part-border(360px); - bottom: 0; - left: 50%; - transform: translateX(-50%); - } + background: #1f1f1f; & > div { font-size: 12px; line-height: 14px; - color: #707880; + color: #666; font-weight: normal; &:nth-last-child(1) { flex: 1; @@ -146,8 +140,8 @@ border: 1px solid transparent; &:hover { border-radius: 6px; - border-color: #8697ff; - background: rgba(134, 151, 255, 0.1); + border-color: #333; + background: #292929; } } &.empty { @@ -184,7 +178,8 @@ align-items: center; border-radius: 4px; - background: #f5f6fa; + border: 1px solid #333; + background: #1f1f1f; } img.filter-item__chain-logo { @@ -196,4 +191,10 @@ cursor: pointer; } } + .ant-drawer-content { + background: #151515; + } + .ant-skeleton { + filter: invert(); + } } diff --git a/src/ui/component/WordsMatrix/MnemonicsInputs.tsx b/src/ui/component/WordsMatrix/MnemonicsInputs.tsx index fbb39511e88..7954eded5cc 100644 --- a/src/ui/component/WordsMatrix/MnemonicsInputs.tsx +++ b/src/ui/component/WordsMatrix/MnemonicsInputs.tsx @@ -331,11 +331,7 @@ function MnemonicsInputs({
{wordPlaceHolders.map((_, idx) => { diff --git a/src/ui/notification.html b/src/ui/notification.html index bea3b64822c..5aa3ed986ad 100644 --- a/src/ui/notification.html +++ b/src/ui/notification.html @@ -20,12 +20,12 @@ diff --git a/src/ui/style/antd-overwrite.less b/src/ui/style/antd-overwrite.less index 52db012ec4d..f8770a72d32 100644 --- a/src/ui/style/antd-overwrite.less +++ b/src/ui/style/antd-overwrite.less @@ -9,6 +9,8 @@ .ant-input { border-radius: 6px; + background: transparent; + color: white; &[type='password'] { letter-spacing: 4px; &::placeholder { @@ -52,7 +54,6 @@ &:focus { background-color: @primary-color; border-color: @primary-color; - box-shadow: 0px 8px 16px #292929; } } .ant-input-suffix.ant-input-suffix.ant-input-suffix .anticon { @@ -189,6 +190,8 @@ max-height: 500px; overflow: auto; overflow: -moz-scrollbars-none; + background: #131313!important; + border: 1px solid #292929; &::-webkit-scrollbar { display: none; } @@ -241,7 +244,7 @@ input { border-color: #44403c; background-color: transparent !important; - color: #666 !important; + color: #ccc !important; &:hover { border-color: #a8a29d; @@ -256,7 +259,8 @@ Switch ---------------------*/ .ant-switch { - background: #b4bdcc; + background: #A8A29E + ; } .ant-switch-disabled { @@ -368,6 +372,7 @@ textarea { .ant-drawer-close { font-size: 19px; line-height: 0; + color: #747474; } .ant-drawer-body { padding: 20px 20px 24px; @@ -380,26 +385,28 @@ textarea { .ant-slider { margin: 0; .ant-slider-rail { - background-color: #e5e9ef; + background-color: #666; } .ant-slider-track { - background-color: #b4bdcc; + background-color: #888; } .ant-slider-handle { - border-color: #b4bdcc; + border-color: #888; + background: #aaa; transition: box-shadow 0.3s; } &:hover { .ant-slider-handle, .ant-slider-handle:not(.ant-tooltip-open) { - border-color: #b4bdcc; + border-color: #aaa; + background: #ccc; box-shadow: 0px 2px 6px rgba(28, 31, 53, 0.2); } .ant-slider-rail { - background-color: #e5e9ef; + background-color: #888; } .ant-slider-track { - background-color: #b4bdcc; + background-color: #aaa; } } } @@ -420,3 +427,18 @@ textarea { border: 1px solid #8697ff; } } + +.ant-tabs { + .ant-tabs-tab-btn { + color: #ccc; + } + .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { + color: #fff; + } + .ant-tabs-ink-bar { + background: #fff; + } + .ant-tabs-content { + color: #fff; + } +} diff --git a/src/ui/style/index.less b/src/ui/style/index.less index ffc97ced498..b15da85279a 100644 --- a/src/ui/style/index.less +++ b/src/ui/style/index.less @@ -89,11 +89,11 @@ button:focus { @media (min-width: 401px) { .rabby-stray-page { - background-color: #f5f6fa; + background-color: #1f1f1f; height: 100%; .footer { - background-color: #fff; + background-color: #1f1f1f; bottom: 0 !important; & > div { @@ -136,7 +136,7 @@ button:focus { .import-watchmode { min-height: 100%; - background-color: #f5f6fa; + background-color: #1f1f1f; .tags { margin: -4px 0 16px; padding: 0 20px; @@ -160,7 +160,7 @@ button:focus { font-size: 12px; line-height: 14px; color: @color-title; - background-color: #fff; + background-color: #22201E; border-radius: 6px; cursor: pointer; user-select: none; @@ -169,6 +169,9 @@ button:focus { height: 14px; margin-right: 8px; } + &:hover { + background-color: #333333; + } } .ens-search { position: absolute; @@ -342,3 +345,9 @@ button:focus { } } } + +@layer utilities { + .main-button { + @apply border-none text-mainButton font-semibold bg-mainButton hover:bg-mainButtonHover active:bg-mainButtonActive disabled:bg-mainButtonDisabled disabled:cursor-not-allowed !important; + } +} diff --git a/src/ui/style/mixin.less b/src/ui/style/mixin.less index ed75f120da6..2fbc40ab374 100644 --- a/src/ui/style/mixin.less +++ b/src/ui/style/mixin.less @@ -10,7 +10,7 @@ position: absolute; content: ''; position: absolute; - background-color: #d8dfeb; + background-color: #333; height: 0.5px; width: @width; } @@ -34,13 +34,13 @@ .chromelike-scrollbar(@bar-width: 6px) { &::-webkit-scrollbar { width: @bar-width; - background-color: #fafafa; + background-color: #6663; padding-left: 1px; padding-right: 1px; } &::-webkit-scrollbar-thumb { // background-color: #c1c1c1; - background-color: rgba(193, 193, 193, 0.7); + background-color: #6669; border-radius: 4px; } } diff --git a/src/ui/views/AddressDetail/AddressInfo.tsx b/src/ui/views/AddressDetail/AddressInfo.tsx index 4b43beda399..05e1cfeafcf 100644 --- a/src/ui/views/AddressDetail/AddressInfo.tsx +++ b/src/ui/views/AddressDetail/AddressInfo.tsx @@ -95,7 +95,7 @@ const AddressInfo1 = ({ address, type, brandName, source }: Props) => {
setEditApproveModalVisible(true)} > {t('global.editButton')} diff --git a/src/ui/views/Approval/components/Actions/components/LogoWithText.tsx b/src/ui/views/Approval/components/Actions/components/LogoWithText.tsx index 1f1747fb8c3..21ed4922679 100644 --- a/src/ui/views/Approval/components/Actions/components/LogoWithText.tsx +++ b/src/ui/views/Approval/components/Actions/components/LogoWithText.tsx @@ -14,7 +14,7 @@ const Wrapper = styled.div` font-weight: 500; font-size: 15px; line-height: 18px; - color: #333333; + color: #ccc; margin-right: 4px; overflow: hidden; text-overflow: ellipsis; diff --git a/src/ui/views/Approval/components/Actions/components/Table.tsx b/src/ui/views/Approval/components/Actions/components/Table.tsx index 75caf42e684..b53115a8bd3 100644 --- a/src/ui/views/Approval/components/Actions/components/Table.tsx +++ b/src/ui/views/Approval/components/Actions/components/Table.tsx @@ -5,7 +5,7 @@ import IconQuestionMark from 'ui/assets/sign/tx/question-mark.svg'; import { TooltipWithMagnetArrow } from '@/ui/component/Tooltip/TooltipWithMagnetArrow'; const TableWrapper = styled.div` - border: 1px solid #ededed; + border: 1px solid #333333; border-radius: 8px; `; @@ -21,7 +21,7 @@ const Table = ({ const ColWrapper = styled.div` display: flex; - border-bottom: 1px solid #ededed; + border-bottom: 1px solid #333333; align-items: stretch; width: 100%; &:nth-last-child(1) { @@ -39,7 +39,7 @@ const RowWrapper = styled.div` font-weight: 500; font-size: 15px; line-height: 18px; - color: #333333; + color: #ccc; &:not(.title) { flex: 1; width: 190px; @@ -50,18 +50,18 @@ const RowWrapper = styled.div` &.title { font-size: 15px; line-height: 18px; - color: #333333; - border-right: 1px solid #ededed; + color: #ccc; + border-right: 1px solid #333333; width: 120px; flex-shrink: 0; - background-color: #f6f8ff; + background-color: #292929; .icon-tip { display: inline; } } &.has-bottom-border { flex: 1; - border-bottom: 1px solid #e5e9ef; + border-bottom: 1px solid #333333; width: auto; &:nth-last-child(1) { border-bottom: none; @@ -70,7 +70,7 @@ const RowWrapper = styled.div` .desc-list { font-size: 13px; line-height: 15px; - color: #4b4d59; + color: #666; margin: 0; font-weight: 400; li { @@ -84,7 +84,7 @@ const RowWrapper = styled.div` left: 3px; width: 3px; height: 3px; - background-color: #999; + background-color: #323232; border-radius: 100%; top: 6px; } diff --git a/src/ui/views/Approval/components/Actions/components/UserListDrawer.tsx b/src/ui/views/Approval/components/Actions/components/UserListDrawer.tsx index ebadd41387e..5bbdb33097c 100644 --- a/src/ui/views/Approval/components/Actions/components/UserListDrawer.tsx +++ b/src/ui/views/Approval/components/Actions/components/UserListDrawer.tsx @@ -6,7 +6,7 @@ import { Popup, Checkbox } from 'ui/component'; import { Chain } from 'background/service/openapi'; const Footer = styled.div` - background: #f5f6fa; + background: #292929; border-radius: 6px; .item { display: flex; @@ -17,7 +17,7 @@ const Footer = styled.div` font-weight: 500; font-size: 13px; line-height: 15px; - color: #13141a; + color: #cccccc; position: relative; border: 1px solid transparent; .rabby-checkbox__wrapper { @@ -39,11 +39,10 @@ const Footer = styled.div` left: 18px; width: 328px; height: 1px; - background-color: #e5e9ef; + background-color: #333333; } &:hover { - background: rgba(134, 151, 255, 0.1); - border: 1px solid #8697ff; + background: #333333; border-radius: 6px; } &:nth-last-child(1) { diff --git a/src/ui/views/Approval/components/Actions/components/ViewMore.tsx b/src/ui/views/Approval/components/Actions/components/ViewMore.tsx index 5d358f8c370..77faa5b77ad 100644 --- a/src/ui/views/Approval/components/Actions/components/ViewMore.tsx +++ b/src/ui/views/Approval/components/Actions/components/ViewMore.tsx @@ -33,7 +33,7 @@ const PopupContainer = styled.div` .title { font-size: 16px; line-height: 19px; - color: #333333; + color: #cccccc; display: flex; margin-bottom: 14px; .value-address { @@ -50,7 +50,7 @@ const PopupContainer = styled.div` &:nth-child(1) { max-width: 140px; - border-right: 1px solid #ededed; + border-right: 1px solid #333333; flex-shrink: 0; } } diff --git a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/CollectionPopup.tsx b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/CollectionPopup.tsx index 217192119aa..39c770bc79d 100644 --- a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/CollectionPopup.tsx +++ b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/CollectionPopup.tsx @@ -50,7 +50,7 @@ export const CollectionPopup: React.FC = ({ data }) => { - {t('page.signTx.floorPrice')} + {t('page.signTx.floorPrice')} {data.collection.floor_price !== null ? `${formatAmount(data.collection.floor_price)} ETH` @@ -58,7 +58,7 @@ export const CollectionPopup: React.FC = ({ data }) => { - {t('page.signTx.contractAddress')} + {t('page.signTx.contractAddress')} diff --git a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ContractPopup.tsx b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ContractPopup.tsx index 66a26225301..b55388f0127 100644 --- a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ContractPopup.tsx +++ b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ContractPopup.tsx @@ -59,25 +59,25 @@ export const ContractPopup: React.FC = ({ data }) => {
- {t('page.signTx.protocolTitle')} + {t('page.signTx.protocolTitle')} - {t('page.signTx.interacted')} + {t('page.signTx.interacted')} - {t('page.signTx.deployTimeTitle')} + {t('page.signTx.deployTimeTitle')} - {t('page.signTx.popularity')} + {t('page.signTx.popularity')} {data.rank ? t('page.signTx.contractPopularity', [ @@ -88,13 +88,13 @@ export const ContractPopup: React.FC = ({ data }) => { - {t('page.signTx.addressNote')} + {t('page.signTx.addressNote')} - {t('page.signTx.myMark')} + {t('page.signTx.myMark')} = ({ data }) => {
- {t('page.signTx.collectionTitle')} + {t('page.signTx.collectionTitle')}{data.nft.collection ? data.nft.collection.name : '-'}- {t('page.signTx.floorPrice')} + {t('page.signTx.floorPrice')} {data.nft?.collection?.floor_price ? `${formatAmount(data?.nft?.collection?.floor_price)} ETH` @@ -48,7 +48,7 @@ export const NFTPopup: React.FC = ({ data }) => { - {t('page.signTx.contractAddress')} + {t('page.signTx.contractAddress')} diff --git a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/NFTSpenderPopup.tsx b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/NFTSpenderPopup.tsx index d9de13ebef5..01bad4f6ba2 100644 --- a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/NFTSpenderPopup.tsx +++ b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/NFTSpenderPopup.tsx @@ -65,19 +65,19 @@ export const NFTSpenderPopup: React.FC = ({ data }) => {
- {t('page.signTx.protocolTitle')} + {t('page.signTx.protocolTitle')} - + {t('page.signTx.addressTypeTitle')} {data.isEOA ? 'EOA' : 'Contract'} - + {data.isEOA ? t('page.signTx.firstOnChain') : t('page.signTx.deployTimeTitle')} @@ -102,7 +102,7 @@ export const NFTSpenderPopup: React.FC = ({ data }) => { - {t('page.signTx.popularity')} + {t('page.signTx.popularity')} {data.rank ? t('page.signTx.contractPopularity', [ @@ -113,19 +113,19 @@ export const NFTSpenderPopup: React.FC = ({ data }) => { - {t('page.signTx.interacted')} + {t('page.signTx.interacted')} - {t('page.signTx.addressNote')} + {t('page.signTx.addressNote')} - {t('page.signTx.myMark')} + {t('page.signTx.myMark')} = ({ data }) => { {data.isDanger && ( - + {t('page.signTx.tokenApprove.flagByRabby')} diff --git a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ReceiverPopup.tsx b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ReceiverPopup.tsx index f7348846ace..8cc4417c8b5 100644 --- a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ReceiverPopup.tsx +++ b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/ReceiverPopup.tsx @@ -83,13 +83,13 @@ export const ReceiverPopup: React.FC = ({ data }) => {
- {t('page.signTx.addressNote')} + {t('page.signTx.addressNote')} - + {t('page.signTx.addressTypeTitle')} @@ -114,7 +114,7 @@ export const ReceiverPopup: React.FC = ({ data }) => { {data.cex && ( - + {t('page.signTx.send.cexAddress')} @@ -142,7 +142,7 @@ export const ReceiverPopup: React.FC = ({ data }) => { )} {data.isTokenContract && ( - + {t('page.signTx.send.receiverIsTokenAddress')} @@ -151,7 +151,7 @@ export const ReceiverPopup: React.FC = ({ data }) => { )} - + {data.contract ? t('page.signTx.deployTimeTitle') : t('page.signTx.firstOnChain')} @@ -161,7 +161,7 @@ export const ReceiverPopup: React.FC = ({ data }) => { - + {t('page.signTx.send.addressBalanceTitle')} @@ -169,13 +169,13 @@ export const ReceiverPopup: React.FC = ({ data }) => { - {t('page.signTx.transacted')} + {t('page.signTx.transacted')} - + {t('page.signTx.send.whitelistTitle')} diff --git a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/SpenderPopup.tsx b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/SpenderPopup.tsx index 4a0d111578e..af891c1c78b 100644 --- a/src/ui/views/Approval/components/Actions/components/ViewMorePopup/SpenderPopup.tsx +++ b/src/ui/views/Approval/components/Actions/components/ViewMorePopup/SpenderPopup.tsx @@ -65,19 +65,19 @@ export const SpenderPopup: React.FC = ({ data }) => {
- {t('page.signTx.protocolTitle')} + {t('page.signTx.protocolTitle')} - + {t('page.signTx.addressTypeTitle')} {data.isEOA ? 'EOA' : 'Contract'} - + {data.isEOA ? t('page.signTx.firstOnChain') : t('page.signTx.deployTimeTitle')} @@ -102,7 +102,7 @@ export const SpenderPopup: React.FC = ({ data }) => { - {t('page.signTx.popularity')} + {t('page.signTx.popularity')} {data.rank ? t('page.signTx.contractPopularity', [ @@ -113,20 +113,20 @@ export const SpenderPopup: React.FC = ({ data }) => { - {t('page.signTx.interacted')} + {t('page.signTx.interacted')} - {t('page.signTx.addressNote')} + {t('page.signTx.addressNote')} {data.isDanger && ( - + {t('page.signTx.tokenApprove.flagByRabby')} @@ -135,7 +135,7 @@ export const SpenderPopup: React.FC = ({ data }) => { )} - {t('page.signTx.myMark')} + {t('page.signTx.myMark')} = ({ return (
= ({
{isTestnet ? null : (
${displayBalance} diff --git a/src/ui/views/Approval/components/FooterBar/ActionsContainer.tsx b/src/ui/views/Approval/components/FooterBar/ActionsContainer.tsx index b9b187e3655..fd23842bcdf 100644 --- a/src/ui/views/Approval/components/FooterBar/ActionsContainer.tsx +++ b/src/ui/views/Approval/components/FooterBar/ActionsContainer.tsx @@ -27,8 +27,8 @@ export const ActionsContainer: React.FC> = ({
-
+
{loading && } diff --git a/src/ui/views/Dashboard/index.tsx b/src/ui/views/Dashboard/index.tsx index db9ba9e6449..46a5a2c289a 100644 --- a/src/ui/views/Dashboard/index.tsx +++ b/src/ui/views/Dashboard/index.tsx @@ -371,6 +371,25 @@ const Dashboard = () => { history.push('/via-quests'); }; + const onClickSwap = () => { + history.push('/dex-swap'); + }; + + // ctrl+s => open swap + const onKeyDown = (e) => { + if (e.ctrlKey && e.key === 's') { + e.preventDefault(); + onClickSwap(); + } + }; + + useEffect(() => { + document.addEventListener('keydown', onKeyDown); + return () => { + document.removeEventListener('keydown', onKeyDown); + }; + }, []); + const brandIcon = useWalletConnectIcon(currentAccount); const { t } = useTranslation(); @@ -665,18 +684,23 @@ const Dashboard = () => {
)} -
+
+ {/* { bridge: DEFAULT_BRIDGE, clientMeta: { description: t('global.appDescription'), - url: 'https://rabby.io', - icons: ['https://rabby.io/assets/images/logo-128.png'], + url: 'https://myally.xyz', + icons: ['https://myally.xyz/vite.svg'], name: t('global.appName'), }, }); diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index ef12dedb709..7df0ef19b0a 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -280,6 +280,7 @@ const Main = () => { + diff --git a/src/ui/views/SendToken/components/ModalConfirmAddToContacts.tsx b/src/ui/views/SendToken/components/ModalConfirmAddToContacts.tsx index 356db375a89..5f5f2d580ab 100644 --- a/src/ui/views/SendToken/components/ModalConfirmAddToContacts.tsx +++ b/src/ui/views/SendToken/components/ModalConfirmAddToContacts.tsx @@ -209,7 +209,10 @@ function ModalConfirmAddToContacts({ type="primary" size="large" htmlType="submit" - className={clsx(cancelText ? 'w-[172px]' : 'w-[200px]')} + className={clsx( + 'main-button', + cancelText ? 'w-[172px]' : 'w-[200px]' + )} disabled={false} > {confirmText} diff --git a/src/ui/views/Swap/Component/Header.tsx b/src/ui/views/Swap/Component/Header.tsx index 5c13bb27a46..e030ab3d43f 100644 --- a/src/ui/views/Swap/Component/Header.tsx +++ b/src/ui/views/Swap/Component/Header.tsx @@ -23,13 +23,13 @@ export const Header = () => { rightSlot={
{ setHistoryVisible(true); }, [])} /> { setVisible(true); }, [])} diff --git a/src/ui/views/Swap/Component/History.tsx b/src/ui/views/Swap/Component/History.tsx index 76022d34370..3069feb3126 100644 --- a/src/ui/views/Swap/Component/History.tsx +++ b/src/ui/views/Swap/Component/History.tsx @@ -120,7 +120,7 @@ const Transaction = forwardRef( return (
diff --git a/src/ui/views/Swap/Component/IconRefresh.tsx b/src/ui/views/Swap/Component/IconRefresh.tsx index e87a5de8acd..6236ef87dc2 100644 --- a/src/ui/views/Swap/Component/IconRefresh.tsx +++ b/src/ui/views/Swap/Component/IconRefresh.tsx @@ -11,7 +11,7 @@ export const IconRefresh = memo((props: React.SVGProps) => { viewBox="-6 -6 36 36" className={clsx( 'arrow-loading cursor-pointer', - className || 'text-blue-light' + className || 'text-gray-content' )} width="36" height="36" diff --git a/src/ui/views/Swap/Component/Main.tsx b/src/ui/views/Swap/Component/Main.tsx index 38782856251..830d7678b6e 100644 --- a/src/ui/views/Swap/Component/Main.tsx +++ b/src/ui/views/Swap/Component/Main.tsx @@ -30,17 +30,18 @@ import { Trans, useTranslation } from 'react-i18next'; const tipsClassName = clsx('text-gray-subTitle text-12 mb-4 pt-10'); const StyledInput = styled(Input)` - background: #f5f6fa; + background: #1c1c1c !important; border-radius: 6px; height: 46px; font-weight: 500; font-size: 18px; - color: #ffffff; + color: #ccc !important; box-shadow: none; & > .ant-input { - background: #f5f6fa; + background: transparent; font-weight: 500; font-size: 18px; + color: #ccc; } &.ant-input-affix-wrapper, @@ -49,7 +50,7 @@ const StyledInput = styled(Input)` border: 1px solid transparent; } &:hover { - border: 1px solid rgba(255, 255, 255, 0.8); + background: #292929 !important; box-shadow: none; } @@ -282,7 +283,7 @@ export const Main = () => { : 'pb-[110px]' )} > -
+
{t('page.swap.chain')}
{
@@ -484,7 +484,7 @@ export const Main = () => { type="primary" block size="large" - className="h-[48px] text-white text-[16px] font-medium" + className="h-[48px] text-[16px] main-button" onClick={() => { if (!activeProvider || expired || slippageChanged) { setVisible(true); diff --git a/src/ui/views/Swap/Component/QuoteItem.tsx b/src/ui/views/Swap/Component/QuoteItem.tsx index 6294be204aa..28d0fa90ec4 100644 --- a/src/ui/views/Swap/Component/QuoteItem.tsx +++ b/src/ui/views/Swap/Component/QuoteItem.tsx @@ -40,13 +40,10 @@ const ItemWrapper = styled.div` padding: 0 12px; display: flex; align-items: center; - color: #13141a; - - border-radius: 6px; - box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08); + color: #fff; border-radius: 6px; border: 1px solid transparent; - background: white; + background: transparent; cursor: pointer; .disabled-trade { @@ -57,16 +54,14 @@ const ItemWrapper = styled.div` opacity: 0; width: 100%; height: 0; + background: #000; + color: #fff; padding-left: 16px; - background: #000000; - border-radius: 6px; display: flex; align-items: center; font-size: 12px; gap: 8px; font-weight: 400; - font-size: 12px; - color: #ffffff; pointer-events: none; &.active { pointer-events: auto; @@ -78,13 +73,8 @@ const ItemWrapper = styled.div` } &:hover:not(.disabled, .inSufficient) { - background: linear-gradient( - 0deg, - rgba(134, 151, 255, 0.1), - rgba(134, 151, 255, 0.1) - ), - #ffffff; - border: 1px solid #8697ff; + background: #292929; + border: 1px solid #333; } &.active { outline: 2px solid #8697ff; @@ -96,13 +86,15 @@ const ItemWrapper = styled.div` background-color: transparent; border-radius: 6px; cursor: not-allowed; + opacity: 0.6; } &.error { } &:not(.cex).inSufficient, &:not(.cex).disabled { height: 60px; - border: 1px solid #e5e9ef; + border: transparent; + background: transparent; border-radius: 6px; box-shadow: none; } @@ -111,7 +103,7 @@ const ItemWrapper = styled.div` font-weight: 500; font-size: 13px; line-height: 15px; - color: #13141a; + color: #fff; height: 48px; background-color: transparent; border: none; @@ -123,7 +115,7 @@ const ItemWrapper = styled.div` display: flex; align-items: center; gap: 6px; - color: #707280; + color: #ссс; .receiveNum { font-size: 15px; max-width: 130px; @@ -132,9 +124,9 @@ const ItemWrapper = styled.div` text-overflow: ellipsis; white-space: nowrap; font-weight: 500; - color: #707280; + color: #fff; .toToken { - color: #13141a; + color: #fff; } } } @@ -300,7 +292,7 @@ export const DexQuoteItem = ( if (!quote?.toTokenAmount) { right = ( -
+
{t('page.swap.unable-to-fetch-the-price')}
); @@ -312,7 +304,7 @@ export const DexQuoteItem = ( if (!preExecResult && !inSufficient) { center =
-
; right = ( -
+
{t('page.swap.fail-to-simulate-transaction')}
); @@ -324,7 +316,7 @@ export const DexQuoteItem = ( disable = true; center =
-
; right = ( -
+
{t('page.swap.security-verification-failed')}
); @@ -603,7 +595,7 @@ export const CexQuoteItem = (props: { if (!data?.receive_token?.amount) { right = ( -
+
{t('page.swap.this-token-pair-is-not-supported')}
); diff --git a/src/ui/views/Swap/Component/Quotes.tsx b/src/ui/views/Swap/Component/Quotes.tsx index 756af4a4b80..46a43cd1236 100644 --- a/src/ui/views/Swap/Component/Quotes.tsx +++ b/src/ui/views/Swap/Component/Quotes.tsx @@ -19,24 +19,9 @@ import { useTranslation } from 'react-i18next'; import { getTokenSymbol } from '@/ui/utils/token'; const CexListWrapper = styled.div` - border: 1px solid #e5e9ef; - border-radius: 6px; &:empty { display: none; } - - & > div:not(:last-child) { - position: relative; - &:not(:last-child):before { - content: ''; - position: absolute; - width: 328px; - height: 0; - border-bottom: 1px solid #e5e9ef; - left: 16px; - bottom: 0; - } - } `; const exchangeCount = Object.keys(DEX).length + Object.keys(CEX).length; @@ -142,7 +127,7 @@ export const Quotes = ({ const dex = sortedList.find((e) => e.isDex) as TDexQuoteData | undefined; return ( -
+
{dex ? ( -
+
{sortedList.map((params, idx) => { const { name, data, isDex } = params; if (!isDex) return null; @@ -203,7 +188,7 @@ export const Quotes = ({
{!noCex && ( -
+
{t('page.swap.rates-from-cex')}
)} @@ -225,11 +210,11 @@ export const Quotes = ({
-
+
{t('page.swap.tradingSettingTips', { viewCount, tradeCount })} {t('page.swap.edit')} diff --git a/src/ui/views/Swap/Component/ReceiveDetail.tsx b/src/ui/views/Swap/Component/ReceiveDetail.tsx index 6fd3b1375f1..daa86fb21b3 100644 --- a/src/ui/views/Swap/Component/ReceiveDetail.tsx +++ b/src/ui/views/Swap/Component/ReceiveDetail.tsx @@ -61,11 +61,11 @@ export const WarningOrChecked = ({ const ReceiveWrapper = styled.div` position: relative; margin-top: 24px; - border: 1px solid #e5e9ef; + border: 1px solid #333; border-radius: 4px; padding: 12px; - color: #4b4d59; + color: #ccc; font-size: 13px; .receive-token { font-size: 15px; @@ -115,8 +115,9 @@ const ReceiveWrapper = styled.div` .footer { position: relative; - border-top: 0.5px solid #e5e9ef; + border-top: 0.5px solid #333; padding-top: 8px; + color: #7a7a7a; } .quote-provider { position: absolute; @@ -129,15 +130,12 @@ const ReceiveWrapper = styled.div` justify-content: center; font-size: 13px; cursor: pointer; - - color: #13141a; - - background: #e4e8ff; + background: linear-gradient(180deg, #363636 0%, #292929 100%); border-radius: 4px; - border: 1px solid transparent; + border: 1px solid #464646; + color: #ccc; &:hover { - background: #d4daff; - border: 1px solid rgba(134, 151, 255, 0.5); + filter: brightness(1.2); } } `; diff --git a/src/ui/views/Swap/Component/Slippage.tsx b/src/ui/views/Swap/Component/Slippage.tsx index 75aa6e12ba8..74f5cd2d773 100644 --- a/src/ui/views/Swap/Component/Slippage.tsx +++ b/src/ui/views/Swap/Component/Slippage.tsx @@ -24,17 +24,17 @@ export const SlippageItem = styled.div<{ display: flex; justify-content: center; align-items: center; - border: 1px solid transparent; cursor: pointer; border-radius: 6px; width: 52px; height: 28px; font-weight: 500; font-size: 12px; - background: #f5f6fa; + background: linear-gradient(180deg, #a8a29e 0%, #78716c 100%); border-radius: 4px; + color: #1b1a18; &:hover { - background: rgba(134, 151, 255, 0.2); + background: linear-gradient(180deg, #cec7c3 0%, #9b928c 100%); } `; @@ -50,12 +50,12 @@ const Wrapper = styled.section` .input { font-weight: 500; font-size: 12px; - background: #f5f6fa; - border: 1px solid #e5e9ef; + background: #141414; + border: 1px solid #44403c; border-radius: 4px; &:placeholder-shown { - color: #707280; + color: #666; } .ant-input { border-radius: 0; diff --git a/src/ui/views/Swap/Component/TokenRender.tsx b/src/ui/views/Swap/Component/TokenRender.tsx index 8775545cc2c..4dbf8d1ff36 100644 --- a/src/ui/views/Swap/Component/TokenRender.tsx +++ b/src/ui/views/Swap/Component/TokenRender.tsx @@ -8,18 +8,18 @@ import { useTranslation } from 'react-i18next'; const TokenRenderWrapper = styled.div` width: 150px; height: 46px; - background: #f5f6fa; + background: #1c1c1c; border-radius: 4px; display: flex; align-items: center; padding: 12px; font-weight: 500; font-size: 18px; - color: #13141a; + color: #ccc; border: 1px solid transparent; cursor: pointer; &:hover { - background: rgba(134, 151, 255, 0.2); + background: #292929; } .token { display: flex; diff --git a/src/ui/views/Swap/Component/TradingSettings.tsx b/src/ui/views/Swap/Component/TradingSettings.tsx index a2bc9a4c88f..3077daef5e6 100644 --- a/src/ui/views/Swap/Component/TradingSettings.tsx +++ b/src/ui/views/Swap/Component/TradingSettings.tsx @@ -61,7 +61,7 @@ export const TradingSettings = ({ {list.map((item) => { return (
@@ -69,7 +69,7 @@ export const TradingSettings = ({ src={item.logo} className="w-[24px] h-[24px] rounded-full" /> - + {item.name} void }) { type="primary" block disabled={!checked} - className="h-[40px] w-[188px] text-13 font-medium mx-auto" + className="main-button h-[40px] w-[188px] text-13 font-medium mx-auto" onClick={onConfirm} > {t('page.swap.confirm')} diff --git a/src/ui/views/Swap/Component/loading.tsx b/src/ui/views/Swap/Component/loading.tsx index c8f19b3d306..4b86b68c3e2 100644 --- a/src/ui/views/Swap/Component/loading.tsx +++ b/src/ui/views/Swap/Component/loading.tsx @@ -21,10 +21,7 @@ export const QuoteLoading = ({ }) => { return (
diff --git a/src/ui/views/Swap/index.tsx b/src/ui/views/Swap/index.tsx index 96cfc8f59a1..a48fa309fbf 100644 --- a/src/ui/views/Swap/index.tsx +++ b/src/ui/views/Swap/index.tsx @@ -12,7 +12,7 @@ const Swap = () => { -
+
diff --git a/tailwind.config.js b/tailwind.config.js index 778c0bda747..7f66a1d2eef 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -34,6 +34,10 @@ module.exports = { backgroundImage: { refreshGradient: 'linear-gradient(180deg, #A8A29E 0%, #78716C 100%)', buttonGradient: 'linear-gradient(180deg, #363636 0%, #292929 100%)', + mainButton: 'linear-gradient(180deg, #A8A29E 0%, #78716C 100%)', + mainButtonHover: 'linear-gradient(180deg, #CEC7C3 0%, #9B928C 100%)', + mainButtonActive: 'linear-gradient(180deg, #8D8884 0%, #524C48 100%)', + mainButtonDisabled: 'linear-gradient(180deg, #464240 0%, #373330 100%)', }, colors: { form: { @@ -70,14 +74,15 @@ module.exports = { gray: { bg2: '#F5F6FA', bg: '#F5F6FA', - divider: '#E5E9EF', + divider: '#333333', comment: '#B4BDCC', - content: '#707280', + content: '#ccc', subTitle: '#7A7A7A', - title: '#13141A', + title: '#fff', light: '#707880', common: '#666666', }, + mainButton: '#1B1A18', }, boxShadow: { default: '0px 1px 0px 0px rgba(0, 0, 0, 0.48)', diff --git a/yarn.lock b/yarn.lock index 5b46dd41f3e..a2f3420208f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3527,10 +3527,10 @@ sinon-chrome "^3.0.1" webextension-polyfill-ts "^0.26.0" -"@rabby-wallet/rabby-api@^0.6.20": - version "0.6.20" - resolved "https://registry.yarnpkg.com/@rabby-wallet/rabby-api/-/rabby-api-0.6.20.tgz#809c157a39ba2cb029005d932f2bc49f1aa8a2cb" - integrity sha512-+iQOlmDvDay4TXyurazBERd1pjgS82pp+QtyiXUVZVdp80DBnf0K07CiQ/bEnGCREbmXP4a2XXNYKaFuliqWZw== +"@rabby-wallet/rabby-api@^0.6.22": + version "0.6.22" + resolved "https://registry.yarnpkg.com/@rabby-wallet/rabby-api/-/rabby-api-0.6.22.tgz#4114542e254390d61d8e2562f45c4ff2b4c06eb4" + integrity sha512-bhd5YL3B5fXjCLUAj0X3eqimW7rQd3G+dTO/in8hQgkH9oJRsoYfO6j3kikhQmpvsO7iZaISKv2L8PRZ79xLNA== dependencies: "@rabby-wallet/rabby-sign" "^0.3.3" axios "^0.27.2"