Add handler for address change - reset state, add unfinished to history

src/components/History.tsx

@@ -165,23 +165,23 @@ export default function History(props: { size?: interfaces.SimplifiedSize }) {
                   <p
                     className={cls(
                       cmn.p,
-                      [cmn.p3, size == 'sm'],
-                      [cmn.p2, size == 'md'],
+                      [cmn.p3, size === 'sm'],
+                      [cmn.p2, size === 'md'],
                       cmn.p600,
                       cmn.cap,
                       cmn.pPrim,
                       cmn.mleft5,
                       cmn.flexg
                     )}
                   >
-                    •{' '}
-                    {transfer.address.substring(0, 6) +
-                      '...' +
-                      transfer.address.substring(transfer.address.length - 4)}
+                    {transfer.address !== undefined
+                      ? `• ${transfer.address.substring(0, 6)}...${transfer.address.substring(
+                          transfer.address.length - 4
+                        )}`
+                      : '• UNFINISHED'}
                   </p>
                 </div>
               </div>
-
               <SkPaper gray>
                 {transfer.transactions.map((transactionData: interfaces.TransactionHistory) => (
                   <TransactionData

src/components/WidgetBody.tsx

@@ -54,6 +54,7 @@ export function WidgetBody(props) {
   const tokenBalances = useMetaportStore((state) => state.tokenBalances)
 
   const transferInProgress = useMetaportStore((state) => state.transferInProgress)
+  const addressChanged = useMetaportStore((state) => state.addressChanged)
 
   const theme = useUIStore((state) => state.theme)
 
@@ -64,6 +65,10 @@ export function WidgetBody(props) {
     setChainName2(mpc.config.chains ? mpc.config.chains[1] : '')
   }, [])
 
+  useEffect(() => {
+    addressChanged()
+  }, [address])
+
   useEffect(() => {
     if (tokens && !token) {
       if (tokens.erc20 && Object.values(tokens.erc20)[0]) {

src/core/interfaces/TransactionHistory.ts

@@ -33,7 +33,7 @@ export interface TransactionHistory {
 export interface TransferHistory {
   transactions: TransactionHistory[]
   tokenKeyname: string
-  address: AddressType
+  address: AddressType | undefined
   chainName1: string
   chainName2: string
   amount: string

src/store/MetaportState.ts

@@ -73,6 +73,8 @@ export interface MetaportState {
   setChainName1: (name: string) => void
   setChainName2: (name: string) => void
 
+  addressChanged: () => void
+
   appName1: string
   appName2: string
 

src/store/MetaportStore.ts

@@ -252,6 +252,29 @@ export const useMetaportStore = create<MetaportState>()((set, get) => ({
     set(get().mpc.chainChanged(get().chainName1, name, get().token))
   },
 
+  addressChanged: () => {
+    if (get().currentStep !== 0) {
+      get().setTransfersHistory([
+        ...get().transfersHistory,
+        {
+          transactions: get().transactionsHistory,
+          chainName1: get().chainName1,
+          chainName2: get().chainName2,
+          amount: get().amount,
+          tokenKeyname: get().token.keyname,
+          address: undefined
+        }
+      ])
+    }
+    set({
+      tokenBalances: {},
+      wrappedTokenBalances: {},
+      currentStep: 0,
+      amount: '',
+      transferInProgress: false
+    })
+  },
+
   tokens: getEmptyTokenDataMap(),
 
   token: null,