Repository: ZeusLN/zeus
Pull request #3020: feat: toggle hint icon
Author: login: a-khushal
Labels: name: LNURL
name: LNURL-Pay
Created: 2025-05-01T12:47:25Z | Merged: 2025-05-12T20:25:17Z

# Description

Relates to issue: [**ZEUS-3017**](https://github.com/ZeusLN/zeus/issues/3017)

This pull request is categorized as a:

- [x] New feature
- [ ] Bug fix
- [ ] Code refactor
- [ ] Configuration change
- [ ] Locales update
- [ ] Quality assurance
- [ ] Other

## Checklist
- [x] I’ve run `yarn run tsc` and made sure my code compiles correctly
- [x] I’ve run `yarn run lint` and made sure my code didn’t contain any problematic patterns
- [x] I’ve run `yarn run prettier` and made sure my code is formatted correctly
- [x] I’ve run `yarn run test` and made sure all of the tests pass

## Testing

If you modified or added a utility file, did you add new unit tests?

- [ ] No, I’m a fool
- [ ] Yes
- [x] N/A

I have tested this PR on the following platforms (please specify OS version and phone model/VM):

- [x] Android
- [ ] iOS

I have tested this PR with the following types of nodes (please specify node version and API version where appropriate):

- [ ] Embedded LND
- [x] LND (REST)
- [ ] LND (Lightning Node Connect)
- [ ] Core Lightning (CLNRest)
- [ ] Nostr Wallet Connect
- [ ] LndHub

### Locales
- [ ] I’ve added new locale text that requires translations
- [ ] I’m aware that new translations should be made on the ZEUS [Transfix page](https://app.transifex.com/ZeusLN/zeus/) and not directly to this repo

### Third Party Dependencies and Packages

- [ ] Contributors will need to run `yarn` after this PR is merged in
- [ ] 3rd party dependencies have been modified:
    * verify that `package.json` and `yarn.lock` have been properly updated
    * verify that dependencies are installed for both iOS and Android platforms

### Other:

- [ ] Changes were made that require an update to the README
- [ ] Changes were made that require an update to onboarding



Diff:
diff --git a/views/LnurlPay/LnurlPay.tsx b/views/LnurlPay/LnurlPay.tsx
index 64d385a461..ed38809734 100644
--- a/views/LnurlPay/LnurlPay.tsx
+++ b/views/LnurlPay/LnurlPay.tsx
@@ -447,7 +447,10 @@ export default class LnurlPay extends React.Component<
                         </View>
                     </View>
                     <View style={styles.metadata}>
-                        <LnurlPayMetadata metadata={lnurl.metadata} />
+                        <LnurlPayMetadata
+                            metadata={lnurl.metadata}
+                            showArrow={false}
+                        />
                     </View>
                 </ScrollView>
             </Screen>
diff --git a/views/LnurlPay/Metadata.tsx b/views/LnurlPay/Metadata.tsx
index d0ca90660b..1942155291 100644
--- a/views/LnurlPay/Metadata.tsx
+++ b/views/LnurlPay/Metadata.tsx
@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { Text, Image, View, ScrollView } from 'react-native';
+import { Icon } from 'react-native-elements';
 
-import { themeColor } from './../../utils/ThemeUtils';
+import { themeColor } from '../../utils/ThemeUtils';
 
 interface LnurlPayMetadataProps {
     metadata: string;
+    showArrow?: boolean;
 }
 
 export default class LnurlPayMetadata extends React.Component<LnurlPayMetadataProps> {
     render() {
-        const { metadata } = this.props;
+        const { metadata, showArrow = true } = this.props;
 
         let keypairs: Array<Array<string>>;
         try {
@@ -44,14 +46,31 @@ export default class LnurlPayMetadata extends React.Component<LnurlPayMetadataPr
                             source={{ uri: image }}
                         />
                     ) : null}
-                    <Text
+                    <View
                         style={{
-                            color: themeColor('text'),
-                            fontFamily: 'PPNeueMontreal-Book'
+                            flexDirection: 'row',
+                            alignItems: 'center'
                         }}
                     >
-                        {text}
-                    </Text>
+                        <Text
+                            style={{
+                                color: showArrow
+                                    ? themeColor('highlight')
+                                    : themeColor('text'),
+                                fontFamily: 'PPNeueMontreal-Book'
+                            }}
+                        >
+                            {text}
+                        </Text>
+                        {showArrow && (
+                            <Icon
+                                name="keyboard-arrow-down"
+                                type="material"
+                                size={15}
+                                color={themeColor('highlight')}
+                            />
+                        )}
+                    </View>
                 </View>
             </ScrollView>
         );
diff --git a/views/LnurlPay/Success.tsx b/views/LnurlPay/Success.tsx
index a1ebe1ac56..4a25aba9d1 100644
--- a/views/LnurlPay/Success.tsx
+++ b/views/LnurlPay/Success.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Icon } from 'react-native-elements';
 import {
     Alert,
     Linking,
@@ -9,7 +10,7 @@ import {
     View
 } from 'react-native';
 import { LNURLPaySuccessAction, decipherAES } from 'js-lnurl';
-import { localeString } from './../../utils/LocaleUtils';
+import { localeString } from '../../utils/LocaleUtils';
 import { themeColor } from '../../utils/ThemeUtils';
 
 interface LnurlPaySuccessProps {
@@ -142,6 +143,18 @@ export default class LnurlPaySuccess extends React.Component<LnurlPaySuccessProp
                     padding: 15
                 }}
             >
+                <Icon
+                    name="keyboard-arrow-up"
+                    type="material"
+                    size={20}
+                    color={themeColor('text')}
+                    containerStyle={{
+                        position: 'absolute',
+                        top: 10,
+                        right: 10,
+                        zIndex: 1
+                    }}
+                />
                 {body}
                 {domain && servicedBy}
             </View>


Reviews:
user: login: shubhamkmr04
body: @a-khushal keep adding some screenshots of the changes
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-07T11:29:26Z
user: login: kaloudis
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T03:00:49Z
user: login: a-khushal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T03:29:30Z
user: login: a-khushal
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-09T05:47:03Z
user: login: kaloudis
body: tACK
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-12T20:25:05Z

Review comments:
diff_hunk: @@ -2,6 +2,7 @@ import * as React from 'react';
 import { Text, Image, View, ScrollView } from 'react-native';
 
 import { themeColor } from './../../utils/ThemeUtils';
+import { Icon } from 'react-native-elements';
path: views/LnurlPay/Metadata.tsx
user: login: kaloudis
body: nit: library imports should happen before local imports
created_at: 2025-05-09T02:59:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -11,6 +11,7 @@ import {
 import { LNURLPaySuccessAction, decipherAES } from 'js-lnurl';
 import { localeString } from './../../utils/LocaleUtils';
 import { themeColor } from '../../utils/ThemeUtils';
+import { Icon } from 'react-native-elements';
path: views/LnurlPay/Success.tsx
user: login: kaloudis
body: here too
created_at: 2025-05-09T02:59:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -11,6 +11,7 @@ import {
 import { LNURLPaySuccessAction, decipherAES } from 'js-lnurl';
 import { localeString } from './../../utils/LocaleUtils';
path: views/LnurlPay/Success.tsx
user: login: kaloudis
body: nit: we can get rid of the leading `./` on this import
created_at: 2025-05-09T02:59:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -2,6 +2,7 @@ import * as React from 'react';
 import { Text, Image, View, ScrollView } from 'react-native';
 
 import { themeColor } from './../../utils/ThemeUtils';
path: views/LnurlPay/Metadata.tsx
user: login: kaloudis
body: nit: we can get rid of the leading `./` on this import
created_at: 2025-05-09T02:59:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -129,6 +130,18 @@ export default class LnurlPaySuccess extends React.Component<LnurlPaySuccessProp
                 }}
                 contentContainerStyle={{ gap: 5, padding: 15 }}
             >
+                <Icon
+                    name="keyboard-arrow-up"
+                    type="material"
+                    size={20}
+                    color={themeColor('text')}
+                    containerStyle={{
+                        position: 'absolute',
+                        top: 10,
+                        right: 10,
+                        zIndex: 1
+                    }}
+                />
path: views/LnurlPay/Success.tsx
user: login: kaloudis
body: We shouldn't be showing the arrow up when there is no metadata associated with the LNURL-pay
created_at: 2025-05-09T03:00:41Z
author_association: CONTRIBUTOR
diff_hunk: @@ -129,6 +130,18 @@ export default class LnurlPaySuccess extends React.Component<LnurlPaySuccessProp
                 }}
                 contentContainerStyle={{ gap: 5, padding: 15 }}
             >
+                <Icon
+                    name="keyboard-arrow-up"
+                    type="material"
+                    size={20}
+                    color={themeColor('text')}
+                    containerStyle={{
+                        position: 'absolute',
+                        top: 10,
+                        right: 10,
+                        zIndex: 1
+                    }}
+                />
path: views/LnurlPay/Success.tsx
user: login: a-khushal
body: Okay, will update that.
created_at: 2025-05-09T03:29:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -129,6 +130,18 @@ export default class LnurlPaySuccess extends React.Component<LnurlPaySuccessProp
                 }}
                 contentContainerStyle={{ gap: 5, padding: 15 }}
             >
+                <Icon
+                    name="keyboard-arrow-up"
+                    type="material"
+                    size={20}
+                    color={themeColor('text')}
+                    containerStyle={{
+                        position: 'absolute',
+                        top: 10,
+                        right: 10,
+                        zIndex: 1
+                    }}
+                />
path: views/LnurlPay/Success.tsx
user: login: a-khushal
body: @kaloudis done.
created_at: 2025-05-09T05:47:03Z
author_association: CONTRIBUTOR

PR comments:
user: login: kaloudis
created_at: 2025-05-01T13:19:51Z
body: Please link the issue correctly and include screenshots.

I don't think this is sufficient as is because once toggled the success message doesn't have any indicator that it can be toggled. Also unsure of the current icon pick
author_association: CONTRIBUTOR
user: login: a-khushal
created_at: 2025-05-07T11:35:01Z
body: > @a-khushal keep adding some screenshots of the changes

I ran into some issues with lnurl payments on regtest, I will update it with screenshots once I make some lnurl payments(without that there's no real way to view the lnurl payments) and make the required code changes that @kaloudis has asked.
author_association: CONTRIBUTOR
user: login: a-khushal
created_at: 2025-05-08T13:37:32Z
body: <p align="center">
  <img src="https://github.com/user-attachments/assets/a8300c6c-9839-478e-af7d-5133340359a7" width="47%" style="margin-right: 3%; max-height: 200px;" />
  <img src="https://github.com/user-attachments/assets/908d39a9-9a29-462d-bb1b-a86b3843286a" width="47%" style="max-height: 200px;" />
</p>


@kaloudis ??
author_association: CONTRIBUTOR
user: login: kaloudis
created_at: 2025-05-10T11:28:15Z
body: Can you share a screenshot of an LNURLp that doesn't have metadata associated with it?
author_association: CONTRIBUTOR
user: login: a-khushal
created_at: 2025-05-10T15:33:34Z
body: <p align="center">
  <img src="https://github.com/user-attachments/assets/d05c9151-c1ac-4664-9c3a-92bbba5d4cd3" width="45%" />
  <img src="https://github.com/user-attachments/assets/0dcdec07-2c62-4359-a173-c6ee13518ce3" width="45%" />
</p>

@kaloudis 
author_association: CONTRIBUTOR
user: login: kaloudis
created_at: 2025-05-12T08:59:12Z
body: ![Screenshot_1747040240](https://github.com/user-attachments/assets/2d40aa41-0cd2-4569-8f1d-7686ae15fe61)

When the metadata is displayed on the `Send` view for a Lightning address payment, it is not toggleable as the success message has not been sent yet. In this instance, we should not be showing the downwards arrow caret.


author_association: CONTRIBUTOR
user: login: a-khushal
created_at: 2025-05-12T10:21:51Z
body: <p align="center">
  <img src="https://github.com/user-attachments/assets/b73fe2f2-b32c-4305-a688-7c9777361f11" width="30%"  />
  <img src="https://github.com/user-attachments/assets/9605c4ca-a046-47e1-82a9-dd322cfeb360" width="30%"/>
  <img src="https://github.com/user-attachments/assets/c51f2ed6-9ccc-46bb-bc89-3447e8759877" width="30%"  />
  <br/>
  <img src="https://github.com/user-attachments/assets/33872ca5-118c-482b-a509-863fc0127262" width="30%"  />
  <img src="https://github.com/user-attachments/assets/770b63d0-94dd-4a58-bd00-45142414ae01" width="30%"  />
  <img src="https://github.com/user-attachments/assets/97647dd4-9a89-417e-8b6a-e193c33ebc7b" width="30%"  />
</p>
@kaloudis 
author_association: CONTRIBUTOR
user: login: kaloudis
created_at: 2025-05-12T15:50:40Z
body: Looking pretty good. Just hitting some issues on the ticket LNURL I'm investigating.
author_association: CONTRIBUTOR