Merge pull request #3819 from Koniverse/koni/dev/issue-3801

[Issue-3801] Webapp - Integrate off-ramp
Koniverse · Nov 7, 2024 · e15f3d2 · e15f3d2
2 parents 068b04c + 9cd53fc
commit e15f3d2
Show file tree

Hide file tree

Showing 34 changed files with 1,537 additions and 80 deletions.
diff --git a/packages/extension-base/src/background/KoniTypes.ts b/packages/extension-base/src/background/KoniTypes.ts
@@ -650,8 +650,15 @@ export interface NFTTransactionAdditionalInfo {
   collectionName: string;
 }
 
+export interface OffRanpAdditionalInfo {
+  orderId: string;
+  service: string;
+}
+
 export type TransactionAdditionalInfo = {
   [ExtrinsicType.TRANSFER_XCM]: XCMTransactionAdditionalInfo,
+  [ExtrinsicType.TRANSFER_TOKEN]: OffRanpAdditionalInfo,
+  [ExtrinsicType.TRANSFER_BALANCE]: OffRanpAdditionalInfo,
   [ExtrinsicType.SEND_NFT]: NFTTransactionAdditionalInfo,
   [ExtrinsicType.MINT_VDOT]: Pick<SubmitYieldStepData, 'derivativeTokenSlug' | 'exchangeRate' | 'slug'>,
   [ExtrinsicType.MINT_VMANTA]: Pick<SubmitYieldStepData, 'derivativeTokenSlug' | 'exchangeRate' | 'slug'>,
@@ -1538,7 +1545,9 @@ export interface RequestCheckTransfer extends BaseRequestSign {
   to: string,
   value?: string,
   transferAll?: boolean
-  tokenSlug: string
+  tokenSlug: string,
+  orderId?: string,
+  service?: string
 }
 
 export interface ValidateTransactionResponse {

diff --git a/packages/extension-base/src/koni/background/handlers/State.ts b/packages/extension-base/src/koni/background/handlers/State.ts
@@ -1444,7 +1444,8 @@ export default class KoniState {
       estimateFee: {
         value: transactionValidated.estimateGas,
         symbol: token.symbol,
-        decimals: token.decimals || 18
+        decimals: token.decimals || 18,
+        feeTokenSlug: token.slug
       },
       id
     });

diff --git a/packages/extension-base/src/services/buy-service/constants/token.ts b/packages/extension-base/src/services/buy-service/constants/token.ts
@@ -3,7 +3,7 @@
 
 import { BuyService, SupportService } from '@subwallet/extension-base/types';
 
-const DEFAULT_BUY_SERVICE: BuyService = { symbol: '', network: '' };
+const DEFAULT_BUY_SERVICE: BuyService = { symbol: '', network: '', supportSell: false };
 
 export const DEFAULT_SERVICE_INFO: Record<SupportService, BuyService> = {
   transak: { ...DEFAULT_BUY_SERVICE },

diff --git a/packages/extension-base/src/services/buy-service/index.ts b/packages/extension-base/src/services/buy-service/index.ts
@@ -48,7 +48,8 @@ export default class BuyService {
         services: [],
         slug: datum.slug,
         symbol: datum.symbol,
-        network: datum.network
+        network: datum.network,
+        supportSell: false
       };
 
       for (const [_service, info] of Object.entries(datum.serviceInfo)) {
@@ -60,10 +61,15 @@ export default class BuyService {
 
         temp.serviceInfo[service] = {
           network: info.network,
-          symbol: info.symbol
+          symbol: info.symbol,
+          supportSell: info.supportSell
         };
 
         temp.services.push(service);
+
+        if (info.supportSell) {
+          temp.supportSell = true;
+        }
       }
 
       if (temp.services.length) {

diff --git a/packages/extension-base/src/services/swap-service/utils.ts b/packages/extension-base/src/services/swap-service/utils.ts
@@ -12,6 +12,9 @@ import BigN from 'bignumber.js';
 export const CHAIN_FLIP_TESTNET_EXPLORER = 'https://blocks-perseverance.chainflip.io';
 export const CHAIN_FLIP_MAINNET_EXPLORER = 'https://scan.chainflip.io';
 
+export const TRANSAK_TEST_MODE = process.env.TRANSAK_TEST_MODE !== undefined ? !!process.env.TRANSAK_TEST_MODE : true;
+export const TRANSAK_URL = TRANSAK_TEST_MODE ? 'https://global-stg.transak.com' : 'https://global.transak.com';
+
 export const CHAIN_FLIP_SUPPORTED_MAINNET_MAPPING: Record<string, Chain> = {
   [COMMON_CHAIN_SLUGS.POLKADOT]: Chains.Polkadot,
   [COMMON_CHAIN_SLUGS.ETHEREUM]: Chains.Ethereum,

diff --git a/packages/extension-base/src/services/transaction-service/index.ts b/packages/extension-base/src/services/transaction-service/index.ts
@@ -343,6 +343,7 @@ export default class TransactionService {
         const sendingTokenInfo = this.state.chainService.getAssetBySlug(inputData.tokenSlug);
 
         historyItem.amount = { value: inputData.value || '0', decimals: sendingTokenInfo.decimals || 0, symbol: sendingTokenInfo.symbol };
+        historyItem.additionalInfo = { orderId: inputData.orderId, service: inputData.service };
         eventLogs && parseTransferEventLogs(historyItem, eventLogs, transaction.chain, sendingTokenInfo, chainInfo);
       }
 
@@ -354,6 +355,7 @@ export default class TransactionService {
         const sendingTokenInfo = this.state.chainService.getAssetBySlug(inputData.tokenSlug);
 
         historyItem.amount = { value: inputData.value || '0', decimals: sendingTokenInfo.decimals || 0, symbol: sendingTokenInfo.symbol };
+        historyItem.additionalInfo = { orderId: inputData.orderId, service: inputData.service };
         eventLogs && parseTransferEventLogs(historyItem, eventLogs, transaction.chain, sendingTokenInfo, chainInfo);
       }
 

diff --git a/packages/extension-base/src/services/transaction-service/utils.ts b/packages/extension-base/src/services/transaction-service/utils.ts
@@ -4,7 +4,7 @@
 import { _ChainInfo } from '@subwallet/chain-list/types';
 import { ExtrinsicDataTypeMap, ExtrinsicType } from '@subwallet/extension-base/background/KoniTypes';
 import { _getBlockExplorerFromChain, _isChainTestNet, _isPureEvmChain } from '@subwallet/extension-base/services/chain-service/utils';
-import { CHAIN_FLIP_MAINNET_EXPLORER, CHAIN_FLIP_TESTNET_EXPLORER } from '@subwallet/extension-base/services/swap-service/utils';
+import { CHAIN_FLIP_MAINNET_EXPLORER, CHAIN_FLIP_TESTNET_EXPLORER, TRANSAK_URL } from '@subwallet/extension-base/services/swap-service/utils';
 import { ChainflipSwapTxData } from '@subwallet/extension-base/types/swap';
 
 // @ts-ignore
@@ -81,3 +81,7 @@ export function getChainflipExplorerLink (data: ChainflipSwapTxData, chainInfo:
 
   return `${chainflipDomain}/channels/${data.depositChannelId}`;
 }
+
+export function getTransakOrderLink (orderId: string) {
+  return `${TRANSAK_URL}/user/order/${orderId}`;
+}
diff --git a/packages/extension-base/src/types/buy.ts b/packages/extension-base/src/types/buy.ts
@@ -4,6 +4,7 @@
 export interface BuyService {
   network: string;
   symbol: string;
+  supportSell: boolean;
 }
 
 export type SupportService = 'transak' | 'banxa' | 'coinbase' | 'moonpay' | 'onramper';
@@ -15,6 +16,7 @@ export interface BuyTokenInfo {
   support: 'ETHEREUM' | 'SUBSTRATE';
   services: Array<SupportService>;
   serviceInfo: Record<SupportService, BuyService>;
+  supportSell: boolean;
 }
 
 export interface BuyServiceInfo {

diff --git a/packages/extension-koni-ui/src/Popup/Account/ConnectLedger.tsx b/packages/extension-koni-ui/src/Popup/Account/ConnectLedger.tsx
@@ -307,6 +307,7 @@ const Component: React.FC<Props> = (props: Props) => {
               <>
                 <div className='logo'>
                   <DualLogo
+                    innerSize={52}
                     leftLogo={(
                       <Image
                         height={52}
@@ -323,18 +324,17 @@ const Component: React.FC<Props> = (props: Props) => {
                         width={52}
                       />
                     )}
-                    innerSize={52}
                     sizeLinkIcon={36}
                     sizeSquircleBorder={108}
                   />
                 </div>
                 <ChainSelector
+                  className={'select-ledger-app'}
                   items={networks}
                   label={t('Select Ledger app')}
                   onChange={onChainChange}
                   placeholder={t('Select Ledger app')}
                   value={chain}
-                  className={'select-ledger-app'}
                 />
                 {
                   !!chainMigrateMode && <ChainSelector

diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/ClaimReward.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/ClaimReward.tsx
@@ -198,10 +198,10 @@ const Component = () => {
             name={'from'}
           >
             <AccountSelector
+              addressPrefix={networkPrefix}
               disabled={!isAllAccount}
               doFilter={false}
               externalAccounts={accountList}
-              addressPrefix={networkPrefix}
             />
           </Form.Item>
           <FreeBalance

diff --git a/packages/extension-koni-ui/src/components/Logo/DualLogo.tsx b/packages/extension-koni-ui/src/components/Logo/DualLogo.tsx
@@ -33,13 +33,19 @@ const defaultLogo = <Logo2D />;
 const Component = ({ className, leftLogo = defaultLogo, linkIcon = defaultLinkIcon, rightLogo = defaultLogo, sizeSquircleBorder, innerSize }: Props) => {
   return (
     <div className={CN(className, 'dual-logo-container')}>
-      <LogoWithSquircleBorder size={sizeSquircleBorder} innerSize={innerSize}>
+      <LogoWithSquircleBorder
+        innerSize={innerSize}
+        size={sizeSquircleBorder}
+      >
         {leftLogo}
       </LogoWithSquircleBorder>
       <div className='link-icon'>
         {linkIcon}
       </div>
-      <LogoWithSquircleBorder size={sizeSquircleBorder} innerSize={innerSize}>
+      <LogoWithSquircleBorder
+        innerSize={innerSize}
+        size={sizeSquircleBorder}
+      >
         {rightLogo}
       </LogoWithSquircleBorder>
     </div>