From 6655f3b02af1b97bcb38512d049646cb35c66963 Mon Sep 17 00:00:00 2001
From: Kathy Luo <kathyluo18@gmail.com>
Date: Thu, 27 Jul 2023 09:45:54 +0200
Subject: [PATCH] feat: add confirming pill on dapp shortcut claim item (#4005)

### Description

As the title - this is in the design and I missed it earlier.

Also fixes the nft gallery title style. <- unrelated but wanted to
squeeze it in for the release, it's faster this way

### Test plan



https://github.com/valora-inc/wallet/assets/20150449/341050a0-4df8-4df2-a036-ff2e90a960aa

![Simulator Screenshot - iPhone 14 Pro - 2023-07-27 at 09 15
28](https://github.com/valora-inc/wallet/assets/20150449/b86d76f6-784c-4c75-be7b-8be6914a1afa)


### Related issues

- Fixes RET-733

### Backwards compatibility

Y
---
 locales/base/translation.json      |  3 ++-
 src/dapps/DappShortcutsRewards.tsx | 20 ++++++++++++++++++++
 src/nfts/NftGallery.tsx            |  5 ++++-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/locales/base/translation.json b/locales/base/translation.json
index bb4dc512e11..bdaa671c6e5 100644
--- a/locales/base/translation.json
+++ b/locales/base/translation.json
@@ -1340,7 +1340,8 @@
       "claimButton": "Claim",
       "claimedLabel": "Claimed",
       "rewardLabel": "Available reward",
-      "claimSuccess": "Success! You claimed a reward"
+      "claimSuccess": "Success! You claimed a reward",
+      "confirmingReward": "CONFIRMING"
     },
     "claimRewardFailure": "There was an error claiming your reward, please try again later"
   },
diff --git a/src/dapps/DappShortcutsRewards.tsx b/src/dapps/DappShortcutsRewards.tsx
index fb0d7ad4098..c129923056c 100644
--- a/src/dapps/DappShortcutsRewards.tsx
+++ b/src/dapps/DappShortcutsRewards.tsx
@@ -145,6 +145,13 @@ function DappShortcutsRewards() {
                 testID="DappShortcutsRewards/RewardAmountFiat"
               />
             )}
+            {item.status === 'accepting' && (
+              <View style={styles.chip}>
+                <Text style={styles.chipText}>
+                  {t('dappShortcuts.claimRewardsScreen.confirmingReward')}
+                </Text>
+              </View>
+            )}
           </View>
           <Button
             onPress={createConfirmClaimRewardHandler(item, claimableValueUsd)}
@@ -257,6 +264,19 @@ const styles = StyleSheet.create({
   claimButton: {
     minWidth: 72,
   },
+  chip: {
+    marginTop: Spacing.Smallest8,
+    backgroundColor: Colors.onboardingLightBlue,
+    paddingVertical: 2,
+    paddingHorizontal: Spacing.Smallest8,
+    borderRadius: 100,
+    alignSelf: 'flex-start', // prevent from defaulting to full width of container
+  },
+  chipText: {
+    ...fontStyles.xsmall600,
+    fontSize: 10,
+    lineHeight: 12,
+  },
 })
 
 export default DappShortcutsRewards
diff --git a/src/nfts/NftGallery.tsx b/src/nfts/NftGallery.tsx
index 7db2ff9272c..6bcf42f7ee2 100644
--- a/src/nfts/NftGallery.tsx
+++ b/src/nfts/NftGallery.tsx
@@ -8,6 +8,7 @@ import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
 import Touchable from 'src/components/Touchable'
 import ImageErrorIcon from 'src/icons/ImageErrorIcon'
 import DrawerTopBar from 'src/navigator/DrawerTopBar'
+import { styles as headerStyles } from 'src/navigator/Headers'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import NftImage from 'src/nfts/NftImage'
@@ -38,7 +39,9 @@ export default function NftGallery() {
 
   return (
     <SafeAreaView testID="NftGallery" style={styles.container} edges={['top']}>
-      <DrawerTopBar middleElement={<Text>{t('nftGallery.title')}</Text>} />
+      <DrawerTopBar
+        middleElement={<Text style={headerStyles.headerTitle}>{t('nftGallery.title')}</Text>}
+      />
       {error ? (
         <NftsLoadError testID="NftGallery/NftsLoadErrorScreen" />
       ) : (