🩹Fix Button behaviour

src/components/Buy/BuyComponent.tsx

@@ -1,6 +1,6 @@
 import { WalletButton } from 'components/Buttons/WalletButton'
 import StyledWrapper from 'components/Layout/StyledWrapper'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import SwapHeader from 'components/Swap/SwapHeader'
 import { useSorobanReact } from '@soroban-react/core'
 import { SwapSection } from 'components/Swap/SwapComponent'
@@ -13,6 +13,10 @@ import { getCurrencies } from 'functions/buy/SEP-1'
 import { getChallengeTransaction, submitChallengeTransaction } from 'functions/buy/sep10Auth/stellarAuth'
 import { initInteractiveDepositFlow } from 'functions/buy/sep24Deposit/InteractiveDeposit'
 import { setTrustline } from '@soroban-react/contracts'
+import { set } from 'cypress/types/lodash'
+import { balances } from '@polkadot/types/interfaces/definitions'
+import { a } from 'react-spring'
+
 
 interface anchor {
   name: string
@@ -41,10 +45,11 @@ const anchors: anchor[] = [
 
 function BuyComponent() {
   const sorobanContext = useSorobanReact()
-  const {address, serverHorizon, activeChain} = sorobanContext
+  const { address, serverHorizon, activeChain, activeConnector } = sorobanContext
   const [selectedAnchor, setSelectedAnchor] = useState<anchor | undefined>(undefined)
   const [selectedToken, setSelectedToken] = useState<token | undefined>(undefined)
   const [needTrustline, setNeedTrustline] = useState<boolean>(true)
+  const [buttonText, setButtonText] = useState<string>('Select Anchor')
 
   const checkTrustline = async () => {
     if(address){
@@ -55,15 +60,11 @@ function BuyComponent() {
         console.error(error)
       }
       const balances = account?.balances
-      const hasTrustline = balances?.find((bal) =>
-        'asset_code' in bal && 'asset_issuer' in bal &&
-        bal.asset_code === selectedToken?.name && bal.asset_issuer === selectedToken?.issuer
-      )
-      setNeedTrustline(!hasTrustline)
+      const hasTrustline = balances?.find((bal: any) => bal.asset_code === selectedToken?.name && bal.asset_issuer == selectedToken?.issuer)
+      setNeedTrustline(!!!hasTrustline)
     }
 
-  };
-
+  }
   const sign = async (txn: any) => {
     const signedTransaction = await sorobanContext?.activeConnector?.signTransaction(txn, {
       networkPassphrase: activeChain?.networkPassphrase,
@@ -115,6 +116,7 @@ function BuyComponent() {
       return
     }
     await checkTrustline()
+    console.log('need trustline', needTrustline)
     if (needTrustline) {
       try {
         console.log('setting trustline')
@@ -125,16 +127,15 @@ function BuyComponent() {
             sorobanContext
           }
         )
-        console.log('response', res)
         if (res === undefined) {
-          setNeedTrustline(true)
-          console.error('error setting trustline')
+          throw new Error('The response is undefined')
         }
+        await checkTrustline()
+        console.log('trustline set')
       } catch (error) {
         console.log('error setting trustline')
         console.error(error)
         setNeedTrustline(true)
-
       }
     } else {
       try {
@@ -149,9 +150,28 @@ function BuyComponent() {
     checkTrustline()
   }, [selectedToken, address, activeChain])
 
+  useEffect(() => {
+    if ((selectedAnchor != undefined) && (selectedToken == undefined)) {
+      console.log('seleciona token')
+      setButtonText('Select Token')
+    } else if (selectedAnchor && selectedToken) {
+      if (needTrustline) {
+        setButtonText(`Set trustline to ${selectedToken.name}`)
+      } else {
+        setButtonText(`Buy ${selectedToken.name}`)
+      }
+    } else {
+      setButtonText('Select Anchor')
+    }
+  }, [needTrustline, address, selectedToken, selectedAnchor])
+
+  useEffect(() => {
+    console.log('selected anchor', selectedAnchor)
+  }, [selectedAnchor])
   const fetchCurrencies = async () => {
-    console.log('fetching currencies')
+    console.log('fetching currencieeees')
     const currencies = await getCurrencies(selectedAnchor?.home_domain!)
+    console.log(currencies)
     setSelectedToken({name: currencies[0].code, issuer: currencies[0].issuer})
   }
 
@@ -162,10 +182,10 @@ function BuyComponent() {
         <SwapSection>
           <InputPanel>
             <Container hideInput={false}>
-              <div>Deposit to:</div>
+              <div>You pay:</div>
               <Aligner>
                 <RowFixed>
-                  <StyledSelect visible={true} selected={!!selectedAnchor} onClick={() => setSelectedAnchor(anchors[2])}>
+                  <StyledSelect visible={true} selected={!!selectedAnchor} onClick={() => setSelectedAnchor(anchors[0])}>
                     <StyledTokenName
                       data-testid="Swap__Panel__Selector"
                       sx={{paddingLeft:'16px'}}
@@ -206,8 +226,7 @@ function BuyComponent() {
         {address ? 
         (<ButtonPrimary onClick={buy}>
           <BodyPrimary>
-              {needTrustline ? 'Create Trustline and ' : ''}
-            <span> Buy {selectedToken ? selectedToken.name : ''} </span>
+              {buttonText}
           </BodyPrimary>
         </ButtonPrimary>):
         (<WalletButton/>)