From f36c9c9943a095defd3caff80b947d8c0f28aae8 Mon Sep 17 00:00:00 2001
From: Zach Couchman <zcouchman@gmail.com>
Date: Thu, 25 Jan 2024 15:33:11 +1100
Subject: [PATCH] fix wallet address in bridge transactions (#1416)

Co-authored-by: Zach Couchman <zachary.couchman@immutable.com>
---
 .../Transactions/TransactionList.tsx           |  4 +++-
 .../components/Transactions/Transactions.tsx   | 18 ++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx
index 315fd490d6..1d2efc1c57 100644
--- a/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx
+++ b/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx
@@ -25,6 +25,7 @@ type TransactionListProps = {
   transactions: Transaction[],
   knownTokenMap: KnownNetworkMap,
   isPassport: boolean;
+  walletAddress: string;
 };
 
 export function TransactionList({
@@ -32,6 +33,7 @@ export function TransactionList({
   transactions,
   knownTokenMap,
   isPassport,
+  walletAddress,
 }: TransactionListProps) {
   const { cryptoFiatState } = useContext(CryptoFiatContext);
   const { t } = useTranslation();
@@ -59,7 +61,7 @@ export function TransactionList({
   return (
     <Box sx={transactionsListStyle(isPassport)}>
       <Box sx={headingStyles}>
-        <EllipsizedText leftSideLength={6} rightSideLength={4} text="0x1234567890" />
+        <EllipsizedText leftSideLength={6} rightSideLength={4} text={walletAddress} />
       </Box>
       <Box
         testId="move-transaction-list"
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/Transactions.tsx b/packages/checkout/widgets-lib/src/components/Transactions/Transactions.tsx
index 8760797686..eb700fd06d 100644
--- a/packages/checkout/widgets-lib/src/components/Transactions/Transactions.tsx
+++ b/packages/checkout/widgets-lib/src/components/Transactions/Transactions.tsx
@@ -50,10 +50,10 @@ export function Transactions({ checkout }: TransactionsProps) {
 
   const [loading, setLoading] = useState(true);
   const [provider, setProvider] = useState<Web3Provider | undefined>(undefined);
+  const [walletAddress, setWalletAddress] = useState('');
   const [knownTokenMap, setKnownTokenMap] = useState<KnownNetworkMap | undefined>(undefined);
   const [txs, setTxs] = useState<Transaction[]>([]);
 
-  const walletAddress = useCallback(async () => await provider?.getSigner().getAddress(), [provider]);
   const isPassport = isPassportProvider(provider);
 
   // Fetch the tokens for the root chain using the allowed tokens.
@@ -87,13 +87,12 @@ export function Transactions({ checkout }: TransactionsProps) {
   const childChainTokensHashmap = useCallback(async () => {
     if (!provider) return {};
 
-    const address = await walletAddress();
-    if (!address) return {};
+    if (!walletAddress) return {};
 
     const childChainId = getL2ChainId(checkout.config);
 
     try {
-      const data = await checkout.getAllBalances({ provider, walletAddress: address, chainId: childChainId });
+      const data = await checkout.getAllBalances({ provider, walletAddress, chainId: childChainId });
       return data.balances.reduce((out, current) => {
         // eslint-disable-next-line no-param-reassign
         out[current.token.address!.toLowerCase()] = current.token;
@@ -108,7 +107,10 @@ export function Transactions({ checkout }: TransactionsProps) {
 
   const updateAndConnectProvider = useCallback(async (walletProviderName: WalletProviderName) => {
     try {
-      setProvider(await createAndConnectToProvider(checkout, walletProviderName));
+      const localProvider = await createAndConnectToProvider(checkout, walletProviderName);
+      const address = await localProvider?.getSigner().getAddress() ?? '';
+      setProvider(localProvider);
+      setWalletAddress(address.toLowerCase());
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error);
@@ -203,10 +205,9 @@ export function Transactions({ checkout }: TransactionsProps) {
   };
 
   const fetchData = async () => {
-    const address = await walletAddress();
-    if (!address) return undefined;
+    if (!walletAddress) return undefined;
 
-    const localTxs = await getTransactionsDetails(checkout.config.environment, address);
+    const localTxs = await getTransactionsDetails(checkout.config.environment, walletAddress);
 
     const tokensWithChainSlug: { [k: string]: string } = {};
     localTxs.result.forEach((txn) => {
@@ -266,6 +267,7 @@ export function Transactions({ checkout }: TransactionsProps) {
               transactions={txs}
               knownTokenMap={knownTokenMap}
               isPassport={isPassport}
+              walletAddress={walletAddress}
             />
           )}
           {provider && !loading && txs.length === 0 && (