Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display Notes on Activity view #2292

Merged
merged 6 commits into from
Sep 16, 2024
Merged

Display Notes on Activity view #2292

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
093f447
Load noteKey on start + display if the notes are available or not on …
shubhamkmr04 Jul 18, 2024
b1316e6
Refactor NotesStore to add notes and improve note retrieval in Activi…
shubhamkmr04 Jul 23, 2024
4739416
Fix note overlapping and limit display to 100 chars
shubhamkmr04 Sep 3, 2024
7c4b5e7
Refactor: Add getNoteKeys function within models to simplify note mat…
shubhamkmr04 Sep 10, 2024
468ba57
Using getNoteKeys function and refactoring for notes on separate views
shubhamkmr04 Sep 10, 2024
286f615
Using getNoteKey in sendingLightning as well + using noteKey variable…
shubhamkmr04 Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion stores/NotesStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,16 @@ const NOTES_KEY = 'note-Keys';

export default class NotesStore {
@observable public noteKeys: string[] = [];
@observable public notes: { [key: string]: string } = {};

constructor() {
this.loadNoteKeys();
}

@action
public storeNoteKeys = async (key: string, notes: string) => {
this.notes[key] = notes;

if (!this.noteKeys.includes(key)) {
if (notes) {
this.noteKeys.push(key);
Expand All @@ -21,11 +28,36 @@ export default class NotesStore {
const index = this.noteKeys.indexOf(key);
if (index !== -1) {
this.noteKeys.splice(index, 1);
// write updated keys to storage
delete this.notes[key];
await this.writeNoteKeysToLocalStorage();
}
};

@action
public async loadNoteKeys() {
console.log('Loading notes...');
try {
const storedKeys = await EncryptedStorage.getItem(NOTES_KEY);
if (storedKeys) {
this.noteKeys = JSON.parse(storedKeys);
// Load all notes
await Promise.all(
this.noteKeys.map(async (key) => {
const note = await EncryptedStorage.getItem(key);
if (note) {
this.notes[key] = note;
}
})
);
}
} catch (error) {
console.error(
'Error loading note keys from encrypted storage',
error
);
}
}

writeNoteKeysToLocalStorage = async () => {
try {
await EncryptedStorage.setItem(
Expand Down
77 changes: 76 additions & 1 deletion views/Activity/Activity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import ActivityStore from '../../stores/ActivityStore';
import FiatStore from '../../stores/FiatStore';
import PosStore from '../../stores/PosStore';
import SettingsStore from '../../stores/SettingsStore';
import NotesStore from '../../stores/NotesStore';
import { SATS_PER_BTC } from '../../stores/UnitsStore';

import Filter from '../../assets/images/SVG/Filter On.svg';
Expand All @@ -38,14 +39,15 @@ interface ActivityProps {
FiatStore: FiatStore;
PosStore: PosStore;
SettingsStore: SettingsStore;
NotesStore: NotesStore;
route: Route<'Activity', { order: any }>;
}

interface ActivityState {
selectedPaymentForOrder: any;
}

@inject('ActivityStore', 'FiatStore', 'PosStore', 'SettingsStore')
@inject('ActivityStore', 'FiatStore', 'PosStore', 'SettingsStore', 'NotesStore')
@observer
export default class Activity extends React.PureComponent<
ActivityProps,
Expand Down Expand Up @@ -225,6 +227,33 @@ export default class Activity extends React.PureComponent<
</TouchableOpacity>
);

const getMatchingNote = (item: any) => {
const { NotesStore } = this.props;
const strippedNoteKeys = NotesStore.noteKeys.map((key) =>
shubhamkmr04 marked this conversation as resolved.
Show resolved Hide resolved
key.replace(/^note-/, '')
);

let valuesToCompare: string[] = [];
if (item.model === 'Invoice') {
valuesToCompare = [item.getRPreimage, item.payment_hash];
} else if (item.model === 'Payment') {
valuesToCompare = [item.paymentHash, item.getPreimage];
} else if (item.model === 'Transaction') {
valuesToCompare = [item.tx];
}

for (let value of valuesToCompare) {
const matchKey = `note-${value}`;
if (
strippedNoteKeys.includes(value) &&
NotesStore.notes[matchKey]
) {
return NotesStore.notes[matchKey];
}
}
return null;
};

return (
<Screen>
<Header
Expand Down Expand Up @@ -255,6 +284,8 @@ export default class Activity extends React.PureComponent<
<FlatList
data={filteredActivity}
renderItem={({ item }: { item: any }) => {
const note = getMatchingNote(item);

let displayName = item.model;
let subTitle = item.model;

Expand Down Expand Up @@ -563,6 +594,50 @@ export default class Activity extends React.PureComponent<
</ListItem.Subtitle>
</View>
)}
{note && (
<View style={styles.row}>
<ListItem.Subtitle
style={{
...styles.leftCell,
color: themeColor(
'text'
),
fontFamily:
'Lato-Regular',
flexShrink: 0,
flex: 0,
width: 'auto',
overflow: 'hidden'
}}
numberOfLines={1}
>
{localeString(
'general.note'
)}
</ListItem.Subtitle>

<ListItem.Subtitle
style={{
...styles.rightCell,
color: themeColor(
'secondaryText'
),
fontFamily:
'Lato-Regular',
flexWrap: 'wrap',
flexShrink: 1
}}
ellipsizeMode="tail"
>
{note.length > 150
? `${note.substring(
0,
150
)}...`
: note}
</ListItem.Subtitle>
</View>
)}
</ListItem.Content>
</ListItem>
</React.Fragment>
Expand Down
10 changes: 8 additions & 2 deletions views/Wallet/Wallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ import SettingsStore, {
import SyncStore from '../../stores/SyncStore';
import UnitsStore from '../../stores/UnitsStore';
import UTXOsStore from '../../stores/UTXOsStore';
import NotesStore from '../../stores/NotesStore';

import Bitcoin from '../../assets/images/SVG/Bitcoin.svg';
import CaretUp from '../../assets/images/SVG/Caret Up.svg';
Expand All @@ -93,6 +94,7 @@ interface WalletProps {
ModalStore: ModalStore;
SyncStore: SyncStore;
LSPStore: LSPStore;
NotesStore: NotesStore;
ChannelBackupStore: ChannelBackupStore;
LightningAddressStore: LightningAddressStore;
LnurlPayStore: LnurlPayStore;
Expand All @@ -118,7 +120,8 @@ interface WalletState {
'LSPStore',
'LnurlPayStore',
'ChannelBackupStore',
'LightningAddressStore'
'LightningAddressStore',
'NotesStore'
)
@observer
export default class Wallet extends React.Component<WalletProps, WalletState> {
Expand Down Expand Up @@ -299,7 +302,8 @@ export default class Wallet extends React.Component<WalletProps, WalletState> {
ChannelBackupStore,
SyncStore,
LightningAddressStore,
LnurlPayStore
LnurlPayStore,
NotesStore
} = this.props;
const {
settings,
Expand Down Expand Up @@ -345,6 +349,8 @@ export default class Wallet extends React.Component<WalletProps, WalletState> {

LnurlPayStore.reset();

NotesStore?.loadNoteKeys();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't believe we need to load this every time we hit the wallet screen. On connecting should suffice

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, we have covered that in 2393


if (
pos?.posEnabled &&
pos.posEnabled !== PosEnabled.Disabled &&
Expand Down