diff --git a/cypress.config.ts b/cypress.config.ts index 177c3319..f0d9e919 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -16,6 +16,8 @@ export default defineConfig({ runMode: 9, // Retries failing tests 2 times in CI mode openMode: 0 // No retries in interactive mode }, + viewportHeight: 768, + viewportWidth: 1366, }, component: { devServer: { diff --git a/cypress/e2e/connectWallet.test.ts b/cypress/e2e/connectWallet.test.ts index e26a7f79..1432cba9 100644 --- a/cypress/e2e/connectWallet.test.ts +++ b/cypress/e2e/connectWallet.test.ts @@ -9,6 +9,9 @@ describe('Connect Wallet', () => { getPublicKey: () => Promise.resolve('GCHR5WWPDFF3U3HP2NA6TI6FCQPYEWS3UOPIPJKZLAAFM57CEG4ZYBWP'), signTransaction: () => Promise.resolve('signedTransaction'), + connect: () => console.log("GG"), + getAddress: () => console.log("GG"), + requestAccess: () => console.log("GG") // Add other methods as needed }; @@ -16,32 +19,25 @@ describe('Connect Wallet', () => { cy.spy(win.console, 'log').as('consoleLog'); }, }); - cy.get('[data-testid="primary-button"]').click(); - cy.contains('Detected'); - cy.contains('Freighter Wallet').click(); - cy.get('@consoleLog').should('have.been.calledWithMatch', 'wallet'); - cy.get('@consoleLog').should('have.been.calledWithMatch', 'Changing connector to '); + + // Click the wallet button to open the modal + cy.get('[data-testid="wallet-button"]').click(); + + // Get the shadow root of the stellar-wallets-modal + cy.get('stellar-wallets-modal') + .shadow() + .find('dialog.dialog-modal') + .should('be.visible'); - // Get the window object - cy.window().then((win: any) => { - // Get the spy from the window object - const consoleLog = win.console.log; - var logs = []; - for (let i = 0; i < consoleLog.callCount; i++) { - // Get the i-th call to the spy - const call = consoleLog.getCall(i); - - // Get the arguments of the call - const callArgs = call.args; - - // Log the arguments using cy.log() - cy.log(`Call ${i} args: ${JSON.stringify(callArgs)}`); - console.log(`Call ${i} args: ${JSON.stringify(callArgs)}`); - logs.push(`Call ${i} args: ${JSON.stringify(callArgs)}`); - } - //write logs to a file on cypress/logs/logs.txt - cy.writeFile('cypress/logs/logs.txt', logs.join('\n')); - }); - // cy.contains('Public Key: publicKey') + // Find and click the Freighter wallet option inside the shadow DOM + cy.get('stellar-wallets-modal') + .shadow() + .find('.wallets-body__item') + .contains('Freighter') + .should('be.visible') + .click(); + + // // Verify the console logs + // cy.get('@consoleLog').should('have.been.calledWithMatch', 'wallet'); }); }); diff --git a/src/components/Buttons/WalletButton.tsx b/src/components/Buttons/WalletButton.tsx index 048596ec..674472f7 100644 --- a/src/components/Buttons/WalletButton.tsx +++ b/src/components/Buttons/WalletButton.tsx @@ -1,25 +1,24 @@ import { AppContext } from 'contexts'; -import { useSorobanReact } from "stellar-react"; -import React, { useContext } from 'react'; +import { useSorobanReact } from 'stellar-react'; +import React, { useContext, useEffect } from 'react'; import { ButtonLight, ButtonPrimary } from './Button'; +export function WalletButton({ style, light }: { style?: React.CSSProperties; light?: boolean }) { + const { address, disconnect, connect } = useSorobanReact(); -export function WalletButton({ style, light }: { style?: React.CSSProperties; light?: boolean}) { - const { address, disconnect, connect } = useSorobanReact(); - - const ButtonComponent = light ? ButtonLight : ButtonPrimary; - const handleClick = () => { - if (address) { - disconnect(); - } else { - connect(); - } - }; - return ( - <> - - Connect Wallet - - - ); + const ButtonComponent = light ? ButtonLight : ButtonPrimary; + const handleClick = () => { + if (address) { + disconnect(); + } else { + connect(); + } + }; + return ( + <> + + Connect Wallet + + + ); } diff --git a/src/components/Layout/ProfileSection.tsx b/src/components/Layout/ProfileSection.tsx index 6acbe1bc..9141969c 100644 --- a/src/components/Layout/ProfileSection.tsx +++ b/src/components/Layout/ProfileSection.tsx @@ -196,19 +196,17 @@ export const ActiveChainHeaderChip = ({ isMobile }: { isMobile?: boolean }) => { const activeChainName = passphraseToBackendNetworkName[activeChain!].toLowerCase(); const [chainName, setChainName] = React.useState(activeChainName); useEffect(() => { - const formattedActiveChainName = activeChainName.charAt(0).toUpperCase() + activeChainName.slice(1); + const formattedActiveChainName = + activeChainName.charAt(0).toUpperCase() + activeChainName.slice(1); setChainName(formattedActiveChainName); }, [activeChain]); return ( <> {activeChain && address ? ( - + ) : ( - + )} ); @@ -219,6 +217,14 @@ export default function ProfileSection() { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(1220)); + useEffect(() => { + if (sorobanContext.address) { + console.log('wallet:', sorobanContext.address); + } else { + console.log('Disconnected from wallet'); + } + }, [sorobanContext.address]); + return ( {!isMobile && }