Merge pull request #8 from viaprotocol/swap-flow-redesigned

Swap flow redesigned

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",

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,
 });
 

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,

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) => {

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');

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 = ({
     <ChainWrapper
       className={clsx(
         {
-          'cursor-default hover:bg-[#f5f6fa]': readonly,
+          'cursor-default hover:bg-[#292929]': readonly,
         },
         className
       )}

src/ui/component/ChainSelector/components/SelectChainList.tsx

@@ -79,7 +79,7 @@ export const SelectChainList = (props: SelectChainListProps) => {
   }
   if (sortable) {
     return (
-      <div className={clsx('select-chain-list', className)}>
+      <div className={clsx('select-chain-list bg-transparent', className)}>
         <DndContext
           onDragEnd={handleDragEnd}
           measuring={{
@@ -115,7 +115,7 @@ export const SelectChainList = (props: SelectChainListProps) => {
     );
   }
   return (
-    <div className={clsx('select-chain-list', className)}>
+    <div className={clsx('select-chain-list bg-transparent', className)}>
       {items.map((item) => {
         return (
           <SortableSelectChainItem

src/ui/component/ChainSelector/style.less

@@ -8,7 +8,7 @@
   flex-shrink: 0;
   -webkit-user-select: none;
   background: rgba(134, 151, 255, 0.12);
-  border: 1px solid #e5e9ef;
+  border: 1px solid #333333;
   border-radius: 6px;
   padding: 8px 4px 8px 8px;
   font-weight: 500;
@@ -51,16 +51,16 @@
     position: sticky;
     top: 0;
     z-index: 1;
-    background-color: #fff;
+    background-color: #151515;
     .ant-input-affix-wrapper {
-      border: 1px solid #e5e9ef;
+      border: none;
       border-radius: 6px;
       height: 36px;
     }
 
     .ant-input-affix-wrapper:focus,
     .ant-input-affix-wrapper-focused {
-      border-color: #b0bdff;
+      border-color: #ccc;
     }
   }
   .ant-drawer-header {
@@ -87,12 +87,14 @@
   }
   .ant-drawer-body {
     padding-top: 0 !important;
+    background: #151515;
     &::-webkit-scrollbar {
       display: none !important;
     }
   }
   .ant-drawer-content {
     border-radius: 16px 16px 0 0;
+    background: #151515;
   }
   .no-pinned-container {
     width: 360px;
@@ -114,7 +116,7 @@
   }
   .all-chais {
     width: 100%;
-    background: #ffffff;
+    background: #333;
     display: flex;
     justify-content: center;
     margin-top: 16px;
@@ -140,7 +142,7 @@
   min-width: 116px;
   display: inline-flex;
   height: 40px;
-  background: #9ba9fd;
+  background: #666;
   border-radius: 6px 6px 0px 0px;
   padding: 8px 6px 8px 12px;
   font-size: 12px;
@@ -163,31 +165,18 @@
 
 .select-chain {
   &-list {
-    background: #f5f6fa;
     border-radius: 6px;
-    & + & {
-      margin-top: 24px;
-    }
   }
   &-item {
     display: flex;
     align-items: center;
     padding: 14px 16px;
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: 6px;
     position: relative;
     border: 1px solid transparent;
     height: 56px;
 
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: -1px;
-      left: 16px;
-      right: 16px;
-      border-bottom: 1px solid @color-border;
-    }
-
     .chain-icon-comp {
       img {
         width: 28px;
@@ -203,13 +192,13 @@
       margin-left: 12px;
     }
     &-name {
-      font-weight: 500;
-      font-size: 15px;
-      line-height: 18px;
-      color: @color-title;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 20px;
+      color: #ccc;
     }
     &-balance {
-      color: #707280;
+      color: #666;
       font-size: 12px;
       display: flex;
       align-items: center;
@@ -223,9 +212,8 @@
       margin-left: 16px;
     }
     &:hover {
-      // background: rgba(134, 151, 255, 0.1);
-      background-color: #dce0f9;
-      border: 1px solid #8697ff;
+      background-color: #1F1F1F;
+      border: 1px solid #333;
       &::after {
         display: none;
       }

src/ui/component/Popup/index.less

@@ -12,7 +12,7 @@
     color: @color-title;
   }
   .ant-drawer-mask {
-    background-color: rgba(45, 48, 51, 0.2);
+    background-color: rgba(0, 0, 0, 0.4);
   }
   .ant-drawer-header {
     background: transparent;

src/ui/component/StrayFooter.tsx

@@ -95,7 +95,10 @@ const StrayFooterNav = memo(
             htmlType="submit"
             onClick={onNextClick}
             size="large"
-            className={cx('lg:h-[52px]', hasBack ? 'flex-1' : 'w-[200px]')}
+            className={cx(
+              'lg:h-[52px] main-button',
+              hasBack ? 'flex-1' : 'w-[200px]'
+            )}
             type="primary"
             loading={nextLoading}
           >