From d4a4366d19b87afb3ad4cff265dc7cd429ff41bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren?= <hello@soerenschwert.de>
Date: Fri, 22 Apr 2022 19:35:09 +0200
Subject: [PATCH 1/7] Prototype pull-to-refresh for transaction lists

---
 src/components/TransactionList.vue |  58 +++++++++++++-
 src/network.ts                     | 121 +++++++++++++++--------------
 2 files changed, 120 insertions(+), 59 deletions(-)

diff --git a/src/components/TransactionList.vue b/src/components/TransactionList.vue
index f466948e0..60dcea171 100644
--- a/src/components/TransactionList.vue
+++ b/src/components/TransactionList.vue
@@ -7,6 +7,8 @@
             key-field="transactionHash"
             :buffer="scrollerBuffer"
             ref="scroller"
+            :style="`transform: translateY(${pulledDistance / 2}px)`"
+            :class="{'smooth': !pulledDistance}"
         >
             <template v-if="showUnclaimedCashlinkList" v-slot:before>
                 <div class="unclaimed-cashlink-list">
@@ -86,7 +88,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, Ref, watch, onMounted, onUnmounted } from '@vue/composition-api';
+import { defineComponent, computed, ref, Ref, watch, onMounted, onBeforeUnmount, reactive } from '@vue/composition-api';
 import { CircleSpinner, HexagonIcon } from '@nimiq/vue-components';
 import { AddressBook } from '@nimiq/utils';
 import TransactionListItem from '@/components/TransactionListItem.vue';
@@ -102,6 +104,7 @@ import { ENV_MAIN } from '../lib/Constants';
 import { isProxyData, ProxyType, ProxyTransactionDirection } from '../lib/ProxyDetection';
 import { createCashlink } from '../hub';
 import { useWindowSize } from '../composables/useWindowSize';
+import { checkHistory, updateBalances } from '../network';
 
 function processTimestamp(timestamp: number) {
     const date: Date = new Date(timestamp);
@@ -390,15 +393,61 @@ export default defineComponent({
             context.emit('scroll');
         }
 
+        const P2R = reactive({
+            start: null as number | null,
+            current: null as number | null,
+        });
+
+        function startP2R(event: TouchEvent) {
+            if (!scroller.value || scroller.value.$el.scrollTop > 0) return;
+            P2R.start = event.touches[0].clientY;
+            (event.target as HTMLElement).addEventListener('touchmove', moveP2R);
+        }
+
+        function moveP2R(event: TouchEvent) {
+            if (!P2R.start) return;
+            P2R.current = event.touches[0].clientY;
+            const distance = P2R.current - P2R.start;
+            if (distance > 200) {
+                console.log('REFRESH!'); // eslint-disable-line no-console
+                if (activeAddress.value) {
+                    checkHistory(activeAddress.value);
+                    updateBalances([activeAddress.value]);
+                }
+                cancelP2R(event);
+            }
+        }
+
+        function cancelP2R(event: TouchEvent) {
+            P2R.start = null;
+            P2R.current = null;
+            (event.target as HTMLElement).removeEventListener('touchmove', moveP2R);
+            // console.log('Pull canceled'); // eslint-disable-line no-console
+        }
+
+        const pulledDistance = computed(() => {
+            if (!P2R.start || !P2R.current) return 0;
+            const distance = P2R.current - P2R.start;
+            return Math.max(0, distance);
+        });
+
         // @scroll / @scroll.native doesn't seem to work, so using standard event system
         onMounted(() => {
             if (!scroller.value) return;
             scroller.value.$el.addEventListener('scroll', onScroll);
+
+            scroller.value.$el.addEventListener('touchstart', startP2R);
+            scroller.value.$el.addEventListener('touchend', cancelP2R);
+            scroller.value.$el.addEventListener('touchcancel', cancelP2R);
         });
 
-        onUnmounted(() => {
+        onBeforeUnmount(() => {
             if (!scroller.value) return;
             scroller.value.$el.removeEventListener('scroll', onScroll);
+
+            scroller.value.$el.removeEventListener('touchstart', startP2R);
+            scroller.value.$el.removeEventListener('touchend', cancelP2R);
+            scroller.value.$el.removeEventListener('touchcancel', cancelP2R);
         });
 
         return {
@@ -413,6 +462,7 @@ export default defineComponent({
             unclaimedCashlinkTxs,
             onCreateCashlink,
             scroller,
+            pulledDistance,
         };
     },
     components: {
@@ -460,6 +510,10 @@ export default defineComponent({
     touch-action: pan-y;
 
     @extend %custom-scrollbar;
+
+    &.smooth {
+        transition: transform var(--transition-time) var(--nimiq-ease);
+    }
 }
 
 .unclaimed-cashlink-list {
diff --git a/src/network.ts b/src/network.ts
index 4d8cd03d2..9af048baf 100644
--- a/src/network.ts
+++ b/src/network.ts
@@ -121,6 +121,69 @@ async function subscribeToPeerCount() {
     });
 }
 
+export async function updateBalances(addresses: string[] = [...balances.keys()]) {
+    if (!addresses.length) return;
+    const client = await getNetworkClient();
+    await client.waitForConsensusEstablished();
+    const accounts = await client.getAccounts(addresses);
+    console.debug('Got accounts:', accounts);
+    const newBalances: Balances = new Map(
+        accounts.map((account, i) => [addresses[i], account.balance]),
+    );
+
+    for (const [address, newBalance] of newBalances) {
+        if (balances.get(address) === newBalance) {
+            // Balance did not change since last check.
+            // Remove from newBalances Map to not update the store.
+            newBalances.delete(address);
+        } else {
+            // Update balances cache
+            balances.set(address, newBalance);
+        }
+    }
+
+    if (!newBalances.size) return;
+    console.debug('Got new balances for', [...newBalances.keys()]);
+    for (const [address, balance] of newBalances) {
+        useAddressStore().patchAddress(address, { balance });
+    }
+}
+
+export async function checkHistory(address: string) {
+    console.debug('Scheduling transaction fetch for', address);
+
+    const knownTxDetails = Object.values(useTransactionsStore().state.transactions)
+        .filter((tx) => tx.sender === address || tx.recipient === address);
+
+    // const lastConfirmedHeight = knownTxDetails
+    //     .filter((tx) => tx.state === TransactionState.CONFIRMED)
+    //     .reduce((maxHeight, tx) => Math.max(tx.blockHeight!, maxHeight), 0);
+
+    useNetworkStore().state.fetchingTxHistory++;
+
+    updateBalances([address]);
+
+    // FIXME: Re-enable lastConfirmedHeight, but ensure it syncs from 0 the first time
+    //        (even when cross-account transactions are already present)
+    const client = await getNetworkClient();
+    client.waitForConsensusEstablished()
+        .then(() => {
+            console.debug('Fetching transaction history for', address, knownTxDetails);
+            return client.getTransactionsByAddress(address, /* lastConfirmedHeight - 10 */ 0, knownTxDetails);
+        })
+        .then((txDetails) => {
+            useTransactionsStore().addTransactions(txDetails.map((tx) => tx.toPlain()));
+        })
+        .catch(() => fetchedAddresses.delete(address))
+        .then(() => useNetworkStore().state.fetchingTxHistory--);
+}
+
+const subscribedAddresses = new Set<string>();
+const fetchedAddresses = new Set<string>();
+
+const subscribedProxies = new Set<string>();
+const seenProxies = new Set<string>();
+
 export async function launchNetwork() {
     if (isLaunched) return;
     isLaunched = true;
@@ -131,38 +194,6 @@ export async function launchNetwork() {
     const transactionsStore = useTransactionsStore();
     const addressStore = useAddressStore();
 
-    const subscribedAddresses = new Set<string>();
-    const fetchedAddresses = new Set<string>();
-
-    const subscribedProxies = new Set<string>();
-    const seenProxies = new Set<string>();
-
-    async function updateBalances(addresses: string[] = [...balances.keys()]) {
-        if (!addresses.length) return;
-        await client.waitForConsensusEstablished();
-        const accounts = await client.getAccounts(addresses);
-        const newBalances: Balances = new Map(
-            accounts.map((account, i) => [addresses[i], account.balance]),
-        );
-
-        for (const [address, newBalance] of newBalances) {
-            if (balances.get(address) === newBalance) {
-                // Balance did not change since last check.
-                // Remove from newBalances Map to not update the store.
-                newBalances.delete(address);
-            } else {
-                // Update balances cache
-                balances.set(address, newBalance);
-            }
-        }
-
-        if (!newBalances.size) return;
-        console.debug('Got new balances for', [...newBalances.keys()]);
-        for (const [address, balance] of newBalances) {
-            addressStore.patchAddress(address, { balance });
-        }
-    }
-
     function forgetBalances(addresses: string[]) {
         for (const address of addresses) {
             balances.delete(address);
@@ -309,31 +340,7 @@ export async function launchNetwork() {
         if (!address || fetchedAddresses.has(address)) return;
         fetchedAddresses.add(address);
 
-        console.debug('Scheduling transaction fetch for', address);
-
-        const knownTxDetails = Object.values(transactionsStore.state.transactions)
-            .filter((tx) => tx.sender === address || tx.recipient === address);
-
-        // const lastConfirmedHeight = knownTxDetails
-        //     .filter((tx) => tx.state === TransactionState.CONFIRMED)
-        //     .reduce((maxHeight, tx) => Math.max(tx.blockHeight!, maxHeight), 0);
-
-        network$.fetchingTxHistory++;
-
-        updateBalances([address]);
-
-        // FIXME: Re-enable lastConfirmedHeight, but ensure it syncs from 0 the first time
-        //        (even when cross-account transactions are already present)
-        client.waitForConsensusEstablished()
-            .then(() => {
-                console.debug('Fetching transaction history for', address, knownTxDetails);
-                return client.getTransactionsByAddress(address, /* lastConfirmedHeight - 10 */ 0, knownTxDetails);
-            })
-            .then((txDetails) => {
-                transactionsStore.addTransactions(txDetails.map((tx) => tx.toPlain()));
-            })
-            .catch(() => fetchedAddresses.delete(address))
-            .then(() => network$.fetchingTxHistory--);
+        checkHistory(address);
     });
 
     // Fetch transactions for proxies

From 3edbca6082ed0dad50afbf56dbdad69c20d607cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Mon, 2 May 2022 18:53:37 +0200
Subject: [PATCH 2/7] Stylize the pull to refresh feature in the Nimiq
 transaction list.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(need to be extracted into a reusable component / composable in the wallet)

Signed-off-by: Mathéo <matheo.raveux@gmail.com>
---
 src/components/TransactionList.vue | 20 ++++++++++++++++++++
 src/i18n/en.po                     | 30 +++++++++++++++++-------------
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/components/TransactionList.vue b/src/components/TransactionList.vue
index 60dcea171..0afbbb596 100644
--- a/src/components/TransactionList.vue
+++ b/src/components/TransactionList.vue
@@ -1,5 +1,13 @@
 <template>
     <div class="transaction-list flex-row" ref="root">
+        <div class="pull2refresh"
+            :style="{
+                transform: `translateY(${(pulledDistance / 4) - 5}px)`,
+                opacity: pulledDistance / 200,
+            }"
+        >
+            {{ $t('Pull to refresh') }} <GroundedArrowDownIconVue />
+        </div>
         <RecycleScroller
             v-if="isFetchingTxHistory || transactions.length"
             :items="transactions"
@@ -105,6 +113,7 @@ import { isProxyData, ProxyType, ProxyTransactionDirection } from '../lib/ProxyD
 import { createCashlink } from '../hub';
 import { useWindowSize } from '../composables/useWindowSize';
 import { checkHistory, updateBalances } from '../network';
+import GroundedArrowDownIconVue from './icons/GroundedArrowDownIcon.vue';
 
 function processTimestamp(timestamp: number) {
     const date: Date = new Date(timestamp);
@@ -471,6 +480,7 @@ export default defineComponent({
         CrossCloseButton,
         CircleSpinner,
         HexagonIcon,
+        GroundedArrowDownIconVue,
     },
 });
 </script>
@@ -482,6 +492,16 @@ export default defineComponent({
     position: relative;
 }
 
+.pull2refresh {
+    margin: 0 auto;
+    height: fit-content;
+    color: var(--text-60);
+
+    svg {
+        margin-left: 1rem;
+    }
+}
+
 .month-label {
     padding: 5rem 2rem 2rem;
     justify-content: space-between;
diff --git a/src/i18n/en.po b/src/i18n/en.po
index f8e9387a0..0ac9f7fd8 100644
--- a/src/i18n/en.po
+++ b/src/i18n/en.po
@@ -379,7 +379,7 @@ msgstr ""
 msgid "Buy more here in the wallet."
 msgstr ""
 
-#: src/components/TransactionList.vue:65
+#: src/components/TransactionList.vue:75
 msgid "Buy NIM"
 msgstr ""
 
@@ -441,7 +441,7 @@ msgid "Cannot import contacts, wrong file format."
 msgstr ""
 
 #: src/components/modals/TransactionModal.vue:541
-#: src/components/TransactionList.vue:62
+#: src/components/TransactionList.vue:72
 #: src/components/TransactionListItem.vue:245
 msgid "Cashlink"
 msgstr ""
@@ -520,7 +520,7 @@ msgid "Confirm account"
 msgstr ""
 
 #: src/components/BtcTransactionList.vue:54
-#: src/components/TransactionList.vue:57
+#: src/components/TransactionList.vue:67
 msgid "Congrats"
 msgstr ""
 
@@ -799,7 +799,7 @@ msgid "fees"
 msgstr ""
 
 #: src/components/BtcTransactionList.vue:38
-#: src/components/TransactionList.vue:48
+#: src/components/TransactionList.vue:58
 msgid "Fetching"
 msgstr ""
 
@@ -972,7 +972,7 @@ msgstr ""
 msgid "invalid"
 msgstr ""
 
-#: src/components/TransactionList.vue:59
+#: src/components/TransactionList.vue:69
 msgid "Invite a friend with a {cashlink} or buy more here in the wallet."
 msgstr ""
 
@@ -1169,7 +1169,7 @@ msgid "No registration – not even email."
 msgstr ""
 
 #: src/components/BtcTransactionList.vue:80
-#: src/components/TransactionList.vue:83
+#: src/components/TransactionList.vue:93
 msgid "No transactions found"
 msgstr ""
 
@@ -1246,7 +1246,7 @@ msgstr ""
 msgid "pending"
 msgstr ""
 
-#: src/components/TransactionList.vue:14
+#: src/components/TransactionList.vue:24
 msgid "Pending Cashlinks"
 msgstr ""
 
@@ -1304,6 +1304,10 @@ msgstr ""
 msgid "Processing payout"
 msgstr ""
 
+#: src/components/TransactionList.vue:9
+msgid "Pull to refresh"
+msgstr ""
+
 #: src/components/swap/SwapSepaFundingInstructions.vue:53
 msgid "Purpose"
 msgstr ""
@@ -1322,7 +1326,7 @@ msgid "Receive fiat to your bank account."
 msgstr ""
 
 #: src/components/TestnetFaucet.vue:11
-#: src/components/TransactionList.vue:79
+#: src/components/TransactionList.vue:89
 msgid "Receive free NIM"
 msgstr ""
 
@@ -1330,7 +1334,7 @@ msgstr ""
 msgid "Receive NIM"
 msgstr ""
 
-#: src/components/TransactionList.vue:73
+#: src/components/TransactionList.vue:83
 msgid "Receive some free NIM to get started."
 msgstr ""
 
@@ -1826,8 +1830,8 @@ msgstr ""
 
 #: src/components/BtcTransactionList.vue:235
 #: src/components/BtcTransactionList.vue:257
-#: src/components/TransactionList.vue:249
-#: src/components/TransactionList.vue:271
+#: src/components/TransactionList.vue:261
+#: src/components/TransactionList.vue:283
 msgid "This month"
 msgstr ""
 
@@ -2031,7 +2035,7 @@ msgid "You need a SEPA account that supports instant transactions."
 msgstr ""
 
 #: src/components/BtcTransactionList.vue:55
-#: src/components/TransactionList.vue:58
+#: src/components/TransactionList.vue:68
 msgid "You now own crypto!"
 msgstr ""
 
@@ -2113,6 +2117,6 @@ msgid "Your transaction must be SEPA Instant"
 msgstr ""
 
 #: src/components/BtcTransactionList.vue:65
-#: src/components/TransactionList.vue:72
+#: src/components/TransactionList.vue:82
 msgid "Your transactions will appear here"
 msgstr ""

From ac7cf28c9e0e950b5cb9263a4184b0bba967b15a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren?= <hello@soerenschwert.de>
Date: Tue, 17 May 2022 20:26:11 +0200
Subject: [PATCH 3/7] Extract pull2refresh logic into composable and component

---
 src/components/Pull2RefreshIndicator.vue | 39 +++++++++++++
 src/components/TransactionList.vue       | 73 +++---------------------
 src/composables/usePull2Refresh.ts       | 57 ++++++++++++++++++
 3 files changed, 105 insertions(+), 64 deletions(-)
 create mode 100644 src/components/Pull2RefreshIndicator.vue
 create mode 100644 src/composables/usePull2Refresh.ts

diff --git a/src/components/Pull2RefreshIndicator.vue b/src/components/Pull2RefreshIndicator.vue
new file mode 100644
index 000000000..f871ace9f
--- /dev/null
+++ b/src/components/Pull2RefreshIndicator.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="pull2refresh"
+        :style="{
+            transform: `translateY(${(pulledDistance / 4) - 5}px)`,
+            opacity: pulledDistance / 200,
+        }"
+    >
+        {{ $t('Pull to refresh') }} <GroundedArrowDownIcon />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import GroundedArrowDownIcon from './icons/GroundedArrowDownIcon.vue';
+
+export default defineComponent({
+    props: {
+        pulledDistance: {
+            type: Number,
+            required: true,
+        },
+    },
+    components: {
+        GroundedArrowDownIcon,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.pull2refresh {
+    margin: 0 auto;
+    height: fit-content;
+    color: var(--text-60);
+
+    svg {
+        margin-left: 1rem;
+    }
+}
+</style>
diff --git a/src/components/TransactionList.vue b/src/components/TransactionList.vue
index 0afbbb596..b40efc7ee 100644
--- a/src/components/TransactionList.vue
+++ b/src/components/TransactionList.vue
@@ -1,13 +1,6 @@
 <template>
     <div class="transaction-list flex-row" ref="root">
-        <div class="pull2refresh"
-            :style="{
-                transform: `translateY(${(pulledDistance / 4) - 5}px)`,
-                opacity: pulledDistance / 200,
-            }"
-        >
-            {{ $t('Pull to refresh') }} <GroundedArrowDownIconVue />
-        </div>
+        <Pull2RefreshIndicator :pulledDistance="pulledDistance" />
         <RecycleScroller
             v-if="isFetchingTxHistory || transactions.length"
             :items="transactions"
@@ -96,7 +89,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, Ref, watch, onMounted, onBeforeUnmount, reactive } from '@vue/composition-api';
+import { defineComponent, computed, ref, Ref, watch, onMounted, onBeforeUnmount } from '@vue/composition-api';
 import { CircleSpinner, HexagonIcon } from '@nimiq/vue-components';
 import { AddressBook } from '@nimiq/utils';
 import TransactionListItem from '@/components/TransactionListItem.vue';
@@ -113,7 +106,8 @@ import { isProxyData, ProxyType, ProxyTransactionDirection } from '../lib/ProxyD
 import { createCashlink } from '../hub';
 import { useWindowSize } from '../composables/useWindowSize';
 import { checkHistory, updateBalances } from '../network';
-import GroundedArrowDownIconVue from './icons/GroundedArrowDownIcon.vue';
+import Pull2RefreshIndicator from './Pull2RefreshIndicator.vue';
+import { usePull2Refresh } from '../composables/usePull2Refresh';
 
 function processTimestamp(timestamp: number) {
     const date: Date = new Date(timestamp);
@@ -402,61 +396,22 @@ export default defineComponent({
             context.emit('scroll');
         }
 
-        const P2R = reactive({
-            start: null as number | null,
-            current: null as number | null,
-        });
-
-        function startP2R(event: TouchEvent) {
-            if (!scroller.value || scroller.value.$el.scrollTop > 0) return;
-            P2R.start = event.touches[0].clientY;
-            (event.target as HTMLElement).addEventListener('touchmove', moveP2R);
-        }
-
-        function moveP2R(event: TouchEvent) {
-            if (!P2R.start) return;
-            P2R.current = event.touches[0].clientY;
-            const distance = P2R.current - P2R.start;
-            if (distance > 200) {
-                console.log('REFRESH!'); // eslint-disable-line no-console
-                if (activeAddress.value) {
-                    checkHistory(activeAddress.value);
-                    updateBalances([activeAddress.value]);
-                }
-                cancelP2R(event);
+        const { pulledDistance } = usePull2Refresh(scroller, () => {
+            if (activeAddress.value) {
+                checkHistory(activeAddress.value);
+                updateBalances([activeAddress.value]);
             }
-        }
-
-        function cancelP2R(event: TouchEvent) {
-            P2R.start = null;
-            P2R.current = null;
-            (event.target as HTMLElement).removeEventListener('touchmove', moveP2R);
-            // console.log('Pull canceled'); // eslint-disable-line no-console
-        }
-
-        const pulledDistance = computed(() => {
-            if (!P2R.start || !P2R.current) return 0;
-            const distance = P2R.current - P2R.start;
-            return Math.max(0, distance);
         });
 
         // @scroll / @scroll.native doesn't seem to work, so using standard event system
         onMounted(() => {
             if (!scroller.value) return;
             scroller.value.$el.addEventListener('scroll', onScroll);
-
-            scroller.value.$el.addEventListener('touchstart', startP2R);
-            scroller.value.$el.addEventListener('touchend', cancelP2R);
-            scroller.value.$el.addEventListener('touchcancel', cancelP2R);
         });
 
         onBeforeUnmount(() => {
             if (!scroller.value) return;
             scroller.value.$el.removeEventListener('scroll', onScroll);
-
-            scroller.value.$el.removeEventListener('touchstart', startP2R);
-            scroller.value.$el.removeEventListener('touchend', cancelP2R);
-            scroller.value.$el.removeEventListener('touchcancel', cancelP2R);
         });
 
         return {
@@ -480,7 +435,7 @@ export default defineComponent({
         CrossCloseButton,
         CircleSpinner,
         HexagonIcon,
-        GroundedArrowDownIconVue,
+        Pull2RefreshIndicator,
     },
 });
 </script>
@@ -492,16 +447,6 @@ export default defineComponent({
     position: relative;
 }
 
-.pull2refresh {
-    margin: 0 auto;
-    height: fit-content;
-    color: var(--text-60);
-
-    svg {
-        margin-left: 1rem;
-    }
-}
-
 .month-label {
     padding: 5rem 2rem 2rem;
     justify-content: space-between;
diff --git a/src/composables/usePull2Refresh.ts b/src/composables/usePull2Refresh.ts
new file mode 100644
index 000000000..ab853de0e
--- /dev/null
+++ b/src/composables/usePull2Refresh.ts
@@ -0,0 +1,57 @@
+import { computed, onBeforeUnmount, onMounted, reactive, Ref } from '@vue/composition-api';
+
+export function usePull2Refresh(scroller: Ref<{$el: HTMLDivElement} | null>, onRefresh: () => void) {
+    const P2R = reactive({
+        start: null as number | null,
+        current: null as number | null,
+    });
+
+    function startP2R(event: TouchEvent) {
+        if (!scroller.value || scroller.value.$el.scrollTop > 0) return;
+        P2R.start = event.touches[0].clientY;
+        (event.target as HTMLElement).addEventListener('touchmove', moveP2R);
+    }
+
+    function moveP2R(event: TouchEvent) {
+        if (!P2R.start) return;
+        P2R.current = event.touches[0].clientY;
+        const distance = P2R.current - P2R.start;
+        if (distance > window.innerHeight / 3) {
+            // console.log('REFRESH!'); // eslint-disable-line no-console
+            onRefresh();
+            cancelP2R(event);
+        }
+    }
+
+    function cancelP2R(event: TouchEvent) {
+        P2R.start = null;
+        P2R.current = null;
+        (event.target as HTMLElement).removeEventListener('touchmove', moveP2R);
+        // console.log('Pull canceled'); // eslint-disable-line no-console
+    }
+
+    const pulledDistance = computed(() => {
+        if (!P2R.start || !P2R.current) return 0;
+        const distance = P2R.current - P2R.start;
+        return Math.max(0, distance);
+    });
+
+    // @scroll / @scroll.native doesn't seem to work, so using standard event system
+    onMounted(() => {
+        if (!scroller.value) return;
+        scroller.value.$el.addEventListener('touchstart', startP2R);
+        scroller.value.$el.addEventListener('touchend', cancelP2R);
+        scroller.value.$el.addEventListener('touchcancel', cancelP2R);
+    });
+
+    onBeforeUnmount(() => {
+        if (!scroller.value) return;
+        scroller.value.$el.removeEventListener('touchstart', startP2R);
+        scroller.value.$el.removeEventListener('touchend', cancelP2R);
+        scroller.value.$el.removeEventListener('touchcancel', cancelP2R);
+    });
+
+    return {
+        pulledDistance,
+    };
+}

From ba0ee4f8a6316e7e8f10868e4220c2c5a4a5f5dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren?= <hello@soerenschwert.de>
Date: Tue, 17 May 2022 20:48:51 +0200
Subject: [PATCH 4/7] Add pull2refresh to BTC transaction list

---
 src/components/BtcTransactionList.vue | 17 ++++++++++++++++-
 src/electrum.ts                       | 25 +++++++++++++++++++------
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/components/BtcTransactionList.vue b/src/components/BtcTransactionList.vue
index 672e0ba84..e64fee275 100644
--- a/src/components/BtcTransactionList.vue
+++ b/src/components/BtcTransactionList.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="transaction-list flex-row" ref="root">
+        <Pull2RefreshIndicator :pulledDistance="pulledDistance" />
         <RecycleScroller
             v-if="isFetchingTxHistory || transactions.length"
             :items="transactions"
@@ -7,6 +8,8 @@
             key-field="transactionHash"
             :buffer="scrollerBuffer"
             ref="scroller"
+            :style="`transform: translateY(${pulledDistance / 2}px)`"
+            :class="{'smooth': !pulledDistance}"
         >
             <template v-slot:default="{ item, index }">
                 <div
@@ -94,6 +97,9 @@ import { useWindowSize } from '../composables/useWindowSize';
 import { useAccountStore } from '../stores/Account';
 import { useBtcLabelsStore } from '../stores/BtcLabels';
 // import { ENV_MAIN } from '../lib/Constants';
+import Pull2RefreshIndicator from './Pull2RefreshIndicator.vue';
+import { usePull2Refresh } from '../composables/usePull2Refresh';
+import { refetchActiveAccount } from '../electrum';
 
 function processTimestamp(timestamp: number) {
     const date: Date = new Date(timestamp);
@@ -350,13 +356,20 @@ export default defineComponent({
 
         // Scroll to top when
         // - Active address changes
-        const scroller = ref<{ scrollToPosition(position: number, smooth?: boolean): void } | null>(null);
+        const scroller = ref<{
+            scrollToPosition(position: number, smooth?: boolean): void,
+            $el: HTMLDivElement,
+                } | null>(null);
         // watch(activeAccountId, () => {
         //     if (scroller.value) {
         //         scroller.value.scrollToPosition(0, false); // No smooth scrolling on address change
         //     }
         // });
 
+        const { pulledDistance } = usePull2Refresh(scroller, () => {
+            refetchActiveAccount();
+        });
+
         return {
             scrollerBuffer,
             itemSize,
@@ -367,12 +380,14 @@ export default defineComponent({
             // isMainnet,
             scroller,
             consensus,
+            pulledDistance,
         };
     },
     components: {
         BtcTransactionListItem,
         CircleSpinner,
         AlertTriangleIcon,
+        Pull2RefreshIndicator,
     },
 });
 </script>
diff --git a/src/electrum.ts b/src/electrum.ts
index 395fb94f2..c43d7e8d2 100644
--- a/src/electrum.ts
+++ b/src/electrum.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { watch, computed, ref } from '@vue/composition-api';
+import { watch, computed, ref, Ref } from '@vue/composition-api';
 import { ElectrumClient, ElectrumClientOptions, TransactionDetails } from '@nimiq/electrum-client';
 import { SignedBtcTransaction } from '@nimiq/hub-api';
 import Config from 'config';
@@ -167,6 +167,22 @@ export async function checkHistory(
     return gap;
 }
 
+const fetchedAccounts = new Set<string>();
+
+let txFetchTrigger: Ref<number> | undefined;
+export function useTxFetchTrigger() {
+    txFetchTrigger = txFetchTrigger || ref(0);
+    return txFetchTrigger;
+}
+
+export function refetchActiveAccount() {
+    const { activeAccountInfo } = useAccountStore();
+    if (!activeAccountInfo.value) return;
+
+    fetchedAccounts.delete(activeAccountInfo.value.id);
+    useTxFetchTrigger().value += 1;
+}
+
 export async function launchElectrum() {
     if (isLaunched) return;
     isLaunched = true;
@@ -178,14 +194,11 @@ export async function launchElectrum() {
     const btcTransactionsStore = useBtcTransactionsStore();
     const btcAddressStore = useBtcAddressStore();
 
-    const fetchedAccounts = new Set<string>();
-
-    const txFetchTrigger = ref(0);
     function invalidateTransationHistory() {
         // Invalidate fetched addresses
         fetchedAccounts.clear();
         // Trigger watcher
-        txFetchTrigger.value += 1;
+        useTxFetchTrigger().value += 1;
     }
 
     client.addHeadChangedListener((header) => {
@@ -227,7 +240,7 @@ export async function launchElectrum() {
     });
 
     // Fetch transactions for active account
-    watch([activeAccountInfo, txFetchTrigger], async ([accountInfo]) => {
+    watch([activeAccountInfo, useTxFetchTrigger()], async ([accountInfo]) => {
         const account = accountInfo as AccountInfo | null;
         if (!account) return;
 

From 40880d6cd7f93109c9eb2e9efe0c8e7b70193c1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren?= <hello@soerenschwert.de>
Date: Tue, 17 May 2022 20:59:27 +0200
Subject: [PATCH 5/7] Fix unnecessary change and missing style

---
 src/components/BtcTransactionList.vue | 4 ++++
 src/components/TransactionList.vue    | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/BtcTransactionList.vue b/src/components/BtcTransactionList.vue
index e64fee275..19bef80e8 100644
--- a/src/components/BtcTransactionList.vue
+++ b/src/components/BtcTransactionList.vue
@@ -427,6 +427,10 @@ export default defineComponent({
     touch-action: pan-y;
 
     @extend %custom-scrollbar;
+
+    &.smooth {
+        transition: transform var(--transition-time) var(--nimiq-ease);
+    }
 }
 
 .list-element {
diff --git a/src/components/TransactionList.vue b/src/components/TransactionList.vue
index b40efc7ee..17489de87 100644
--- a/src/components/TransactionList.vue
+++ b/src/components/TransactionList.vue
@@ -89,7 +89,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, Ref, watch, onMounted, onBeforeUnmount } from '@vue/composition-api';
+import { defineComponent, computed, ref, Ref, watch, onMounted, onUnmounted } from '@vue/composition-api';
 import { CircleSpinner, HexagonIcon } from '@nimiq/vue-components';
 import { AddressBook } from '@nimiq/utils';
 import TransactionListItem from '@/components/TransactionListItem.vue';
@@ -409,7 +409,7 @@ export default defineComponent({
             scroller.value.$el.addEventListener('scroll', onScroll);
         });
 
-        onBeforeUnmount(() => {
+        onUnmounted(() => {
             if (!scroller.value) return;
             scroller.value.$el.removeEventListener('scroll', onScroll);
         });

From 19742f98cbd4f18123ac2cbd1dc0b350f8a1b3c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren?= <hello@soerenschwert.de>
Date: Tue, 17 May 2022 21:01:35 +0200
Subject: [PATCH 6/7] Update en language file

---
 src/i18n/en.po | 48 ++++++++++++++++++++++++------------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/i18n/en.po b/src/i18n/en.po
index 0ac9f7fd8..ff0260041 100644
--- a/src/i18n/en.po
+++ b/src/i18n/en.po
@@ -356,7 +356,7 @@ msgstr ""
 msgid "Buy and sell crypto for EUR. Simply by bank transfer and from inside your wallet."
 msgstr ""
 
-#: src/components/BtcTransactionList.vue:58
+#: src/components/BtcTransactionList.vue:61
 msgid "Buy BTC"
 msgstr ""
 
@@ -375,11 +375,11 @@ msgstr ""
 msgid "Buy max"
 msgstr ""
 
-#: src/components/BtcTransactionList.vue:56
+#: src/components/BtcTransactionList.vue:59
 msgid "Buy more here in the wallet."
 msgstr ""
 
-#: src/components/TransactionList.vue:75
+#: src/components/TransactionList.vue:68
 msgid "Buy NIM"
 msgstr ""
 
@@ -441,7 +441,7 @@ msgid "Cannot import contacts, wrong file format."
 msgstr ""
 
 #: src/components/modals/TransactionModal.vue:541
-#: src/components/TransactionList.vue:72
+#: src/components/TransactionList.vue:65
 #: src/components/TransactionListItem.vue:245
 msgid "Cashlink"
 msgstr ""
@@ -519,8 +519,8 @@ msgstr ""
 msgid "Confirm account"
 msgstr ""
 
-#: src/components/BtcTransactionList.vue:54
-#: src/components/TransactionList.vue:67
+#: src/components/BtcTransactionList.vue:57
+#: src/components/TransactionList.vue:60
 msgid "Congrats"
 msgstr ""
 
@@ -546,7 +546,7 @@ msgstr ""
 msgid "Connecting to Nimiq network"
 msgstr ""
 
-#: src/components/BtcTransactionList.vue:45
+#: src/components/BtcTransactionList.vue:48
 msgid "Connection lost"
 msgstr ""
 
@@ -798,8 +798,8 @@ msgstr ""
 msgid "fees"
 msgstr ""
 
-#: src/components/BtcTransactionList.vue:38
-#: src/components/TransactionList.vue:58
+#: src/components/BtcTransactionList.vue:41
+#: src/components/TransactionList.vue:51
 msgid "Fetching"
 msgstr ""
 
@@ -972,7 +972,7 @@ msgstr ""
 msgid "invalid"
 msgstr ""
 
-#: src/components/TransactionList.vue:69
+#: src/components/TransactionList.vue:62
 msgid "Invite a friend with a {cashlink} or buy more here in the wallet."
 msgstr ""
 
@@ -1168,8 +1168,8 @@ msgstr ""
 msgid "No registration – not even email."
 msgstr ""
 
-#: src/components/BtcTransactionList.vue:80
-#: src/components/TransactionList.vue:93
+#: src/components/BtcTransactionList.vue:83
+#: src/components/TransactionList.vue:86
 msgid "No transactions found"
 msgstr ""
 
@@ -1246,7 +1246,7 @@ msgstr ""
 msgid "pending"
 msgstr ""
 
-#: src/components/TransactionList.vue:24
+#: src/components/TransactionList.vue:17
 msgid "Pending Cashlinks"
 msgstr ""
 
@@ -1304,7 +1304,7 @@ msgstr ""
 msgid "Processing payout"
 msgstr ""
 
-#: src/components/TransactionList.vue:9
+#: src/components/Pull2RefreshIndicator.vue:8
 msgid "Pull to refresh"
 msgstr ""
 
@@ -1326,7 +1326,7 @@ msgid "Receive fiat to your bank account."
 msgstr ""
 
 #: src/components/TestnetFaucet.vue:11
-#: src/components/TransactionList.vue:89
+#: src/components/TransactionList.vue:82
 msgid "Receive free NIM"
 msgstr ""
 
@@ -1334,7 +1334,7 @@ msgstr ""
 msgid "Receive NIM"
 msgstr ""
 
-#: src/components/TransactionList.vue:83
+#: src/components/TransactionList.vue:76
 msgid "Receive some free NIM to get started."
 msgstr ""
 
@@ -1828,10 +1828,10 @@ msgstr ""
 msgid "This might take up to {min} minutes."
 msgstr ""
 
-#: src/components/BtcTransactionList.vue:235
-#: src/components/BtcTransactionList.vue:257
-#: src/components/TransactionList.vue:261
-#: src/components/TransactionList.vue:283
+#: src/components/BtcTransactionList.vue:241
+#: src/components/BtcTransactionList.vue:263
+#: src/components/TransactionList.vue:255
+#: src/components/TransactionList.vue:277
 msgid "This month"
 msgstr ""
 
@@ -2034,8 +2034,8 @@ msgstr ""
 msgid "You need a SEPA account that supports instant transactions."
 msgstr ""
 
-#: src/components/BtcTransactionList.vue:55
-#: src/components/TransactionList.vue:68
+#: src/components/BtcTransactionList.vue:58
+#: src/components/TransactionList.vue:61
 msgid "You now own crypto!"
 msgstr ""
 
@@ -2116,7 +2116,7 @@ msgstr ""
 msgid "Your transaction must be SEPA Instant"
 msgstr ""
 
-#: src/components/BtcTransactionList.vue:65
-#: src/components/TransactionList.vue:82
+#: src/components/BtcTransactionList.vue:68
+#: src/components/TransactionList.vue:75
 msgid "Your transactions will appear here"
 msgstr ""

From b1adab84103026129f7ade26debba25b6fae22ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren?= <hello@soerenschwert.de>
Date: Tue, 17 May 2022 22:00:57 +0200
Subject: [PATCH 7/7] Remove unneeded comment

---
 src/composables/usePull2Refresh.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/composables/usePull2Refresh.ts b/src/composables/usePull2Refresh.ts
index ab853de0e..384a7dc43 100644
--- a/src/composables/usePull2Refresh.ts
+++ b/src/composables/usePull2Refresh.ts
@@ -36,7 +36,6 @@ export function usePull2Refresh(scroller: Ref<{$el: HTMLDivElement} | null>, onR
         return Math.max(0, distance);
     });
 
-    // @scroll / @scroll.native doesn't seem to work, so using standard event system
     onMounted(() => {
         if (!scroller.value) return;
         scroller.value.$el.addEventListener('touchstart', startP2R);