github/inji-wallet
1
1
Fork 0
mirror of https://github.com/mosip/inji-wallet.git synced 2026-01-07 20:53:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

Injimob-3651: revert all the branding changes (#2151)

Browse Source 
* Revert "[INJIMOB-3622] Fix alignment in history screen  (#2140)"

This reverts commit a0b08914e5.

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>

* Revert "Injimob [3622] [3627] - BANNER ISSUE AND BRANDING CHANGES ISSUES  (#2130)"

This reverts commit 522104811c.

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>

* Revert "[INJIMOB-3633][INJIMOB-3636] fix icon bg color across app (#2134)"

This reverts commit d8d718693d.

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>

* Revert "[INJIMOB-3633] fix search bar clear icon not apperaing (#2133)"

This reverts commit 6a202b11af.

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>

* [INJIMOB-3651]: revert all the branding changes

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>

* [INJIMOB-3651]: update all the snapshot

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>

---------

Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com>
This commit is contained in:
jaswanthkumartw
2025-11-28 18:59:15 +05:30
committed by GitHub
parent 5589ceb848
commit 0e667bd46d
86 changed files with 1720 additions and 2499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
.talismanrc
View File

@@ -1,8 +1,6 @@
fileignoreconfig:
- filename: package.json
checksum: 5b4fcb5ddc7cc96cc2d1733b544d56ea66e88cdab995a1052fbf9ac0e9c2dc21
- filename: package-lock.json
checksum: 0c4eec7fc90a92da92234caa4fa4828caf579d015a11daf38d9fa515c1f1f9bf
- filename: lib/jsonld-signatures/suites/ed255192018/ed25519.ts
checksum: 493b6e31144116cb612c24d98b97d8adcad5609c0a52c865a6847ced0a0ddc3a
- filename: components/PasscodeVerify.tsx
@@ -34,7 +32,7 @@ fileignoreconfig:
- filename: shared/fileStorage.ts
checksum: 2ba2721d9722cd9420ae26762316230f7dab1a0be45820cbda4d0ecae0edf957
- filename: screens/Issuers/IssuersScreen.tsx
checksum: 33c6c04320f822bb00343bcf4d5fa010177366ae44d8f64a280484d00616c8c6
checksum: a323497d3276f0ef20ddd6b94d2238a895651d853c3d8f055acc3351dc72da0b
- filename: screens/Home/MyVcs/GetIdInputModal.tsx
checksum: 5c736ed79a372d0ffa7c02eb33d0dc06edbbb08d120978ff287f5f06cd6c7746
- filename: shared/openId4VCI/Utils.ts
@@ -70,7 +68,7 @@ fileignoreconfig:
- filename: android/app/build.gradle
checksum: 8d5715e179a398518e6acff82c75b27077c9f893dc90b2972c77f9a09f10be95
- filename: .github/workflows/push-triggers.yml
checksum: 1461e21496ff0771b8ec8d6f25e77871191e91a2bca1934d1636df129ef2afbb
checksum: abc19ea38c8d7b79f15695d015709cc88a34a995181aaf12bc8344f940f3cbc4
- filename: android/fastlane/Fastfile
checksum: a5e816489a80b0a7498f35b7a2919f2287d4307b660687c2a9c51412aa8eceb7
- filename: .github/workflows/internal-build.yml
@@ -95,6 +93,8 @@ fileignoreconfig:
checksum: e85d18cd3349e0127f1cc7173fcdfd31824e609508512a613997a73756cd4dec
- filename: .github/workflows/android-custom-build.yml
checksum: 4d155c6e5468effb0b82e62f6878f2bd7ff7e7c9540e16bdd28cb81b80672ac3
- filename: .github/workflows/push-triggers.yml
checksum: 4a031b46646aa982c8f40e4c7fe0bd3e05a76a6af1ff1c2de7350ba6ebf9a839
- filename: components/VC/Views/VCCardViewContent.tsx
checksum: 02655ff3d7f8a8ea4f3664485f98c961802c598242ec44408594a2ddb721fa5e
- filename: screens/Settings/BackupController.tsx
@@ -247,8 +247,6 @@ fileignoreconfig:
checksum: 948efb4d61551e4f3cd9eb9913b927158daa5c3d16f49ad297e7cb63190bc023
- filename: machines/IssuersMachine.typegen.ts
checksum: 959fef1e51f0f3d5b12933f7b362e96401fb776ab12f0d13c6e542918b2ff255
- filename: screens/Home/MyVcsTab.tsx
checksum: f59c867c8f029ede26bdf3c2fe5feae92a79f9cb0c6ddd23627437765fdc4b3f
- filename: machines/store.typegen.ts
checksum: 077a1906c908daf79544f604632df36f3359075a7bc912e51ab5707cb178bf48
- filename: machines/VerifiableCredential/VCMetaMachine/VCMetaMachine.ts
@@ -272,7 +270,7 @@ fileignoreconfig:
- filename: machines/Issuers/IssuersService.ts
checksum: e3832dff27687abc28609d2b281e570b4b0017995b7cfb56627a6b96949c469a
- filename: screens/Home/ViewVcModal.tsx
checksum: 870fd6d53a3118cc120d3bb9d18698125a260e8f5673eddbb444e589bb3aacbd
checksum: cfb25d562185488432b76287c4ef93359c1c64d8e29f5755d4c0a726c1485442
- filename: injitest/src/main/resources/TestData.json
checksum: 1b5af14c96b456898259b4cb7a5607b006404cf0360274bdc204d7d065698e3c
- filename: injitest/src/test/java/androidTestCases/ActivateVcTest.java
@@ -364,6 +362,8 @@ fileignoreconfig:
checksum: 8f4bd61770b8bb0a28859ca0f3b4b095aed4e3fb5adef435cb74b9389ff13e09
- filename: ios/Inji.xcodeproj/project.pbxproj
checksum: 5bb246fa39bc7a9994b50bc5b1505d5389d0e254a4e30cfb2a57e6a1025e9087
- filename: screens/Settings/ReceivedCardsModal.tsx
checksum: 6dee9153a61009b0252d294154c88d5e1b241a517c76e930b391a39d7bc52392
- filename: components/FaceScanner/FaceCompare.tsx
checksum: 947b6d75543e2bf959ca2d95dd7224051e0b4ec2c28f7515f923701e22a932f0
- filename: components/FaceScanner/LivenessDetection.tsx
@@ -408,19 +408,12 @@ fileignoreconfig:
checksum: 02f7d58fb149ecd3f10dd0bdfb6e85c4b3ae41d29a40d192056ffec0367b53c6
- filename: components/VC/Views/VCDetailView.tsx
checksum: 890c216a5632ac77b938f2f58f2123a669ea45b933a41931b8e7324e315f2d50
version: "1.0"
- filename: screens/Settings/SettingScreen.tsx
checksum: ce9c50ec1af107161c2a25e1481794aaa9898ff1998dff26bc7986c43a51c2fa
- filename: screens/IntroSliders/trustedDigitalWalletIntro.tsx
checksum: 4d46111af02fc8b6731f624d3e4f6ce71d6369649f4549564627a8962b136192
- filename: package-lock.json
checksum: bb9c44dfa47bc6e1ff62c2e2f2293cf2fb5ff3eb1bfba27d3727992c2ae0dca7
- filename: components/ui/Picker.tsx
checksum: ad814e904cb990f55068281fcb566cca349872de2c4fd66432ed6372fb540ec3
- filename: components/VC/common/VcStatustooTip.tsx
checksum: 08097d6f18acf897c1b6f0479861399e5da630b95d2f5a0133e03edd9d28daa0
- filename: sample-application/sample-application/app/src/main/java/com/example/samplecredentialwallet/utils/SecureKeyStoreManager.kt
checksum: d9c999da50bf114d2bdb73550f94ad77003f252d97dd5c2cd2f0f14c2f4004a0
- filename: sample-application/sample-application/app/src/main/java/com/example/samplecredentialwallet/utils/CredentialParser.kt
checksum: bb910d0b02d8623c9f259a4e2a335dd8f9289c1949955538e65bab9179b09359
- filename: screens/Settings/ReceivedCardsModal.tsx
checksum: 3d949ca267ab605562d3a99e14232fa292600c3c280b1cbec3bb5e7eba5adca8
version: "1.0"
checksum: 5be293ee41d3e3bd5924320d63074d2c196d3163c99c39991632477ed9fcd871
- filename: components/ui/SetupPicker.tsx
checksum: 669e85d1c8ff526b97fa4ed4b8ed33a100eaba9f2f41bceccd75dc7a85a12103
- filename: screens/Home/MyVcsTab.tsx
checksum: 68ff83c5d9062fbc077d008956fa654540253c52ce68d7105c175c51562b3dc9
version: "1.0"

28
App.tsx
View File

@@ -31,7 +31,6 @@ import {CopilotProvider} from 'react-native-copilot';
import {CopilotTooltip} from './components/CopilotTooltip';
import {Theme} from './components/ui/styleUtils';
import {selectAppSetupComplete} from './machines/auth';
import {SafeAreaProvider} from 'react-native-safe-area-context';
const {RNSecureKeystoreModule} = NativeModules;
// kludge: this is a bad practice but has been done temporarily to surface
@@ -60,8 +59,7 @@ const AppLayoutWrapper: React.FC = () => {
const authService = appService.children.get('auth');
const isAppSetupComplete = useSelector(authService, selectAppSetupComplete);
const [isDeepLinkOverlayVisible, setDeepLinkOverlayVisible] =
useState(isDeepLinkFlow);
const [isDeepLinkOverlayVisible, setDeepLinkOverlayVisible] = useState(isDeepLinkFlow);
useEffect(() => {
if (AppState.currentState === 'active') {
@@ -166,18 +164,16 @@ const AppInitialization: React.FC = () => {
export default function App() {
return (
<SafeAreaProvider style={{backgroundColor: 'white'}}>
<GlobalContextProvider>
<CopilotProvider
stopOnOutsideClick
androidStatusBarVisible
tooltipComponent={CopilotTooltip}
tooltipStyle={Theme.Styles.copilotStyle}
stepNumberComponent={() => null}
animated>
<AppInitialization />
</CopilotProvider>
</GlobalContextProvider>
</SafeAreaProvider>
<GlobalContextProvider>
<CopilotProvider
stopOnOutsideClick
androidStatusBarVisible
tooltipComponent={CopilotTooltip}
tooltipStyle={Theme.Styles.copilotStyle}
stepNumberComponent={() => null}
animated>
<AppInitialization />
</CopilotProvider>
</GlobalContextProvider>
);
}

2
assets/Detailed_view_kebab_icon.svg
View File

@@ -11,7 +11,7 @@
<rect id="Rectangle_6977" data-name="Rectangle 6977" width="18" height="18" transform="translate(0.164 0.164)" fill="none"/>
</g>
</g>
<rect id="Rectangle_6981" data-name="Rectangle 6981" width="36" height="36" rx="8" transform="translate(266 71)" fill="#FF530014" opacity="1"/>
<rect id="Rectangle_6981" data-name="Rectangle 6981" width="36" height="36" rx="8" transform="translate(266 71)" fill="#F7EDF3" opacity="1"/>
<path id="more_horiz_FILL0_wght400_GRAD0_opsz48" d="M161.277-525.5a1.24,1.24,0,0,1-.9-.368,1.2,1.2,0,0,1-.374-.885,1.181,1.181,0,0,1,.377-.882,1.259,1.259,0,0,1,.907-.365,1.24,1.24,0,0,1,.9.368,1.2,1.2,0,0,1,.374.885,1.181,1.181,0,0,1-.377.882A1.259,1.259,0,0,1,161.277-525.5Zm5.219,0a1.24,1.24,0,0,1-.9-.368,1.2,1.2,0,0,1-.374-.885,1.181,1.181,0,0,1,.377-.882A1.259,1.259,0,0,1,166.5-528a1.24,1.24,0,0,1,.9.368,1.2,1.2,0,0,1,.374.885,1.181,1.181,0,0,1-.377.882A1.259,1.259,0,0,1,166.5-525.5Zm5.219,0a1.24,1.24,0,0,1-.9-.368,1.2,1.2,0,0,1-.374-.885,1.181,1.181,0,0,1,.377-.882,1.259,1.259,0,0,1,.907-.365,1.24,1.24,0,0,1,.9.368,1.2,1.2,0,0,1,.374.885,1.181,1.181,0,0,1-.377.882A1.259,1.259,0,0,1,171.715-525.5Z" transform="translate(117.5 615.5)" fill="url(#linear-gradient)"/>
<path id="more_horiz_FILL0_wght400_GRAD0_opsz48_-_Outline" data-name="more_horiz_FILL0_wght400_GRAD0_opsz48 - Outline" d="M171.715-525.25a1.488,1.488,0,0,1-1.079-.44,1.445,1.445,0,0,1-.448-1.063,1.427,1.427,0,0,1,.454-1.062,1.507,1.507,0,0,1,1.081-.435,1.488,1.488,0,0,1,1.079.44,1.445,1.445,0,0,1,.448,1.063,1.427,1.427,0,0,1-.454,1.062A1.507,1.507,0,0,1,171.715-525.25Zm.008-2.5a1.01,1.01,0,0,0-.734.294.933.933,0,0,0-.3.7.949.949,0,0,0,.3.707.991.991,0,0,0,.728.3,1.009,1.009,0,0,0,.734-.294.932.932,0,0,0,.3-.7.95.95,0,0,0-.3-.707A.991.991,0,0,0,171.723-527.75Zm-5.226,2.5a1.488,1.488,0,0,1-1.079-.44,1.445,1.445,0,0,1-.448-1.063,1.428,1.428,0,0,1,.454-1.062,1.507,1.507,0,0,1,1.081-.435,1.488,1.488,0,0,1,1.079.44,1.445,1.445,0,0,1,.448,1.063,1.427,1.427,0,0,1-.454,1.062A1.507,1.507,0,0,1,166.5-525.25Zm.008-2.5a1.01,1.01,0,0,0-.734.294.933.933,0,0,0-.3.7.949.949,0,0,0,.3.707.991.991,0,0,0,.728.3,1.009,1.009,0,0,0,.734-.294.932.932,0,0,0,.3-.7.949.949,0,0,0-.3-.707A.991.991,0,0,0,166.5-527.75Zm-5.226,2.5a1.488,1.488,0,0,1-1.079-.44,1.445,1.445,0,0,1-.448-1.063,1.427,1.427,0,0,1,.454-1.062,1.507,1.507,0,0,1,1.081-.435,1.488,1.488,0,0,1,1.079.44,1.445,1.445,0,0,1,.448,1.063,1.427,1.427,0,0,1-.454,1.062A1.507,1.507,0,0,1,161.277-525.25Zm.008-2.5a1.01,1.01,0,0,0-.734.294.932.932,0,0,0-.3.7.949.949,0,0,0,.3.707.991.991,0,0,0,.728.3,1.009,1.009,0,0,0,.734-.294.932.932,0,0,0,.3-.7.949.949,0,0,0-.3-.707A.991.991,0,0,0,161.285-527.75Z" transform="translate(117.5 615.5)" fill="url(#linear-gradient)"/>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

4
assets/Error_Toast_Icon.svg
View File

@@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#EA3A3D"/>
<path d="M14.1209 15.5349L11.9999 13.4141L9.87897 15.5349C9.69133 15.7226 9.43681 15.8281 9.17145 15.8281C8.90608 15.8281 8.65157 15.7226 8.46393 15.5349C8.27629 15.3473 8.1709 15.0928 8.1709 14.8274C8.1709 14.562 8.27629 14.3078 8.46393 14.1201L10.585 11.999L8.46393 9.87695C8.27642 9.68931 8.17117 9.43495 8.17126 9.16968C8.17136 8.90441 8.27678 8.64991 8.46442 8.4624C8.65206 8.27489 8.90654 8.16958 9.17181 8.16968C9.43708 8.16977 9.69146 8.27525 9.87897 8.46289L11.9999 10.584L14.1209 8.46289C14.2138 8.36998 14.324 8.2964 14.4454 8.24609C14.5667 8.19579 14.6967 8.16972 14.8281 8.16968C14.9594 8.16963 15.0895 8.19563 15.2109 8.24585C15.3322 8.29607 15.4426 8.36956 15.5355 8.4624C15.6284 8.55525 15.7021 8.66553 15.7524 8.78687C15.8027 8.9082 15.8286 9.03833 15.8286 9.16968C15.8287 9.30103 15.8028 9.43112 15.7526 9.55249C15.7024 9.67386 15.6288 9.78404 15.5359 9.87695L13.4139 12L15.5349 14.1211C15.7226 14.3087 15.828 14.5632 15.828 14.8286C15.828 15.094 15.7226 15.3482 15.5349 15.5359C15.3473 15.7235 15.0928 15.8291 14.8275 15.8291C14.5621 15.8291 14.3076 15.7235 14.1199 15.5359L14.1209 15.5349Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

4
assets/Expired_Status.svg
View File

@@ -1,4 +0,0 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="5.5" cy="5.5" r="3.5" fill="white"/>
<path d="M5.41659 7.58331C5.53936 7.58331 5.64228 7.54179 5.72534 7.45873C5.80839 7.37567 5.84992 7.27276 5.84992 7.14998C5.84992 7.0272 5.80839 6.92429 5.72534 6.84123C5.64228 6.75817 5.53936 6.71665 5.41659 6.71665C5.29381 6.71665 5.19089 6.75817 5.10784 6.84123C5.02478 6.92429 4.98325 7.0272 4.98325 7.14998C4.98325 7.27276 5.02478 7.37567 5.10784 7.45873C5.19089 7.54179 5.29381 7.58331 5.41659 7.58331ZM4.98325 5.84998H5.84992V3.24998H4.98325V5.84998ZM5.41659 9.74998C4.81714 9.74998 4.25381 9.63623 3.72659 9.40873C3.19936 9.18123 2.74075 8.87248 2.35075 8.48248C1.96075 8.09248 1.652 7.63387 1.4245 7.10665C1.197 6.57942 1.08325 6.01609 1.08325 5.41665C1.08325 4.8172 1.197 4.25387 1.4245 3.72665C1.652 3.19942 1.96075 2.74081 2.35075 2.35081C2.74075 1.96081 3.19936 1.65206 3.72659 1.42456C4.25381 1.19706 4.81714 1.08331 5.41659 1.08331C6.01603 1.08331 6.57936 1.19706 7.10659 1.42456C7.63381 1.65206 8.09242 1.96081 8.48242 2.35081C8.87242 2.74081 9.18117 3.19942 9.40867 3.72665C9.63617 4.25387 9.74992 4.8172 9.74992 5.41665C9.74992 6.01609 9.63617 6.57942 9.40867 7.10665C9.18117 7.63387 8.87242 8.09248 8.48242 8.48248C8.09242 8.87248 7.63381 9.18123 7.10659 9.40873C6.57936 9.63623 6.01603 9.74998 5.41659 9.74998Z" fill="#F04B0F"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

3
assets/Icon.svg
View File

@@ -1,3 +0,0 @@
<svg width="59" height="59" viewBox="0 0 59 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.2778 2H16.6667C11.5329 2 8.96594 2 7.00509 2.99911C5.28027 3.87795 3.87795 5.28027 2.99911 7.00509C2 8.96594 2 11.5329 2 16.6667V17.2778M17.2778 57H16.6667C11.5329 57 8.96594 57 7.00509 56.0009C5.28027 55.1221 3.87795 53.7197 2.99911 51.9949C2 50.0341 2 47.4671 2 42.3333V41.7222M57 17.2778V16.6667C57 11.5329 57 8.96594 56.0009 7.00509C55.1221 5.28027 53.7197 3.87795 51.9949 2.99911C50.0341 2 47.4671 2 42.3333 2H41.7222M57 41.7222V42.3333C57 47.4671 57 50.0341 56.0009 51.9949C55.1221 53.7197 53.7197 55.1221 51.9949 56.0009C50.0341 57 47.4671 57 42.3333 57H41.7222M15.75 17.2778V21.8611M43.25 17.2778V21.8611M26.4444 31.3336C28.8889 31.3336 31.0278 29.1947 31.0278 26.7503V17.2778M39.2784 39.2776C33.7784 44.7776 24.9173 44.7776 19.4173 39.2776" stroke="#F2680C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 949 B

4
assets/Info_Toast_Icon.svg
View File

@@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#014DAF"/>
<path d="M11.0002 17V11C11.0002 10.7348 11.1056 10.4805 11.2932 10.293C11.4807 10.1054 11.735 10 12.0002 10C12.2655 10 12.5198 10.1054 12.7073 10.293C12.8949 10.4805 13.0002 10.7348 13.0002 11V17C13.0002 17.2652 12.8949 17.5195 12.7073 17.707C12.5198 17.8946 12.2655 18 12.0002 18C11.735 18 11.4807 17.8946 11.2932 17.707C11.1056 17.5195 11.0002 17.2652 11.0002 17ZM10.7402 6.87013C10.7402 6.64663 10.8065 6.42802 10.9307 6.2422C11.0548 6.05637 11.2313 5.91146 11.4378 5.82594C11.6443 5.74041 11.8715 5.71813 12.0907 5.76173C12.3099 5.80533 12.5112 5.91302 12.6693 6.07105C12.8273 6.22909 12.9349 6.43047 12.9785 6.64967C13.0221 6.86887 12.9998 7.09602 12.9142 7.3025C12.8287 7.50898 12.6839 7.68541 12.498 7.80958C12.3122 7.93375 12.0937 8.00001 11.8702 8.00001C11.5705 8.00001 11.2831 7.88087 11.0712 7.66895C10.8593 7.45704 10.7402 7.16982 10.7402 6.87013Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

4
assets/Pending_Status.svg
View File

@@ -1,4 +0,0 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="5.5" cy="5.5" r="3.5" fill="white"/>
<path d="M5.41671 7.58331C5.53949 7.58331 5.6424 7.54179 5.72546 7.45873C5.80851 7.37567 5.85004 7.27276 5.85004 7.14998C5.85004 7.0272 5.80851 6.92429 5.72546 6.84123C5.6424 6.75817 5.53949 6.71665 5.41671 6.71665C5.29393 6.71665 5.19101 6.75817 5.10796 6.84123C5.0249 6.92429 4.98337 7.0272 4.98337 7.14998C4.98337 7.27276 5.0249 7.37567 5.10796 7.45873C5.19101 7.54179 5.29393 7.58331 5.41671 7.58331ZM4.98337 5.84998H5.85004V3.24998H4.98337V5.84998ZM5.41671 9.74998C4.81726 9.74998 4.25393 9.63623 3.72671 9.40873C3.19949 9.18123 2.74087 8.87248 2.35087 8.48248C1.96087 8.09248 1.65212 7.63387 1.42462 7.10665C1.19712 6.57942 1.08337 6.01609 1.08337 5.41665C1.08337 4.8172 1.19712 4.25387 1.42462 3.72665C1.65212 3.19942 1.96087 2.74081 2.35087 2.35081C2.74087 1.96081 3.19949 1.65206 3.72671 1.42456C4.25393 1.19706 4.81726 1.08331 5.41671 1.08331C6.01615 1.08331 6.57949 1.19706 7.10671 1.42456C7.63393 1.65206 8.09254 1.96081 8.48254 2.35081C8.87254 2.74081 9.18129 3.19942 9.40879 3.72665C9.63629 4.25387 9.75004 4.8172 9.75004 5.41665C9.75004 6.01609 9.63629 6.57942 9.40879 7.10665C9.18129 7.63387 8.87254 8.09248 8.48254 8.48248C8.09254 8.87248 7.63393 9.18123 7.10671 9.40873C6.57949 9.63623 6.01615 9.74998 5.41671 9.74998Z" fill="#D98C00"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

2
assets/Pin_Icon.svg
View File

@@ -14,7 +14,7 @@
</defs>
<g id="pin_icon" transform="translate(-318.347 -147.347)">
<g transform="matrix(1, 0, 0, 1, 318.35, 147.35)" filter="url(#Rectangle_6989)">
<g id="Rectangle_6989-2" data-name="Rectangle 6989" transform="translate(4.5 1.5)" fill="#FFF" stroke="#FFF" stroke-width="1">
<g id="Rectangle_6989-2" data-name="Rectangle 6989" transform="translate(4.5 1.5)" fill="#fff" stroke="#fff" stroke-width="1">
<rect width="26" height="26" rx="6" stroke="none"/>
<rect x="0.5" y="0.5" width="25" height="25" rx="5.5" fill="none"/>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

2
assets/Receive_Card.svg
View File

@@ -8,6 +8,6 @@
</defs>
<g id="Group_57608" data-name="Group 57608" transform="translate(-88.75 -189.75)">
<path id="badge_FILL0_wght0_GRAD0_opszNaN_1_" data-name="badge_FILL0_wght0_GRAD0_opszNaN (1)" d="M81.725,394a1.622,1.622,0,0,1-1.208-.54A1.764,1.764,0,0,1,80,392.2V377.8a1.764,1.764,0,0,1,.518-1.26,1.622,1.622,0,0,1,1.208-.54h19.55a1.622,1.622,0,0,1,1.208.54A1.764,1.764,0,0,1,103,377.8v14.4a1.764,1.764,0,0,1-.518,1.26,1.622,1.622,0,0,1-1.208.54Zm0-1.8h19.55V377.8H81.725Zm2.645-3.72h6.871v-.42a1.793,1.793,0,0,0-.259-.96,1.313,1.313,0,0,0-.661-.57,11.176,11.176,0,0,0-1.438-.435,5.053,5.053,0,0,0-1.006-.1,5.468,5.468,0,0,0-1.164.135,12.27,12.27,0,0,0-1.394.405,1.3,1.3,0,0,0-.69.57,1.793,1.793,0,0,0-.259.96Zm3.508-3.51a1.466,1.466,0,0,0,1.1-.472,1.68,1.68,0,0,0,0-2.3,1.516,1.516,0,0,0-2.2,0,1.68,1.68,0,0,0,0,2.3A1.466,1.466,0,0,0,87.878,384.97Zm3.623-.51,0,.51" transform="translate(9 -186)" stroke="none" stroke-width="0.5" fill="url(#linear-gradient)"/>
<path id="publish_FILL0_wght0_GRAD0_opszNaN" d="M2.506,4.709H1.754V1.288L.578,2.331l-.041.036L.5,2.331l-.456-.4L0,1.89l.041-.036L2.089.036,2.13,0,2.17.036,4.219,1.853l.041.036-.041.036-.456.4-.041.036-.041-.036L2.506,1.288V4.709Z" transform="translate(107.618 201.781) rotate(180)" fill="#F2680C" stroke="none" stroke-width="0.4"/>
<path id="publish_FILL0_wght0_GRAD0_opszNaN" d="M2.506,4.709H1.754V1.288L.578,2.331l-.041.036L.5,2.331l-.456-.4L0,1.89l.041-.036L2.089.036,2.13,0,2.17.036,4.219,1.853l.041.036-.041.036-.456.4-.041.036-.041-.036L2.506,1.288V4.709Z" transform="translate(107.618 201.781) rotate(180)" fill="#683387" stroke="none" stroke-width="0.4"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

4
assets/Revoked_Status.svg
View File

@@ -1,4 +0,0 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="5.5" cy="5.5" r="3.5" fill="white"/>
<path d="M5.41671 7.58337C5.53949 7.58337 5.6424 7.54185 5.72546 7.45879C5.80851 7.37574 5.85004 7.27282 5.85004 7.15004C5.85004 7.02726 5.80851 6.92435 5.72546 6.84129C5.6424 6.75824 5.53949 6.71671 5.41671 6.71671C5.29393 6.71671 5.19101 6.75824 5.10796 6.84129C5.0249 6.92435 4.98337 7.02726 4.98337 7.15004C4.98337 7.27282 5.0249 7.37574 5.10796 7.45879C5.19101 7.54185 5.29393 7.58337 5.41671 7.58337ZM4.98337 5.85004H5.85004V3.25004H4.98337V5.85004ZM5.41671 9.75004C4.81726 9.75004 4.25393 9.63629 3.72671 9.40879C3.19949 9.18129 2.74087 8.87254 2.35087 8.48254C1.96087 8.09254 1.65212 7.63393 1.42462 7.10671C1.19712 6.57949 1.08337 6.01615 1.08337 5.41671C1.08337 4.81726 1.19712 4.25393 1.42462 3.72671C1.65212 3.19949 1.96087 2.74087 2.35087 2.35087C2.74087 1.96087 3.19949 1.65212 3.72671 1.42462C4.25393 1.19712 4.81726 1.08337 5.41671 1.08337C6.01615 1.08337 6.57949 1.19712 7.10671 1.42462C7.63393 1.65212 8.09254 1.96087 8.48254 2.35087C8.87254 2.74087 9.18129 3.19949 9.40879 3.72671C9.63629 4.25393 9.75004 4.81726 9.75004 5.41671C9.75004 6.01615 9.63629 6.57949 9.40879 7.10671C9.18129 7.63393 8.87254 8.09254 8.48254 8.48254C8.09254 8.87254 7.63393 9.18129 7.10671 9.40879C6.57949 9.63629 6.01615 9.75004 5.41671 9.75004Z" fill="#7D0038"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

2
assets/Selected_Check_Box.svg
View File

@@ -1,7 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<g id="Group_58148" data-name="Group 58148" transform="translate(-0.114 -0.21)">
<g id="Group_57140" data-name="Group 57140" transform="translate(-0.095)">
<g id="Rectangle_7173" data-name="Rectangle 7173" transform="translate(0.209 0.21)" fill="#F2680C" stroke="#F2680C" stroke-width="2">
<g id="Rectangle_7173" data-name="Rectangle 7173" transform="translate(0.209 0.21)" fill="#951F6F" stroke="#951F6F" stroke-width="2">
<rect width="18" height="18" rx="4" stroke="none"/>
<rect x="1" y="1" width="16" height="16" rx="3" fill="none"/>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 804 B

After

Width:  |  Height:  |  Size: 804 B

4
assets/Success_Toast_Icon.svg
View File

@@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#3B9F76"/>
<path d="M16.8317 7.00011C16.6831 7.00573 16.5372 7.0415 16.4028 7.10509C16.2684 7.16869 16.1483 7.2589 16.0497 7.37023C14.2497 9.31323 12.6078 11.2192 10.8798 13.1202L8.84875 11.3651C8.7345 11.2649 8.60042 11.1899 8.45525 11.1449C8.31008 11.0999 8.15707 11.0859 8.00616 11.1039C7.85524 11.1219 7.70983 11.1715 7.57934 11.2494C7.44884 11.3273 7.33622 11.4317 7.24877 11.556C7.05967 11.8141 6.97309 12.1335 7.00579 12.4518C7.03849 12.7701 7.18815 13.0649 7.42577 13.2792L10.2687 15.7301C10.4834 15.9169 10.7633 16.0113 11.0474 15.9925C11.3314 15.9738 11.5964 15.8434 11.7847 15.63C13.8297 13.422 15.6617 11.2531 17.6597 9.0941C17.8761 8.85825 17.9975 8.55065 18.0002 8.23058C18.003 7.91051 17.887 7.60076 17.6747 7.36119C17.5685 7.24392 17.4381 7.15079 17.2927 7.08849C17.1472 7.02619 16.9899 6.9961 16.8317 7.00011V7.00011Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

11
assets/Valid_Status.svg
View File

@@ -1,11 +0,0 @@
<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1851_393)">
<path d="M4.33333 8.66667C6.72657 8.66667 8.66667 6.72657 8.66667 4.33333C8.66667 1.9401 6.72657 0 4.33333 0C1.9401 0 0 1.9401 0 4.33333C0 6.72657 1.9401 8.66667 4.33333 8.66667Z" fill="#4B9D20"/>
<path d="M3.62522 6.51644L7.02082 3.12084L6.46702 2.5809L3.62522 5.42704L2.18569 3.9849L1.64575 4.52484L3.62522 6.51644Z" fill="#EBE6F3"/>
</g>
<defs>
<clipPath id="clip0_1851_393">
<rect width="8.66667" height="8.66667" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 589 B

4
assets/Warning_Toast_Icon.svg
View File

@@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F9B959"/>
<path d="M10.9998 17V11C10.9998 10.7348 11.1052 10.4805 11.2927 10.293C11.4802 10.1054 11.7346 10 11.9998 10C12.265 10 12.5194 10.1054 12.7069 10.293C12.8944 10.4805 12.9998 10.7348 12.9998 11V17C12.9998 17.2652 12.8944 17.5195 12.7069 17.707C12.5194 17.8946 12.265 18 11.9998 18C11.7346 18 11.4802 17.8946 11.2927 17.707C11.1052 17.5195 10.9998 17.2652 10.9998 17ZM10.7398 6.87013C10.7378 6.64622 10.8024 6.42665 10.9253 6.23951C11.0483 6.05237 11.2241 5.90592 11.4304 5.81886C11.6367 5.7318 11.8642 5.70803 12.084 5.7505C12.3039 5.79297 12.5062 5.89976 12.6652 6.05738C12.8242 6.21501 12.9329 6.41629 12.9773 6.63575C13.0217 6.85522 12.9999 7.08299 12.9147 7.29005C12.8295 7.49711 12.6847 7.67423 12.4986 7.79884C12.3126 7.92345 12.0937 7.98999 11.8698 7.99C11.7221 7.99066 11.5756 7.96219 11.4389 7.90626C11.3021 7.85033 11.1778 7.76808 11.0729 7.66407C10.9679 7.56007 10.8845 7.4363 10.8274 7.30006C10.7702 7.16382 10.7404 7.01787 10.7398 6.87013V6.87013Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

18
components/BannerNotification.tsx
View File

@@ -1,36 +1,30 @@
import React from 'react';
import {Pressable, StatusBar, View} from 'react-native';
import {Pressable, View} from 'react-native';
import {Column, Row, Text} from './ui';
import {Theme} from './ui/styleUtils';
import {Icon} from 'react-native-elements';
import testIDProps from '../shared/commonUtil';
import ErrorToastIcon from '../assets/Error_Toast_Icon.svg';
import InfoToastIcon from '../assets/Info_Toast_Icon.svg';
import SuccessToastIcon from '../assets/Success_Toast_Icon.svg';
export const BannerNotification: React.FC<BannerNotificationProps> = props => {
return (
<View {...testIDProps(props.testId)} style={Theme.BannerStyles.wrapper}>
<View {...testIDProps(props.testId)}>
<Row
style={[Theme.BannerStyles.container, Theme.BannerStyles[props.type]]}>
<Row fill>
{props.type === BannerStatusType.SUCCESS && <SuccessToastIcon />}
{props.type === BannerStatusType.ERROR && <ErrorToastIcon />}
{props.type === BannerStatusType.IN_PROGRESS && <InfoToastIcon />}
<Column fill>
<Text
testID={`${props.testId}Text`}
color={Theme.Colors.PopupText}
color={Theme.Colors.whiteText}
weight="semibold"
style={Theme.BannerStyles.text}>
{props.message}
</Text>
</Row>
</Column>
<Column>
<Pressable
style={Theme.BannerStyles.dismiss}
{...testIDProps('close')}
onPress={props.onClosePress}>
<Icon name="close" color={Theme.Colors.PopupText} size={19} />
<Icon name="close" color={Theme.Colors.whiteText} size={19} />
</Pressable>
</Column>
</Row>

14
components/BannerNotificationContainer.tsx
View File

@@ -33,11 +33,11 @@ export const BannerNotificationContainer: React.FC<
bannerNotificationController.verificationStatus || null;
return (
<View style={Theme.BannerStyles.bannerStackContainer}>
<>
<BackupAndRestoreBannerNotification />
{settingsScreenController.isKeyOrderSet === true && (
<View>
<View style={Theme.BannerStyles.topBanner}>
<BannerNotification
type={BannerStatusType.SUCCESS}
message={t('keyPreferenceSuccess')}
@@ -49,7 +49,7 @@ export const BannerNotificationContainer: React.FC<
)}
{settingsScreenController.isKeyOrderSet === false && (
<View>
<View style={Theme.BannerStyles.topBanner}>
<BannerNotification
type={BannerStatusType.ERROR}
message={t('keyPreferenceError')}
@@ -61,7 +61,7 @@ export const BannerNotificationContainer: React.FC<
)}
{WalletBindingSuccess && (
<View>
<View style={Theme.BannerStyles.topBanner}>
<BannerNotification
type={BannerStatusType.SUCCESS}
message={t('activated')}
@@ -75,7 +75,7 @@ export const BannerNotificationContainer: React.FC<
)}
{reverificationSuccessObject.status && (
<View>
<View style={Theme.BannerStyles.topBanner}>
<BannerNotification
type={BannerStatusType.SUCCESS}
message={t(
@@ -92,7 +92,7 @@ export const BannerNotificationContainer: React.FC<
)}
{showQuickShareSuccessBanner && (
<View>
<View style={Theme.BannerStyles.topBanner}>
<BannerNotification
type={BannerStatusType.SUCCESS}
message={rt('status.accepted.message')}
@@ -156,7 +156,7 @@ export const BannerNotificationContainer: React.FC<
testId={'downloadingVcSuccessPopup'}
/>
)}
</View>
</>
);
};

18
components/BiometricIcon.tsx
View File

@@ -1,18 +0,0 @@
import React from 'react';
import {isIOS} from '../shared/constants';
import {SvgImage} from './ui/svg';
import {View} from 'react-native';
interface BiometricIconProps {
size?: number;
}
const BiometricIcon: React.FC<BiometricIconProps> = ({size = 66}) => {
const Icon = isIOS()
? SvgImage.faceBiometicIcon(size)
: SvgImage.fingerprintIcon(size);
return <View>{Icon}</View>;
};
export default BiometricIcon;

7
components/HelpScreen.tsx
View File

@@ -1,12 +1,11 @@
import React, {useEffect, useRef, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {FlatList, Linking, Pressable, View} from 'react-native';
import {FlatList, Linking, Pressable, SafeAreaView, View} from 'react-native';
import {Modal} from './ui/Modal';
import {Column, Text} from './ui';
import {Theme} from './ui/styleUtils';
import {BannerNotificationContainer} from './BannerNotificationContainer';
import getAllConfigurations from '../shared/api';
import {SafeAreaView} from "react-native-safe-area-context";
export const HelpScreen: React.FC<HelpScreenProps> = props => {
const {t} = useTranslation('HelpScreen');
@@ -363,8 +362,8 @@ export const HelpScreen: React.FC<HelpScreenProps> = props => {
onDismiss={() => {
setShowHelpPage(!showHelpPage);
}}>
<SafeAreaView style={{flex: 1, position: "relative"}}>
<BannerNotificationContainer />
<BannerNotificationContainer />
<SafeAreaView style={{flex: 1}}>
<Column fill padding="10" align="space-between">
<FlatList
ref={listingRef}

40
components/KebabPopUp.tsx
View File

@@ -1,20 +1,20 @@
import React from 'react';
import { Icon, ListItem, Overlay } from 'react-native-elements';
import { Theme } from '../components/ui/styleUtils';
import { Column, Row, Text } from '../components/ui';
import { View } from 'react-native';
import { useKebabPopUp } from './KebabPopUpController';
import { ActorRefFrom } from 'xstate';
import { useTranslation } from 'react-i18next';
import { FlatList } from 'react-native-gesture-handler';
import { VCMetadata } from '../shared/VCMetadata';
import {Icon, ListItem, Overlay} from 'react-native-elements';
import {Theme} from '../components/ui/styleUtils';
import {Column, Row, Text} from '../components/ui';
import {View} from 'react-native';
import {useKebabPopUp} from './KebabPopUpController';
import {ActorRefFrom} from 'xstate';
import {useTranslation} from 'react-i18next';
import {FlatList} from 'react-native-gesture-handler';
import {VCMetadata} from '../shared/VCMetadata';
import testIDProps from '../shared/commonUtil';
import { getKebabMenuOptions } from './kebabMenuUtils';
import { VCItemMachine } from '../machines/VerifiableCredential/VCItemMachine/VCItemMachine';
import {getKebabMenuOptions} from './kebabMenuUtils';
import {VCItemMachine} from '../machines/VerifiableCredential/VCItemMachine/VCItemMachine';
export const KebabPopUp: React.FC<KebabPopUpProps> = props => {
const controller = useKebabPopUp(props);
const { t } = useTranslation('HomeScreenKebabPopUp');
const {t} = useTranslation('HomeScreenKebabPopUp');
return (
<Column>
@@ -52,14 +52,14 @@ export const KebabPopUp: React.FC<KebabPopUpProps> = props => {
<FlatList
data={getKebabMenuOptions(props)}
renderItem={({ item }) => (
renderItem={({item}) => (
<ListItem topDivider onPress={item.onPress}>
<Row crossAlign="center" style={{ flex: 1 }}>
<View style={{ width: 25, alignItems: 'center' }}>
<Row crossAlign="center" style={{flex: 1}}>
<View style={{width: 25, alignItems: 'center'}}>
{item.icon}
</View>
<Text
style={{fontFamily: 'Montserrat_600SemiBold'}}
style={{fontFamily: 'Inter_600SemiBold'}}
color={
item.testID === 'removeFromWallet'
? Theme.Colors.warningText
@@ -69,7 +69,13 @@ export const KebabPopUp: React.FC<KebabPopUpProps> = props => {
margin="0 0 0 10">
{item.label}
</Text>
{item.label === t('reverify') && (<View style={Theme.KebabPopUpStyles.new}><Text color='white' weight='bold' style={{ fontSize: 10 }}>{t('new')}</Text></View>)}
{item.label === t('reverify') && (
<View style={Theme.KebabPopUpStyles.new}>
<Text color="white" weight="bold" style={{fontSize: 10}}>
{t('new')}
</Text>
</View>
)}
</Row>
</ListItem>
)}

40
components/Toggle.tsx
View File

@@ -1,40 +0,0 @@
import React from 'react';
import {View} from 'react-native';
import SwitchToggle from 'react-native-switch-toggle';
import {Theme} from './ui/styleUtils';
import testIDProps from '../shared/commonUtil';
interface ShareToggleProps {
value: boolean;
onToggle: (value: boolean) => void;
testID?: string;
}
const Toggle: React.FC<ShareToggleProps> = ({value, onToggle, testID}) => {
return (
<View
style={[
Theme.Styles.wrapper,
{
borderColor: value ? 'transparent' : Theme.Colors.switchHead,
backgroundColor: value
? Theme.Colors.switchHead
: Theme.Colors.switchCircleOff,
},
]}>
<SwitchToggle
{...testIDProps(testID || 'shareToggle')}
switchOn={value}
onPress={() => onToggle(value)}
circleColorOff={Theme.Colors.switchHead}
circleColorOn={Theme.Colors.switchCircleOff}
backgroundColorOn={Theme.Colors.switchHead}
backgroundColorOff={Theme.Colors.whiteBackgroundColor}
containerStyle={Theme.Styles.container}
circleStyle={Theme.Styles.circle}
/>
</View>
);
};
export default Toggle;

8
components/VC/Views/VCDetailView.tsx
View File

@@ -302,7 +302,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
<Text
testID="offlineAuthDisabledHeader"
style={{
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 14,
}}
color={Theme.Colors.statusLabel}
@@ -312,7 +312,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
<Text
testID="offlineAuthDisabledMessage"
style={{
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 12,
}}
color={Theme.Colors.statusMessage}
@@ -345,7 +345,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
testID="profileAuthenticated"
color={Theme.Colors.statusLabel}
style={{
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 14,
}}
margin={'0 18 0 0'}>
@@ -379,7 +379,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
style={{
color: '#007AFF',
fontSize: 16,
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
}}>
{t('View Shareable Information')}
</Text>

2
components/VC/common/VCItemField.tsx
View File

@@ -35,6 +35,8 @@ export const VCItemFieldName = ({
{fieldName == STATUS_FIELD_NAME && (
<CustomTooltip
testID="statusToolTip"
width={Dimensions.get('screen').width * 0.8}
height={Dimensions.get('screen').height * 0.28}
triggerComponent={SvgImage.info()}
triggerComponentStyles={{marginLeft: 2, marginTop: 2}}
toolTipContent={<StatusTooltipContent />}

82
components/VC/common/VcStatustooTip.tsx
View File

@@ -1,56 +1,30 @@
import React from 'react';
import {useTranslation} from 'react-i18next';
import {View} from 'react-native';
import {Column, Row} from '../../ui';
import {Theme} from '../../ui/styleUtils';
import {Text} from '../../ui';
import {VC_STATUS_KEYS} from './VCUtils';
import ExpiredStatus from '../../../assets/Expired_Status.svg';
import RevokedStatus from '../../../assets/Revoked_Status.svg';
import ValidStatus from '../../../assets/Valid_Status.svg';
import PendingStatus from '../../../assets/Pending_Status.svg';
const statusIcons: Record<string, React.FC<any>> = {
valid: ValidStatus,
pending: PendingStatus,
expired: ExpiredStatus,
revoked: RevokedStatus,
};
import React from "react";
import { useTranslation } from "react-i18next";
import { View } from "react-native";
import { Column } from "../../ui";
import { Theme } from "../../ui/styleUtils";
import { Text } from "../../ui";
import { VC_STATUS_KEYS } from "./VCUtils";
export const StatusTooltipContent = () => {
const {t} = useTranslation('ViewVcModal');
return (
<Column>
{VC_STATUS_KEYS.map((key, index) => {
const IconComponent = statusIcons[key];
const isLast = index === VC_STATUS_KEYS.length - 1;
return (
<Row key={key} style={{width: '100%'}}>
<View style={{marginRight: 6}}>
<IconComponent width={20} height={20} />
</View>
<View
style={{
marginBottom: isLast ? 0 : 15,
marginTop: 1,
flexShrink: 1,
}}>
<Text weight="semibold" style={Theme.Styles.tooltipContentTitle}>
{t(`statusToolTipContent.${key}.title`)}
</Text>
<Text
weight="regular"
style={[
Theme.Styles.tooltipContentDescription,
{marginTop: 3},
]}>
{t(`statusToolTipContent.${key}.description`)}
</Text>
</View>
</Row>
);
})}
</Column>
);
};
const { t } = useTranslation('ViewVcModal');
return (
<Column align="center" style={{marginTop:20}}>
{VC_STATUS_KEYS.map(key => (
<View key={key} style={{ marginBottom: 20 }}>
<Text weight="semibold">{t(`statusToolTipContent.${key}.title`)}</Text>
<Text
weight="regular"
style={[
Theme.Styles.tooltipContentDescription,
{ marginTop: 3 },
]}>
{t(`statusToolTipContent.${key}.description`)}
</Text>
</View>
))}
</Column>
);
};

25
components/VCVerification.tsx
View File

@@ -1,21 +1,20 @@
import React from 'react';
import { View } from 'react-native';
import {View} from 'react-native';
import testIDProps from '../shared/commonUtil';
import { Display } from './VC/common/VCUtils';
import {Display} from './VC/common/VCUtils';
import VerifiedIcon from './VerifiedIcon';
import PendingIcon from './PendingIcon';
import { Row, Text } from './ui';
import { Theme } from './ui/styleUtils';
import { useTranslation } from 'react-i18next';
import { VCMetadata } from '../shared/VCMetadata';
import { formattedDate } from '../shared/openId4VCI/Utils';
import {Row, Text} from './ui';
import {Theme} from './ui/styleUtils';
import {useTranslation} from 'react-i18next';
import {VCMetadata} from '../shared/VCMetadata';
export const VCVerification: React.FC<VCVerificationProps> = ({
vcMetadata,
display,
showLastChecked = true,
}) => {
const { t } = useTranslation('VcDetails');
const {t} = useTranslation('VcDetails');
let statusText: string;
let statusIcon: JSX.Element;
@@ -45,7 +44,7 @@ export const VCVerification: React.FC<VCVerificationProps> = ({
paddingVertical: 6,
}}>
{/* First Row: Status Icon + Text */}
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
{statusIcon}
<Text
testID="verificationStatus"
@@ -56,13 +55,13 @@ export const VCVerification: React.FC<VCVerificationProps> = ({
</View>
{showLastChecked && vcMetadata.lastKnownStatusTimestamp && (
<View style={{ marginTop: 4 }}>
<View style={{marginTop: 4}}>
<Text
testID="lastCheckedLabel"
color={display.getTextColor(Theme.Colors.Details)}
style={[
Theme.Styles.verificationStatus,
{ fontFamily: 'Montserrat_400Regular' },
{fontFamily: 'Inter_400'},
]}>
{t('lastChecked')}
</Text>
@@ -71,9 +70,9 @@ export const VCVerification: React.FC<VCVerificationProps> = ({
color={display.getTextColor(Theme.Colors.Details)}
style={[
Theme.Styles.verificationStatus,
{fontFamily: 'Montserrat_400Regular'},
{fontFamily: 'Inter_400'},
]}>
{formattedDate(vcMetadata.lastKnownStatusTimestamp)}
{new Date(vcMetadata.lastKnownStatusTimestamp).toLocaleString()}
</Text>
</View>
)}

16
components/__snapshots__/AccountInformation.test.tsx.snap
View File

@@ -129,7 +129,7 @@ exports[`AccountInformation Component should match snapshot with different email
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -182,7 +182,7 @@ exports[`AccountInformation Component should match snapshot with different email
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -334,7 +334,7 @@ exports[`AccountInformation Component should match snapshot with different pictu
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -387,7 +387,7 @@ exports[`AccountInformation Component should match snapshot with different pictu
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -539,7 +539,7 @@ exports[`AccountInformation Component should match snapshot with email and pictu
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -592,7 +592,7 @@ exports[`AccountInformation Component should match snapshot with email and pictu
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -744,7 +744,7 @@ exports[`AccountInformation Component should match snapshot with long email 1`]
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -797,7 +797,7 @@ exports[`AccountInformation Component should match snapshot with long email 1`]
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,

125
components/__snapshots__/BannerNotification.test.tsx.snap
View File

@@ -4,12 +4,6 @@ exports[`BannerNotification Component should match snapshot with different testI
<View
accessibilityLabel="customBanner"
accessible={true}
style={
{
"alignSelf": "center",
"width": "100%",
}
}
>
<View
accessible={true}
@@ -31,11 +25,9 @@ exports[`BannerNotification Component should match snapshot with different testI
null,
[
{
"alignItems": "center",
"alignItems": "flex-start",
"backgroundColor": "#DB2E2E",
"borderRadius": 10,
"columnGap": 7,
"height": 70,
"justifyContent": "space-between",
"marginVertical": 1,
"paddingHorizontal": 18,
@@ -44,8 +36,7 @@ exports[`BannerNotification Component should match snapshot with different testI
"width": "100%",
},
{
"backgroundColor": "#9DCFBB",
"color": "#384455",
"backgroundColor": "#4B9D20",
},
],
null,
@@ -59,7 +50,7 @@ exports[`BannerNotification Component should match snapshot with different testI
[
{
"alignItems": undefined,
"flexDirection": "row",
"flexDirection": "column",
"justifyContent": undefined,
},
{
@@ -79,7 +70,6 @@ exports[`BannerNotification Component should match snapshot with different testI
]
}
>
<SuccessToastIcon />
<Text
accessibilityLabel="customBannerText"
style={
@@ -90,11 +80,11 @@ exports[`BannerNotification Component should match snapshot with different testI
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
{
"color": "#384455",
"color": "#FFFFFF",
},
{
"textAlign": "left",
@@ -102,10 +92,9 @@ exports[`BannerNotification Component should match snapshot with different testI
null,
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontSize": 14,
"fontFamily": "Inter_600SemiBold",
"fontSize": 12,
"lineHeight": 15,
"marginHorizontal": 8,
"padding": 1,
"textAlignVertical": "center",
},
@@ -185,12 +174,6 @@ exports[`BannerNotification Component should match snapshot with error status 1`
<View
accessibilityLabel="bannerTest"
accessible={true}
style={
{
"alignSelf": "center",
"width": "100%",
}
}
>
<View
accessible={true}
@@ -212,11 +195,9 @@ exports[`BannerNotification Component should match snapshot with error status 1`
null,
[
{
"alignItems": "center",
"alignItems": "flex-start",
"backgroundColor": "#DB2E2E",
"borderRadius": 10,
"columnGap": 7,
"height": 70,
"justifyContent": "space-between",
"marginVertical": 1,
"paddingHorizontal": 18,
@@ -225,8 +206,7 @@ exports[`BannerNotification Component should match snapshot with error status 1`
"width": "100%",
},
{
"backgroundColor": "#EFB3B5",
"color": "#384455",
"backgroundColor": "#DB2E2E",
},
],
null,
@@ -240,7 +220,7 @@ exports[`BannerNotification Component should match snapshot with error status 1`
[
{
"alignItems": undefined,
"flexDirection": "row",
"flexDirection": "column",
"justifyContent": undefined,
},
{
@@ -260,7 +240,6 @@ exports[`BannerNotification Component should match snapshot with error status 1`
]
}
>
<SuccessToastIcon />
<Text
accessibilityLabel="bannerTestText"
style={
@@ -271,11 +250,11 @@ exports[`BannerNotification Component should match snapshot with error status 1`
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
{
"color": "#384455",
"color": "#FFFFFF",
},
{
"textAlign": "left",
@@ -283,10 +262,9 @@ exports[`BannerNotification Component should match snapshot with error status 1`
null,
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontSize": 14,
"fontFamily": "Inter_600SemiBold",
"fontSize": 12,
"lineHeight": 15,
"marginHorizontal": 8,
"padding": 1,
"textAlignVertical": "center",
},
@@ -366,12 +344,6 @@ exports[`BannerNotification Component should match snapshot with in progress sta
<View
accessibilityLabel="bannerTest"
accessible={true}
style={
{
"alignSelf": "center",
"width": "100%",
}
}
>
<View
accessible={true}
@@ -393,11 +365,9 @@ exports[`BannerNotification Component should match snapshot with in progress sta
null,
[
{
"alignItems": "center",
"alignItems": "flex-start",
"backgroundColor": "#DB2E2E",
"borderRadius": 10,
"columnGap": 7,
"height": 70,
"justifyContent": "space-between",
"marginVertical": 1,
"paddingHorizontal": 18,
@@ -406,8 +376,7 @@ exports[`BannerNotification Component should match snapshot with in progress sta
"width": "100%",
},
{
"backgroundColor": "#FFE799",
"color": "#384455",
"backgroundColor": "#D9822B",
},
],
null,
@@ -421,7 +390,7 @@ exports[`BannerNotification Component should match snapshot with in progress sta
[
{
"alignItems": undefined,
"flexDirection": "row",
"flexDirection": "column",
"justifyContent": undefined,
},
{
@@ -441,7 +410,6 @@ exports[`BannerNotification Component should match snapshot with in progress sta
]
}
>
<SuccessToastIcon />
<Text
accessibilityLabel="bannerTestText"
style={
@@ -452,11 +420,11 @@ exports[`BannerNotification Component should match snapshot with in progress sta
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
{
"color": "#384455",
"color": "#FFFFFF",
},
{
"textAlign": "left",
@@ -464,10 +432,9 @@ exports[`BannerNotification Component should match snapshot with in progress sta
null,
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontSize": 14,
"fontFamily": "Inter_600SemiBold",
"fontSize": 12,
"lineHeight": 15,
"marginHorizontal": 8,
"padding": 1,
"textAlignVertical": "center",
},
@@ -547,12 +514,6 @@ exports[`BannerNotification Component should match snapshot with long message 1`
<View
accessibilityLabel="bannerTest"
accessible={true}
style={
{
"alignSelf": "center",
"width": "100%",
}
}
>
<View
accessible={true}
@@ -574,11 +535,9 @@ exports[`BannerNotification Component should match snapshot with long message 1`
null,
[
{
"alignItems": "center",
"alignItems": "flex-start",
"backgroundColor": "#DB2E2E",
"borderRadius": 10,
"columnGap": 7,
"height": 70,
"justifyContent": "space-between",
"marginVertical": 1,
"paddingHorizontal": 18,
@@ -587,8 +546,7 @@ exports[`BannerNotification Component should match snapshot with long message 1`
"width": "100%",
},
{
"backgroundColor": "#9DCFBB",
"color": "#384455",
"backgroundColor": "#4B9D20",
},
],
null,
@@ -602,7 +560,7 @@ exports[`BannerNotification Component should match snapshot with long message 1`
[
{
"alignItems": undefined,
"flexDirection": "row",
"flexDirection": "column",
"justifyContent": undefined,
},
{
@@ -622,7 +580,6 @@ exports[`BannerNotification Component should match snapshot with long message 1`
]
}
>
<SuccessToastIcon />
<Text
accessibilityLabel="bannerTestText"
style={
@@ -633,11 +590,11 @@ exports[`BannerNotification Component should match snapshot with long message 1`
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
{
"color": "#384455",
"color": "#FFFFFF",
},
{
"textAlign": "left",
@@ -645,10 +602,9 @@ exports[`BannerNotification Component should match snapshot with long message 1`
null,
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontSize": 14,
"fontFamily": "Inter_600SemiBold",
"fontSize": 12,
"lineHeight": 15,
"marginHorizontal": 8,
"padding": 1,
"textAlignVertical": "center",
},
@@ -728,12 +684,6 @@ exports[`BannerNotification Component should match snapshot with success status
<View
accessibilityLabel="bannerTest"
accessible={true}
style={
{
"alignSelf": "center",
"width": "100%",
}
}
>
<View
accessible={true}
@@ -755,11 +705,9 @@ exports[`BannerNotification Component should match snapshot with success status
null,
[
{
"alignItems": "center",
"alignItems": "flex-start",
"backgroundColor": "#DB2E2E",
"borderRadius": 10,
"columnGap": 7,
"height": 70,
"justifyContent": "space-between",
"marginVertical": 1,
"paddingHorizontal": 18,
@@ -768,8 +716,7 @@ exports[`BannerNotification Component should match snapshot with success status
"width": "100%",
},
{
"backgroundColor": "#9DCFBB",
"color": "#384455",
"backgroundColor": "#4B9D20",
},
],
null,
@@ -783,7 +730,7 @@ exports[`BannerNotification Component should match snapshot with success status
[
{
"alignItems": undefined,
"flexDirection": "row",
"flexDirection": "column",
"justifyContent": undefined,
},
{
@@ -803,7 +750,6 @@ exports[`BannerNotification Component should match snapshot with success status
]
}
>
<SuccessToastIcon />
<Text
accessibilityLabel="bannerTestText"
style={
@@ -814,11 +760,11 @@ exports[`BannerNotification Component should match snapshot with success status
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
{
"color": "#384455",
"color": "#FFFFFF",
},
{
"textAlign": "left",
@@ -826,10 +772,9 @@ exports[`BannerNotification Component should match snapshot with success status
null,
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontSize": 14,
"fontFamily": "Inter_600SemiBold",
"fontSize": 12,
"lineHeight": 15,
"marginHorizontal": 8,
"padding": 1,
"textAlignVertical": "center",
},

39
components/__snapshots__/BannerNotificationContainer.test.tsx.snap
View File

@@ -1,40 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`BannerNotificationContainer Component should match snapshot with no banners visible 1`] = `
<View
style={
{
"alignItems": "center",
"position": "absolute",
"width": "100%",
"zIndex": 100,
}
}
/>
`;
exports[`BannerNotificationContainer Component should match snapshot with no banners visible 1`] = `null`;
exports[`BannerNotificationContainer Component should match snapshot with verification banner disabled 1`] = `
<View
style={
{
"alignItems": "center",
"position": "absolute",
"width": "100%",
"zIndex": 100,
}
}
/>
`;
exports[`BannerNotificationContainer Component should match snapshot with verification banner disabled 1`] = `null`;
exports[`BannerNotificationContainer Component should match snapshot with verification banner enabled 1`] = `
<View
style={
{
"alignItems": "center",
"position": "absolute",
"width": "100%",
"zIndex": 100,
}
}
/>
`;
exports[`BannerNotificationContainer Component should match snapshot with verification banner enabled 1`] = `null`;

6
components/__snapshots__/CopyButton.test.tsx.snap
View File

@@ -67,7 +67,7 @@ exports[`CopyButton Component should match snapshot with default props 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
null,
@@ -156,7 +156,7 @@ exports[`CopyButton Component should match snapshot with long content 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
null,
@@ -245,7 +245,7 @@ exports[`CopyButton Component should match snapshot with special characters 1`]
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 15,
},
null,

8
components/__snapshots__/DualMessageOverlay.test.tsx.snap
View File

@@ -13,7 +13,7 @@ exports[`DualMessageOverlay Component should match snapshot with both buttons 1`
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -42,7 +42,7 @@ exports[`DualMessageOverlay Component should match snapshot with both buttons 1`
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -103,7 +103,7 @@ exports[`DualMessageOverlay Component should match snapshot with only ignore but
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -139,7 +139,7 @@ exports[`DualMessageOverlay Component should match snapshot with only try again
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},

884
components/__snapshots__/HelpScreen.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

60
components/__snapshots__/KebabPopUp.test.tsx.snap
View File

@@ -51,7 +51,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
},
null,
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"justifyContent": "space-between",
},
null,
@@ -69,7 +69,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -132,7 +132,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -147,7 +147,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -201,7 +201,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -218,7 +218,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -280,7 +280,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
},
null,
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"justifyContent": "space-between",
},
null,
@@ -298,7 +298,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -361,7 +361,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -376,7 +376,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -430,7 +430,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -447,7 +447,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -509,7 +509,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
},
null,
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"justifyContent": "space-between",
},
null,
@@ -527,7 +527,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -590,7 +590,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -605,7 +605,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -659,7 +659,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -676,7 +676,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -741,7 +741,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
},
null,
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"justifyContent": "space-between",
},
null,
@@ -759,7 +759,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -822,7 +822,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -837,7 +837,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -891,7 +891,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -908,7 +908,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -970,7 +970,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
},
null,
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"justifyContent": "space-between",
},
null,
@@ -988,7 +988,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 15,
"justifyContent": "center",
},
@@ -1051,7 +1051,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -1066,7 +1066,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}
@@ -1120,7 +1120,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -1137,7 +1137,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
},
null,
{
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
},
]
}

16
components/__snapshots__/Passcode.test.tsx.snap
View File

@@ -85,7 +85,7 @@ exports[`Passcode Component should match snapshot with both message and error 1`
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -136,7 +136,7 @@ exports[`Passcode Component should match snapshot with both message and error 1`
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -243,7 +243,7 @@ exports[`Passcode Component should match snapshot with custom message 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -294,7 +294,7 @@ exports[`Passcode Component should match snapshot with custom message 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -399,7 +399,7 @@ exports[`Passcode Component should match snapshot with default props 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -450,7 +450,7 @@ exports[`Passcode Component should match snapshot with default props 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{
@@ -555,7 +555,7 @@ exports[`Passcode Component should match snapshot with error message 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,
@@ -606,7 +606,7 @@ exports[`Passcode Component should match snapshot with error message 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
{

98
components/__snapshots__/PinInput.test.tsx.snap
View File

@@ -36,14 +36,14 @@ exports[`PinInput Component should match snapshot with 4 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#F37321",
"borderColor": "#951F6F",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 29,
"height": 50,
"margin": 8,
@@ -61,14 +61,14 @@ exports[`PinInput Component should match snapshot with 4 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -87,14 +87,14 @@ exports[`PinInput Component should match snapshot with 4 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -113,14 +113,14 @@ exports[`PinInput Component should match snapshot with 4 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -169,14 +169,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#F37321",
"borderColor": "#951F6F",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 29,
"height": 50,
"margin": 8,
@@ -194,14 +194,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -220,14 +220,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -246,14 +246,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -272,14 +272,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -298,14 +298,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -355,14 +355,14 @@ exports[`PinInput Component should match snapshot with custom testID 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#F37321",
"borderColor": "#951F6F",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 29,
"height": 50,
"margin": 8,
@@ -380,14 +380,14 @@ exports[`PinInput Component should match snapshot with custom testID 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -406,14 +406,14 @@ exports[`PinInput Component should match snapshot with custom testID 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -432,14 +432,14 @@ exports[`PinInput Component should match snapshot with custom testID 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -488,14 +488,14 @@ exports[`PinInput Component should match snapshot with onChange handler 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#F37321",
"borderColor": "#951F6F",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 29,
"height": 50,
"margin": 8,
@@ -513,14 +513,14 @@ exports[`PinInput Component should match snapshot with onChange handler 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -539,14 +539,14 @@ exports[`PinInput Component should match snapshot with onChange handler 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -565,14 +565,14 @@ exports[`PinInput Component should match snapshot with onChange handler 1`] = `
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -621,14 +621,14 @@ exports[`PinInput Component should match snapshot with onDone and autosubmit 1`]
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#F37321",
"borderColor": "#951F6F",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_700Bold",
"fontFamily": "Inter_700Bold",
"fontSize": 29,
"height": 50,
"margin": 8,
@@ -646,14 +646,14 @@ exports[`PinInput Component should match snapshot with onDone and autosubmit 1`]
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -672,14 +672,14 @@ exports[`PinInput Component should match snapshot with onDone and autosubmit 1`]
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,
@@ -698,14 +698,14 @@ exports[`PinInput Component should match snapshot with onDone and autosubmit 1`]
onKeyPress={[Function]}
secureTextEntry={true}
selectTextOnFocus={true}
selectionColor="#F37321"
selectionColor="#951F6F"
style={
{
"borderBottomWidth": 3,
"borderColor": "#C7C7C7",
"color": "#000000",
"flex": 1,
"fontFamily": "Montserrat_600SemiBold",
"fontFamily": "Inter_600SemiBold",
"fontSize": 33,
"height": 50,
"lineHeight": 28,

2
components/__snapshots__/ProgressingModal.test.tsx.snap
View File

@@ -10,7 +10,7 @@ exports[`ProgressingModal Component should match snapshot with hint visible 1`]
exports[`ProgressingModal Component should match snapshot with progress spinner 1`] = `
<Spinner
color="#F37321"
color="#951F6F"
style={
{
"marginLeft": 6,

47
components/ui/Picker.tsx
View File

@@ -4,7 +4,6 @@ import {Icon, ListItem, Overlay} from 'react-native-elements';
import {Column} from './Layout';
import {Text} from './Text';
import testIDProps from '../../shared/commonUtil';
import {Theme} from './styleUtils';
interface Picker extends React.VFC<PickerProps<unknown>> {
<T>(props: PickerProps<T>): ReturnType<React.FC>;
@@ -34,41 +33,23 @@ export const Picker: Picker = (props: PickerProps<unknown>) => {
<Overlay
isVisible={isContentVisible}
onBackdropPress={toggleContent}
overlayStyle={Theme.Styles.overlay}>
overlayStyle={{padding: 1}}>
<Column
testID={props.testID}
width={Dimensions.get('window').width * 0.8}>
{props.items.map((item, index) => {
const isSelected = selectedIndex === index;
return (
<ListItem
key={String(item.value ?? index)}
topDivider={index !== 0}
onPress={() => selectItem(index)}
containerStyle={
isSelected
? Theme.Styles.listItemSelectedContainer
: Theme.Styles.listItemUnselectedContainer
}>
<ListItem.Content>
<ListItem.Title {...testIDProps(item.value as string)}>
<Text
style={
isSelected
? Theme.Styles.listItemSelectedText
: Theme.Styles.listItemUnselectedText
}>
{item.label}
</Text>
</ListItem.Title>
</ListItem.Content>
{isSelected && (
<Icon name="check" color={Theme.Colors.ListSelectedIcon} />
)}
</ListItem>
);
})}
{props.items.map((item, index) => (
<ListItem
topDivider={index !== 0}
onPress={() => selectItem(index)}
key={index}>
<ListItem.Content>
<ListItem.Title {...testIDProps(item.value as string)}>
<Text>{item.label}</Text>
</ListItem.Title>
</ListItem.Content>
{selectedIndex === index && <Icon name="check" />}
</ListItem>
))}
</Column>
</Overlay>
</React.Fragment>

51
components/ui/SearchBar.tsx
View File

@@ -1,10 +1,12 @@
import React from 'react';
import { TextInput, TouchableOpacity } from 'react-native';
import { Icon } from 'react-native-elements';
import { Row } from './Layout';
import { Theme } from './styleUtils';
import {TextInput, View} from 'react-native';
import {Icon} from 'react-native-elements';
import {Row} from './Layout';
import {Theme} from './styleUtils';
import {SvgImage} from './svg';
export const SearchBar = ({
isVcSearch = false,
searchIconTestID,
searchBarTestID,
placeholder,
@@ -15,45 +17,38 @@ export const SearchBar = ({
editable = true,
}: SearchBarProps) => {
return (
<Row style={Theme.SearchBarStyles.innerSearchBarContainer}>
<Row>
{isVcSearch ? (
<View
testID={searchIconTestID}
style={Theme.SearchBarStyles.vcSearchIcon}>
{SvgImage.SearchIcon()}
</View>
) : (
<Icon
testID={searchIconTestID}
name="search"
color={Theme.Colors.Icon}
size={27}
style={Theme.SearchBarStyles.searchIcon}
/>
)}
<TextInput
testID={searchBarTestID}
style={Theme.SearchBarStyles.searchBar}
placeholder={placeholder}
placeholderTextColor={Theme.Colors.SearchBarPlaceholderColor}
value={search}
onFocus={onFocus}
onChangeText={searchText => onChangeText(searchText)}
onLayout={onLayout}
editable={editable ?? true}
/>
{search?.length > 0 && (
<TouchableOpacity
onPress={() => onChangeText('')}
style={Theme.SearchBarStyles.clearIcon}>
<Icon
testID='clearingIssuerSearchIcon'
name="close"
type="material"
color={Theme.Colors.SearchIcon}
size={22}
/>
</TouchableOpacity>
)}
<Icon
testID={searchIconTestID}
name="search"
type="material"
color={Theme.Colors.SearchIcon}
size={27}
style={Theme.SearchBarStyles.searchIcon}
/>
</Row>
);
};
interface SearchBarProps {
isVcSearch: Boolean;
searchIconTestID: string;
searchBarTestID: string;
search: string;

55
components/ui/SetupPicker.tsx
View File

@@ -1,5 +1,5 @@
import React, {useEffect, useState} from 'react';
import {Dimensions, View} from 'react-native';
import {Dimensions} from 'react-native';
import {Icon, ListItem} from 'react-native-elements';
import {Column} from './Layout';
import {Text} from './Text';
@@ -33,35 +33,30 @@ export const SetupPicker: Picker = (props: PickerProps<unknown>) => {
testID={props.testID}
width={Dimensions.get('window').width * 0.8}
backgroundColor={Theme.Colors.whiteBackgroundColor}>
{props.items.map((item, index) => {
const isSelected = selectedIndex === index;
return (
<ListItem
bottomDivider
topDivider={index !== 0}
onPress={() => selectItem(index)}>
<ListItem.Content>
<ListItem.Title
{...testIDProps(item.value)}
style={{paddingTop: 3}}>
<Text
color={isSelected ? Theme.Colors.Icon : null}
weight={isSelected ? 'semibold' : 'regular'}>
{item.label}
</Text>
</ListItem.Title>
</ListItem.Content>
{isSelected ? (
<View style={Theme.Styles.listItemSelectedCircle} />
) : (
<Icon
name="radio-button-unchecked"
color={Theme.Colors.GrayIcon}
/>
)}
</ListItem>
);
})}
{props.items.map((item, index) => (
<ListItem
bottomDivider
topDivider={index !== 0}
onPress={() => selectItem(index)}
key={index}>
<ListItem.Content>
<ListItem.Title
{...testIDProps(item.value)}
style={{paddingTop: 3}}>
<Text
color={selectedIndex === index ? Theme.Colors.Icon : null}
weight={selectedIndex === index ? 'semibold' : 'regular'}>
{item.label}
</Text>
</ListItem.Title>
</ListItem.Content>
{selectedIndex === index ? (
<Icon name="radio-button-checked" color={Theme.Colors.Icon} />
) : (
<Icon name="radio-button-unchecked" color={Theme.Colors.GrayIcon} />
)}
</ListItem>
))}
</Column>
);
};

4
components/ui/Timestamp.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import {View} from 'react-native';
import {Text} from '../ui/Text';
import { formattedDate } from '../../shared/openId4VCI/Utils';
import {formattedDate} from '../../shared/openId4VCI/Utils';
export const Timestamp: React.FC<TimestampProps> = props => {
return (
@@ -10,7 +10,7 @@ export const Timestamp: React.FC<TimestampProps> = props => {
testID={`${props.testId}Time`}
size="regular"
style={{
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
fontWeight: '600',
fontSize: 14,
letterSpacing: 0,

157
components/ui/ToolTip.tsx
View File

@@ -1,132 +1,35 @@
import React, {useRef, useState} from 'react';
import {
Modal,
View,
ScrollView,
TouchableOpacity,
Pressable,
Dimensions,
findNodeHandle,
UIManager,
} from 'react-native';
import {Tooltip} from 'react-native-elements';
import {Centered} from './Layout';
import React from 'react';
import {Theme} from './styleUtils';
import testIDProps from '../../shared/commonUtil';
import {StyleProp} from 'react-native';
import {ViewStyle} from 'react-native';
interface CustomTooltipProps {
triggerComponent: React.ReactNode;
toolTipContent: React.ReactNode;
width?: number;
maxHeight?: number;
}
export const TOOLTIP_MARGIN = 6;
export const SCREEN_PADDING = 10;
export const POINTER_SIZE = 12;
export const CustomTooltip = ({
triggerComponent,
toolTipContent,
width = 275,
maxHeight = 300,
}: CustomTooltipProps) => {
const [visible, setVisible] = useState(false);
const [position, setPosition] = useState({x: 0, y: 0});
const [pointerLeft, setPointerLeft] = useState(20);
const [showAbove, setShowAbove] = useState(false);
const iconRef = useRef<View>(null);
const screen = Dimensions.get('window');
const showTooltip = () => {
if (!iconRef.current) return;
const handle = findNodeHandle(iconRef.current);
if (!handle) return;
try {
UIManager.measureInWindow(handle, (x, y, w, h) => {
if (w === 0 && h === 0) return;
let tooltipX = x;
let tooltipY = y + h + TOOLTIP_MARGIN;
let showAboveTooltip = false;
const iconCenterX = x + w / 2;
if (tooltipX + width > screen.width) {
tooltipX = screen.width - width - SCREEN_PADDING;
}
if (tooltipX < SCREEN_PADDING) {
tooltipX = SCREEN_PADDING;
}
if (tooltipY + maxHeight > screen.height) {
tooltipY = y - maxHeight - TOOLTIP_MARGIN * 2;
showAboveTooltip = true;
}
if (tooltipY < SCREEN_PADDING) {
tooltipY = SCREEN_PADDING;
showAboveTooltip = false;
}
const calculatedPointerLeft = iconCenterX - tooltipX - POINTER_SIZE / 2;
setPointerLeft(
Math.min(
Math.max(calculatedPointerLeft, SCREEN_PADDING),
width - SCREEN_PADDING,
),
);
setShowAbove(showAboveTooltip);
setPosition({x: tooltipX, y: tooltipY});
setVisible(true);
});
} catch (e) {
console.warn('Tooltip positioning failed:', e);
}
};
export const CustomTooltip: React.FC<CustomTooltipProps> = props => {
return (
<>
<View ref={iconRef} collapsable={false}>
<TouchableOpacity onPress={showTooltip} style={{marginLeft: 5}}>
{triggerComponent}
</TouchableOpacity>
</View>
{visible && (
<Modal
transparent
visible={visible}
animationType="fade"
hardwareAccelerated
onRequestClose={() => setVisible(false)}>
<Pressable
style={Theme.Styles.tooltipOverlay}
onPress={() => setVisible(false)}
/>
<View
style={[
Theme.Styles.tooltip,
{width, top: position.y, left: position.x},
]}>
<View
style={[
Theme.Styles.pointer,
{
left: pointerLeft,
top: showAbove ? undefined : -POINTER_SIZE / 2,
bottom: showAbove ? -POINTER_SIZE / 2 : undefined,
transform: [{rotate: showAbove ? '180deg' : '0deg'}],
},
]}
/>
<ScrollView
nestedScrollEnabled
keyboardShouldPersistTaps="handled"
style={{maxHeight, overflow: 'hidden'}}
contentContainerStyle={{padding: 15}}>
{toolTipContent}
</ScrollView>
</View>
</Modal>
)}
</>
<Tooltip
{...testIDProps(props.testID)}
popover={props.toolTipContent}
width={props.width}
height={props.height}
withPointer={true}
withOverlay={false}
skipAndroidStatusBar={true}
pointerColor={Theme.Colors.toolTipPointerColor}
containerStyle={Theme.Styles.tooltipContainerStyle}>
<Centered style={props.triggerComponentStyles} fill>
{props.triggerComponent}
</Centered>
</Tooltip>
);
};
interface CustomTooltipProps {
width: number;
height: number;
triggerComponent: React.ReactElement;
triggerComponentStyles: StyleProp<ViewStyle>;
testID: string;
toolTipContent?: React.ReactElement;
}

2
components/ui/__snapshots__/Text.generated.test.tsx.snap
View File

@@ -10,7 +10,7 @@ exports[`<Text /> Testing the Text component 1`] = `
"lineHeight": 18,
},
{
"fontFamily": "Montserrat_400Regular",
"fontFamily": "Inter_400Regular",
"fontSize": 14,
},
null,

20
components/ui/svg.tsx
View File

@@ -60,7 +60,6 @@ import QuestionIcon from '../../assets/questionIcon.svg';
import CopyIcon from '../../assets/file_copy.svg';
import StarIcon from '../../assets/credentialRegestryStar.svg';
import SelectedCheckBox from '../../assets/Selected_Check_Box.svg';
import FaceBiometric from '../../assets/Icon.svg';
import ReverifyIcon from '../../assets/Reverify.svg';
export class SvgImage {
static selectedCheckBox() {
@@ -251,9 +250,7 @@ export class SvgImage {
}
static ReverifyIcon() {
return (
<ReverifyIcon/>
)
return <ReverifyIcon />;
}
static OutlinedPinIcon() {
@@ -558,6 +555,10 @@ export class SvgImage {
);
}
static SearchIcon() {
return <Search {...testIDProps('searchIcon')} />;
}
static settingsLanguageIcon(size) {
return (
<SettingsLanguage
@@ -580,17 +581,6 @@ export class SvgImage {
);
}
static faceBiometicIcon(size?: number | undefined) {
return (
<FaceBiometric
height={size}
width={size}
color1={Theme.Colors.linearIconGradientStart}
color2={Theme.Colors.linearIconGradientEnd}
/>
);
}
static abotInjiIcon() {
return (
<SettingsAboutInji

333
components/ui/themes/DefaultTheme.ts
View File

@@ -12,7 +12,6 @@ import Constants from 'expo-constants';
import HomeScreenLogo from '../../../assets/InjiHomeLogo.svg';
import InjiLogoSmall from '../../../assets/InjiLogo.svg';
import i18next from '../../../i18n';
import {POINTER_SIZE} from '../ToolTip';
const Colors = {
Black: '#000000',
Zambezi: '#5F5F5F',
@@ -32,8 +31,7 @@ const Colors = {
DimGray: '#737373',
DarkGray: '#A5A5A5',
platinumGrey: '#EDEDED',
Orange: '#F37321',
DarkMagenta: '#951F6F',
Orange: '#951F6F',
OrangeBrown: '#D9822B',
Blue: '#0000FF',
LightGrey: '#F8F8F8',
@@ -47,13 +45,12 @@ const Colors = {
Warning: '#f0ad4e',
GrayText: '#6F6F6F',
mediumLightGrayText: '#A7A7A7',
veryLightBluishGray: '#D9E1E7',
dorColor: '#CBCBCB',
plainText: '#FFFFFF',
walletbindingLabel: '#000000',
LightOrange: '#F7EDF3',
GradientColors: ['#FF5300', '#5B03AD'],
GradientColorsLight: ['#FF5300' + 14, '#FF5300' + 14],
GradientColorsLight: ['#FF5300' + 14, '#5B03AD' + 14],
DisabledColors: ['#C7C7C7', '#C7C7C7'],
TimeoutHintBoxColor: '#FFF7E5',
TimeoutHintBoxBorder: '#FFF2D6',
@@ -71,16 +68,6 @@ const Colors = {
Mercury: '#E6E6E6',
Yellow: '#E8A94F',
selectIDTextGradient: ['#F5F5F5', '#FFFFFF'],
brandPrimary: '#F37321',
brandPrimaryLight: '#FCEFE6',
brandPrimaryDark: '#D65F17',
DeepPurple: '#290B45',
RoyalPurple: '#451691',
LightMintGreen: '#9DCFBB',
CharcoalBlue: '#384455',
LightRose: '#EFB3B5',
LightYellow: '#FFE799',
SteelBlue: '#809FB8',
};
export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -94,7 +81,7 @@ export const DefaultTheme = {
DetailsLabel: Colors.Gray40,
LoadingDetailsLabel: Colors.Gray40,
AddIdBtnBg: Colors.Orange,
AddIdBtnTxt: Colors.DarkMagenta,
AddIdBtnTxt: Colors.Orange,
DownloadIdBtnTxt: Colors.White,
Loading: Colors.Orange,
Cursor: Colors.Orange,
@@ -102,7 +89,6 @@ export const DefaultTheme = {
IconBg: Colors.Orange,
popUp: Colors.Green,
Icon: Colors.Orange,
SearchIcon: Colors.veryLightBluishGray,
GrayIcon: Colors.Gray50,
helpText: Colors.Gray44,
borderBottomColor: Colors.Grey6,
@@ -112,7 +98,6 @@ export const DefaultTheme = {
switchHead: Colors.Orange,
switchTrackTrue: Colors.LightOrange,
switchTrackFalse: Colors.Grey,
switchCircleOff: Colors.White,
overlayBackgroundColor: Colors.White,
rotatingIcon: Colors.Grey5,
loadingLabel: Colors.Grey6,
@@ -154,10 +139,10 @@ export const DefaultTheme = {
uncheckedIcon: Colors.uncheckedIcon,
settingsLabel: Colors.Black,
chevronRightColor: Colors.Grey,
linearGradientStart: Colors.brandPrimary,
linearGradientEnd: Colors.brandPrimary,
linearIconGradientStart: Colors.brandPrimary,
linearIconGradientEnd: Colors.brandPrimary,
linearGradientStart: Colors.startColor,
linearGradientEnd: Colors.endColor,
linearIconGradientStart: Colors.startColor,
linearIconGradientEnd: Colors.endColor,
LinearGradientStroke: Colors.stroke,
warningLogoBgColor: Colors.warningLogoBg,
tooltipIcon: Colors.toolTip,
@@ -166,16 +151,6 @@ export const DefaultTheme = {
warningText: Colors.Red,
PendingIcon: Colors.Yellow,
selectIDTextGradient: ['#F5F5F5', '#FFFFFF'],
ListSelectedBackground: Colors.brandPrimaryLight,
ListSelectedText: Colors.brandPrimary,
ListSelectedIcon: Colors.brandPrimary,
ListUnselectedBackground: Colors.White,
ListUnselectedText: Colors.Black,
SearchBarPlaceholderColor: Colors.veryLightBluishGray,
PopupText: Colors.CharcoalBlue,
TransactionCodeBackgroundColor: Colors.White,
TransactionCodeBorderColor: Colors.veryLightBluishGray,
TransactionCodePlaceholderColor: Colors.SteelBlue,
},
Styles: StyleSheet.create({
title: {
@@ -194,12 +169,12 @@ export const DefaultTheme = {
fieldItemTitle: {
backgroundColor: Colors.Transparent,
fontSize: 11,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
},
fieldItemValue: {
backgroundColor: Colors.Transparent,
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginTop: 3,
},
loadingSubtitle: {
@@ -208,7 +183,7 @@ export const DefaultTheme = {
},
verificationStatus: {
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
statusLabel: {
color: Colors.Gray30,
@@ -500,9 +475,6 @@ export const DefaultTheme = {
ProfileIconPinnedStyle: {
position: 'absolute',
},
BackButtonBgGradient: {
borderRadius: 10,
},
IconContainer: {
padding: 6,
width: 25,
@@ -602,7 +574,7 @@ export const DefaultTheme = {
detailsText: {
fontWeight: 'bold',
fontSize: 15,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
idInputContainer: {
width: Dimensions.get('window').width * 0.86,
@@ -615,51 +587,9 @@ export const DefaultTheme = {
height: isIOS() ? 100 : 'auto',
},
picker: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
},
overlay: {
padding: 1,
borderRadius: 12,
overflow: 'hidden',
},
listItemSelectedText: {
color: Colors.brandPrimary,
fontWeight: '600',
fontFamily: 'Montserrat_500Medium',
},
listItemUnselectedText: {
color: Colors.Black,
fontWeight: '400',
fontFamily: 'Montserrat_500Medium',
},
listItemSelectedContainer: {backgroundColor: Colors.brandPrimaryLight},
listItemUnselectedContainer: {backgroundColor: Colors.White},
listItemSelectedCircle: {
width: 22,
height: 22,
borderRadius: 11,
borderWidth: 7,
borderColor: Colors.brandPrimary,
backgroundColor: Colors.White,
},
wrapper: {
borderWidth: 2,
borderRadius: 16,
padding: 2,
},
container: {
width: 48,
height: 22,
borderRadius: 16,
padding: 3,
},
circle: {
width: 18,
height: 18,
borderRadius: 9,
elevation: 2,
},
idInputBottom: {
position: 'relative',
bottom: 18,
@@ -678,7 +608,7 @@ export const DefaultTheme = {
marginVertical: 6,
},
placeholder: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
hrLine: {
borderBottomColor: Colors.Gray44,
@@ -726,46 +656,14 @@ export const DefaultTheme = {
},
boxShadow: generateBoxShadowStyle(),
tooltipContainerStyle: {
backgroundColor: '#EBE6F3',
borderWidth: 2,
borderColor: '#E0E0E0',
maxWidth: '90%',
},
tooltipContentTitle: {
color: Colors.DeepPurple,
},
tooltipContentDescription: {
color: Colors.RoyalPurple,
marginTop: 10,
},
tooltipOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'transparent',
},
tooltip: {
position: 'absolute',
backgroundColor: '#EBE6F3',
borderRadius: 8,
elevation: 6,
shadowColor: '#000',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.2,
shadowRadius: 4,
backgroundColor: '#FAFAFA',
borderWidth: 1,
borderColor: '#E0E0E0',
zIndex: 999,
marginLeft: 15,
},
pointer: {
position: 'absolute',
width: 0,
height: 0,
borderLeftWidth: POINTER_SIZE / 2,
borderRightWidth: POINTER_SIZE / 2,
borderBottomWidth: POINTER_SIZE / 2,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#EBE6F3',
zIndex: 1000,
tooltipContentDescription: {
color: Colors.toolTipContent,
marginTop: 10,
},
tooltipHrLine: {
borderBottomColor: Colors.Grey5,
@@ -800,7 +698,7 @@ export const DefaultTheme = {
maxHeight: 20,
borderRadius: 4,
fontSize: 10,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
lineHeight: 12,
},
scanLayoutHeaderContainer: {
@@ -811,7 +709,7 @@ export const DefaultTheme = {
},
scanLayoutHeaderTitle: {
fontSize: 26,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
paddingTop: isIOS() ? 10 : 20,
paddingBottom: 10,
},
@@ -828,18 +726,18 @@ export const DefaultTheme = {
},
sendVPHeaderTitle: {
fontSize: 18,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
sendVPHeaderSubTitle: {
fontSize: 13,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
color: Colors.Orange,
maxWidth: '80%',
overflow: 'hidden',
},
HistoryHeaderTitleStyle: {
fontSize: 26,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginTop: isIOS() ? 5 : 15,
},
tabBarIconCopilot: {
@@ -876,7 +774,7 @@ export const DefaultTheme = {
backgroundColor: '#DADADA',
},
disclosureTitle: {
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 15,
color: Colors.Black,
},
@@ -887,32 +785,20 @@ export const DefaultTheme = {
},
disclosureSelectButton: {
fontSize: 14,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
}),
BannerStyles: StyleSheet.create({
bannerStackContainer: {
position: 'absolute',
width: '100%',
alignItems: 'center',
zIndex: 100,
},
wrapper: {
width: '100%',
alignSelf: 'center',
},
container: {
alignItems: 'center',
alignItems: 'flex-start',
justifyContent: 'space-between',
backgroundColor: '#DB2E2E',
width: '100%',
height: 70,
position: 'relative',
paddingHorizontal: 18,
paddingVertical: 12,
marginVertical: 1,
columnGap: 7,
borderRadius: 10,
},
topBanner: {
marginTop: 10,
@@ -920,24 +806,20 @@ export const DefaultTheme = {
},
text: {
textAlignVertical: 'center',
fontSize: 14,
fontSize: 12,
lineHeight: 15,
padding: 1,
marginHorizontal: 8,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
dismiss: {paddingLeft: 9},
inProgress: {
backgroundColor: Colors.LightYellow,
color: Colors.CharcoalBlue,
backgroundColor: Colors.OrangeBrown,
},
success: {
backgroundColor: Colors.LightMintGreen,
color: Colors.CharcoalBlue,
backgroundColor: Colors.Green,
},
error: {
backgroundColor: Colors.LightRose,
color: Colors.CharcoalBlue,
backgroundColor: Colors.LightRed,
},
}),
QrCodeStyles: StyleSheet.create({
@@ -963,7 +845,7 @@ export const DefaultTheme = {
borderTopLeftRadius: 21,
borderTopRightRadius: 21,
justifyContent: 'space-between',
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
paddingBottom: 10,
paddingRight: 15,
paddingLeft: 130,
@@ -999,7 +881,7 @@ export const DefaultTheme = {
color: Colors.Black,
flex: 1,
fontSize: 33,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
height: 50,
lineHeight: 28,
margin: 8,
@@ -1010,7 +892,7 @@ export const DefaultTheme = {
borderColor: Colors.Orange,
color: Colors.Black,
flex: 1,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 29,
height: 50,
margin: 8,
@@ -1020,33 +902,33 @@ export const DefaultTheme = {
TextStyles: StyleSheet.create({
header: {
color: Colors.Black,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 18,
lineHeight: 19,
paddingTop: 5,
},
subHeader: {
color: Colors.mediumLightGrayText,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
lineHeight: 19,
fontSize: 13,
paddingTop: 4,
},
semiBoldHeader: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
lineHeight: 21,
paddingTop: 4,
},
retrieveIdLabel: {
color: Colors.ShadeOfGrey,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
lineHeight: 18,
},
helpHeader: {
color: Colors.Black,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 18,
lineHeight: 19,
paddingTop: 5,
@@ -1055,11 +937,11 @@ export const DefaultTheme = {
helpDetails: {
margin: 5,
color: Colors.Gray44,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
urlLinkText: {
color: Colors.Orange,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
aboutDetails: {
color: Colors.Black,
@@ -1072,7 +954,7 @@ export const DefaultTheme = {
top: 65,
left: 5,
color: Colors.Red,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 12,
minWidth: 200,
},
@@ -1082,21 +964,21 @@ export const DefaultTheme = {
lineHeight: 18,
},
regular: {
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 14,
},
regularGrey: {
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 15,
lineHeight: 19,
color: Colors.ShadeOfGrey,
},
semibold: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 15,
},
bold: {
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 15,
justifyContent: 'center',
},
@@ -1170,27 +1052,23 @@ export const DefaultTheme = {
},
}),
SearchBarStyles: StyleSheet.create({
idleSearchBarBottomLine: {
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.Gray40,
},
searchBarContainer: {
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.Orange,
},
clearIcon: {
position: 'absolute',
right: 45,
width: 40,
justifyContent: 'center',
vcSearchBarContainer: {
alignItems: 'center',
},
vcSearchBarContainer: {},
innerSearchBarContainer: {
flexDirection: 'row',
alignItems: 'center',
width: '100%',
borderBottomWidth: 0.5,
borderTopWidth: 0.5,
borderColor: Colors.DimGray,
width: Dimensions.get('window').width,
backgroundColor: Colors.White,
borderColor: Colors.veryLightBluishGray,
borderRadius: 18,
borderWidth: 2,
marginTop: 10,
paddingHorizontal: 20,
},
vcSearchIcon: {
justifyContent: 'center',
@@ -1199,17 +1077,17 @@ export const DefaultTheme = {
paddingLeft: 15,
},
searchIcon: {
width: 25,
justifyContent: 'center',
alignItems: 'center',
height: Dimensions.get('window').height * 0.055,
width: Dimensions.get('window').width * 0.1,
},
searchBar: {
textAlign: I18nManager.isRTL ? 'right' : 'left',
height: Dimensions.get('window').height * 0.055,
flex: 1,
fontFamily: 'Montserrat_500Medium',
fontSize: 17,
marginRight: 40,
width: Dimensions.get('window').width * 0.75,
},
clearSearch: {
padding: 10,
},
}),
ButtonStyles: StyleSheet.create({
@@ -1290,7 +1168,7 @@ export const DefaultTheme = {
backgroundColor: Colors.White,
borderWidth: 0,
marginTop: -15,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
padding: 0,
},
timeoutHintContainer: {
@@ -1393,7 +1271,7 @@ export const DefaultTheme = {
}),
BackupAndRestoreStyles: StyleSheet.create({
backupProgressText: {
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 14,
color: Colors.Gray44,
},
@@ -1403,7 +1281,7 @@ export const DefaultTheme = {
textAlign: 'center',
lineHeight: 22,
fontSize: 17,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginHorizontal: 30,
},
actionOrLoaderContainer: {
@@ -1420,7 +1298,7 @@ export const DefaultTheme = {
paddingHorizontal: 10,
textAlign: 'center',
paddingTop: 15,
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
fontSize: 14,
letterSpacing: 0,
lineHeight: 17,
@@ -1438,7 +1316,7 @@ export const DefaultTheme = {
headerText: {
justifyContent: 'center',
paddingLeft: 12,
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
fontWeight: '600',
fontSize: 14,
letterSpacing: 0,
@@ -1499,7 +1377,7 @@ export const DefaultTheme = {
},
kebabHeaderStyle: {
justifyContent: 'space-between',
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
}),
MessageOverlayStyles: StyleSheet.create({
@@ -1519,7 +1397,6 @@ export const DefaultTheme = {
button: {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
fontSize: 16,
},
halfButton: {
borderRadius: 8,
@@ -1598,7 +1475,7 @@ export const DefaultTheme = {
sliderTitle: {
color: Colors.White,
marginBottom: 20,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
text: {
color: Colors.White,
@@ -1679,7 +1556,7 @@ export const DefaultTheme = {
marginHorizontal: 9,
},
issuerHeading: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 14,
paddingHorizontal: 3,
marginBottom: 2,
@@ -1705,7 +1582,7 @@ export const DefaultTheme = {
image: {marginTop: -60, paddingBottom: 26},
title: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
lineHeight: 21,
paddingTop: 4,
@@ -1714,7 +1591,7 @@ export const DefaultTheme = {
},
message: {
textAlign: 'center',
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 14,
lineHeight: 20,
marginTop: 6,
@@ -1724,7 +1601,7 @@ export const DefaultTheme = {
},
additionalMessage: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
lineHeight: 21,
paddingTop: 4,
@@ -1760,16 +1637,16 @@ export const DefaultTheme = {
paddingHorizontal: 15,
paddingBottom: 10,
backgroundColor: '#fff',
elevation: 5,
shadowColor: '#000',
shadowOffset: {width: 0, height: 4}, // only downward shadow
shadowOpacity: 0.1,
elevation: 5, // For Android
shadowColor: '#000', // For iOS
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.2,
shadowRadius: 4,
zIndex: 1,
},
heading: {
color: 'black',
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 18,
lineHeight: 19,
padding: 10,
@@ -1916,16 +1793,16 @@ export const DefaultTheme = {
purposeText: {
fontSize: 13,
position: 'relative',
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
},
cardsSelectedText: {
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
color: '#000000',
fontSize: 14,
},
selectIDText: {
position: 'relative',
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 16,
},
}),
@@ -1945,11 +1822,11 @@ export const DefaultTheme = {
justifyContent: 'space-between',
},
bannerTitle: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
bannerGuide: {
opacity: 0.8,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
},
bannerEnablePermissionContainer: {
marginTop: 15,
@@ -1957,7 +1834,7 @@ export const DefaultTheme = {
bannerEnablePermission: {
borderBottomWidth: 1.5,
borderBottomColor: Colors.White,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
scannerContainer: {
borderRadius: 24,
@@ -2012,18 +1889,14 @@ export const DefaultTheme = {
},
holdPhoneSteadyText: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 15,
},
cameraFlipIcon: {
height: 50,
width: 50,
},
iconText: {
fontFamily: 'Montserrat_600SemiBold',
fontSize: 12,
marginTop: 6,
},
iconText: {fontFamily: 'Inter_600SemiBold', fontSize: 12, marginTop: 6},
}),
BottomTabBarStyle: StyleSheet.create({
@@ -2031,7 +1904,7 @@ export const DefaultTheme = {
headerLeftContainerStyle: {paddingEnd: 13},
tabBarLabelStyle: {
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
tabBarStyle: {
display: 'flex',
@@ -2127,26 +2000,6 @@ export const DefaultTheme = {
marginTop: 10,
width: '80%',
},
transactionGradientContainer: {
width: Dimensions.get('window').width - 100,
alignSelf: 'center',
borderRadius: 18,
padding: 2,
marginTop: 10,
marginBottom: 25,
},
inputContainer: {
borderBottomWidth: 0,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
backgroundColor: Colors.White,
borderRadius: 18,
paddingHorizontal: 20,
overflow: 'hidden',
height: 60,
},
inputStyle: {
fontSize: 20,
fontWeight: '500',
@@ -2309,7 +2162,7 @@ export const DefaultTheme = {
titleText: {
fontSize: 17,
textAlign: 'left',
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
paddingTop: 20,
},
titleDescription: {
@@ -2320,14 +2173,14 @@ export const DefaultTheme = {
},
noteTitleText: {
fontSize: 14,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
color: '#973C00',
marginBottom: 5,
},
noteDescriptionText: {
fontSize: 13,
color: '#973C00',
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
lineHeight: 18,
textAlign: 'left',
marginLeft: -25,
@@ -2346,7 +2199,7 @@ export const DefaultTheme = {
},
text: {
fontSize: 14,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
color: 'black',
flex: 1,
},

331
components/ui/themes/PurpleTheme.ts
View File

@@ -12,7 +12,6 @@ import Constants from 'expo-constants';
import HomeScreenLogo from '../../../assets/Inji_Home_Logo.svg';
import InjiLogoSmall from '../../../assets/InjiLogo.svg';
import i18next from '../../../i18n';
import {POINTER_SIZE} from '../ToolTip';
const Colors = {
Black: '#231F20',
@@ -46,7 +45,6 @@ const Colors = {
Warning: '#f0ad4e',
GrayText: '#6F6F6F',
mediumLightGrayText: '#A7A7A7',
veryLightBluishGray: '#D9E1E7',
dorColor: '#CBCBCB',
plainText: '#F3E2FF',
walletbindingLabel: '#000000',
@@ -72,16 +70,6 @@ const Colors = {
Mercury: '#E6E6E6',
Yellow: '#E8A94F',
selectIDTextGradient: ['#F5F5F5', '#FFFFFF'],
brandPrimary: '#5B03AD',
brandPrimaryLight: '#F2E6FA',
brandPrimaryDark: '#4A028F',
DeepPurple: '#290B45',
RoyalPurple: '#451691',
LightMintGreen: '#9DCFBB',
CharcoalBlue: '#384455',
LightRose: '#EFB3B5',
LightYellow: '#FFE799',
SteelBlue: '#809FB8',
};
export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -103,7 +91,6 @@ export const PurpleTheme = {
IconBg: Colors.Purple,
popUp: Colors.Green,
Icon: Colors.Purple,
SearchIcon: Colors.veryLightBluishGray,
GrayIcon: Colors.Gray50,
helpText: Colors.Gray44,
borderBottomColor: Colors.Grey6,
@@ -114,7 +101,6 @@ export const PurpleTheme = {
switchHead: Colors.Purple,
switchTrackTrue: Colors.LightPurple,
switchTrackFalse: Colors.Grey,
switchCircleOff: Colors.White,
overlayBackgroundColor: Colors.White,
rotatingIcon: Colors.Grey5,
loadingLabel: Colors.Grey6,
@@ -156,10 +142,10 @@ export const PurpleTheme = {
uncheckedIcon: Colors.uncheckedIcon,
settingsLabel: Colors.Black,
chevronRightColor: Colors.Grey,
linearGradientStart: Colors.brandPrimary,
linearGradientEnd: Colors.brandPrimary,
linearIconGradientStart: Colors.brandPrimary,
linearIconGradientEnd: Colors.brandPrimary,
linearGradientStart: Colors.startColor,
linearGradientEnd: Colors.endColor,
linearIconGradientStart: Colors.startColor,
linearIconGradientEnd: Colors.startColor,
LinearGradientStroke: Colors.stroke,
warningLogoBgColor: Colors.warningLogoBg,
tooltipIcon: Colors.tooltip,
@@ -167,16 +153,6 @@ export const PurpleTheme = {
urlLink: Colors.Purple,
warningText: Colors.Red,
PendingIcon: Colors.Yellow,
ListSelectedBackground: Colors.brandPrimaryLight,
ListSelectedText: Colors.brandPrimary,
ListSelectedIcon: Colors.brandPrimary,
ListUnselectedBackground: Colors.White,
ListUnselectedText: Colors.Black,
SearchBarPlaceholderColor: Colors.veryLightBluishGray,
PopupText: Colors.CharcoalBlue,
TransactionCodeBackgroundColor: Colors.White,
TransactionCodeBorderColor: Colors.veryLightBluishGray,
TransactionCodePlaceholderColor: Colors.SteelBlue,
},
Styles: StyleSheet.create({
title: {
@@ -195,12 +171,12 @@ export const PurpleTheme = {
fieldItemTitle: {
backgroundColor: Colors.Transparent,
fontSize: 11,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
},
fieldItemValue: {
backgroundColor: Colors.Transparent,
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginTop: 3,
},
loadingSubtitle: {
@@ -209,7 +185,7 @@ export const PurpleTheme = {
},
verificationStatus: {
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
statusLabel: {
color: Colors.Gray30,
@@ -513,9 +489,6 @@ export const PurpleTheme = {
borderRadius: 10,
backgroundColor: Colors.LightPurple,
},
BackButtonBgGradient: {
borderRadius: 10,
},
imageCaptureButton: {
marginLeft: 130,
marginRight: 50,
@@ -607,7 +580,7 @@ export const PurpleTheme = {
detailsText: {
fontWeight: 'bold',
fontSize: 15,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
idInputContainer: {
width: Dimensions.get('window').width * 0.86,
@@ -620,51 +593,9 @@ export const PurpleTheme = {
height: isIOS() ? 100 : 'auto',
},
picker: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
},
overlay: {
padding: 1,
borderRadius: 12,
overflow: 'hidden',
},
listItemSelectedText: {
color: Colors.brandPrimary,
fontWeight: '600',
fontFamily: 'Montserrat_500Medium',
},
listItemUnselectedText: {
color: Colors.Black,
fontWeight: '400',
fontFamily: 'Montserrat_500Medium',
},
listItemSelectedContainer: {backgroundColor: Colors.brandPrimaryLight},
listItemUnselectedContainer: {backgroundColor: Colors.White},
listItemSelectedCircle: {
width: 22,
height: 22,
borderRadius: 11,
borderWidth: 7,
borderColor: Colors.brandPrimary,
backgroundColor: Colors.White,
},
wrapper: {
borderWidth: 2,
borderRadius: 16,
padding: 2,
},
container: {
width: 48,
height: 22,
borderRadius: 16,
padding: 3,
},
circle: {
width: 18,
height: 18,
borderRadius: 9,
elevation: 2,
},
idInputBottom: {
position: 'relative',
bottom: 18,
@@ -683,7 +614,7 @@ export const PurpleTheme = {
marginVertical: 6,
},
placeholder: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
hrLine: {
borderBottomColor: Colors.Gray44,
@@ -731,45 +662,13 @@ export const PurpleTheme = {
},
boxShadow: generateBoxShadowStyle(),
tooltipContainerStyle: {
backgroundColor: '#EBE6F3',
borderWidth: 2,
borderColor: '#E0E0E0',
maxWidth: '90%',
},
tooltipOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'transparent',
},
tooltip: {
position: 'absolute',
backgroundColor: '#EBE6F3',
borderRadius: 8,
elevation: 6,
shadowColor: '#000',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.2,
shadowRadius: 4,
backgroundColor: '#FAFAFA',
borderWidth: 1,
borderColor: '#E0E0E0',
zIndex: 999,
},
pointer: {
position: 'absolute',
width: 0,
height: 0,
borderLeftWidth: POINTER_SIZE / 2,
borderRightWidth: POINTER_SIZE / 2,
borderBottomWidth: POINTER_SIZE / 2,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#EBE6F3',
zIndex: 1000,
},
tooltipContentTitle: {
color: Colors.DeepPurple,
marginLeft: 15,
},
tooltipContentDescription: {
color: Colors.RoyalPurple,
color: Colors.toolTipContent,
marginTop: 10,
},
tooltipHrLine: {
@@ -807,7 +706,7 @@ export const PurpleTheme = {
marginTop: 10,
borderRadius: 4,
fontSize: 10,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
lineHeight: 12,
},
scanLayoutHeaderContainer: {
@@ -818,7 +717,7 @@ export const PurpleTheme = {
},
scanLayoutHeaderTitle: {
fontSize: 26,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
paddingTop: isIOS() ? 10 : 20,
paddingBottom: 10,
},
@@ -835,18 +734,18 @@ export const PurpleTheme = {
},
sendVPHeaderTitle: {
fontSize: 18,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
sendVPHeaderSubTitle: {
fontSize: 13,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
color: Colors.LightPurple,
maxWidth: '80%',
overflow: 'hidden',
},
HistoryHeaderTitleStyle: {
fontSize: 26,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginTop: isIOS() ? 5 : 15,
},
tabBarIconCopilot: {
@@ -884,7 +783,7 @@ export const PurpleTheme = {
marginBottom: 12,
},
disclosureTitle: {
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 15,
color: Colors.Black,
},
@@ -895,57 +794,41 @@ export const PurpleTheme = {
},
disclosureSelectButton: {
fontSize: 14,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
}),
BannerStyles: StyleSheet.create({
bannerStackContainer: {
position: 'absolute',
width: '100%',
alignItems: 'center',
zIndex: 100,
},
wrapper: {
width: '100%',
alignSelf: 'center',
},
container: {
alignItems: 'center',
alignItems: 'flex-start',
justifyContent: 'space-between',
backgroundColor: '#DB2E2E',
width: '100%',
height: 70,
position: 'relative',
paddingHorizontal: 18,
paddingVertical: 12,
marginVertical: 1,
columnGap: 7,
borderRadius: 10,
},
text: {
textAlignVertical: 'center',
fontSize: 12,
lineHeight: 15,
padding: 1,
fontFamily: 'Inter_600SemiBold',
},
topBanner: {
marginTop: 10,
marginBottom: 10,
},
text: {
textAlignVertical: 'center',
fontSize: 14,
lineHeight: 15,
padding: 1,
marginHorizontal: 8,
fontFamily: 'Montserrat_600SemiBold',
},
dismiss: {paddingLeft: 9},
inProgress: {
backgroundColor: Colors.LightYellow,
color: Colors.CharcoalBlue,
backgroundColor: Colors.OrangeBrown,
},
success: {
backgroundColor: Colors.LightMintGreen,
color: Colors.CharcoalBlue,
backgroundColor: Colors.Green,
},
error: {
backgroundColor: Colors.LightRose,
color: Colors.CharcoalBlue,
backgroundColor: Colors.LightRed,
},
}),
QrCodeStyles: StyleSheet.create({
@@ -971,7 +854,7 @@ export const PurpleTheme = {
borderTopLeftRadius: 21,
borderTopRightRadius: 21,
justifyContent: 'space-between',
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
paddingBottom: 10,
paddingRight: 15,
paddingLeft: 130,
@@ -1007,7 +890,7 @@ export const PurpleTheme = {
color: Colors.Black,
flex: 1,
fontSize: 33,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
height: 40,
lineHeight: 28,
margin: 8,
@@ -1018,7 +901,7 @@ export const PurpleTheme = {
borderColor: Colors.Purple,
color: Colors.Black,
flex: 1,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 29,
height: 40,
margin: 8,
@@ -1028,33 +911,33 @@ export const PurpleTheme = {
TextStyles: StyleSheet.create({
header: {
color: Colors.Black,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 18,
lineHeight: 19,
paddingTop: 5,
},
subHeader: {
color: Colors.mediumLightGrayText,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
lineHeight: 19,
fontSize: 13,
paddingTop: 4,
},
semiBoldHeader: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
lineHeight: 21,
paddingTop: 4,
},
retrieveIdLabel: {
color: Colors.ShadeOfGrey,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
lineHeight: 18,
},
helpHeader: {
color: Colors.Black,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 18,
lineHeight: 19,
paddingTop: 5,
@@ -1063,11 +946,11 @@ export const PurpleTheme = {
helpDetails: {
margin: 5,
color: Colors.Gray44,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
urlLinkText: {
color: Colors.Purple,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
aboutDetails: {
color: Colors.Black,
@@ -1080,7 +963,7 @@ export const PurpleTheme = {
top: 65,
left: 5,
color: Colors.Red,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 12,
minWidth: 200,
},
@@ -1090,21 +973,21 @@ export const PurpleTheme = {
lineHeight: 18,
},
regular: {
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 14,
},
regularGrey: {
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 15,
lineHeight: 19,
color: Colors.ShadeOfGrey,
},
semibold: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 15,
},
bold: {
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 15,
justifyContent: 'center',
},
@@ -1178,27 +1061,23 @@ export const PurpleTheme = {
},
}),
SearchBarStyles: StyleSheet.create({
idleSearchBarBottomLine: {
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.Gray40,
},
searchBarContainer: {
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.Purple,
},
clearIcon: {
position: 'absolute',
right: 45,
width: 40,
justifyContent: 'center',
vcSearchBarContainer: {
alignItems: 'center',
},
vcSearchBarContainer: {},
innerSearchBarContainer: {
flexDirection: 'row',
alignItems: 'center',
width: '100%',
borderBottomWidth: 0.5,
borderTopWidth: 0.5,
borderColor: Colors.DimGray,
width: Dimensions.get('window').width,
backgroundColor: Colors.White,
borderColor: Colors.veryLightBluishGray,
borderRadius: 18,
borderWidth: 2,
marginTop: 10,
paddingHorizontal: 20,
},
vcSearchIcon: {
justifyContent: 'center',
@@ -1207,17 +1086,17 @@ export const PurpleTheme = {
paddingLeft: 15,
},
searchIcon: {
width: 25,
justifyContent: 'center',
alignItems: 'center',
height: Dimensions.get('window').height * 0.055,
width: Dimensions.get('window').width * 0.1,
},
searchBar: {
textAlign: I18nManager.isRTL ? 'right' : 'left',
height: Dimensions.get('window').height * 0.055,
flex: 1,
fontFamily: 'Montserrat_500Medium',
fontSize: 17,
marginRight: 40,
width: Dimensions.get('window').width * 0.75,
},
clearSearch: {
padding: 10,
},
}),
ButtonStyles: StyleSheet.create({
@@ -1295,7 +1174,7 @@ export const PurpleTheme = {
backgroundColor: Colors.White,
borderWidth: 0,
marginTop: -15,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
padding: 0,
},
timeoutHintContainer: {
@@ -1398,7 +1277,7 @@ export const PurpleTheme = {
}),
BackupAndRestoreStyles: StyleSheet.create({
backupProgressText: {
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 14,
color: Colors.Gray44,
},
@@ -1412,7 +1291,7 @@ export const PurpleTheme = {
textAlign: 'center',
lineHeight: 22,
fontSize: 17,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginHorizontal: 30,
},
cloudInfo: {
@@ -1425,7 +1304,7 @@ export const PurpleTheme = {
paddingHorizontal: 10,
textAlign: 'center',
paddingTop: 15,
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
fontSize: 14,
letterSpacing: 0,
lineHeight: 17,
@@ -1443,7 +1322,7 @@ export const PurpleTheme = {
headerText: {
justifyContent: 'center',
paddingLeft: 12,
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
fontWeight: '600',
fontSize: 14,
letterSpacing: 0,
@@ -1504,7 +1383,7 @@ export const PurpleTheme = {
},
kebabHeaderStyle: {
justifyContent: 'space-between',
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
}),
MessageOverlayStyles: StyleSheet.create({
@@ -1603,7 +1482,7 @@ export const PurpleTheme = {
sliderTitle: {
color: Colors.White,
marginBottom: 20,
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
},
text: {
color: Colors.White,
@@ -1685,7 +1564,7 @@ export const PurpleTheme = {
marginHorizontal: 9,
},
issuerHeading: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 14,
paddingHorizontal: 3,
marginBottom: 2,
@@ -1709,7 +1588,7 @@ export const PurpleTheme = {
image: {marginTop: -60, paddingBottom: 26},
title: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
lineHeight: 21,
paddingTop: 4,
@@ -1718,7 +1597,7 @@ export const PurpleTheme = {
},
message: {
textAlign: 'center',
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
fontSize: 14,
lineHeight: 20,
marginTop: 6,
@@ -1728,7 +1607,7 @@ export const PurpleTheme = {
},
additionalMessage: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 18,
lineHeight: 21,
paddingTop: 4,
@@ -1768,16 +1647,16 @@ export const PurpleTheme = {
paddingHorizontal: 15,
paddingBottom: 10,
backgroundColor: '#fff',
elevation: 5,
shadowColor: '#000',
shadowOffset: {width: 0, height: 4}, // only downward shadow
shadowOpacity: 0.1,
elevation: 5, // For Android
shadowColor: '#000', // For iOS
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.2,
shadowRadius: 4,
zIndex: 1,
},
heading: {
color: 'black',
fontFamily: 'Montserrat_700Bold',
fontFamily: 'Inter_700Bold',
fontSize: 18,
lineHeight: 19,
padding: 10,
@@ -1921,16 +1800,16 @@ export const PurpleTheme = {
purposeText: {
fontSize: 13,
position: 'relative',
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
},
cardsSelectedText: {
fontFamily: 'Montserrat_500Medium',
fontFamily: 'Inter_500Medium',
color: '#000000',
fontSize: 14,
},
selectIDText: {
position: 'relative',
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 16,
},
}),
@@ -1950,11 +1829,11 @@ export const PurpleTheme = {
justifyContent: 'space-between',
},
bannerTitle: {
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
bannerGuide: {
opacity: 0.8,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
},
bannerEnablePermissionContainer: {
marginTop: 15,
@@ -1962,7 +1841,7 @@ export const PurpleTheme = {
bannerEnablePermission: {
borderBottomWidth: 1.5,
borderBottomColor: Colors.White,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
scannerContainer: {
borderRadius: 24,
@@ -2016,25 +1895,21 @@ export const PurpleTheme = {
},
holdPhoneSteadyText: {
color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
fontSize: 15,
},
cameraFlipIcon: {
height: 50,
width: 50,
},
iconText: {
fontFamily: 'Montserrat_600SemiBold',
fontSize: 12,
marginTop: 6,
},
iconText: {fontFamily: 'Inter_600SemiBold', fontSize: 12, marginTop: 6},
}),
BottomTabBarStyle: StyleSheet.create({
headerRightContainerStyle: {paddingEnd: 13},
headerLeftContainerStyle: {paddingEnd: 13},
tabBarLabelStyle: {
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
},
tabBarStyle: {
display: 'flex',
@@ -2129,26 +2004,6 @@ export const PurpleTheme = {
marginTop: 10,
width: '80%',
},
transactionGradientContainer: {
width: Dimensions.get('window').width - 100,
alignSelf: 'center',
borderRadius: 18,
padding: 2,
marginTop: 10,
marginBottom: 25,
},
inputContainer: {
borderBottomWidth: 0,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
backgroundColor: Colors.White,
borderRadius: 18,
paddingHorizontal: 20,
overflow: 'hidden',
height: 60,
},
inputStyle: {
fontSize: 20,
fontWeight: '500',
@@ -2309,7 +2164,7 @@ export const PurpleTheme = {
titleText: {
fontSize: 17,
textAlign: 'left',
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
paddingTop: 20,
},
titleDescription: {
@@ -2320,14 +2175,14 @@ export const PurpleTheme = {
},
noteTitleText: {
fontSize: 14,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
color: '#973C00',
marginBottom: 5,
},
noteDescriptionText: {
fontSize: 13,
color: '#973C00',
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
lineHeight: 18,
textAlign: 'left',
marginLeft: -25,
@@ -2346,7 +2201,7 @@ export const PurpleTheme = {
},
text: {
fontSize: 14,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
color: 'black',
flex: 1,
},

2
ios/Inji/Info.plist
View File

@@ -61,7 +61,7 @@
<key>NSCameraUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your camera</string>
<key>NSFaceIDUsageDescription</key>
<string>$(PRODUCT_NAME) can be unlocked using Face ID</string>
<string>Resident app can be unlocked using Face ID</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your location</string>
<key>NSLocationWhenInUseUsageDescription</key>

10
locales/ara.json
View File

@@ -444,7 +444,7 @@
}
},
"MyVcsTab": {
"searchByName": "...يبحث",
"searchByName": "يبحث",
"bringYourDigitalID": "أحضر هويتك الرقمية",
"generateVcDescription": "اضغط على \"إضافة بطاقة \" أدناه لتنزيل بطاقتك",
"generateVcFABDescription": "اضغط على \"+\" أدناه لتنزيل بطاقتك",
@@ -538,10 +538,6 @@
"title": "وضع انتظار:",
"description": "التحقق معلق حاليًا بسبب مشكلات فنية."
},
"expired": {
"title": "الحالة منتهية الصلاحية:",
"description": "انتهت صلاحية بيانات الاعتماد."
},
"revoked": {
"title": "الحالة الملغاة:",
"description": "تم إلغاء بيانات الاعتماد."
@@ -1146,9 +1142,7 @@
"verify": "تحقق",
"emptyCodeError": "لا يمكن أن يكون الرمز فارغًا",
"invalidCharacters": "يسمح فقط بالأحرف والأرقام",
"TransactionCode": "رمز المعاملة",
"showMore": "عرض المزيد ↓",
"showLess": "عرض أقل ↑"
"TransactionCode": "رمز المعاملة"
},
"trustScreen": {
"description": "تأكد من أنك تعرف أو تثق بهذا المصدر. بمجرد أن تثق بهذا المصدر:",

6
locales/en.json
View File

@@ -445,7 +445,7 @@
}
},
"MyVcsTab": {
"searchByName": "search...",
"searchByName": "Search",
"bringYourDigitalID": "Bring your digital identity",
"generateVcDescription": "Tap on \"Download card\" below to download your card",
"generateVcFABDescription": "Tap on \"+\" below to download your card",
@@ -1162,9 +1162,7 @@
"verify": "Verify",
"emptyCodeError": "Code cannot be empty",
"invalidCharacters": "Only letters and numbers are allowed",
"TransactionCode": "Transasction Code",
"showMore": "Show more ↓",
"showLess": "Show less ↑"
"TransactionCode": "Transasction Code"
},
"trustScreen": {
"description": "Make sure you recognize or trust this issuer. Once you trust this issuer:",

6
locales/fil.json
View File

@@ -443,7 +443,7 @@
}
},
"MyVcsTab": {
"searchByName": "maghanap...",
"searchByName": "Maghanap",
"bringYourDigitalID": "Dalhin ang Iyong Digital ID",
"generateVcDescription": "Upang i-download ang iyong card i-tap ang I-download card sa ibaba",
"generateVcFABDescription": "Upang i-download ang iyong card i-tap ang + sa ibaba",
@@ -1144,9 +1144,7 @@
"verify": "I-verify",
"emptyCodeError": "Hindi puwedeng walang laman ang code",
"invalidCharacters": "Mga letra at numero lamang ang pinapayagan",
"TransactionCode": "Transaction Code",
"showMore": "Ipakita pa ↓",
"showLess": "Ipakita nang kaunti ↑"
"TransactionCode": "Transaction Code"
},
"trustScreen": {
"description": "Siguraduhin mong kilala mo o pinagkakatiwalaan mo ang issuer na ito. Kapag pinagkatiwalaan mo sila:",

6
locales/hin.json
View File

@@ -445,7 +445,7 @@
}
},
"MyVcsTab": {
"searchByName": "खोजें...",
"searchByName": "खोजें",
"downloadCard": "डाउनलोड कार्ड",
"bringYourDigitalID": "अपनी डिजिटल आईडी लाओ",
"generateVcDescription": "अपना कार्ड डाउनलोड करने के लिए नीचे डाउनलोड कार्ड टैप करें",
@@ -1146,9 +1146,7 @@
"verify": "सत्यापित करें",
"emptyCodeError": "कोड खाली नहीं हो सकता",
"invalidCharacters": "केवल अक्षर और संख्याएँ मान्य हैं",
"TransactionCode": "लेन-देन कोड",
"showMore": "अधिक दिखाएं ↓",
"showLess": "कम दिखाएं ↑"
"TransactionCode": "लेन-देन कोड"
},
"trustScreen": {
"description": "सुनिश्चित करें कि आप इस जारीकर्ता को पहचानते हैं या उस पर भरोसा करते हैं। एक बार जब आप भरोसा कर लेते हैं:",

6
locales/kan.json
View File

@@ -444,7 +444,7 @@
}
},
"MyVcsTab": {
"searchByName": "ಹುಡುಕು...",
"searchByName": "ಹುಡುಕು",
"downloadCard": "ಕಾರ್ಡ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ",
"bringYourDigitalID": "ನಿಮ್ಮ ಡಿಜಿಟಲ್ ಐಡಿ ತನ್ನಿ",
"generateVcDescription": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಕೆಳಗಿನ ಡೌನ್‌ಲೋಡ್ ಕಾರ್ಡ್ ಅನ್ನು ಟ್ಯಾಪ್ ಮಾಡಿ",
@@ -1146,9 +1146,7 @@
"verify": "ಸರಿಪಡಿಸಿ",
"emptyCodeError": "ಕೋಡ್ ಖಾಲಿ ಇರಬಾರದು",
"invalidCharacters": "ಅಕ್ಷರಗಳು ಮತ್ತು ಸಂಖ್ಯೆಗಳು ಮಾತ್ರ ಅನುಮತಿಸಲಾಗಿದೆ",
"TransactionCode": "ವಹಿವಾಟು ಕೋಡ್",
"showMore": "ಹೆಚ್ಚು ತೋರಿಸಿ ↓",
"showLess": "ಕಡಿಮೆ ತೋರಿಸಿ ↑"
"TransactionCode": "ವಹಿವಾಟು ಕೋಡ್"
},
"trustScreen": {
"description": "ಈ ಹೊರಹೊಮ್ಮಿಸುವವರನ್ನು ನೀವು ಗುರುತಿಸುತ್ತೀರಾ ಅಥವಾ ನಂಬಿದೀರಾ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನೀವು ನಂಬಿದ ನಂತರ:",

6
locales/tam.json
View File

@@ -444,7 +444,7 @@
}
},
"MyVcsTab": {
"searchByName": "தேடு...",
"searchByName": "தேடு",
"bringYourDigitalID": "உங்கள் டிஜிட்டல் ஐடியைக் கொண்டு வாருங்கள்",
"generateVcDescription": "உங்கள் அட்டை ஐப் பதிவிறக்க, கீழே உள்ள பதிவிறக்கு அட்டை என்பதைத் தட்டவும்",
"generateVcFABDescription": "உங்கள் அட்டை ஐப் பதிவிறக்க, கீழே உள்ள + என்பதைத் தட்டவும்",
@@ -1146,9 +1146,7 @@
"verify": "சரிபார்க்கவும்",
"emptyCodeError": "குறியீடு காலியாக இருக்க முடியாது",
"invalidCharacters": "எழுத்துகள் மற்றும் எண்கள் மட்டும் அனுமதிக்கப்படும்",
"TransactionCode": "பரிவரத்து குறியீடு",
"showMore": "மேலும் காண்பிக்கவும் ↓",
"showLess": "குறைவாக காண்பிக்கவும் ↑"
"TransactionCode": "பரிவரத்து குறியீடு"
},
"trustScreen": {
"description": "இந்த வெளியீட்டாளரை நீங்கள் அறிந்தவரா அல்லது நம்புகிறீர்களா என்பதை உறுதி செய்யவும். நீங்கள் வெளியீட்டாளரை நம்பினால்:",

53
package-lock.json generated
View File

@@ -14,7 +14,7 @@
"@digitalbazaar/rsa-signature-2018": "digitalbazaar/rsa-signature-2018#initial",
"@digitalbazaar/rsa-verification-key-2018": "digitalbazaar/rsa-verification-key-2018#initial",
"@digitalcredentials/vc": "^1.1.2",
"@expo-google-fonts/montserrat": "^0.4.2",
"@expo-google-fonts/inter": "^0.2.3",
"@expo/metro-config": "~0.18.11",
"@invertase/react-native-apple-authentication": "^2.3.0",
"@iriscan/biometric-sdk-react-native": "0.2.6",
@@ -95,7 +95,6 @@
"react-native-shimmer-placeholder": "^2.0.9",
"react-native-spinkit": "^1.5.1",
"react-native-svg": "15.2.0",
"react-native-switch-toggle": "^2.2.1",
"react-native-vector-icons": "^10.0.0",
"react-native-webview": "^13.13.5",
"react-native-zip-archive": "^6.1.0",
@@ -3319,10 +3318,10 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@expo-google-fonts/montserrat": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/@expo-google-fonts/montserrat/-/montserrat-0.4.2.tgz",
"integrity": "sha512-Xyq7rKJhhZOE1Xk4wKSSVoUeOkFmQEMhtZ3pdFrgYckGZMs115Apmld1AI8Ju+yrl5GzDdfRCCqRr33dvEDYUA=="
"node_modules/@expo-google-fonts/inter": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/@expo-google-fonts/inter/-/inter-0.2.3.tgz",
"integrity": "sha512-iHK9FI+dnE45X5c2Z5hSFwNH4zUWethizpbv3XUn0FIGw5jwvzriENz0a6wCdkI4/d+1QkurnHo5XHti7TbNJA=="
},
"node_modules/@expo/bunyan": {
"version": "4.0.1",
@@ -13640,15 +13639,6 @@
"url": "https://github.com/fb55/domutils?sponsor=1"
}
},
"node_modules/dooboolab-welcome": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/dooboolab-welcome/-/dooboolab-welcome-1.3.2.tgz",
"integrity": "sha512-2NbMaIIURElxEf/UAoVUFlXrO+7n/FRhLCiQlk4fkbGRh9cJ3/f8VEMPveR9m4Ug2l2Zey+UCXjd6EcBqHJ5bw==",
"hasInstallScript": true,
"bin": {
"dooboolab-welcome": "bin/hello.js"
}
},
"node_modules/dot-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -25801,18 +25791,6 @@
"react-native-svg": ">=12.0.0"
}
},
"node_modules/react-native-switch-toggle": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/react-native-switch-toggle/-/react-native-switch-toggle-2.2.1.tgz",
"integrity": "sha512-Y/RQ1Pb/KDVZhBSNjc16LKtUi7MGZb0MYxouZLj/THpiSQLsy5pUyTwbIKRjNuZDNSxmMDXyRX1QfLt+oup4Uw==",
"dependencies": {
"dooboolab-welcome": "^1.3.0"
},
"peerDependencies": {
"react": ">=16.9",
"react-native": ">=0.58"
}
},
"node_modules/react-native-url-polyfill": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-2.0.0.tgz",
@@ -33154,10 +33132,10 @@
"integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
"dev": true
},
"@expo-google-fonts/montserrat": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/@expo-google-fonts/montserrat/-/montserrat-0.4.2.tgz",
"integrity": "sha512-Xyq7rKJhhZOE1Xk4wKSSVoUeOkFmQEMhtZ3pdFrgYckGZMs115Apmld1AI8Ju+yrl5GzDdfRCCqRr33dvEDYUA=="
"@expo-google-fonts/inter": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/@expo-google-fonts/inter/-/inter-0.2.3.tgz",
"integrity": "sha512-iHK9FI+dnE45X5c2Z5hSFwNH4zUWethizpbv3XUn0FIGw5jwvzriENz0a6wCdkI4/d+1QkurnHo5XHti7TbNJA=="
},
"@expo/bunyan": {
"version": "4.0.1",
@@ -40858,11 +40836,6 @@
"domhandler": "^5.0.3"
}
},
"dooboolab-welcome": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/dooboolab-welcome/-/dooboolab-welcome-1.3.2.tgz",
"integrity": "sha512-2NbMaIIURElxEf/UAoVUFlXrO+7n/FRhLCiQlk4fkbGRh9cJ3/f8VEMPveR9m4Ug2l2Zey+UCXjd6EcBqHJ5bw=="
},
"dot-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -49768,14 +49741,6 @@
"path-dirname": "^1.0.2"
}
},
"react-native-switch-toggle": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/react-native-switch-toggle/-/react-native-switch-toggle-2.2.1.tgz",
"integrity": "sha512-Y/RQ1Pb/KDVZhBSNjc16LKtUi7MGZb0MYxouZLj/THpiSQLsy5pUyTwbIKRjNuZDNSxmMDXyRX1QfLt+oup4Uw==",
"requires": {
"dooboolab-welcome": "^1.3.0"
}
},
"react-native-url-polyfill": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-2.0.0.tgz",

3
package.json
View File

@@ -19,7 +19,7 @@
"@digitalbazaar/rsa-signature-2018": "digitalbazaar/rsa-signature-2018#initial",
"@digitalbazaar/rsa-verification-key-2018": "digitalbazaar/rsa-verification-key-2018#initial",
"@digitalcredentials/vc": "^1.1.2",
"@expo-google-fonts/montserrat": "^0.4.2",
"@expo-google-fonts/inter": "^0.2.3",
"@expo/metro-config": "~0.18.11",
"@invertase/react-native-apple-authentication": "^2.3.0",
"@iriscan/biometric-sdk-react-native": "0.2.6",
@@ -100,7 +100,6 @@
"react-native-shimmer-placeholder": "^2.0.9",
"react-native-spinkit": "^1.5.1",
"react-native-svg": "15.2.0",
"react-native-switch-toggle": "^2.2.1",
"react-native-vector-icons": "^10.0.0",
"react-native-webview": "^13.13.5",
"react-native-zip-archive": "^6.1.0",

8
routes/index.ts
View File

@@ -28,16 +28,10 @@ export const baseRoutes: Screen[] = [
{
name: 'KeyManagement',
component: KeyManagementScreen,
options: {
headerShown: false,
},
},
{
name:'AuthView',
component:AuthWebViewScreen,
options:{
headerShown:false,
},
component:AuthWebViewScreen
},
{
name: 'Language',

2
routes/main.ts
View File

@@ -44,7 +44,7 @@ const settings: TabScreen = {
options: {
headerTitleStyle: {
fontSize: 26,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
marginTop: 15,
},
title: i18n.t('MainLayout:settings'),

28
screens/AppLayout.tsx
View File

@@ -10,7 +10,7 @@ import {
import {authRoutes, baseRoutes} from '../routes';
import {useAppLayout} from './AppLayoutController';
import {StatusBar} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {GestureHandlerRootView} from "react-native-gesture-handler";
const {Navigator, Screen} = createNativeStackNavigator();
export const AppLayout: React.FC = () => {
@@ -25,19 +25,17 @@ export const AppLayout: React.FC = () => {
};
return (
<GestureHandlerRootView>
<NavigationContainer ref={navigationRef}>
<StatusBar animated={true} barStyle="dark-content" />
<Navigator
initialRouteName={baseRoutes[0].name}
screenOptions={options}>
{baseRoutes.map(route => (
<Screen key={route.name} {...route} />
))}
{controller.isAuthorized &&
authRoutes.map(route => <Screen key={route.name} {...route} />)}
</Navigator>
</NavigationContainer>
</GestureHandlerRootView>
<GestureHandlerRootView>
<NavigationContainer ref={navigationRef}>
<StatusBar animated={true} barStyle="dark-content" />
<Navigator initialRouteName={baseRoutes[0].name} screenOptions={options}>
{baseRoutes.map(route => (
<Screen key={route.name} {...route} />
))}
{controller.isAuthorized &&
authRoutes.map(route => <Screen key={route.name} {...route} />)}
</Navigator>
</NavigationContainer>
</GestureHandlerRootView>
);
};

4
screens/AuthScreen.tsx
View File

@@ -12,7 +12,7 @@ import {
sendStartEvent,
} from '../shared/telemetry/TelemetryUtils';
import {TelemetryConstants} from '../shared/telemetry/TelemetryConstants';
import BiometricIcon from '../components/BiometricIcon';
import {SvgImage} from '../components/ui/svg';
export const AuthScreen: React.FC<RootRouteProps> = props => {
const {t} = useTranslation('AuthScreen');
@@ -43,7 +43,7 @@ export const AuthScreen: React.FC<RootRouteProps> = props => {
title={controller.alertMsg}
/>
<Column crossAlign="center">
<BiometricIcon size={66} />
{SvgImage.fingerprintIcon(66)}
<Column margin="30 0 0 0">
<Text
testID="selectAppUnlockMethod"

5
screens/AuthWebViewScreen.tsx
View File

@@ -7,7 +7,6 @@ import {
TouchableOpacity,
Text,
BackHandler,
SafeAreaView,
} from 'react-native';
import {WebView} from 'react-native-webview';
import {Ionicons} from '@expo/vector-icons';
@@ -116,7 +115,7 @@ const AuthWebViewScreen: React.FC<any> = ({route, navigation}) => {
);
return (
<SafeAreaView style={{flex: 1}}>
<View style={{flex: 1}}>
<Header />
{showWebView && (
<WebView
@@ -136,7 +135,7 @@ const AuthWebViewScreen: React.FC<any> = ({route, navigation}) => {
thirdPartyCookiesEnabled={false}
/>
)}
</SafeAreaView>
</View>
);
};

4
screens/BiometricScreen.tsx
View File

@@ -12,7 +12,7 @@ import {
resetRetryCount,
} from '../shared/telemetry/TelemetryUtils';
import {TelemetryConstants} from '../shared/telemetry/TelemetryConstants';
import BiometricIcon from '../components/BiometricIcon';
import {SvgImage} from '../components/ui/svg';
export const BiometricScreen: React.FC<RootRouteProps> = props => {
const {t} = useTranslation('BiometricScreen');
@@ -39,7 +39,7 @@ export const BiometricScreen: React.FC<RootRouteProps> = props => {
backgroundColor={Theme.Colors.whiteBackgroundColor}>
<Centered fill>
<TouchableOpacity onPress={controller.useBiometrics}>
<BiometricIcon size={108} />
{SvgImage.fingerprintIcon(180)}
</TouchableOpacity>
</Centered>

8
screens/History/HistoryScreen.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import {RefreshControl} from 'react-native';
import {Icon} from 'react-native-elements';
import {useTranslation} from 'react-i18next';
import {Column, HorizontallyCentered, Text} from '../../components/ui';
import {Centered, Column, Text} from '../../components/ui';
import {useHistoryTab} from './HistoryScreenController';
import {ActivityLogText} from '../../components/ActivityLogText';
import {MainRouteProps} from '../../routes/main';
@@ -15,7 +15,6 @@ export const HistoryScreen: React.FC<MainRouteProps> = () => {
return (
<Column fill backgroundColor={Theme.Colors.whiteBackgroundColor}>
<BannerNotificationContainer />
<Column
scroll
padding="7 0"
@@ -25,6 +24,7 @@ export const HistoryScreen: React.FC<MainRouteProps> = () => {
onRefresh={controller.REFRESH}
/>
}>
<BannerNotificationContainer />
{controller.activities.map(activity => (
<ActivityLogText
key={`${activity.timestamp}-${activity._vcKey}`}
@@ -32,7 +32,7 @@ export const HistoryScreen: React.FC<MainRouteProps> = () => {
/>
))}
{controller.activities.length === 0 && (
<HorizontallyCentered fill>
<Centered fill>
<Icon
style={{marginBottom: 20}}
size={40}
@@ -46,7 +46,7 @@ export const HistoryScreen: React.FC<MainRouteProps> = () => {
margin="0 0 4 0">
{t('noHistory')}
</Text>
</HorizontallyCentered>
</Centered>
)}
</Column>
</Column>

10
screens/Home/MyVcs/BindingVcWarningOverlay.tsx
View File

@@ -21,7 +21,15 @@ export const BindingVcWarningOverlay: React.FC<
padding={'10'}
width={Dimensions.get('screen').width * 0.8}
height={Dimensions.get('screen').height * 0}>
<Row>{SvgImage.WarningLogo()}</Row>
<Row align="center" crossAlign="center" margin={'0 80 -10 0'}>
{SvgImage.WarningLogo()}
<Text
margin={'0 0 0 -80'}
color={Theme.Colors.whiteText}
weight="bold">
!
</Text>
</Row>
<Column crossAlign="center" margin="0 0 30 0">
<Text testID="alert" weight="semibold">

8
screens/Home/MyVcs/RemoveVcWarningOverlay.tsx
View File

@@ -26,8 +26,14 @@ export const RemoveVcWarningOverlay: React.FC<
padding={'10'}
width={Dimensions.get('screen').width * 0.8}
height={Dimensions.get('screen').height * 0}>
<Row align="center" crossAlign="center">
<Row align="center" crossAlign="center" margin={'0 80 -10 0'}>
{SvgImage.WarningLogo()}
<Text
margin={'0 0 0 -80'}
color={Theme.Colors.whiteText}
weight="bold">
!
</Text>
</Row>
<Column

108
screens/Home/MyVcsTab.tsx
View File

@@ -41,13 +41,13 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = props => {
Array<Record<string, VCMetadata>>
>([]);
const [showPinVc, setShowPinVc] = useState(true);
const [highlightCardLayout, setHighlightCardLayout] = useState<null | {
x: number;
y: number;
width: number;
height: number;
type: 'success' | 'failure';
}>(null);
const [highlightCardLayout, setHighlightCardLayout] = useState<null | {
x: number;
y: number;
width: number;
height: number;
type: 'success' | 'failure';
}>(null);
const getId = () => {
controller.DISMISS();
@@ -259,6 +259,7 @@ const [highlightCardLayout, setHighlightCardLayout] = useState<null | {
}>
<Row style={Theme.SearchBarStyles.vcSearchBarContainer}>
<SearchBar
isVcSearch
searchIconTestID="searchIssuerIcon"
searchBarTestID="issuerSearchBar"
search={search}
@@ -267,49 +268,67 @@ const [highlightCardLayout, setHighlightCardLayout] = useState<null | {
onChangeText={filterVcs}
onLayout={() => filterVcs('')}
/>
{clearSearchIcon && (
<Pressable
onPress={clearSearchText}
style={Theme.SearchBarStyles.clearSearch}>
<Icon
testID="clearingIssuerSearchIcon"
name="circle-with-cross"
type="entypo"
size={18}
color={Theme.Colors.DetailsLabel}
/>
</Pressable>
)}
</Row>
<Row pY={11} pX={8}>
{numberOfCardsAvailable > 0 && (
<Text style={{fontFamily: 'Montserrat_500Medium'}}>
<Text style={{fontFamily: 'Inter_500Medium'}}>
{cardsAvailableText}
</Text>
)}
</Row>
{showPinVc &&
vcMetadataOrderedByPinStatus.map((vcMetadata, index) => {
const vcKey = vcMetadata.getVcKey();
vcMetadataOrderedByPinStatus.map((vcMetadata, index) => {
const vcKey = vcMetadata.getVcKey();
const isSuccessHighlighted =
controller.reverificationSuccess.status &&
controller.reverificationSuccess.vcKey === vcKey;
const isSuccessHighlighted =
controller.reverificationSuccess.status &&
controller.reverificationSuccess.vcKey === vcKey;
const isFailureHighlighted =
controller.reverificationfailure.status &&
controller.reverificationfailure.vcKey === vcKey;
const highlightType = isSuccessHighlighted
? 'success'
: isFailureHighlighted
? 'failure'
: null;
const isFailureHighlighted =
controller.reverificationfailure.status &&
controller.reverificationfailure.vcKey === vcKey;
const highlightType = isSuccessHighlighted
? 'success'
: isFailureHighlighted
? 'failure'
: null;
return (
<VcItemContainer
key={vcKey}
vcMetadata={vcMetadata}
margin="0 2 8 2"
onPress={controller.VIEW_VC}
isDownloading={controller.inProgressVcDownloads?.has(vcKey)}
isPinned={vcMetadata.isPinned}
isInitialLaunch={controller.isInitialDownloading}
isTopCard={index === 0}
onMeasured={rect => {
if (highlightType && !highlightCardLayout) {
setHighlightCardLayout({ ...rect, type: highlightType });
}
}}
/>
);
})}
return (
<VcItemContainer
key={vcKey}
vcMetadata={vcMetadata}
margin="0 2 8 2"
onPress={controller.VIEW_VC}
isDownloading={controller.inProgressVcDownloads?.has(
vcKey,
)}
isPinned={vcMetadata.isPinned}
isInitialLaunch={controller.isInitialDownloading}
isTopCard={index === 0}
onMeasured={rect => {
if (highlightType && !highlightCardLayout) {
setHighlightCardLayout({
...rect,
type: highlightType,
});
}
}}
/>
);
})}
{filteredSearchData.length > 0 && !showPinVc
? filteredSearchData.map(vcMetadataObj => {
const [vcKey, vcMetadata] =
@@ -341,7 +360,7 @@ const [highlightCardLayout, setHighlightCardLayout] = useState<null | {
fontWeight: 'bold',
textAlign: 'center',
fontSize: 18,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
}}>
{t('noCardsTitle')}
</Text>
@@ -351,7 +370,7 @@ const [highlightCardLayout, setHighlightCardLayout] = useState<null | {
lineHeight: 17,
paddingTop: 10,
fontSize: 14,
fontFamily: 'Montserrat_400Regular',
fontFamily: 'Inter_400Regular',
}}>
{t('noCardsDescription')}
</Text>
@@ -488,12 +507,13 @@ const [highlightCardLayout, setHighlightCardLayout] = useState<null | {
/>
)}
<MessageOverlay
overlayMode='highlight'
overlayMode="highlight"
isVisible={!!highlightCardLayout && !props.isViewingVc}
cardLayout={highlightCardLayout ?? undefined}
onBackdropPress={() => {
controller.RESET_HIGHLIGHT()
setHighlightCardLayout(null)}}
controller.RESET_HIGHLIGHT();
setHighlightCardLayout(null);
}}
/>
</React.Fragment>
);

3
screens/Home/OnboardingOverlay.tsx
View File

@@ -1,11 +1,10 @@
import React, {useRef} from 'react';
import AppIntroSlider from 'react-native-app-intro-slider';
import { ScrollView, View} from 'react-native';
import {SafeAreaView, ScrollView, View} from 'react-native';
import {Icon, Overlay} from 'react-native-elements';
import {Button, Column, Text} from '../../components/ui';
import {Theme} from '../../components/ui/styleUtils';
import {useTranslation} from 'react-i18next';
import {SafeAreaView} from "react-native-safe-area-context";
export const OnboardingOverlay: React.FC<OnboardingProps> = props => {
const slider = useRef<AppIntroSlider>();

183
screens/Home/ViewVcModal.tsx
View File

@@ -40,11 +40,7 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
const controller = useViewVcModal(props);
const profileImage = controller.verifiableCredentialData.face;
const verificationStatus = controller.verificationStatus;
const verificationStatusMessage = controller.verificationStatus?.isRevoked
? 'revoked'
: controller.verificationStatus?.isExpired
? 'expired'
: controller.verificationStatus?.statusType;
const verificationStatusMessage = controller.verificationStatus?.isRevoked ? "revoked" : controller.verificationStatus?.isExpired ? "expired" : controller.verificationStatus?.statusType;
const [verifiableCredential, setVerifiableCredential] = useState(null);
const [svgTemplate, setSvgTemplate] = useState<string[] | null>(null);
const [svgRendererError, setSvgRendererError] = useState<string[] | null>(
@@ -73,7 +69,7 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
!controller.verifiableCredentialData.vcMetadata.isVerified &&
!controller.isVerificationInProgress
) {
props.vcItemActor.send({type: 'VERIFY'});
props.vcItemActor.send({ type: 'VERIFY' });
}
}, [controller.verifiableCredentialData.vcMetadata.isVerified]);
@@ -90,12 +86,11 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
setLoadingSvg(true);
const vcJsonString = JSON.stringify(controller.credential.credential);
const result =
await VcRenderer.getInstance().generateCredentialDisplayContent(
controller.verifiableCredentialData.format,
wellknown ?? null,
vcJsonString,
);
const result = await VcRenderer.getInstance().generateCredentialDisplayContent(
controller.verifiableCredentialData.format,
wellknown ?? null,
vcJsonString,
);
setSvgTemplate(result);
setSvgRendererError(null);
@@ -180,100 +175,94 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
headerTitle={t('title')}
onDismiss={handleModalDismiss}
headerElevation={2}>
<View style={{position: 'relative', flex: 1}}>
<BannerNotificationContainer showVerificationStatusBanner={false} />
<BannerNotificationContainer showVerificationStatusBanner={false} />
{controller.showVerificationStatusBanner && (
<BannerNotification
type={verificationStatus?.statusType as BannerStatus}
message={t(`VcVerificationBanner:${verificationStatusMessage}`, {
vcDetails: `${verificationStatus?.vcType} ${
verificationStatus?.vcNumber ?? ''
}`,
})}
onClosePress={controller.RESET_VERIFICATION_STATUS}
key={'reVerificationInProgress'}
testId={'reVerificationInProgress'}
/>
)}
{!isVCLoaded(verifiableCredential) ? (
<ActivityIndicator />
) : (
<VcDetailsContainer
fields={fields}
wellknownFieldsFlag={wellknownFieldsFlag}
wellknown={wellknown}
credential={verifiableCredential}
credentialWrapper={controller.credential}
verifiableCredentialData={controller.verifiableCredentialData}
onBinding={controller.addtoWallet}
walletBindingResponse={controller.walletBindingResponse}
activeTab={props.activeTab}
vcHasImage={profileImage !== undefined}
svgTemplate={svgTemplate}
svgRendererError={svgRendererError}
loadingSvg={loadingSvg}
/>
)}
{controller.isAcceptingBindingOtp && (
<OtpVerificationModal
service={props.vcItemActor}
isVisible={controller.isAcceptingBindingOtp}
onDismiss={controller.DISMISS}
onInputDone={controller.inputOtp}
error={controller.otpError}
resend={controller.RESEND_OTP}
phone={controller.isCommunicationDetails.phoneNumber}
email={controller.isCommunicationDetails.emailId}
flow={TelemetryConstants.FlowType.vcActivation}
/>
)}
<BindingVcWarningOverlay
isVisible={controller.isBindingWarning}
onConfirm={controller.CONFIRM}
onCancel={controller.CANCEL}
{controller.showVerificationStatusBanner && (
<BannerNotification
type={verificationStatus?.statusType as BannerStatus}
message={t(`VcVerificationBanner:${verificationStatusMessage}`, {
vcDetails: `${verificationStatus?.vcType} ${verificationStatus?.vcNumber ?? ""}`,
})}
onClosePress={controller.RESET_VERIFICATION_STATUS}
key={'reVerificationInProgress'}
testId={'reVerificationInProgress'}
/>
)}
<MessageOverlay
testID="walletBindingError"
isVisible={controller.isBindingError}
title={controller.walletBindingError}
onButtonPress={() => {
controller.CANCEL();
}}
{!isVCLoaded(verifiableCredential) ? (
<ActivityIndicator />
) : (
<VcDetailsContainer
fields={fields}
wellknownFieldsFlag={wellknownFieldsFlag}
wellknown={wellknown}
credential={verifiableCredential}
credentialWrapper={controller.credential}
verifiableCredentialData={controller.verifiableCredentialData}
onBinding={controller.addtoWallet}
walletBindingResponse={controller.walletBindingResponse}
activeTab={props.activeTab}
vcHasImage={profileImage !== undefined}
svgTemplate={svgTemplate}
svgRendererError={svgRendererError}
loadingSvg={loadingSvg}
/>
)}
<MessageOverlay
isVisible={
controller.isWalletBindingInProgress || controller.isReverifyingVc
}
title={t('inProgress')}
progress
/>
{controller.toastVisible && <ToastItem message={controller.message} />}
<WalletBinding
{controller.isAcceptingBindingOtp && (
<OtpVerificationModal
service={props.vcItemActor}
vcMetadata={controller.verifiableCredentialData.vcMetadata}
isVisible={controller.isAcceptingBindingOtp}
onDismiss={controller.DISMISS}
onInputDone={controller.inputOtp}
error={controller.otpError}
resend={controller.RESEND_OTP}
phone={controller.isCommunicationDetails.phoneNumber}
email={controller.isCommunicationDetails.emailId}
flow={TelemetryConstants.FlowType.vcActivation}
/>
)}
<RemoveVcWarningOverlay
testID="removeVcWarningOverlay"
service={props.vcItemActor}
vcMetadata={controller.verifiableCredentialData.vcMetadata}
/>
<BindingVcWarningOverlay
isVisible={controller.isBindingWarning}
onConfirm={controller.CONFIRM}
onCancel={controller.CANCEL}
/>
<HistoryTab
service={props.vcItemActor}
vcMetadata={VCMetadata.fromVC(
controller.verifiableCredentialData.vcMetadata,
)}
/>
</View>
<MessageOverlay
testID="walletBindingError"
isVisible={controller.isBindingError}
title={controller.walletBindingError}
onButtonPress={() => {
controller.CANCEL();
}}
/>
<MessageOverlay
isVisible={controller.isWalletBindingInProgress || controller.isReverifyingVc}
title={t('inProgress')}
progress
/>
{controller.toastVisible && <ToastItem message={controller.message} />}
<WalletBinding
service={props.vcItemActor}
vcMetadata={controller.verifiableCredentialData.vcMetadata}
/>
<RemoveVcWarningOverlay
testID="removeVcWarningOverlay"
service={props.vcItemActor}
vcMetadata={controller.verifiableCredentialData.vcMetadata}
/>
<HistoryTab
service={props.vcItemActor}
vcMetadata={VCMetadata.fromVC(
controller.verifiableCredentialData.vcMetadata,
)}
/>
</Modal>
);
};

21
screens/HomeScreenLayout.tsx
View File

@@ -14,19 +14,32 @@ import {I18nManager, View} from 'react-native';
import {isIOS} from '../shared/constants';
import {Copilot} from '../components/ui/Copilot';
import LinearGradient from 'react-native-linear-gradient';
import { useTabBarVisibility } from '../shared/hooks/useTabBarVisibility';
export const HomeScreenLayout: React.FC<RootRouteProps> = props => {
const {t} = useTranslation('IssuersScreen');
const {Navigator, Screen} = createNativeStackNavigator();
const { hideTabBar, showTabBar } = useTabBarVisibility();
React.useLayoutEffect(() => {
const routeName = getFocusedRouteNameFromRoute(props.route);
if (routeName === 'IssuersScreen') {
hideTabBar();
props.navigation.setOptions({tabBarStyle: {display: 'none'}});
} else {
showTabBar();
props.navigation.setOptions({
tabBarShowLabel: true,
tabBarActiveTintColor: Theme.Colors.IconBg,
tabBarLabelStyle: {
fontSize: 12,
fontFamily: 'Inter_600SemiBold',
},
tabBarStyle: {
height: 75,
paddingHorizontal: 10,
},
tabBarItemStyle: {
height: 83,
padding: 11,
},
});
}
}, [props.navigation, props.route]);

4
screens/IntroSliders/biometricIntro.tsx
View File

@@ -2,8 +2,8 @@ import React from 'react';
import {useTranslation} from 'react-i18next';
import {Column, Text, Button} from '../../components/ui';
import {Theme} from '../../components/ui/styleUtils';
import {SvgImage} from '../../components/ui/svg';
import {View, ScrollView} from 'react-native';
import BiometricIcon from '../../components/BiometricIcon';
export const StaticAuthScreen: React.FC = () => {
const {t} = useTranslation('AuthScreen');
@@ -30,7 +30,7 @@ export const StaticAuthScreen: React.FC = () => {
overflow: 'hidden',
}}>
<Column crossAlign="center">
<BiometricIcon size={66} />
{SvgImage.fingerprintIcon(66)}
<Column margin="30 0 0 0">
<Text
testID="header"

3
screens/IntroSliders/trustedDigitalWalletIntro.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import {Column, Row, Text} from '../../components/ui';
import {Theme} from '../../components/ui/styleUtils';
import {SvgImage} from '../../components/ui/svg';
import LinearGradient from 'react-native-linear-gradient';
import {LinearGradient} from 'react-native-linear-gradient';
import {Image, Icon} from 'react-native-elements';
import {ScrollView, View} from 'react-native';
import {HelpScreen} from '../../components/HelpScreen';
@@ -90,6 +90,7 @@ export const StaticHomeScreen: React.FC = () => {
</Row>
<SearchBar
searchBarTestID="searchBar"
isVcSearch
editable={false}
placeholder={t('MyVcsTab:searchByName')}
/>

164
screens/Issuers/IssuersScreen.tsx
View File

@@ -1,17 +1,20 @@
import React, {useEffect, useLayoutEffect, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {FlatList, View} from 'react-native';
import {Issuer} from '../../components/openId4VCI/Issuer';
import {Error} from '../../components/ui/Error';
import {Header} from '../../components/ui/Header';
import {Button, Column, Row, Text} from '../../components/ui';
import {Theme} from '../../components/ui/styleUtils';
import {RootRouteProps} from '../../routes';
import {HomeRouteProps} from '../../routes/routeTypes';
import {useIssuerScreenController} from './IssuerScreenController';
import {Loader} from '../../components/ui/Loader';
import React, { useEffect, useLayoutEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FlatList, Pressable, View } from 'react-native';
import { Issuer } from '../../components/openId4VCI/Issuer';
import { Error } from '../../components/ui/Error';
import { Header } from '../../components/ui/Header';
import { Button, Column, Row, Text } from '../../components/ui';
import { Theme } from '../../components/ui/styleUtils';
import { RootRouteProps } from '../../routes';
import { HomeRouteProps } from '../../routes/routeTypes';
import { useIssuerScreenController } from './IssuerScreenController';
import { Loader } from '../../components/ui/Loader';
import ScanIcon from '../../assets/scanIcon.svg';
import {isTranslationKeyFound, removeWhiteSpace} from '../../shared/commonUtil';
import {
isTranslationKeyFound,
removeWhiteSpace,
} from '../../shared/commonUtil';
import {
ErrorMessage,
getDisplayObjectForCurrentLanguage,
@@ -23,27 +26,31 @@ import {
sendInteractEvent,
sendStartEvent,
} from '../../shared/telemetry/TelemetryUtils';
import {TelemetryConstants} from '../../shared/telemetry/TelemetryConstants';
import {MessageOverlay} from '../../components/MessageOverlay';
import {SearchBar} from '../../components/ui/SearchBar';
import {SvgImage} from '../../components/ui/svg';
import {BannerNotificationContainer} from '../../components/BannerNotificationContainer';
import {CredentialTypeSelectionScreen} from './CredentialTypeSelectionScreen';
import {QrScanner} from '../../components/QrScanner';
import {AUTH_ROUTES} from '../../routes/routesConstants';
import {TransactionCodeModal} from './TransactionCodeScreen';
import {TrustModal} from '../../components/TrustModal';
import { TelemetryConstants } from '../../shared/telemetry/TelemetryConstants';
import { MessageOverlay } from '../../components/MessageOverlay';
import { SearchBar } from '../../components/ui/SearchBar';
import { SvgImage } from '../../components/ui/svg';
import { Icon } from 'react-native-elements';
import { BannerNotificationContainer } from '../../components/BannerNotificationContainer';
import { CredentialTypeSelectionScreen } from './CredentialTypeSelectionScreen';
import { QrScanner } from '../../components/QrScanner';
import { IssuersModel } from '../../machines/Issuers/IssuersModel';
import { AUTH_ROUTES } from '../../routes/routesConstants';
import { TransactionCodeModal } from './TransactionCodeScreen';
import { TrustModal } from '../../components/TrustModal';
import i18next from 'i18next';
export const IssuersScreen: React.FC<
HomeRouteProps | RootRouteProps
> = props => {
const model = IssuersModel;
const controller = useIssuerScreenController(props);
const {i18n, t} = useTranslation('IssuersScreen');
const { i18n, t } = useTranslation('IssuersScreen');
const issuers = controller.issuers;
let [filteredSearchData, setFilteredSearchData] = useState(issuers);
const [search, setSearch] = useState('');
const [tapToSearch, setTapToSearch] = useState(false);
const showFullScreenError = controller.isError;
const [clearSearchIcon, setClearSearchIcon] = useState(false);
const showFullScreenError = controller.isError
const isVerificationFailed = controller.verificationErrorMessage !== '';
@@ -51,7 +58,8 @@ export const IssuersScreen: React.FC<
const verificationErrorMessage = isTranslationKeyFound(translationKey, t)
? t(translationKey)
: t('errors.verificationFailed.ERR_GENERIC');
: t('errors.verificationFailed.ERR_GENERIC');
useLayoutEffect(() => {
if (controller.loadingReason || showFullScreenError) {
@@ -64,12 +72,13 @@ export const IssuersScreen: React.FC<
header: props => (
<Header
goBack={props.navigation.goBack}
title={controller.isQrScanning ? t('download') : t('title')}
title={ controller.isQrScanning?t('download'):t('title')}
testID="issuersScreenHeader"
/>
),
});
}
}, [
controller.loadingReason,
controller.errorMessageType,
@@ -84,10 +93,8 @@ export const IssuersScreen: React.FC<
if (controller.isAuthEndpointToOpen) {
(props.navigation as any).navigate(AUTH_ROUTES.AuthView, {
authorizationURL: controller.authEndpount,
clientId: controller.selectedIssuer.client_id ?? 'wallet',
redirectUri:
controller.selectedIssuer.redirect_uri ??
'io.mosip.residentapp.inji://oauthredirect',
clientId: controller.selectedIssuer.client_id ?? "wallet",
redirectUri: controller.selectedIssuer.redirect_uri ?? "io.mosip.residentapp.inji://oauthredirect",
controller: controller,
});
}
@@ -95,7 +102,7 @@ export const IssuersScreen: React.FC<
const onPressHandler = (id: string, protocol: string) => {
sendStartEvent(
getStartEventData(TelemetryConstants.FlowType.vcDownload, {id: id}),
getStartEventData(TelemetryConstants.FlowType.vcDownload, { id: id }),
);
sendInteractEvent(
getInteractEventData(
@@ -117,9 +124,9 @@ export const IssuersScreen: React.FC<
return (
controller.errorMessageType === ErrorMessage.TECHNICAL_DIFFICULTIES ||
controller.errorMessageType ===
ErrorMessage.CREDENTIAL_TYPE_DOWNLOAD_FAILURE ||
ErrorMessage.CREDENTIAL_TYPE_DOWNLOAD_FAILURE ||
controller.errorMessageType ===
ErrorMessage.AUTHORIZATION_GRANT_TYPE_NOT_SUPPORTED ||
ErrorMessage.AUTHORIZATION_GRANT_TYPE_NOT_SUPPORTED ||
controller.errorMessageType === ErrorMessage.NETWORK_REQUEST_FAILED
);
}
@@ -128,6 +135,11 @@ export const IssuersScreen: React.FC<
setTapToSearch(true);
};
const clearSearchText = () => {
filterIssuers('');
setClearSearchIcon(false);
};
const goBack = () => {
if (
controller.errorMessageType &&
@@ -159,6 +171,11 @@ export const IssuersScreen: React.FC<
});
setFilteredSearchData(filteredData);
setSearch(searchText);
if (searchText !== '') {
setClearSearchIcon(true);
} else {
setClearSearchIcon(false);
}
};
if (controller.isSelectingCredentialType) {
return <CredentialTypeSelectionScreen {...props} />;
@@ -178,7 +195,7 @@ export const IssuersScreen: React.FC<
primaryButtonText="goBack"
primaryButtonEvent={controller.RESET_VERIFY_ERROR}
primaryButtonTestID="goBack"
customStyles={{marginTop: '30%'}}
customStyles={{ marginTop: '30%' }}
/>
);
}
@@ -186,16 +203,14 @@ export const IssuersScreen: React.FC<
return issuerTrustConsentComponent();
}
if (controller.isTxCodeRequested) {
return (
<TransactionCodeModal
visible={controller.isTxCodeRequested}
onDismiss={controller.CANCEL}
onVerify={controller.TX_CODE_RECEIVED}
inputMode={controller.txCodeDisplayDetails.inputMode}
description={controller.txCodeDisplayDetails.description}
length={controller.txCodeDisplayDetails.length}
/>
);
return <TransactionCodeModal
visible={controller.isTxCodeRequested}
onDismiss={controller.CANCEL}
onVerify={controller.TX_CODE_RECEIVED}
inputMode= {controller.txCodeDisplayDetails.inputMode}
description={controller.txCodeDisplayDetails.description}
length={controller.txCodeDisplayDetails.length}
/>
}
if (controller.isBiometricsCancelled) {
@@ -238,7 +253,7 @@ export const IssuersScreen: React.FC<
primaryButtonTestID="tryAgain"
primaryButtonText={
controller.errorMessageType != ErrorMessage.TECHNICAL_DIFFICULTIES &&
controller.errorMessageType !=
controller.errorMessageType !=
ErrorMessage.AUTHORIZATION_GRANT_TYPE_NOT_SUPPORTED
? 'tryAgain'
: undefined
@@ -257,6 +272,7 @@ export const IssuersScreen: React.FC<
/>
);
}
if (controller.isQrScanning) {
return qrScannerComponent();
@@ -264,21 +280,15 @@ export const IssuersScreen: React.FC<
function qrScannerComponent() {
return (
<Column crossAlign="center">
<QrScanner onQrFound={controller.QR_CODE_SCANNED} />
<QrScanner
onQrFound={controller.QR_CODE_SCANNED}
/>
</Column>
);
}
function issuerTrustConsentComponent() {
return (
<TrustModal
isVisible={true}
logo={controller.issuerLogo}
name={controller.issuerName}
onConfirm={controller.ON_CONSENT_GIVEN}
onCancel={controller.CANCEL}
/>
);
return <TrustModal isVisible={true} logo={controller.issuerLogo} name={controller.issuerName} onConfirm={controller.ON_CONSENT_GIVEN} onCancel={controller.CANCEL} />
}
return (
@@ -301,6 +311,19 @@ export const IssuersScreen: React.FC<
onChangeText={filterIssuers}
onLayout={() => filterIssuers('')}
/>
{clearSearchIcon && (
<Pressable
onPress={clearSearchText}
style={Theme.SearchBarStyles.clearSearch}>
<Icon
testID="clearingIssuerSearchIcon"
name="circle-with-cross"
type="entypo"
size={18}
color={Theme.Colors.DetailsLabel}
/>
</Pressable>
)}
</Row>
<Text
testID="issuersScreenDescription"
@@ -310,26 +333,19 @@ export const IssuersScreen: React.FC<
}}>
{t('description')}
</Text>
{search === '' && (
<View style={{height: 85}}>
<Issuer
defaultLogo={ScanIcon}
displayDetails={{
title: t('offerTitle'),
locale: i18n.language,
description: t('offerDescription'),
}}
onPress={controller.SCAN_CREDENTIAL_OFFER_QR_CODE}
testID={'credentalOfferButton'}
/>
</View>
)}
{search === '' && <View style={{ height: 85 }}><Issuer defaultLogo={ScanIcon} displayDetails={{
title: t('offerTitle'),
locale: i18n.language,
description: t('offerDescription'),
}} onPress={
controller.SCAN_CREDENTIAL_OFFER_QR_CODE
} testID={'credentalOfferButton'} /></View>}
<Column scroll style={Theme.IssuersScreenStyles.issuersContainer}>
{controller.issuers.length > 0 && (
<FlatList
data={filteredSearchData}
renderItem={({item}) => (
renderItem={({ item }) => (
<Issuer
testID={removeWhiteSpace(item.issuer_id)}
key={item.issuer_id}
@@ -352,3 +368,5 @@ export const IssuersScreen: React.FC<
</React.Fragment>
);
};

105
screens/Issuers/TransactionCodeScreen.tsx
View File

@@ -17,7 +17,6 @@ import {PinInput} from '../../components/PinInput';
import {Modal} from '../../components/ui/Modal';
import {CancelDownloadModal} from './ConfirmationModal';
import {Icon, Input} from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient';
export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
const {t} = useTranslation('transactionCodeScreen');
@@ -113,9 +112,7 @@ export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
setTextLineCount(e.nativeEvent.lines.length);
}
}}>
{props.description
? t(props.description)
: t('description')}
{t(`${props.description || t('description')}`)}
</Text>
{textLineCount > maxLines && (
<Text
@@ -123,7 +120,9 @@ export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
style={
Theme.TransactionCodeScreenStyle.showMoreButton
}>
{showFullDescription ? t('showLess') : t('showMore')}
{showFullDescription
? t('Show less ↑')
: t('Show more ↓')}
</Text>
)}
</Column>
@@ -172,72 +171,44 @@ export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
</>
) : (
<>
<LinearGradient
colors={
transactionCode.length > 0
? Theme.Colors.GradientColors
: [
Theme.Colors.TransactionCodeBorderColor,
Theme.Colors.TransactionCodeBorderColor,
]
<Input
containerStyle={{
width: Dimensions.get('window').width - 80,
alignSelf: 'center',
}}
placeholder={t('placeholder')}
placeholderTextColor="#ACACAC"
inputContainerStyle={{
borderBottomColor: '#C1C1C1',
borderBottomWidth: 1,
marginBottom: 16,
}}
inputStyle={
Theme.TransactionCodeScreenStyle.inputStyle
}
start={{x: 0, y: 0}}
end={{x: 1, y: 0}}
style={
Theme.TransactionCodeScreenStyle
.transactionGradientContainer
}>
<View
style={{
backgroundColor:
Theme.Colors.TransactionCodeBackgroundColor,
borderRadius: 16,
overflow: 'hidden',
}}>
<Input
containerStyle={{
width: Dimensions.get('window').width - 80,
alignSelf: 'center',
marginBottom: -25,
padding: 0,
}}
placeholder={t('placeholder')}
placeholderTextColor={
Theme.Colors.TransactionCodePlaceholderColor
}
inputContainerStyle={
Theme.TransactionCodeScreenStyle.inputContainer
}
inputStyle={
Theme.TransactionCodeScreenStyle.inputStyle
}
maxLength={props.length ?? 30}
autoFocus
secureTextEntry={!showCode}
value={transactionCode}
keyboardType={
props.inputMode === 'numeric'
? 'numeric'
: 'default'
}
onChangeText={handleChange}
rightIcon={
<Icon
name={showCode ? 'eye-off' : 'eye'}
type="feather"
size={20}
color={
Theme.Colors.TransactionCodePlaceholderColor
}
onPress={() => setShowCode(prev => !prev)}
/>
}
maxLength={props.length ?? 30}
autoFocus
secureTextEntry={!showCode}
value={transactionCode}
keyboardType={
props.inputMode === 'numeric'
? 'numeric'
: 'default'
}
onChangeText={handleChange}
rightIcon={
<Icon
name={showCode ? 'eye-off' : 'eye'}
type="feather"
size={20}
color="#888"
onPress={() => setShowCode(prev => !prev)}
/>
</View>
</LinearGradient>
}
/>
<Button
disabled={transactionCode.length == 0}
title={t('verify')}
title="Verify"
type="gradient"
onPress={handleVerify}
/>

194
screens/MainLayout.tsx
View File

@@ -27,19 +27,19 @@ const {Navigator, Screen} = createBottomTabNavigator();
export const MainLayout: React.FC = () => {
const {t} = useTranslation('MainLayout');
const {appService} = useContext(GlobalContext);
const scanService = appService.children.get('scan');
const options: BottomTabNavigationOptions = {
tabBarShowLabel: true,
tabBarActiveTintColor: Theme.Colors.IconBg,
...Theme.BottomTabBarStyle,
};
const navigation = useNavigation<ScanLayoutNavigation>();
const linkCode = useSelector(appService, selectIsLinkCode);
const options: BottomTabNavigationOptions = {
tabBarShowLabel: true,
tabBarActiveTintColor: Theme.Colors.IconBg,
...Theme.BottomTabBarStyle,
};
const authorizationRequest = useSelector(
appService,
selectAuthorizationRequest,
@@ -51,96 +51,96 @@ export const MainLayout: React.FC = () => {
}
}, [linkCode, authorizationRequest]);
return (
<CopilotProvider
stopOnOutsideClick
androidStatusBarVisible
tooltipComponent={CopilotTooltip}
tooltipStyle={Theme.Styles.copilotStyle}
stepNumberComponent={() => null}
animated>
<Navigator
initialRouteName={mainRoutes[0].name}
screenOptions={({route}) => ({
tabBarAccessibilityLabel: route.name,
...options,
})}>
{mainRoutes.map((route, index) => (
<Screen
key={route.name}
name={route.name}
component={route.component}
listeners={{
tabPress: e => {
if (route.name == share.name) {
scanService?.send(ScanEvents.RESET());
}
},
}}
options={{
...route.options,
title: t(route.name),
tabBarIcon: ({focused}) => (
<Column
{...testIDProps(route.name + 'Icon')}
align="center"
crossAlign="center"
style={focused ? Theme.Styles.bottomTabIconStyle : null}>
{route.name === 'home' ? (
focused ? (
<LinearGradient
colors={Theme.Colors.GradientColorsLight}
start={Theme.LinearGradientDirection.start}
end={Theme.LinearGradientDirection.end}
style={{
width: 36,
height: 36,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
}}>
<View>{SvgImage[`${route.name}`](focused)}</View>
</LinearGradient>
) : (
<View>{SvgImage[`${route.name}`](focused)}</View>
)
) : (
<Copilot
title={t(`copilot:${route.name}Title`)}
description={t(`copilot:${route.name}Message`)}
order={2 + index}
targetStyle={Theme.Styles.tabBarIconCopilot}
children={
<>
{focused ? (
<LinearGradient
style={{
width: 36,
height: 36,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
}}
colors={Theme.Colors.GradientColorsLight}
start={Theme.LinearGradientDirection.start}
end={Theme.LinearGradientDirection.end}>
{SvgImage[`${route.name}`](focused)}
</LinearGradient>
) : (
<View>{SvgImage[`${route.name}`](focused)}</View>
)}
</>
}
/>
)}
</Column>
),
tabBarAccessibilityLabel: isIOS() ? t(route.name) : route.name,
tabBarTestID: route.name,
}}
/>
))}
</Navigator>
</CopilotProvider>
return (
<CopilotProvider
stopOnOutsideClick
androidStatusBarVisible
tooltipComponent={CopilotTooltip}
tooltipStyle={Theme.Styles.copilotStyle}
stepNumberComponent={() => null}
animated>
<Navigator
initialRouteName={mainRoutes[0].name}
screenOptions={({route}) => ({
tabBarAccessibilityLabel: route.name,
...options,
})}>
{mainRoutes.map((route, index) => (
<Screen
key={route.name}
name={route.name}
component={route.component}
listeners={{
tabPress: e => {
if (route.name == share.name) {
scanService?.send(ScanEvents.RESET());
}
},
}}
options={{
...route.options,
title: t(route.name),
tabBarIcon: ({focused}) => (
<Column
{...testIDProps(route.name + 'Icon')}
align="center"
crossAlign="center"
style={focused ? Theme.Styles.bottomTabIconStyle : null}>
{route.name === 'home' ? (
focused ? (
<LinearGradient
colors={Theme.Colors.GradientColorsLight}
start={Theme.LinearGradientDirection.start}
end={Theme.LinearGradientDirection.end}
style={{
width: 36,
height: 36,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
}}>
<View>{SvgImage[`${route.name}`](focused)}</View>
</LinearGradient>
) : (
<View>{SvgImage[`${route.name}`](focused)}</View>
)
) : (
<Copilot
title={t(`copilot:${route.name}Title`)}
description={t(`copilot:${route.name}Message`)}
order={2 + index}
targetStyle={Theme.Styles.tabBarIconCopilot}
children={
<>
{focused ? (
<LinearGradient
style={{
width: 36,
height: 36,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
}}
colors={Theme.Colors.GradientColorsLight}
start={Theme.LinearGradientDirection.start}
end={Theme.LinearGradientDirection.end}>
{SvgImage[`${route.name}`](focused)}
</LinearGradient>
) : (
<View>{SvgImage[`${route.name}`](focused)}</View>
)}
</>
}
/>
)}
</Column>
),
tabBarAccessibilityLabel: isIOS() ? t(route.name) : route.name,
tabBarTestID: route.name,
}}
/>
))}
</Navigator>
</CopilotProvider>
);
};

13
screens/QrLogin/QrConsent.tsx
View File

@@ -3,13 +3,12 @@ import {useTranslation} from 'react-i18next';
import {Button, Column, Row, Text} from '../../components/ui';
import {Theme} from '../../components/ui/styleUtils';
import {useQrLogin} from './QrLoginController';
import {Image, View} from 'react-native';
import {ListItem} from 'react-native-elements';
import {Image} from 'react-native';
import {ListItem, Switch} from 'react-native-elements';
import {Modal} from '../../components/ui/Modal';
import {QrLoginRef} from '../../machines/QrLogin/QrLoginMachine';
import {ScrollView} from 'react-native';
import {getClientNameForCurrentLanguage} from '../../i18n';
import Toggle from '../../components/Toggle';
export const QrConsent: React.FC<QrConsentProps> = props => {
const {t} = useTranslation('QrLogin');
@@ -101,10 +100,12 @@ export const QrConsent: React.FC<QrConsentProps> = props => {
</ListItem.Title>
</ListItem.Content>
<Toggle
<Switch
value={controller.isShare[claim]}
onToggle={value => controller.SELECT_CONSENT(value, claim)}
testID="voluntaryClaimToggle"
onValueChange={() =>
controller.SELECT_CONSENT(controller.isShare[claim], claim)
}
color={Theme.Colors.Icon}
/>
</ListItem>
))}

13
screens/Request/ReceiveVcScreen.tsx
View File

@@ -13,7 +13,6 @@ import {DETAIL_VIEW_DEFAULT_FIELDS} from '../../components/VC/common/VCUtils';
import {getDetailedViewFields} from '../../shared/openId4VCI/Utils';
import {VCProcessor} from '../../components/VC/common/VCProcessor';
import VcRenderer from '../../shared/vcRenderer/VcRenderer';
import {BannerNotificationContainer} from '../../components/BannerNotificationContainer';
export const ReceiveVcScreen: React.FC = () => {
const {t} = useTranslation('ReceiveVcScreen');
@@ -54,12 +53,11 @@ export const ReceiveVcScreen: React.FC = () => {
setLoadingSvg(true);
const vcJsonString = JSON.stringify(controller.credential.credential);
const result =
await VcRenderer.getInstance().generateCredentialDisplayContent(
verifiableCredentialData.vcMetadata.format,
wellknown ?? null,
vcJsonString,
);
const result = await VcRenderer.getInstance().generateCredentialDisplayContent(
verifiableCredentialData.vcMetadata.format,
wellknown ?? null,
vcJsonString,
);
setSvgTemplate(result);
setSvgRendererError(null);
@@ -97,7 +95,6 @@ export const ReceiveVcScreen: React.FC = () => {
return (
<React.Fragment>
<BannerNotificationContainer />
{controller.isDisplayingIncomingVC && (
<Column
scroll

81
screens/Request/RequestLayout.tsx
View File

@@ -27,6 +27,7 @@ export const RequestLayout: React.FC = () => {
return (
<React.Fragment>
<BannerNotificationContainer />
<RequestStack.Navigator
initialRouteName="RequestScreen"
screenListeners={{
@@ -48,35 +49,23 @@ export const RequestLayout: React.FC = () => {
title: t('incomingVc'),
headerLeft: () =>
!I18nManager.isRTL && (
<LinearGradient
start={Theme.LinearGradientDirection.start}
end={Theme.LinearGradientDirection.end}
colors={Theme.Colors.GradientColorsLight}
style={Theme.Styles.BackButtonBgGradient}>
<HeaderBackButton
onPress={() => {
controller.RESET();
}}
style={Theme.Styles.IconContainer}
tintColor={Theme.Colors.Icon}
/>
</LinearGradient>
<HeaderBackButton
onPress={() => {
controller.RESET();
}}
style={Theme.Styles.IconContainer}
tintColor={Theme.Colors.Icon}
/>
),
headerRight: () =>
I18nManager.isRTL && (
<LinearGradient
start={Theme.LinearGradientDirection.start}
end={Theme.LinearGradientDirection.end}
colors={Theme.Colors.GradientColorsLight}
style={Theme.Styles.BackButtonBgGradient}>
<HeaderBackButton
onPress={() => {
controller.RESET();
}}
style={Theme.Styles.IconContainer}
tintColor={Theme.Colors.Icon}
/>
</LinearGradient>
<HeaderBackButton
onPress={() => {
controller.RESET();
}}
style={Theme.Styles.IconContainer}
tintColor={Theme.Colors.Icon}
/>
),
}}
/>
@@ -88,35 +77,23 @@ export const RequestLayout: React.FC = () => {
title: t('receiveCard'),
headerLeft: () =>
!I18nManager.isRTL && (
<LinearGradient
start={Theme.LinearGradientDirection.start}
end={Theme.LinearGradientDirection.end}
colors={Theme.Colors.GradientColorsLight}
style={Theme.Styles.BackButtonBgGradient}>
<HeaderBackButton
onPress={() => {
controller.GOTO_HOME();
}}
style={Theme.Styles.IconContainer}
tintColor={Theme.Colors.Icon}
/>
</LinearGradient>
<HeaderBackButton
onPress={() => {
controller.GOTO_HOME();
}}
style={Theme.Styles.IconContainer}
tintColor={Theme.Colors.Icon}
/>
),
headerRight: () =>
I18nManager.isRTL && (
<LinearGradient
start={Theme.LinearGradientDirection.start}
end={Theme.LinearGradientDirection.end}
colors={Theme.Colors.GradientColorsLight}
style={Theme.Styles.BackButtonBgGradient}>
<HeaderBackButton
onPress={() => {
controller.GOTO_HOME();
}}
style={Theme.Styles.IconContainer}
tintColor={Theme.Colors.Icon}
/>
</LinearGradient>
<HeaderBackButton
onPress={() => {
controller.GOTO_HOME();
}}
style={Theme.Styles.IconContainer}
tintColor={Theme.Colors.Icon}
/>
),
}}
/>

5
screens/Request/RequestScreen.tsx
View File

@@ -13,7 +13,6 @@ import {BOTTOM_TAB_ROUTES} from '../../routes/routesConstants';
import {ProgressingModal} from '../../components/ProgressingModal';
import {isIOS} from '../../shared/constants';
import testIDProps from '../../shared/commonUtil';
import {BannerNotificationContainer} from '../../components/BannerNotificationContainer';
type RequestStackParamList = {
RequestScreen: undefined;
@@ -46,9 +45,9 @@ export const RequestScreen: React.FC = () => {
return (
<Column
fill
padding="24"
align="space-between"
backgroundColor={Theme.Colors.lightGreyBackgroundColor}>
<BannerNotificationContainer />
{loadQRCode()}
{controller.isMinimumStorageLimitReached && (
<ErrorMessageOverlay
@@ -79,7 +78,7 @@ export const RequestScreen: React.FC = () => {
) {
return (
<React.Fragment>
<Column align="flex-end" fill padding="24">
<Column align="flex-end" fill>
{controller.isWaitingForConnection && <SharingQR {...props} />}
<StatusMessage {...props} />
</Column>

22
screens/Scan/ScanLayoutController.ts
View File

@@ -60,12 +60,15 @@ import {
} from '../../machines/openID4VP/openID4VPSelectors';
import {OpenID4VPEvents} from '../../machines/openID4VP/openID4VPMachine';
import {selectShareableVcsMetadata} from '../../machines/VerifiableCredential/VCMetaMachine/VCMetaSelectors';
import { useTabBarVisibility } from '../../shared/hooks/useTabBarVisibility';
type ScanLayoutNavigation = NavigationProp<
ScanStackParamList & MainBottomTabParamList
>;
const changeTabBarVisible = (visible: string) => {
Theme.BottomTabBarStyle.tabBarStyle.display = visible;
};
// TODO: refactor
// eslint-disable-next-line sonarjs/cognitive-complexity
export function useScanLayout() {
@@ -74,7 +77,6 @@ export function useScanLayout() {
const scanService = appService.children.get('scan')!!;
const openID4VPService = scanService.getSnapshot().context.OpenId4VPRef;
const navigation = useNavigation<ScanLayoutNavigation>();
const {showTabBar, hideTabBar} = useTabBarVisibility();
const isLocationDisabled = useSelector(scanService, selectIsLocationDisabled);
const isLocationDenied = useSelector(scanService, selectIsLocationDenied);
@@ -114,14 +116,14 @@ export function useScanLayout() {
const onRetry = () => scanService.send(ScanEvents.RETRY());
const GOTO_HOME = () => {
scanService.send(ScanEvents.DISMISS());
showTabBar();
changeTabBarVisible('flex');
setTimeout(() => {
navigation.navigate(BOTTOM_TAB_ROUTES.home);
}, 1);
};
const GOTO_HISTORY = () => {
scanService.send(ScanEvents.GOTO_HISTORY());
showTabBar();
changeTabBarVisible('flex');
navigation.navigate(BOTTOM_TAB_ROUTES.history);
};
const RETRY_VERIFICATION = () => {
@@ -316,26 +318,26 @@ export function useScanLayout() {
appService.send(APP_EVENTS.RESET_AUTHORIZATION_REQUEST());
}
} else if (isQrLoginDoneViaDeeplink) {
showTabBar();
changeTabBarVisible('flex');
navigation.navigate(BOTTOM_TAB_ROUTES.home);
} else if (isDone) {
showTabBar();
changeTabBarVisible('flex');
navigation.navigate(BOTTOM_TAB_ROUTES.home);
} else if (
isReviewing &&
flowType === VCShareFlowType.SIMPLE_SHARE &&
!isAccepted
) {
hideTabBar();
changeTabBarVisible('none');
navigation.navigate(SCAN_ROUTES.SendVcScreen);
} else if (openID4VPFlowType === VCShareFlowType.OPENID4VP) {
hideTabBar();
changeTabBarVisible('none');
navigation.navigate(SCAN_ROUTES.SendVPScreen);
} else if (isScanning) {
showTabBar();
changeTabBarVisible('flex');
navigation.navigate(SCAN_ROUTES.ScanScreen);
} else if (isQrLoginDone) {
showTabBar();
changeTabBarVisible('flex');
navigation.navigate(BOTTOM_TAB_ROUTES.history);
}
}, [

2
screens/Scan/SendVPScreen.tsx
View File

@@ -340,7 +340,7 @@ export const SendVPScreen: React.FC<ScanLayoutProps> = props => {
<Text
style={{
color: Theme.Colors.Icon,
fontFamily: 'Montserrat_600SemiBold',
fontFamily: 'Inter_600SemiBold',
}}
onPress={
areAllVcsChecked

8
screens/Scan/SendVPScreenController.ts
View File

@@ -49,10 +49,13 @@ import {ActivityLogEvents} from '../../machines/activityLog';
import {VPShareActivityLog} from '../../components/VPShareActivityLogEvent';
import {isIOS} from '../../shared/constants';
import { getFaceAttribute } from '../../components/VC/common/VCUtils';
import { useTabBarVisibility } from '../../shared/hooks/useTabBarVisibility';
type MyVcsTabNavigation = NavigationProp<RootRouteProps>;
const changeTabBarVisible = (visible: string) => {
Theme.BottomTabBarStyle.tabBarStyle.display = visible;
};
export function useSendVPScreen() {
const {t} = useTranslation('SendVPScreen');
const {appService} = useContext(GlobalContext);
@@ -61,7 +64,6 @@ export function useSendVPScreen() {
const activityLogService = appService.children.get('activityLog')!!;
const navigation = useNavigation<MyVcsTabNavigation>();
const openID4VPService = scanService.getSnapshot().context.OpenId4VPRef;
const {showTabBar} = useTabBarVisibility();
// input descriptor id to VCs mapping
const [inputDescriptorIdToSelectedVcKeys, setInputDescriptorIdToSelectedVcKeys] = useState<Record<string, [string]>>(
{},
@@ -272,7 +274,7 @@ export function useSendVPScreen() {
scanService.send(ScanEvents.RESET());
setTimeout(() => {
navigation.navigate(BOTTOM_TAB_ROUTES.home, {screen: 'HomeScreen'});
showTabBar();
changeTabBarVisible('flex');
}, 0);
},
SELECT_VC_ITEM:

8
screens/Scan/SendVcScreenController.ts
View File

@@ -23,16 +23,18 @@ import {RootRouteProps} from '../../routes';
import {BOTTOM_TAB_ROUTES} from '../../routes/routesConstants';
import {VCItemMachine} from '../../machines/VerifiableCredential/VCItemMachine/VCItemMachine';
import {Theme} from '../../components/ui/styleUtils';
import { useTabBarVisibility } from '../../shared/hooks/useTabBarVisibility';
type MyVcsTabNavigation = NavigationProp<RootRouteProps>;
const changeTabBarVisible = (visible: string) => {
Theme.BottomTabBarStyle.tabBarStyle.display = visible;
};
export function useSendVcScreen() {
const {appService} = useContext(GlobalContext);
const scanService = appService.children.get('scan')!!;
const vcMetaService = appService.children.get('vcMeta')!!;
const navigation = useNavigation<MyVcsTabNavigation>();
const {showTabBar} = useTabBarVisibility();
const [selectedIndex, setSelectedIndex] = useState<number>(null);
@@ -73,7 +75,7 @@ export function useSendVcScreen() {
RETRY_VERIFICATION: () => scanService.send(ScanEvents.RETRY_VERIFICATION()),
GO_TO_HOME: () => {
navigation.navigate(BOTTOM_TAB_ROUTES.home, {screen: 'HomeScreen'});
showTabBar();
changeTabBarVisible('flex');
},
SELECT_VC_ITEM:
(index: number) => (vcRef: ActorRefFrom<typeof VCItemMachine>) => {

164
screens/Settings/AboutInji.tsx
View File

@@ -60,93 +60,91 @@ export const AboutInji: React.FC<AboutInjiProps> = ({appId}) => {
onDismiss={() => {
setShowAboutInji(!showAboutInji);
}}>
<View style={{position: 'relative', flex: 1}}>
<BannerNotificationContainer />
<LinearGradient
colors={Theme.Colors.GradientColorsLight}
start={Theme.LinearGradientDirection.start}
end={Theme.LinearGradientDirection.end}>
<Row
testID="appID"
crossAlign="flex-start"
style={Theme.Styles.primaryRow}>
<Row>
<Text
weight="semibold"
style={Theme.AboutInjiScreenStyle.appIdTitleStyle}>
{t('appID')}
</Text>
<Text
weight="semibold"
style={Theme.AboutInjiScreenStyle.appIdTextStyle}>
{I18nManager.isRTL ? appId : ' : ' + appId}
</Text>
</Row>
<CopyButton content={appId} />
</Row>
</LinearGradient>
<Column
align="space-between"
style={Theme.AboutInjiScreenStyle.containerStyle}>
<Column>
<Text
testID="aboutDetails"
style={Theme.AboutInjiScreenStyle.aboutDetailstextStyle}>
{t('aboutDetails')}
</Text>
<Row
align="space-between"
crossAlign="center"
style={Theme.AboutInjiScreenStyle.innerContainerStyle}>
<Text style={Theme.AboutInjiScreenStyle.moreDetailstextStyle}>
{t('forMoreDetails')}
</Text>
<TouchableOpacity
activeOpacity={1}
onPress={() => {
aboutInjiUrl && Linking.openURL(aboutInjiUrl);
}}>
<Text
testID="clickHere"
color={Theme.Colors.AddIdBtnBg}
style={Theme.AboutInjiScreenStyle.clickHereTextStyle}
weight="bold">
{t('clickHere')}
</Text>
</TouchableOpacity>
</Row>
</Column>
<Column
pY={25}
align="space-between"
crossAlign="center"
style={Theme.Styles.versionContainer}>
<Row style={Theme.AboutInjiScreenStyle.injiVersionContainerStyle}>
<Text
testID="tuvaliVersion"
weight="semibold"
style={Theme.AboutInjiScreenStyle.injiVersionTitle}
color={Theme.Colors.aboutVersion}>
{t('version') + ' : '}
</Text>
<Text
weight="semibold"
style={Theme.AboutInjiScreenStyle.injiVersionText}
color={Theme.Colors.aboutVersion}>
{__InjiVersion.getValue()}
</Text>
</Row>
<View style={Theme.AboutInjiScreenStyle.horizontalLineStyle} />
<BannerNotificationContainer />
<LinearGradient
colors={Theme.Colors.GradientColorsLight}
start={Theme.LinearGradientDirection.start}
end={Theme.LinearGradientDirection.end}>
<Row
testID="appID"
crossAlign="flex-start"
style={Theme.Styles.primaryRow}>
<Row>
<Text
weight="semibold"
style={Theme.AboutInjiScreenStyle.poweredByTextStyle}
color="black">
{t('poweredBy')}
style={Theme.AboutInjiScreenStyle.appIdTitleStyle}>
{t('appID')}
</Text>
</Column>
<Text
weight="semibold"
style={Theme.AboutInjiScreenStyle.appIdTextStyle}>
{I18nManager.isRTL ? appId : ' : ' + appId}
</Text>
</Row>
<CopyButton content={appId} />
</Row>
</LinearGradient>
<Column
align="space-between"
style={Theme.AboutInjiScreenStyle.containerStyle}>
<Column>
<Text
testID="aboutDetails"
style={Theme.AboutInjiScreenStyle.aboutDetailstextStyle}>
{t('aboutDetails')}
</Text>
<Row
align="space-between"
crossAlign="center"
style={Theme.AboutInjiScreenStyle.innerContainerStyle}>
<Text style={Theme.AboutInjiScreenStyle.moreDetailstextStyle}>
{t('forMoreDetails')}
</Text>
<TouchableOpacity
activeOpacity={1}
onPress={() => {
aboutInjiUrl && Linking.openURL(aboutInjiUrl);
}}>
<Text
testID="clickHere"
color={Theme.Colors.AddIdBtnBg}
style={Theme.AboutInjiScreenStyle.clickHereTextStyle}
weight="bold">
{t('clickHere')}
</Text>
</TouchableOpacity>
</Row>
</Column>
</View>
<Column
pY={25}
align="space-between"
crossAlign="center"
style={Theme.Styles.versionContainer}>
<Row style={Theme.AboutInjiScreenStyle.injiVersionContainerStyle}>
<Text
testID="tuvaliVersion"
weight="semibold"
style={Theme.AboutInjiScreenStyle.injiVersionTitle}
color={Theme.Colors.aboutVersion}>
{t('version') + ' : '}
</Text>
<Text
weight="semibold"
style={Theme.AboutInjiScreenStyle.injiVersionText}
color={Theme.Colors.aboutVersion}>
{__InjiVersion.getValue()}
</Text>
</Row>
<View style={Theme.AboutInjiScreenStyle.horizontalLineStyle} />
<Text
weight="semibold"
style={Theme.AboutInjiScreenStyle.poweredByTextStyle}
color="black">
{t('poweredBy')}
</Text>
</Column>
</Column>
</Modal>
</React.Fragment>
);

112
screens/Settings/KeyManagementScreen.tsx
View File

@@ -11,11 +11,17 @@ import {BackButton} from '../../components/ui/backButton/BackButton';
import {Copilot} from '../../components/ui/Copilot';
import {useCopilot} from 'react-native-copilot';
import {useNavigation, useRoute, RouteProp} from '@react-navigation/native';
import { getImpressionEventData, sendImpressionEvent} from '../../shared/telemetry/TelemetryUtils';
import {
getEndEventData,
getImpressionEventData,
sendEndEvent,
sendImpressionEvent,
} from '../../shared/telemetry/TelemetryUtils';
import {TelemetryConstants} from '../../shared/telemetry/TelemetryConstants';
import {SUPPORTED_KEY_TYPES} from '../../shared/constants';
import {SvgImage} from '../../components/ui/svg';
import LinearGradient from 'react-native-linear-gradient';
import { HelpIcon } from '../../components/ui/HelpIcon';
import { SafeAreaView } from 'react-native-safe-area-context';
const {RNSecureKeystoreModule} = NativeModules;
@@ -102,7 +108,6 @@ export const KeyManagementScreen: React.FC<KeyManagementScreenProps> = () => {
};
return (
<SafeAreaView style={{flex: 1, backgroundColor: '#ffffff'}}>
<View
style={{
flex: 1,
@@ -129,61 +134,58 @@ export const KeyManagementScreen: React.FC<KeyManagementScreenProps> = () => {
triggerComponent={ HelpIcon() }
/>
</View>
<View style={{...Theme.KeyManagementScreenStyle.copilotViewStyle, position: "relative"}}>
<BannerNotificationContainer />
<View style={{flex:1}}>
<Copilot
title={t('copilot:keyManagementTitle')}
description={t('copilot:keyManagementDesc')}
order={7}
children={
<DragList
style={Theme.KeyManagementScreenStyle.dragViewStyleSettingsScreen}
scrollEnabled={false}
data={keyOrder}
renderItem={renderItem}
keyExtractor={item => item.value}
onReordered={handleReorder}
/>
}
/>
</View>
<Button
testID="saveKeyOrderingPreference"
type="gradient"
title={t('save')}
onPress={async () => {
const keyOrderMap = convertToKeyValue(keyOrder);
try {
controller.SET_KEY_MANAGEMENT_TOUR_GUIDE_EXPLORED();
await RNSecureKeystoreModule.storeData(
'keyPreference',
JSON.stringify(keyOrderMap),
);
controller.SET_KEY_ORDER_RESPONSE(true);
sendImpressionEvent(
getImpressionEventData(
TelemetryConstants.FlowType.setKeyPriority,
TelemetryConstants.EndEventStatus.success,
),
);
} catch (e) {
sendImpressionEvent(
getImpressionEventData(
TelemetryConstants.FlowType.setKeyPriority,
TelemetryConstants.EndEventStatus.failure,
),
);
controller.SET_KEY_ORDER_RESPONSE(false);
}
}}
styles={{
marginVertical: 30,
}}
<BannerNotificationContainer />
<View style={Theme.KeyManagementScreenStyle.copilotViewStyle}>
<Copilot
title={t('copilot:keyManagementTitle')}
description={t('copilot:keyManagementDesc')}
order={7}
children={
<DragList
style={Theme.KeyManagementScreenStyle.dragViewStyleSettingsScreen}
scrollEnabled={false}
data={keyOrder}
renderItem={renderItem}
keyExtractor={item => item.value}
onReordered={handleReorder}
/>
}
/>
</View>
<Button
testID="saveKeyOrderingPreference"
type="gradient"
title={t('save')}
onPress={async () => {
const keyOrderMap = convertToKeyValue(keyOrder);
try {
controller.SET_KEY_MANAGEMENT_TOUR_GUIDE_EXPLORED();
await RNSecureKeystoreModule.storeData(
'keyPreference',
JSON.stringify(keyOrderMap),
);
controller.SET_KEY_ORDER_RESPONSE(true);
sendImpressionEvent(
getImpressionEventData(
TelemetryConstants.FlowType.setKeyPriority,
TelemetryConstants.EndEventStatus.success,
),
);
} catch (e) {
sendImpressionEvent(
getImpressionEventData(
TelemetryConstants.FlowType.setKeyPriority,
TelemetryConstants.EndEventStatus.failure,
),
);
controller.SET_KEY_ORDER_RESPONSE(false);
}
}}
styles={{
marginVertical: 30,
}}
/>
</View>
</SafeAreaView>
);
};

116
screens/Settings/ReceivedCardsModal.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import {useTranslation} from 'react-i18next';
import {RefreshControl, View} from 'react-native';
import {RefreshControl} from 'react-native';
import {Centered, Column, Text} from '../../components/ui';
import {Icon} from 'react-native-elements';
import {Theme} from '../../components/ui/styleUtils';
@@ -9,7 +9,6 @@ import {ViewVcModal} from '../Home/ViewVcModal';
import {VcItemContainer} from '../../components/VC/VcItemContainer';
import {VCItemContainerFlowType} from '../../shared/Utils';
import {CopilotProvider} from 'react-native-copilot';
import {BannerNotificationContainer} from '../../components/BannerNotificationContainer';
export const ReceivedCardsModal: React.FC<ReceivedCardsProps> = ({
isVisible,
@@ -25,66 +24,63 @@ export const ReceivedCardsModal: React.FC<ReceivedCardsProps> = ({
headerTitle={t('header')}
headerElevation={2}
onDismiss={onDismiss}>
<View style={{position: 'relative', flex: 1}}>
<BannerNotificationContainer />
<Column
scroll
pX={15}
refreshControl={
<RefreshControl
refreshing={controller.isRefreshingVcs}
onRefresh={controller.REFRESH}
/>
}>
<CopilotProvider>
{controller.receivedVcsMetadata.map(vcMetadata => (
<VcItemContainer
key={vcMetadata.getVcKey()}
vcMetadata={vcMetadata}
margin="0 2 8 2"
flow={VCItemContainerFlowType.VC_SHARE}
onPress={controller.VIEW_VC}
/>
))}
</CopilotProvider>
{controller.receivedVcsMetadata.length === 0 && (
<React.Fragment>
<Centered fill>
<Icon
style={{marginBottom: 20}}
size={40}
name="sentiment-dissatisfied"
/>
<Text
testID="noReceivedVcsTitle"
style={{paddingTop: 3}}
align="center"
weight="semibold"
margin="0 0 4 0">
{t('noReceivedVcsTitle')}
</Text>
<Text
testID="noReceivedVcsText"
style={{paddingTop: 3}}
align="center"
color={Theme.Colors.textLabel}>
{t('noReceivedVcsText')}
</Text>
</Centered>
</React.Fragment>
)}
</Column>
{controller.selectedVc && (
<ViewVcModal
isVisible={controller.isViewingVc}
onDismiss={controller.DISMISS_MODAL}
vcItemActor={controller.selectedVc}
activeTab={controller.activeTab}
flow="receivedVc"
<Column
scroll
pX={15}
refreshControl={
<RefreshControl
refreshing={controller.isRefreshingVcs}
onRefresh={controller.REFRESH}
/>
}>
<CopilotProvider>
{controller.receivedVcsMetadata.map(vcMetadata => (
<VcItemContainer
key={vcMetadata.getVcKey()}
vcMetadata={vcMetadata}
margin="0 2 8 2"
flow={VCItemContainerFlowType.VC_SHARE}
onPress={controller.VIEW_VC}
/>
))}
</CopilotProvider>
{controller.receivedVcsMetadata.length === 0 && (
<React.Fragment>
<Centered fill>
<Icon
style={{marginBottom: 20}}
size={40}
name="sentiment-dissatisfied"
/>
<Text
testID="noReceivedVcsTitle"
style={{paddingTop: 3}}
align="center"
weight="semibold"
margin="0 0 4 0">
{t('noReceivedVcsTitle')}
</Text>
<Text
testID="noReceivedVcsText"
style={{paddingTop: 3}}
align="center"
color={Theme.Colors.textLabel}>
{t('noReceivedVcsText')}
</Text>
</Centered>
</React.Fragment>
)}
</View>
</Column>
{controller.selectedVc && (
<ViewVcModal
isVisible={controller.isViewingVc}
onDismiss={controller.DISMISS_MODAL}
vcItemActor={controller.selectedVc}
activeTab={controller.activeTab}
flow="receivedVc"
/>
)}
</Modal>
);
};

21
screens/Settings/SettingScreen.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import {Platform, Pressable, View} from 'react-native';
import {Platform, Pressable} from 'react-native';
import {Icon, ListItem, Switch} from 'react-native-elements';
import {Column, Row, Text} from '../../components/ui';
import {Theme} from '../../components/ui/styleUtils';
@@ -18,9 +18,6 @@ import {SvgImage} from '../../components/ui/svg';
import {DataBackupAndRestore} from './DataBackupAndRestore';
import {BannerNotificationContainer} from '../../components/BannerNotificationContainer';
import {SettingsKeyManagementScreen} from './SettingsKeyManagement';
import SwitchToggle from 'react-native-switch-toggle';
import BiometricIcon from '../../components/BiometricIcon';
import Toggle from '../../components/Toggle';
const LanguageSetting: React.FC = () => {
const {t} = useTranslation('SettingScreen');
@@ -132,7 +129,7 @@ export const SettingScreen: React.FC<
<LanguageSetting />
<ListItem topDivider disabled={!controller.canUseBiometrics}>
<BiometricIcon size={24} />
{SvgImage.fingerprintIcon(24)}
<ListItem.Content>
<ListItem.Title
{...testIDProps('bioUnlock')}
@@ -142,12 +139,18 @@ export const SettingScreen: React.FC<
</Text>
</ListItem.Title>
</ListItem.Content>
<Toggle
<Switch
{...testIDProps('biometricToggle')}
value={controller.isBiometricUnlockEnabled}
onToggle={value => {
handleBiometricToggle(!value);
onValueChange={handleBiometricToggle}
trackColor={{
false: Theme.Colors.switchTrackFalse,
true:
Platform.OS == 'ios'
? Theme.Colors.switchHead
: Theme.Colors.switchTrackTrue,
}}
testID="biometricToggle"
color={Theme.Colors.switchHead}
/>
</ListItem>

18
screens/backupAndRestore/BackupAndRestoreScreen.tsx
View File

@@ -13,7 +13,10 @@ import {ProfileInfo} from '../../shared/CloudBackupAndRestoreUtils';
import {useBackupScreen} from './BackupController';
import {BannerNotificationContainer} from '../../components/BannerNotificationContainer';
import {useBackupRestoreScreen} from '../Settings/BackupRestoreController';
import {getAccountType, getDriveName} from '../../shared/commonUtil';
import {
getAccountType,
getDriveName,
} from '../../shared/commonUtil';
import {HelpScreen} from '../../components/HelpScreen';
import {isIOS} from '../../shared/constants';
import {HelpIcon} from '../../components/ui/HelpIcon';
@@ -208,23 +211,22 @@ const BackupAndRestoreScreen: React.FC<BackupAndRestoreProps> = props => {
<HelpScreen source={'BackUp'} triggerComponent={HelpIcon()} />
}
onDismiss={props.onBackPress}>
<BannerNotificationContainer />
<View
style={{
backgroundColor: Theme.Colors.lightGreyBackgroundColor,
flex: 1,
position: "relative"
}}>
<BannerNotificationContainer />
{props.isSigningIn || backupController.isLoadingBackupDetails ? (
<Column fill align="center" crossAlign="center">
<LoaderAnimation testID="backupAndRestoreScreen" />
</Column>
) : (
<ScrollView>
{LastBackupSection}
{AccountSection}
{RestoreSection}
</ScrollView>
<ScrollView>
{LastBackupSection}
{AccountSection}
{RestoreSection}
</ScrollView>
)}
</View>
</Modal>

18
shared/hooks/useFont.ts
View File

@@ -1,17 +1,17 @@
import {
Montserrat_400Regular,
Montserrat_500Medium,
Montserrat_600SemiBold,
Montserrat_700Bold,
Inter_400Regular,
Inter_500Medium,
Inter_600SemiBold,
Inter_700Bold,
useFonts,
} from '@expo-google-fonts/montserrat';
} from '@expo-google-fonts/inter';
export function useFont() {
const [hasFontsLoaded] = useFonts({
Montserrat_400Regular,
Montserrat_500Medium,
Montserrat_600SemiBold,
Montserrat_700Bold,
Inter_400Regular,
Inter_500Medium,
Inter_600SemiBold,
Inter_700Bold,
});
return hasFontsLoaded;

35
shared/hooks/useTabBarVisibility.ts
View File

@@ -1,35 +0,0 @@
import { useNavigation } from '@react-navigation/native';
import { useCallback } from 'react';
import { Theme } from '../../components/ui/styleUtils';
export function useTabBarVisibility() {
const navigation = useNavigation();
const hideTabBar = useCallback(() => {
navigation.setOptions({
tabBarStyle: { display: 'none' }
});
}, [navigation]);
const showTabBar = useCallback(() => {
navigation.setOptions({
tabBarShowLabel: true,
tabBarActiveTintColor: Theme.Colors.IconBg,
tabBarLabelStyle: {
fontSize: 12,
fontFamily: 'Montserrat_600SemiBold',
},
tabBarStyle: {
height: 75,
paddingHorizontal: 10,
},
tabBarItemStyle: {
height: 83,
padding: 11,
},
});
}, [navigation]);
return { hideTabBar, showTabBar };
}