Merge pull request #515 from secretkeylabs/tim/eng-2377-integrate-ale…

…x-swaps-with-stacks-transaction-sponsor

Integrate alex swaps with stacks transaction sponsor

package.json

@@ -5,15 +5,15 @@
   "private": true,
   "dependencies": {
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "1.1.2",
+    "@secretkeylabs/xverse-core": "1.4.0-1004b69",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "^6.1.1",
+    "@stacks/transactions": "^4.3.8",
     "@tanstack/query-sync-storage-persister": "^4.29.1",
     "@tanstack/react-query": "^4.29.3",
     "@tanstack/react-query-devtools": "^4.29.3",
     "@tanstack/react-query-persist-client": "^4.29.3",
-    "@stacks/transactions": "^4.3.8",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/app/components/tokenImage/index.tsx

@@ -46,9 +46,14 @@ const TickerIconText = styled.h1((props) => ({
   fontSize: 13,
 }));
 
-export default function TokenImage(props: TokenImageProps) {
-  const { token, loading, fungibleToken, round, size, loaderSize } = props;
-
+export default function TokenImage({
+  token,
+  loading,
+  fungibleToken,
+  size,
+  loaderSize,
+  round,
+}: TokenImageProps) {
   const getCoinIcon = useCallback(() => {
     if (token === 'STX') {
       return IconStacks;

src/app/hooks/useSponsoredTransaction.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getSponsorInfo } from '@secretkeylabs/xverse-core/api';
+
+export const useSponsorInfoQuery = (sponsorUrl?: string) =>
+  useQuery({
+    queryKey: ['sponsorInfo'],
+    queryFn: async () => {
+      try {
+        return await getSponsorInfo(sponsorUrl);
+      } catch (e: any) {
+        return Promise.reject(e);
+      }
+    },
+  });
+
+export const useSponsoredTransaction = (sponsorUrl?: string) => {
+  const [isSponsored, setIsSponsored] = useState(false);
+
+  const { error, data: isActive } = useSponsorInfoQuery(sponsorUrl);
+  useEffect(() => {
+    if (!error) {
+      setIsSponsored(!!isActive);
+    }
+  }, [isActive, error]);
+
+  return {
+    isSponsored,
+  };
+};
+
+export default useSponsoredTransaction;

src/app/screens/home/index.tsx

@@ -100,6 +100,7 @@ const RowButtonContainer = styled.div((props) => ({
   flexDirection: 'row',
   marginTop: props.theme.spacing(11),
   columnGap: props.theme.spacing(11),
+
 }));
 
 const TokenListButtonContainer = styled.div((props) => ({

src/app/screens/swap/swapConfirmation/index.tsx

@@ -12,6 +12,8 @@ import { useCallback, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useConfirmSwap } from '@screens/swap/swapConfirmation/useConfirmSwap';
 import { AdvanceSettings } from '@screens/swap/swapConfirmation/advanceSettings';
+import { useSponsoredTransaction } from '@hooks/useSponsoredTransaction';
+import SponsoredTransactionIcon from '@assets/img/transactions/CircleWavyCheck.svg';
 
 const TitleText = styled.div((props) => ({
   fontSize: 21,
@@ -29,19 +31,34 @@ export const ButtonContainer = styled.div((props) => ({
   position: 'sticky',
   bottom: 0,
   background: props.theme.colors.background.elevation0,
-  padding: `${props.theme.spacing(12)}px 0`
+  padding: `${props.theme.spacing(12)}px 0`,
 }));
 
 export const ActionButtonWrap = styled.div((props) => ({
   marginRight: props.theme.spacing(8),
   width: '100%',
 }));
 
+const SponsoredTransactionText = styled.div((props) => ({
+  ...props.theme.body_m,
+  color: props.theme.colors.white[200],
+  marginTop: props.theme.spacing(10),
+  display: 'flex',
+  gap: props.theme.spacing(4),
+}));
+
+const Icon = styled.img((props) => ({
+  marginTop: props.theme.spacing(1),
+  width: 24,
+  height: 24,
+}));
+
 export default function SwapConfirmation() {
   const { t } = useTranslation('translation', { keyPrefix: 'SWAP_CONFIRM_SCREEN' });
   const location = useLocation();
   const navigate = useNavigate();
   const swap = useConfirmSwap(location.state);
+  const { isSponsored } = useSponsoredTransaction();
 
   const onCancel = useCallback(() => {
     navigate('/swap');
@@ -69,7 +86,14 @@ export default function SwapConfirmation() {
           lpFeeFiatAmount={swap.lpFeeFiatAmount}
           currency={swap.fromToken.name}
         />
-        <AdvanceSettings swap={swap} />
+        {isSponsored ? (
+          <SponsoredTransactionText>
+            <Icon src={SponsoredTransactionIcon} />
+            {t('THIS_IS_A_SPONSORED_TRANSACTION')}
+          </SponsoredTransactionText>
+        ) : (
+          <AdvanceSettings swap={swap} />
+        )}
         <ButtonContainer>
           <ActionButtonWrap>
             <ActionButton text={t('CANCEL')} transparent onPress={onCancel} />

src/app/screens/swap/swapConfirmation/useConfirmSwap.tsx

@@ -2,16 +2,16 @@ import { SwapToken } from '@screens/swap/useSwap';
 import { ReactNode } from 'react';
 import { Currency } from 'alex-sdk';
 import useWalletSelector from '@hooks/useWalletSelector';
-import { broadcastSignedTransaction, signTransaction } from '@secretkeylabs/xverse-core';
 import {
-  makeUnsignedContractCall,
-  AnchorMode,
-  PostConditionMode,
-  StacksTransaction,
-} from '@stacks/transactions';
-import type { TxToBroadCast } from 'alex-sdk/dist/helpers/SwapHelper';
+  broadcastSignedTransaction,
+  signTransaction,
+  sponsorTransaction,
+} from '@secretkeylabs/xverse-core';
+import { StacksTransaction } from '@stacks/transactions';
 import useNetworkSelector from '@hooks/useNetwork';
 import { useNavigate } from 'react-router-dom';
+import useSponsoredTransaction from '@hooks/useSponsoredTransaction';
+import { ApiResponseError } from '@secretkeylabs/xverse-core/types';
 
 export type SwapConfirmationInput = {
   from: Currency;
@@ -28,11 +28,14 @@ export type SwapConfirmationInput = {
   functionName: string;
 };
 
+const XVERSE_SPONSOR_2_URL = 'https://sponsor2.xverse.app';
+
 export function useConfirmSwap(
-  input: SwapConfirmationInput
+  input: SwapConfirmationInput,
 ): SwapConfirmationInput & { onConfirm: () => Promise<void> } {
-  const { selectedAccount, seedPhrase, stxPublicKey } = useWalletSelector();
+  const { selectedAccount, seedPhrase } = useWalletSelector();
   const selectedNetwork = useNetworkSelector();
+  const { isSponsored } = useSponsoredTransaction(XVERSE_SPONSOR_2_URL);
   const navigate = useNavigate();
   return {
     ...input,
@@ -41,10 +44,15 @@ export function useConfirmSwap(
         input.unsignedTx,
         seedPhrase,
         selectedAccount?.id ?? 0,
-        selectedNetwork
+        selectedNetwork,
       );
       try {
-        const broadcastResult: string = await broadcastSignedTransaction(signed, selectedNetwork);
+        let broadcastResult: string | null;
+        if (isSponsored) {
+          broadcastResult = await sponsorTransaction(signed, XVERSE_SPONSOR_2_URL);
+        } else {
+          broadcastResult = await broadcastSignedTransaction(signed, selectedNetwork);
+        }
         if (broadcastResult) {
           navigate('/tx-status', {
             state: {
@@ -61,7 +69,8 @@ export function useConfirmSwap(
             state: {
               txid: '',
               currency: 'STX',
-              error: e.message,
+              error: e instanceof ApiResponseError ? e.data.message : e.message,
+              sponsored: isSponsored,
               browserTx: true,
             },
           });

src/locales/en.json

@@ -600,6 +600,7 @@
     "COPIED": "Copied",
     "COPY_YOUR_ADDRESS": "copy your address",
     "ADVANCED_SETTING": "Advanced settings",
-    "ROUTE_DESC": "For the transaction to proceed, your BTC will be swapped for xBTC and STX. There is no additional cost for you and no STX will be added to your wallet."
+    "ROUTE_DESC": "For the transaction to proceed, your BTC will be swapped for xBTC and STX. There is no additional cost for you and no STX will be added to your wallet.",
+    "THIS_IS_A_SPONSORED_TRANSACTION": "This is a sponsored transaction, no transaction fees will be deducted from your account."
   }
 }