github/inji-wallet
1
1
Fork 0
mirror of https://github.com/mosip/inji-wallet.git synced 2026-01-09 21:48:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

Injimob-3622-develop: Revert all the old branding changes (#2159)

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 old branding changes and add new changes #2150

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

* [INJIMOB-3651]: Update all the test snapshots

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

---------

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

28
App.tsx
View File

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

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"/> <rect id="Rectangle_6977" data-name="Rectangle 6977" width="18" height="18" transform="translate(0.164 0.164)" fill="none"/>
</g> </g>
</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" 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)"/> <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> </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> </defs>
<g id="pin_icon" transform="translate(-318.347 -147.347)"> <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 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 width="26" height="26" rx="6" stroke="none"/>
<rect x="0.5" y="0.5" width="25" height="25" rx="5.5" fill="none"/> <rect x="0.5" y="0.5" width="25" height="25" rx="5.5" fill="none"/>
</g> </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> </defs>
<g id="Group_57608" data-name="Group 57608" transform="translate(-88.75 -189.75)"> <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="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> </g>
</svg> </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"> <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_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="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 width="18" height="18" rx="4" stroke="none"/>
<rect x="1" y="1" width="16" height="16" rx="3" fill="none"/> <rect x="1" y="1" width="16" height="16" rx="3" fill="none"/>
</g> </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 React from 'react';
import {Pressable, StatusBar, View} from 'react-native'; import {Pressable, View} from 'react-native';
import {Column, Row, Text} from './ui'; import {Column, Row, Text} from './ui';
import {Theme} from './ui/styleUtils'; import {Theme} from './ui/styleUtils';
import {Icon} from 'react-native-elements'; import {Icon} from 'react-native-elements';
import testIDProps from '../shared/commonUtil'; 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 => { export const BannerNotification: React.FC<BannerNotificationProps> = props => {
return ( return (
<View {...testIDProps(props.testId)} style={Theme.BannerStyles.wrapper}> <View {...testIDProps(props.testId)}>
<Row <Row
style={[Theme.BannerStyles.container, Theme.BannerStyles[props.type]]}> style={[Theme.BannerStyles.container, Theme.BannerStyles[props.type]]}>
<Row fill> <Column fill>
{props.type === BannerStatusType.SUCCESS && <SuccessToastIcon />}
{props.type === BannerStatusType.ERROR && <ErrorToastIcon />}
{props.type === BannerStatusType.IN_PROGRESS && <InfoToastIcon />}
<Text <Text
testID={`${props.testId}Text`} testID={`${props.testId}Text`}
color={Theme.Colors.PopupText} color={Theme.Colors.whiteText}
weight="semibold" weight="semibold"
style={Theme.BannerStyles.text}> style={Theme.BannerStyles.text}>
{props.message} {props.message}
</Text> </Text>
</Row> </Column>
<Column> <Column>
<Pressable <Pressable
style={Theme.BannerStyles.dismiss} style={Theme.BannerStyles.dismiss}
{...testIDProps('close')} {...testIDProps('close')}
onPress={props.onClosePress}> onPress={props.onClosePress}>
<Icon name="close" color={Theme.Colors.PopupText} size={19} /> <Icon name="close" color={Theme.Colors.whiteText} size={19} />
</Pressable> </Pressable>
</Column> </Column>
</Row> </Row>

14
components/BannerNotificationContainer.tsx
View File

@@ -33,11 +33,11 @@ export const BannerNotificationContainer: React.FC<
bannerNotificationController.verificationStatus || null; bannerNotificationController.verificationStatus || null;
return ( return (
<View style={Theme.BannerStyles.bannerStackContainer}> <>
<BackupAndRestoreBannerNotification /> <BackupAndRestoreBannerNotification />
{settingsScreenController.isKeyOrderSet === true && ( {settingsScreenController.isKeyOrderSet === true && (
<View> <View style={Theme.BannerStyles.topBanner}>
<BannerNotification <BannerNotification
type={BannerStatusType.SUCCESS} type={BannerStatusType.SUCCESS}
message={t('keyPreferenceSuccess')} message={t('keyPreferenceSuccess')}
@@ -49,7 +49,7 @@ export const BannerNotificationContainer: React.FC<
)} )}
{settingsScreenController.isKeyOrderSet === false && ( {settingsScreenController.isKeyOrderSet === false && (
<View> <View style={Theme.BannerStyles.topBanner}>
<BannerNotification <BannerNotification
type={BannerStatusType.ERROR} type={BannerStatusType.ERROR}
message={t('keyPreferenceError')} message={t('keyPreferenceError')}
@@ -61,7 +61,7 @@ export const BannerNotificationContainer: React.FC<
)} )}
{WalletBindingSuccess && ( {WalletBindingSuccess && (
<View> <View style={Theme.BannerStyles.topBanner}>
<BannerNotification <BannerNotification
type={BannerStatusType.SUCCESS} type={BannerStatusType.SUCCESS}
message={t('activated')} message={t('activated')}
@@ -75,7 +75,7 @@ export const BannerNotificationContainer: React.FC<
)} )}
{reverificationSuccessObject.status && ( {reverificationSuccessObject.status && (
<View> <View style={Theme.BannerStyles.topBanner}>
<BannerNotification <BannerNotification
type={BannerStatusType.SUCCESS} type={BannerStatusType.SUCCESS}
message={t( message={t(
@@ -92,7 +92,7 @@ export const BannerNotificationContainer: React.FC<
)} )}
{showQuickShareSuccessBanner && ( {showQuickShareSuccessBanner && (
<View> <View style={Theme.BannerStyles.topBanner}>
<BannerNotification <BannerNotification
type={BannerStatusType.SUCCESS} type={BannerStatusType.SUCCESS}
message={rt('status.accepted.message')} message={rt('status.accepted.message')}
@@ -156,7 +156,7 @@ export const BannerNotificationContainer: React.FC<
testId={'downloadingVcSuccessPopup'} 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 React, {useEffect, useRef, useState} from 'react';
import {useTranslation} from 'react-i18next'; 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 {Modal} from './ui/Modal';
import {Column, Text} from './ui'; import {Column, Text} from './ui';
import {Theme} from './ui/styleUtils'; import {Theme} from './ui/styleUtils';
import {BannerNotificationContainer} from './BannerNotificationContainer'; import {BannerNotificationContainer} from './BannerNotificationContainer';
import getAllConfigurations from '../shared/api'; import getAllConfigurations from '../shared/api';
import {SafeAreaView} from "react-native-safe-area-context";
export const HelpScreen: React.FC<HelpScreenProps> = props => { export const HelpScreen: React.FC<HelpScreenProps> = props => {
const {t} = useTranslation('HelpScreen'); const {t} = useTranslation('HelpScreen');
@@ -363,8 +362,8 @@ export const HelpScreen: React.FC<HelpScreenProps> = props => {
onDismiss={() => { onDismiss={() => {
setShowHelpPage(!showHelpPage); setShowHelpPage(!showHelpPage);
}}> }}>
<SafeAreaView style={{flex: 1, position: "relative"}}> <BannerNotificationContainer />
<BannerNotificationContainer /> <SafeAreaView style={{flex: 1}}>
<Column fill padding="10" align="space-between"> <Column fill padding="10" align="space-between">
<FlatList <FlatList
ref={listingRef} ref={listingRef}

40
components/KebabPopUp.tsx
View File

@@ -1,20 +1,20 @@
import React from 'react'; import React from 'react';
import { Icon, ListItem, Overlay } from 'react-native-elements'; import {Icon, ListItem, Overlay} from 'react-native-elements';
import { Theme } from '../components/ui/styleUtils'; import {Theme} from '../components/ui/styleUtils';
import { Column, Row, Text } from '../components/ui'; import {Column, Row, Text} from '../components/ui';
import { View } from 'react-native'; import {View} from 'react-native';
import { useKebabPopUp } from './KebabPopUpController'; import {useKebabPopUp} from './KebabPopUpController';
import { ActorRefFrom } from 'xstate'; import {ActorRefFrom} from 'xstate';
import { useTranslation } from 'react-i18next'; import {useTranslation} from 'react-i18next';
import { FlatList } from 'react-native-gesture-handler'; import {FlatList} from 'react-native-gesture-handler';
import { VCMetadata } from '../shared/VCMetadata'; import {VCMetadata} from '../shared/VCMetadata';
import testIDProps from '../shared/commonUtil'; import testIDProps from '../shared/commonUtil';
import { getKebabMenuOptions } from './kebabMenuUtils'; import {getKebabMenuOptions} from './kebabMenuUtils';
import { VCItemMachine } from '../machines/VerifiableCredential/VCItemMachine/VCItemMachine'; import {VCItemMachine} from '../machines/VerifiableCredential/VCItemMachine/VCItemMachine';
export const KebabPopUp: React.FC<KebabPopUpProps> = props => { export const KebabPopUp: React.FC<KebabPopUpProps> = props => {
const controller = useKebabPopUp(props); const controller = useKebabPopUp(props);
const { t } = useTranslation('HomeScreenKebabPopUp'); const {t} = useTranslation('HomeScreenKebabPopUp');
return ( return (
<Column> <Column>
@@ -52,14 +52,14 @@ export const KebabPopUp: React.FC<KebabPopUpProps> = props => {
<FlatList <FlatList
data={getKebabMenuOptions(props)} data={getKebabMenuOptions(props)}
renderItem={({ item }) => ( renderItem={({item}) => (
<ListItem topDivider onPress={item.onPress}> <ListItem topDivider onPress={item.onPress}>
<Row crossAlign="center" style={{ flex: 1 }}> <Row crossAlign="center" style={{flex: 1}}>
<View style={{ width: 25, alignItems: 'center' }}> <View style={{width: 25, alignItems: 'center'}}>
{item.icon} {item.icon}
</View> </View>
<Text <Text
style={{fontFamily: 'Montserrat_600SemiBold'}} style={{fontFamily: 'Inter_600SemiBold'}}
color={ color={
item.testID === 'removeFromWallet' item.testID === 'removeFromWallet'
? Theme.Colors.warningText ? Theme.Colors.warningText
@@ -69,7 +69,13 @@ export const KebabPopUp: React.FC<KebabPopUpProps> = props => {
margin="0 0 0 10"> margin="0 0 0 10">
{item.label} {item.label}
</Text> </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> </Row>
</ListItem> </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 <Text
testID="offlineAuthDisabledHeader" testID="offlineAuthDisabledHeader"
style={{ style={{
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 14, fontSize: 14,
}} }}
color={Theme.Colors.statusLabel} color={Theme.Colors.statusLabel}
@@ -312,7 +312,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
<Text <Text
testID="offlineAuthDisabledMessage" testID="offlineAuthDisabledMessage"
style={{ style={{
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
fontSize: 12, fontSize: 12,
}} }}
color={Theme.Colors.statusMessage} color={Theme.Colors.statusMessage}
@@ -345,7 +345,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
testID="profileAuthenticated" testID="profileAuthenticated"
color={Theme.Colors.statusLabel} color={Theme.Colors.statusLabel}
style={{ style={{
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 14, fontSize: 14,
}} }}
margin={'0 18 0 0'}> margin={'0 18 0 0'}>
@@ -379,7 +379,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
style={{ style={{
color: '#007AFF', color: '#007AFF',
fontSize: 16, fontSize: 16,
fontFamily: 'Montserrat_500Medium', fontFamily: 'Inter_500Medium',
}}> }}>
{t('View Shareable Information')} {t('View Shareable Information')}
</Text> </Text>

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

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

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

@@ -1,56 +1,30 @@
import React from 'react'; import React from "react";
import {useTranslation} from 'react-i18next'; import { useTranslation } from "react-i18next";
import {View} from 'react-native'; import { View } from "react-native";
import {Column, Row} from '../../ui'; import { Column } from "../../ui";
import {Theme} from '../../ui/styleUtils'; import { Theme } from "../../ui/styleUtils";
import {Text} from '../../ui'; import { Text } from "../../ui";
import {VC_STATUS_KEYS} from './VCUtils'; 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,
};
export const StatusTooltipContent = () => { export const StatusTooltipContent = () => {
const {t} = useTranslation('ViewVcModal'); const { t } = useTranslation('ViewVcModal');
return ( return (
<Column> <Column align="center" style={{marginTop:20}}>
{VC_STATUS_KEYS.map((key, index) => { {VC_STATUS_KEYS.map(key => (
const IconComponent = statusIcons[key]; <View key={key} style={{ marginBottom: 20 }}>
const isLast = index === VC_STATUS_KEYS.length - 1; <Text weight="semibold">{t(`statusToolTipContent.${key}.title`)}</Text>
return ( <Text
<Row key={key} style={{width: '100%'}}> weight="regular"
<View style={{marginRight: 6}}> style={[
<IconComponent width={20} height={20} /> Theme.Styles.tooltipContentDescription,
</View> { marginTop: 3 },
<View ]}>
style={{ {t(`statusToolTipContent.${key}.description`)}
marginBottom: isLast ? 0 : 15, </Text>
marginTop: 1, </View>
flexShrink: 1, ))}
}}> </Column>
<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>
);
};

25
components/VCVerification.tsx
View File

@@ -1,21 +1,20 @@
import React from 'react'; import React from 'react';
import { View } from 'react-native'; import {View} from 'react-native';
import testIDProps from '../shared/commonUtil'; import testIDProps from '../shared/commonUtil';
import { Display } from './VC/common/VCUtils'; import {Display} from './VC/common/VCUtils';
import VerifiedIcon from './VerifiedIcon'; import VerifiedIcon from './VerifiedIcon';
import PendingIcon from './PendingIcon'; import PendingIcon from './PendingIcon';
import { Row, Text } from './ui'; import {Row, Text} from './ui';
import { Theme } from './ui/styleUtils'; import {Theme} from './ui/styleUtils';
import { useTranslation } from 'react-i18next'; import {useTranslation} from 'react-i18next';
import { VCMetadata } from '../shared/VCMetadata'; import {VCMetadata} from '../shared/VCMetadata';
import { formattedDate } from '../shared/openId4VCI/Utils';
export const VCVerification: React.FC<VCVerificationProps> = ({ export const VCVerification: React.FC<VCVerificationProps> = ({
vcMetadata, vcMetadata,
display, display,
showLastChecked = true, showLastChecked = true,
}) => { }) => {
const { t } = useTranslation('VcDetails'); const {t} = useTranslation('VcDetails');
let statusText: string; let statusText: string;
let statusIcon: JSX.Element; let statusIcon: JSX.Element;
@@ -45,7 +44,7 @@ export const VCVerification: React.FC<VCVerificationProps> = ({
paddingVertical: 6, paddingVertical: 6,
}}> }}>
{/* First Row: Status Icon + Text */} {/* First Row: Status Icon + Text */}
<View style={{ flexDirection: 'row', alignItems: 'center' }}> <View style={{flexDirection: 'row', alignItems: 'center'}}>
{statusIcon} {statusIcon}
<Text <Text
testID="verificationStatus" testID="verificationStatus"
@@ -56,13 +55,13 @@ export const VCVerification: React.FC<VCVerificationProps> = ({
</View> </View>
{showLastChecked && vcMetadata.lastKnownStatusTimestamp && ( {showLastChecked && vcMetadata.lastKnownStatusTimestamp && (
<View style={{ marginTop: 4 }}> <View style={{marginTop: 4}}>
<Text <Text
testID="lastCheckedLabel" testID="lastCheckedLabel"
color={display.getTextColor(Theme.Colors.Details)} color={display.getTextColor(Theme.Colors.Details)}
style={[ style={[
Theme.Styles.verificationStatus, Theme.Styles.verificationStatus,
{ fontFamily: 'Montserrat_400Regular' }, {fontFamily: 'Inter_400'},
]}> ]}>
{t('lastChecked')} {t('lastChecked')}
</Text> </Text>
@@ -71,9 +70,9 @@ export const VCVerification: React.FC<VCVerificationProps> = ({
color={display.getTextColor(Theme.Colors.Details)} color={display.getTextColor(Theme.Colors.Details)}
style={[ style={[
Theme.Styles.verificationStatus, Theme.Styles.verificationStatus,
{fontFamily: 'Montserrat_400Regular'}, {fontFamily: 'Inter_400'},
]}> ]}>
{formattedDate(vcMetadata.lastKnownStatusTimestamp)} {new Date(vcMetadata.lastKnownStatusTimestamp).toLocaleString()}
</Text> </Text>
</View> </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, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -182,7 +182,7 @@ exports[`AccountInformation Component should match snapshot with different email
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -334,7 +334,7 @@ exports[`AccountInformation Component should match snapshot with different pictu
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -387,7 +387,7 @@ exports[`AccountInformation Component should match snapshot with different pictu
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -539,7 +539,7 @@ exports[`AccountInformation Component should match snapshot with email and pictu
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -592,7 +592,7 @@ exports[`AccountInformation Component should match snapshot with email and pictu
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -744,7 +744,7 @@ exports[`AccountInformation Component should match snapshot with long email 1`]
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -797,7 +797,7 @@ exports[`AccountInformation Component should match snapshot with long email 1`]
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,

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

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

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

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

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, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 15, "fontSize": 15,
}, },
null, null,
@@ -156,7 +156,7 @@ exports[`CopyButton Component should match snapshot with long content 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 15, "fontSize": 15,
}, },
null, null,
@@ -245,7 +245,7 @@ exports[`CopyButton Component should match snapshot with special characters 1`]
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 15, "fontSize": 15,
}, },
null, 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, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 15, "fontSize": 15,
"justifyContent": "center", "justifyContent": "center",
}, },
@@ -42,7 +42,7 @@ exports[`DualMessageOverlay Component should match snapshot with both buttons 1`
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 15, "fontSize": 15,
"justifyContent": "center", "justifyContent": "center",
}, },
@@ -103,7 +103,7 @@ exports[`DualMessageOverlay Component should match snapshot with only ignore but
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 15, "fontSize": 15,
"justifyContent": "center", "justifyContent": "center",
}, },
@@ -139,7 +139,7 @@ exports[`DualMessageOverlay Component should match snapshot with only try again
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 15, "fontSize": 15,
"justifyContent": "center", "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, null,
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"justifyContent": "space-between", "justifyContent": "space-between",
}, },
null, null,
@@ -69,7 +69,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 15, "fontSize": 15,
"justifyContent": "center", "justifyContent": "center",
}, },
@@ -132,7 +132,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -147,7 +147,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
}, },
null, null,
{ {
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
}, },
] ]
} }
@@ -201,7 +201,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
{ {
@@ -218,7 +218,7 @@ exports[`KebabPopUp Component should match snapshot when not visible 1`] = `
}, },
null, null,
{ {
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
}, },
] ]
} }
@@ -280,7 +280,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
}, },
null, null,
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"justifyContent": "space-between", "justifyContent": "space-between",
}, },
null, null,
@@ -298,7 +298,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 15, "fontSize": 15,
"justifyContent": "center", "justifyContent": "center",
}, },
@@ -361,7 +361,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -376,7 +376,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
}, },
null, 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, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
{ {
@@ -447,7 +447,7 @@ exports[`KebabPopUp Component should match snapshot with VC that has image 1`] =
}, },
null, null,
{ {
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
}, },
] ]
} }
@@ -509,7 +509,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
}, },
null, null,
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"justifyContent": "space-between", "justifyContent": "space-between",
}, },
null, null,
@@ -527,7 +527,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 15, "fontSize": 15,
"justifyContent": "center", "justifyContent": "center",
}, },
@@ -590,7 +590,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -605,7 +605,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
}, },
null, null,
{ {
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
}, },
] ]
} }
@@ -659,7 +659,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
{ {
@@ -676,7 +676,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon color 1`] =
}, },
null, null,
{ {
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
}, },
] ]
} }
@@ -741,7 +741,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
}, },
null, null,
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"justifyContent": "space-between", "justifyContent": "space-between",
}, },
null, null,
@@ -759,7 +759,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 15, "fontSize": 15,
"justifyContent": "center", "justifyContent": "center",
}, },
@@ -822,7 +822,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -837,7 +837,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
}, },
null, null,
{ {
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
}, },
] ]
} }
@@ -891,7 +891,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
{ {
@@ -908,7 +908,7 @@ exports[`KebabPopUp Component should match snapshot with custom icon component 1
}, },
null, null,
{ {
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
}, },
] ]
} }
@@ -970,7 +970,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
}, },
null, null,
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"justifyContent": "space-between", "justifyContent": "space-between",
}, },
null, null,
@@ -988,7 +988,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 15, "fontSize": 15,
"justifyContent": "center", "justifyContent": "center",
}, },
@@ -1051,7 +1051,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -1066,7 +1066,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
}, },
null, null,
{ {
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
}, },
] ]
} }
@@ -1120,7 +1120,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
{ {
@@ -1137,7 +1137,7 @@ exports[`KebabPopUp Component should match snapshot with default icon 1`] = `
}, },
null, 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, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -136,7 +136,7 @@ exports[`Passcode Component should match snapshot with both message and error 1`
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
{ {
@@ -243,7 +243,7 @@ exports[`Passcode Component should match snapshot with custom message 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -294,7 +294,7 @@ exports[`Passcode Component should match snapshot with custom message 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
{ {
@@ -399,7 +399,7 @@ exports[`Passcode Component should match snapshot with default props 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -450,7 +450,7 @@ exports[`Passcode Component should match snapshot with default props 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
{ {
@@ -555,7 +555,7 @@ exports[`Passcode Component should match snapshot with error message 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, null,
@@ -606,7 +606,7 @@ exports[`Passcode Component should match snapshot with error message 1`] = `
"lineHeight": 18, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "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]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#F37321", "borderColor": "#951F6F",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 29, "fontSize": 29,
"height": 50, "height": 50,
"margin": 8, "margin": 8,
@@ -61,14 +61,14 @@ exports[`PinInput Component should match snapshot with 4 digit PIN 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -87,14 +87,14 @@ exports[`PinInput Component should match snapshot with 4 digit PIN 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -113,14 +113,14 @@ exports[`PinInput Component should match snapshot with 4 digit PIN 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -169,14 +169,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#F37321", "borderColor": "#951F6F",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 29, "fontSize": 29,
"height": 50, "height": 50,
"margin": 8, "margin": 8,
@@ -194,14 +194,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -220,14 +220,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -246,14 +246,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -272,14 +272,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -298,14 +298,14 @@ exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -355,14 +355,14 @@ exports[`PinInput Component should match snapshot with custom testID 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#F37321", "borderColor": "#951F6F",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 29, "fontSize": 29,
"height": 50, "height": 50,
"margin": 8, "margin": 8,
@@ -380,14 +380,14 @@ exports[`PinInput Component should match snapshot with custom testID 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -406,14 +406,14 @@ exports[`PinInput Component should match snapshot with custom testID 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -432,14 +432,14 @@ exports[`PinInput Component should match snapshot with custom testID 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -488,14 +488,14 @@ exports[`PinInput Component should match snapshot with onChange handler 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#F37321", "borderColor": "#951F6F",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 29, "fontSize": 29,
"height": 50, "height": 50,
"margin": 8, "margin": 8,
@@ -513,14 +513,14 @@ exports[`PinInput Component should match snapshot with onChange handler 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -539,14 +539,14 @@ exports[`PinInput Component should match snapshot with onChange handler 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -565,14 +565,14 @@ exports[`PinInput Component should match snapshot with onChange handler 1`] = `
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -621,14 +621,14 @@ exports[`PinInput Component should match snapshot with onDone and autosubmit 1`]
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#F37321", "borderColor": "#951F6F",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_700Bold", "fontFamily": "Inter_700Bold",
"fontSize": 29, "fontSize": 29,
"height": 50, "height": 50,
"margin": 8, "margin": 8,
@@ -646,14 +646,14 @@ exports[`PinInput Component should match snapshot with onDone and autosubmit 1`]
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -672,14 +672,14 @@ exports[`PinInput Component should match snapshot with onDone and autosubmit 1`]
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "lineHeight": 28,
@@ -698,14 +698,14 @@ exports[`PinInput Component should match snapshot with onDone and autosubmit 1`]
onKeyPress={[Function]} onKeyPress={[Function]}
secureTextEntry={true} secureTextEntry={true}
selectTextOnFocus={true} selectTextOnFocus={true}
selectionColor="#F37321" selectionColor="#951F6F"
style={ style={
{ {
"borderBottomWidth": 3, "borderBottomWidth": 3,
"borderColor": "#C7C7C7", "borderColor": "#C7C7C7",
"color": "#000000", "color": "#000000",
"flex": 1, "flex": 1,
"fontFamily": "Montserrat_600SemiBold", "fontFamily": "Inter_600SemiBold",
"fontSize": 33, "fontSize": 33,
"height": 50, "height": 50,
"lineHeight": 28, "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`] = ` exports[`ProgressingModal Component should match snapshot with progress spinner 1`] = `
<Spinner <Spinner
color="#F37321" color="#951F6F"
style={ style={
{ {
"marginLeft": 6, "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 {Column} from './Layout';
import {Text} from './Text'; import {Text} from './Text';
import testIDProps from '../../shared/commonUtil'; import testIDProps from '../../shared/commonUtil';
import {Theme} from './styleUtils';
interface Picker extends React.VFC<PickerProps<unknown>> { interface Picker extends React.VFC<PickerProps<unknown>> {
<T>(props: PickerProps<T>): ReturnType<React.FC>; <T>(props: PickerProps<T>): ReturnType<React.FC>;
@@ -34,41 +33,23 @@ export const Picker: Picker = (props: PickerProps<unknown>) => {
<Overlay <Overlay
isVisible={isContentVisible} isVisible={isContentVisible}
onBackdropPress={toggleContent} onBackdropPress={toggleContent}
overlayStyle={Theme.Styles.overlay}> overlayStyle={{padding: 1}}>
<Column <Column
testID={props.testID} testID={props.testID}
width={Dimensions.get('window').width * 0.8}> width={Dimensions.get('window').width * 0.8}>
{props.items.map((item, index) => { {props.items.map((item, index) => (
const isSelected = selectedIndex === index; <ListItem
return ( topDivider={index !== 0}
<ListItem onPress={() => selectItem(index)}
key={String(item.value ?? index)} key={index}>
topDivider={index !== 0} <ListItem.Content>
onPress={() => selectItem(index)} <ListItem.Title {...testIDProps(item.value as string)}>
containerStyle={ <Text>{item.label}</Text>
isSelected </ListItem.Title>
? Theme.Styles.listItemSelectedContainer </ListItem.Content>
: Theme.Styles.listItemUnselectedContainer {selectedIndex === index && <Icon name="check" />}
}> </ListItem>
<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>
);
})}
</Column> </Column>
</Overlay> </Overlay>
</React.Fragment> </React.Fragment>

51
components/ui/SearchBar.tsx
View File

@@ -1,10 +1,12 @@
import React from 'react'; import React from 'react';
import { TextInput, TouchableOpacity } from 'react-native'; import {TextInput, View} from 'react-native';
import { Icon } from 'react-native-elements'; import {Icon} from 'react-native-elements';
import { Row } from './Layout'; import {Row} from './Layout';
import { Theme } from './styleUtils'; import {Theme} from './styleUtils';
import {SvgImage} from './svg';
export const SearchBar = ({ export const SearchBar = ({
isVcSearch = false,
searchIconTestID, searchIconTestID,
searchBarTestID, searchBarTestID,
placeholder, placeholder,
@@ -15,45 +17,38 @@ export const SearchBar = ({
editable = true, editable = true,
}: SearchBarProps) => { }: SearchBarProps) => {
return ( 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 <TextInput
testID={searchBarTestID} testID={searchBarTestID}
style={Theme.SearchBarStyles.searchBar} style={Theme.SearchBarStyles.searchBar}
placeholder={placeholder} placeholder={placeholder}
placeholderTextColor={Theme.Colors.SearchBarPlaceholderColor}
value={search} value={search}
onFocus={onFocus} onFocus={onFocus}
onChangeText={searchText => onChangeText(searchText)} onChangeText={searchText => onChangeText(searchText)}
onLayout={onLayout} onLayout={onLayout}
editable={editable ?? true} 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> </Row>
); );
}; };
interface SearchBarProps { interface SearchBarProps {
isVcSearch: Boolean;
searchIconTestID: string; searchIconTestID: string;
searchBarTestID: string; searchBarTestID: string;
search: string; search: string;

55
components/ui/SetupPicker.tsx
View File

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

4
components/ui/Timestamp.tsx
View File

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

157
components/ui/ToolTip.tsx
View File

@@ -1,132 +1,35 @@
import React, {useRef, useState} from 'react'; import {Tooltip} from 'react-native-elements';
import { import {Centered} from './Layout';
Modal, import React from 'react';
View,
ScrollView,
TouchableOpacity,
Pressable,
Dimensions,
findNodeHandle,
UIManager,
} from 'react-native';
import {Theme} from './styleUtils'; import {Theme} from './styleUtils';
import testIDProps from '../../shared/commonUtil';
import {StyleProp} from 'react-native';
import {ViewStyle} from 'react-native';
interface CustomTooltipProps { export const CustomTooltip: React.FC<CustomTooltipProps> = props => {
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);
}
};
return ( return (
<> <Tooltip
<View ref={iconRef} collapsable={false}> {...testIDProps(props.testID)}
<TouchableOpacity onPress={showTooltip} style={{marginLeft: 5}}> popover={props.toolTipContent}
{triggerComponent} width={props.width}
</TouchableOpacity> height={props.height}
</View> withPointer={true}
withOverlay={false}
{visible && ( skipAndroidStatusBar={true}
<Modal pointerColor={Theme.Colors.toolTipPointerColor}
transparent containerStyle={Theme.Styles.tooltipContainerStyle}>
visible={visible} <Centered style={props.triggerComponentStyles} fill>
animationType="fade" {props.triggerComponent}
hardwareAccelerated </Centered>
onRequestClose={() => setVisible(false)}> </Tooltip>
<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>
)}
</>
); );
}; };
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, "lineHeight": 18,
}, },
{ {
"fontFamily": "Montserrat_400Regular", "fontFamily": "Inter_400Regular",
"fontSize": 14, "fontSize": 14,
}, },
null, 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 CopyIcon from '../../assets/file_copy.svg';
import StarIcon from '../../assets/credentialRegestryStar.svg'; import StarIcon from '../../assets/credentialRegestryStar.svg';
import SelectedCheckBox from '../../assets/Selected_Check_Box.svg'; import SelectedCheckBox from '../../assets/Selected_Check_Box.svg';
import FaceBiometric from '../../assets/Icon.svg';
import ReverifyIcon from '../../assets/Reverify.svg'; import ReverifyIcon from '../../assets/Reverify.svg';
export class SvgImage { export class SvgImage {
static selectedCheckBox() { static selectedCheckBox() {
@@ -251,9 +250,7 @@ export class SvgImage {
} }
static ReverifyIcon() { static ReverifyIcon() {
return ( return <ReverifyIcon />;
<ReverifyIcon/>
)
} }
static OutlinedPinIcon() { static OutlinedPinIcon() {
@@ -558,6 +555,10 @@ export class SvgImage {
); );
} }
static SearchIcon() {
return <Search {...testIDProps('searchIcon')} />;
}
static settingsLanguageIcon(size) { static settingsLanguageIcon(size) {
return ( return (
<SettingsLanguage <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() { static abotInjiIcon() {
return ( return (
<SettingsAboutInji <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 HomeScreenLogo from '../../../assets/InjiHomeLogo.svg';
import InjiLogoSmall from '../../../assets/InjiLogo.svg'; import InjiLogoSmall from '../../../assets/InjiLogo.svg';
import i18next from '../../../i18n'; import i18next from '../../../i18n';
import {POINTER_SIZE} from '../ToolTip';
const Colors = { const Colors = {
Black: '#000000', Black: '#000000',
Zambezi: '#5F5F5F', Zambezi: '#5F5F5F',
@@ -32,8 +31,7 @@ const Colors = {
DimGray: '#737373', DimGray: '#737373',
DarkGray: '#A5A5A5', DarkGray: '#A5A5A5',
platinumGrey: '#EDEDED', platinumGrey: '#EDEDED',
Orange: '#F37321', Orange: '#951F6F',
DarkMagenta: '#951F6F',
OrangeBrown: '#D9822B', OrangeBrown: '#D9822B',
Blue: '#0000FF', Blue: '#0000FF',
LightGrey: '#F8F8F8', LightGrey: '#F8F8F8',
@@ -47,13 +45,12 @@ const Colors = {
Warning: '#f0ad4e', Warning: '#f0ad4e',
GrayText: '#6F6F6F', GrayText: '#6F6F6F',
mediumLightGrayText: '#A7A7A7', mediumLightGrayText: '#A7A7A7',
veryLightBluishGray: '#D9E1E7',
dorColor: '#CBCBCB', dorColor: '#CBCBCB',
plainText: '#FFFFFF', plainText: '#FFFFFF',
walletbindingLabel: '#000000', walletbindingLabel: '#000000',
LightOrange: '#F7EDF3', LightOrange: '#F7EDF3',
GradientColors: ['#FF5300', '#5B03AD'], GradientColors: ['#FF5300', '#5B03AD'],
GradientColorsLight: ['#FF5300' + 14, '#FF5300' + 14], GradientColorsLight: ['#FF5300' + 14, '#5B03AD' + 14],
DisabledColors: ['#C7C7C7', '#C7C7C7'], DisabledColors: ['#C7C7C7', '#C7C7C7'],
TimeoutHintBoxColor: '#FFF7E5', TimeoutHintBoxColor: '#FFF7E5',
TimeoutHintBoxBorder: '#FFF2D6', TimeoutHintBoxBorder: '#FFF2D6',
@@ -71,16 +68,6 @@ const Colors = {
Mercury: '#E6E6E6', Mercury: '#E6E6E6',
Yellow: '#E8A94F', Yellow: '#E8A94F',
selectIDTextGradient: ['#F5F5F5', '#FFFFFF'], 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; export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -94,7 +81,7 @@ export const DefaultTheme = {
DetailsLabel: Colors.Gray40, DetailsLabel: Colors.Gray40,
LoadingDetailsLabel: Colors.Gray40, LoadingDetailsLabel: Colors.Gray40,
AddIdBtnBg: Colors.Orange, AddIdBtnBg: Colors.Orange,
AddIdBtnTxt: Colors.DarkMagenta, AddIdBtnTxt: Colors.Orange,
DownloadIdBtnTxt: Colors.White, DownloadIdBtnTxt: Colors.White,
Loading: Colors.Orange, Loading: Colors.Orange,
Cursor: Colors.Orange, Cursor: Colors.Orange,
@@ -102,7 +89,6 @@ export const DefaultTheme = {
IconBg: Colors.Orange, IconBg: Colors.Orange,
popUp: Colors.Green, popUp: Colors.Green,
Icon: Colors.Orange, Icon: Colors.Orange,
SearchIcon: Colors.veryLightBluishGray,
GrayIcon: Colors.Gray50, GrayIcon: Colors.Gray50,
helpText: Colors.Gray44, helpText: Colors.Gray44,
borderBottomColor: Colors.Grey6, borderBottomColor: Colors.Grey6,
@@ -112,7 +98,6 @@ export const DefaultTheme = {
switchHead: Colors.Orange, switchHead: Colors.Orange,
switchTrackTrue: Colors.LightOrange, switchTrackTrue: Colors.LightOrange,
switchTrackFalse: Colors.Grey, switchTrackFalse: Colors.Grey,
switchCircleOff: Colors.White,
overlayBackgroundColor: Colors.White, overlayBackgroundColor: Colors.White,
rotatingIcon: Colors.Grey5, rotatingIcon: Colors.Grey5,
loadingLabel: Colors.Grey6, loadingLabel: Colors.Grey6,
@@ -154,10 +139,10 @@ export const DefaultTheme = {
uncheckedIcon: Colors.uncheckedIcon, uncheckedIcon: Colors.uncheckedIcon,
settingsLabel: Colors.Black, settingsLabel: Colors.Black,
chevronRightColor: Colors.Grey, chevronRightColor: Colors.Grey,
linearGradientStart: Colors.brandPrimary, linearGradientStart: Colors.startColor,
linearGradientEnd: Colors.brandPrimary, linearGradientEnd: Colors.endColor,
linearIconGradientStart: Colors.brandPrimary, linearIconGradientStart: Colors.startColor,
linearIconGradientEnd: Colors.brandPrimary, linearIconGradientEnd: Colors.endColor,
LinearGradientStroke: Colors.stroke, LinearGradientStroke: Colors.stroke,
warningLogoBgColor: Colors.warningLogoBg, warningLogoBgColor: Colors.warningLogoBg,
tooltipIcon: Colors.toolTip, tooltipIcon: Colors.toolTip,
@@ -166,16 +151,6 @@ export const DefaultTheme = {
warningText: Colors.Red, warningText: Colors.Red,
PendingIcon: Colors.Yellow, PendingIcon: Colors.Yellow,
selectIDTextGradient: ['#F5F5F5', '#FFFFFF'], 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({ Styles: StyleSheet.create({
title: { title: {
@@ -194,12 +169,12 @@ export const DefaultTheme = {
fieldItemTitle: { fieldItemTitle: {
backgroundColor: Colors.Transparent, backgroundColor: Colors.Transparent,
fontSize: 11, fontSize: 11,
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
}, },
fieldItemValue: { fieldItemValue: {
backgroundColor: Colors.Transparent, backgroundColor: Colors.Transparent,
fontSize: 12, fontSize: 12,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
marginTop: 3, marginTop: 3,
}, },
loadingSubtitle: { loadingSubtitle: {
@@ -208,7 +183,7 @@ export const DefaultTheme = {
}, },
verificationStatus: { verificationStatus: {
fontSize: 12, fontSize: 12,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
statusLabel: { statusLabel: {
color: Colors.Gray30, color: Colors.Gray30,
@@ -500,9 +475,6 @@ export const DefaultTheme = {
ProfileIconPinnedStyle: { ProfileIconPinnedStyle: {
position: 'absolute', position: 'absolute',
}, },
BackButtonBgGradient: {
borderRadius: 10,
},
IconContainer: { IconContainer: {
padding: 6, padding: 6,
width: 25, width: 25,
@@ -602,7 +574,7 @@ export const DefaultTheme = {
detailsText: { detailsText: {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 15, fontSize: 15,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
}, },
idInputContainer: { idInputContainer: {
width: Dimensions.get('window').width * 0.86, width: Dimensions.get('window').width * 0.86,
@@ -615,51 +587,9 @@ export const DefaultTheme = {
height: isIOS() ? 100 : 'auto', height: isIOS() ? 100 : 'auto',
}, },
picker: { picker: {
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 18, 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: { idInputBottom: {
position: 'relative', position: 'relative',
bottom: 18, bottom: 18,
@@ -678,7 +608,7 @@ export const DefaultTheme = {
marginVertical: 6, marginVertical: 6,
}, },
placeholder: { placeholder: {
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
hrLine: { hrLine: {
borderBottomColor: Colors.Gray44, borderBottomColor: Colors.Gray44,
@@ -726,46 +656,14 @@ export const DefaultTheme = {
}, },
boxShadow: generateBoxShadowStyle(), boxShadow: generateBoxShadowStyle(),
tooltipContainerStyle: { tooltipContainerStyle: {
backgroundColor: '#EBE6F3', backgroundColor: '#FAFAFA',
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,
borderWidth: 1, borderWidth: 1,
borderColor: '#E0E0E0', borderColor: '#E0E0E0',
zIndex: 999, marginLeft: 15,
}, },
pointer: { tooltipContentDescription: {
position: 'absolute', color: Colors.toolTipContent,
width: 0, marginTop: 10,
height: 0,
borderLeftWidth: POINTER_SIZE / 2,
borderRightWidth: POINTER_SIZE / 2,
borderBottomWidth: POINTER_SIZE / 2,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#EBE6F3',
zIndex: 1000,
}, },
tooltipHrLine: { tooltipHrLine: {
borderBottomColor: Colors.Grey5, borderBottomColor: Colors.Grey5,
@@ -800,7 +698,7 @@ export const DefaultTheme = {
maxHeight: 20, maxHeight: 20,
borderRadius: 4, borderRadius: 4,
fontSize: 10, fontSize: 10,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
lineHeight: 12, lineHeight: 12,
}, },
scanLayoutHeaderContainer: { scanLayoutHeaderContainer: {
@@ -811,7 +709,7 @@ export const DefaultTheme = {
}, },
scanLayoutHeaderTitle: { scanLayoutHeaderTitle: {
fontSize: 26, fontSize: 26,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
paddingTop: isIOS() ? 10 : 20, paddingTop: isIOS() ? 10 : 20,
paddingBottom: 10, paddingBottom: 10,
}, },
@@ -828,18 +726,18 @@ export const DefaultTheme = {
}, },
sendVPHeaderTitle: { sendVPHeaderTitle: {
fontSize: 18, fontSize: 18,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
sendVPHeaderSubTitle: { sendVPHeaderSubTitle: {
fontSize: 13, fontSize: 13,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
color: Colors.Orange, color: Colors.Orange,
maxWidth: '80%', maxWidth: '80%',
overflow: 'hidden', overflow: 'hidden',
}, },
HistoryHeaderTitleStyle: { HistoryHeaderTitleStyle: {
fontSize: 26, fontSize: 26,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
marginTop: isIOS() ? 5 : 15, marginTop: isIOS() ? 5 : 15,
}, },
tabBarIconCopilot: { tabBarIconCopilot: {
@@ -876,7 +774,7 @@ export const DefaultTheme = {
backgroundColor: '#DADADA', backgroundColor: '#DADADA',
}, },
disclosureTitle: { disclosureTitle: {
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
fontSize: 15, fontSize: 15,
color: Colors.Black, color: Colors.Black,
}, },
@@ -887,32 +785,20 @@ export const DefaultTheme = {
}, },
disclosureSelectButton: { disclosureSelectButton: {
fontSize: 14, fontSize: 14,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
}, },
}), }),
BannerStyles: StyleSheet.create({ BannerStyles: StyleSheet.create({
bannerStackContainer: {
position: 'absolute',
width: '100%',
alignItems: 'center',
zIndex: 100,
},
wrapper: {
width: '100%',
alignSelf: 'center',
},
container: { container: {
alignItems: 'center', alignItems: 'flex-start',
justifyContent: 'space-between', justifyContent: 'space-between',
backgroundColor: '#DB2E2E', backgroundColor: '#DB2E2E',
width: '100%', width: '100%',
height: 70,
position: 'relative', position: 'relative',
paddingHorizontal: 18, paddingHorizontal: 18,
paddingVertical: 12, paddingVertical: 12,
marginVertical: 1, marginVertical: 1,
columnGap: 7, columnGap: 7,
borderRadius: 10,
}, },
topBanner: { topBanner: {
marginTop: 10, marginTop: 10,
@@ -920,24 +806,20 @@ export const DefaultTheme = {
}, },
text: { text: {
textAlignVertical: 'center', textAlignVertical: 'center',
fontSize: 14, fontSize: 12,
lineHeight: 15, lineHeight: 15,
padding: 1, padding: 1,
marginHorizontal: 8, fontFamily: 'Inter_600SemiBold',
fontFamily: 'Montserrat_600SemiBold',
}, },
dismiss: {paddingLeft: 9}, dismiss: {paddingLeft: 9},
inProgress: { inProgress: {
backgroundColor: Colors.LightYellow, backgroundColor: Colors.OrangeBrown,
color: Colors.CharcoalBlue,
}, },
success: { success: {
backgroundColor: Colors.LightMintGreen, backgroundColor: Colors.Green,
color: Colors.CharcoalBlue,
}, },
error: { error: {
backgroundColor: Colors.LightRose, backgroundColor: Colors.LightRed,
color: Colors.CharcoalBlue,
}, },
}), }),
QrCodeStyles: StyleSheet.create({ QrCodeStyles: StyleSheet.create({
@@ -963,7 +845,7 @@ export const DefaultTheme = {
borderTopLeftRadius: 21, borderTopLeftRadius: 21,
borderTopRightRadius: 21, borderTopRightRadius: 21,
justifyContent: 'space-between', justifyContent: 'space-between',
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
paddingBottom: 10, paddingBottom: 10,
paddingRight: 15, paddingRight: 15,
paddingLeft: 130, paddingLeft: 130,
@@ -999,7 +881,7 @@ export const DefaultTheme = {
color: Colors.Black, color: Colors.Black,
flex: 1, flex: 1,
fontSize: 33, fontSize: 33,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
height: 50, height: 50,
lineHeight: 28, lineHeight: 28,
margin: 8, margin: 8,
@@ -1010,7 +892,7 @@ export const DefaultTheme = {
borderColor: Colors.Orange, borderColor: Colors.Orange,
color: Colors.Black, color: Colors.Black,
flex: 1, flex: 1,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
fontSize: 29, fontSize: 29,
height: 50, height: 50,
margin: 8, margin: 8,
@@ -1020,33 +902,33 @@ export const DefaultTheme = {
TextStyles: StyleSheet.create({ TextStyles: StyleSheet.create({
header: { header: {
color: Colors.Black, color: Colors.Black,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
fontSize: 18, fontSize: 18,
lineHeight: 19, lineHeight: 19,
paddingTop: 5, paddingTop: 5,
}, },
subHeader: { subHeader: {
color: Colors.mediumLightGrayText, color: Colors.mediumLightGrayText,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
lineHeight: 19, lineHeight: 19,
fontSize: 13, fontSize: 13,
paddingTop: 4, paddingTop: 4,
}, },
semiBoldHeader: { semiBoldHeader: {
color: Colors.Black, color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 18, fontSize: 18,
lineHeight: 21, lineHeight: 21,
paddingTop: 4, paddingTop: 4,
}, },
retrieveIdLabel: { retrieveIdLabel: {
color: Colors.ShadeOfGrey, color: Colors.ShadeOfGrey,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
lineHeight: 18, lineHeight: 18,
}, },
helpHeader: { helpHeader: {
color: Colors.Black, color: Colors.Black,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
fontSize: 18, fontSize: 18,
lineHeight: 19, lineHeight: 19,
paddingTop: 5, paddingTop: 5,
@@ -1055,11 +937,11 @@ export const DefaultTheme = {
helpDetails: { helpDetails: {
margin: 5, margin: 5,
color: Colors.Gray44, color: Colors.Gray44,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
urlLinkText: { urlLinkText: {
color: Colors.Orange, color: Colors.Orange,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
aboutDetails: { aboutDetails: {
color: Colors.Black, color: Colors.Black,
@@ -1072,7 +954,7 @@ export const DefaultTheme = {
top: 65, top: 65,
left: 5, left: 5,
color: Colors.Red, color: Colors.Red,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 12, fontSize: 12,
minWidth: 200, minWidth: 200,
}, },
@@ -1082,21 +964,21 @@ export const DefaultTheme = {
lineHeight: 18, lineHeight: 18,
}, },
regular: { regular: {
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
fontSize: 14, fontSize: 14,
}, },
regularGrey: { regularGrey: {
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
fontSize: 15, fontSize: 15,
lineHeight: 19, lineHeight: 19,
color: Colors.ShadeOfGrey, color: Colors.ShadeOfGrey,
}, },
semibold: { semibold: {
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 15, fontSize: 15,
}, },
bold: { bold: {
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
fontSize: 15, fontSize: 15,
justifyContent: 'center', justifyContent: 'center',
}, },
@@ -1170,27 +1052,23 @@ export const DefaultTheme = {
}, },
}), }),
SearchBarStyles: StyleSheet.create({ SearchBarStyles: StyleSheet.create({
idleSearchBarBottomLine: {
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.Gray40,
},
searchBarContainer: { searchBarContainer: {
alignItems: 'center', alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.Orange,
}, },
clearIcon: { vcSearchBarContainer: {
position: 'absolute',
right: 45,
width: 40,
justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}, borderBottomWidth: 0.5,
vcSearchBarContainer: {}, borderTopWidth: 0.5,
innerSearchBarContainer: { borderColor: Colors.DimGray,
flexDirection: 'row', width: Dimensions.get('window').width,
alignItems: 'center',
width: '100%',
backgroundColor: Colors.White, backgroundColor: Colors.White,
borderColor: Colors.veryLightBluishGray,
borderRadius: 18,
borderWidth: 2,
marginTop: 10,
paddingHorizontal: 20,
}, },
vcSearchIcon: { vcSearchIcon: {
justifyContent: 'center', justifyContent: 'center',
@@ -1199,17 +1077,17 @@ export const DefaultTheme = {
paddingLeft: 15, paddingLeft: 15,
}, },
searchIcon: { searchIcon: {
width: 25,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', height: Dimensions.get('window').height * 0.055,
width: Dimensions.get('window').width * 0.1,
}, },
searchBar: { searchBar: {
textAlign: I18nManager.isRTL ? 'right' : 'left', textAlign: I18nManager.isRTL ? 'right' : 'left',
height: Dimensions.get('window').height * 0.055, height: Dimensions.get('window').height * 0.055,
flex: 1, width: Dimensions.get('window').width * 0.75,
fontFamily: 'Montserrat_500Medium', },
fontSize: 17, clearSearch: {
marginRight: 40, padding: 10,
}, },
}), }),
ButtonStyles: StyleSheet.create({ ButtonStyles: StyleSheet.create({
@@ -1290,7 +1168,7 @@ export const DefaultTheme = {
backgroundColor: Colors.White, backgroundColor: Colors.White,
borderWidth: 0, borderWidth: 0,
marginTop: -15, marginTop: -15,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
padding: 0, padding: 0,
}, },
timeoutHintContainer: { timeoutHintContainer: {
@@ -1393,7 +1271,7 @@ export const DefaultTheme = {
}), }),
BackupAndRestoreStyles: StyleSheet.create({ BackupAndRestoreStyles: StyleSheet.create({
backupProgressText: { backupProgressText: {
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
fontSize: 14, fontSize: 14,
color: Colors.Gray44, color: Colors.Gray44,
}, },
@@ -1403,7 +1281,7 @@ export const DefaultTheme = {
textAlign: 'center', textAlign: 'center',
lineHeight: 22, lineHeight: 22,
fontSize: 17, fontSize: 17,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
marginHorizontal: 30, marginHorizontal: 30,
}, },
actionOrLoaderContainer: { actionOrLoaderContainer: {
@@ -1420,7 +1298,7 @@ export const DefaultTheme = {
paddingHorizontal: 10, paddingHorizontal: 10,
textAlign: 'center', textAlign: 'center',
paddingTop: 15, paddingTop: 15,
fontFamily: 'Montserrat_500Medium', fontFamily: 'Inter_500Medium',
fontSize: 14, fontSize: 14,
letterSpacing: 0, letterSpacing: 0,
lineHeight: 17, lineHeight: 17,
@@ -1438,7 +1316,7 @@ export const DefaultTheme = {
headerText: { headerText: {
justifyContent: 'center', justifyContent: 'center',
paddingLeft: 12, paddingLeft: 12,
fontFamily: 'Montserrat_500Medium', fontFamily: 'Inter_500Medium',
fontWeight: '600', fontWeight: '600',
fontSize: 14, fontSize: 14,
letterSpacing: 0, letterSpacing: 0,
@@ -1499,7 +1377,7 @@ export const DefaultTheme = {
}, },
kebabHeaderStyle: { kebabHeaderStyle: {
justifyContent: 'space-between', justifyContent: 'space-between',
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
}, },
}), }),
MessageOverlayStyles: StyleSheet.create({ MessageOverlayStyles: StyleSheet.create({
@@ -1519,7 +1397,6 @@ export const DefaultTheme = {
button: { button: {
borderTopLeftRadius: 0, borderTopLeftRadius: 0,
borderTopRightRadius: 0, borderTopRightRadius: 0,
fontSize: 16,
}, },
halfButton: { halfButton: {
borderRadius: 8, borderRadius: 8,
@@ -1598,7 +1475,7 @@ export const DefaultTheme = {
sliderTitle: { sliderTitle: {
color: Colors.White, color: Colors.White,
marginBottom: 20, marginBottom: 20,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
}, },
text: { text: {
color: Colors.White, color: Colors.White,
@@ -1679,7 +1556,7 @@ export const DefaultTheme = {
marginHorizontal: 9, marginHorizontal: 9,
}, },
issuerHeading: { issuerHeading: {
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 14, fontSize: 14,
paddingHorizontal: 3, paddingHorizontal: 3,
marginBottom: 2, marginBottom: 2,
@@ -1705,7 +1582,7 @@ export const DefaultTheme = {
image: {marginTop: -60, paddingBottom: 26}, image: {marginTop: -60, paddingBottom: 26},
title: { title: {
color: Colors.Black, color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 18, fontSize: 18,
lineHeight: 21, lineHeight: 21,
paddingTop: 4, paddingTop: 4,
@@ -1714,7 +1591,7 @@ export const DefaultTheme = {
}, },
message: { message: {
textAlign: 'center', textAlign: 'center',
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
fontSize: 14, fontSize: 14,
lineHeight: 20, lineHeight: 20,
marginTop: 6, marginTop: 6,
@@ -1724,7 +1601,7 @@ export const DefaultTheme = {
}, },
additionalMessage: { additionalMessage: {
color: Colors.Black, color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 18, fontSize: 18,
lineHeight: 21, lineHeight: 21,
paddingTop: 4, paddingTop: 4,
@@ -1760,16 +1637,16 @@ export const DefaultTheme = {
paddingHorizontal: 15, paddingHorizontal: 15,
paddingBottom: 10, paddingBottom: 10,
backgroundColor: '#fff', backgroundColor: '#fff',
elevation: 5, elevation: 5, // For Android
shadowColor: '#000', shadowColor: '#000', // For iOS
shadowOffset: {width: 0, height: 4}, // only downward shadow shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.1, shadowOpacity: 0.2,
shadowRadius: 4, shadowRadius: 4,
zIndex: 1, zIndex: 1,
}, },
heading: { heading: {
color: 'black', color: 'black',
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
fontSize: 18, fontSize: 18,
lineHeight: 19, lineHeight: 19,
padding: 10, padding: 10,
@@ -1916,16 +1793,16 @@ export const DefaultTheme = {
purposeText: { purposeText: {
fontSize: 13, fontSize: 13,
position: 'relative', position: 'relative',
fontFamily: 'Montserrat_500Medium', fontFamily: 'Inter_500Medium',
}, },
cardsSelectedText: { cardsSelectedText: {
fontFamily: 'Montserrat_500Medium', fontFamily: 'Inter_500Medium',
color: '#000000', color: '#000000',
fontSize: 14, fontSize: 14,
}, },
selectIDText: { selectIDText: {
position: 'relative', position: 'relative',
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 16, fontSize: 16,
}, },
}), }),
@@ -1945,11 +1822,11 @@ export const DefaultTheme = {
justifyContent: 'space-between', justifyContent: 'space-between',
}, },
bannerTitle: { bannerTitle: {
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
bannerGuide: { bannerGuide: {
opacity: 0.8, opacity: 0.8,
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
}, },
bannerEnablePermissionContainer: { bannerEnablePermissionContainer: {
marginTop: 15, marginTop: 15,
@@ -1957,7 +1834,7 @@ export const DefaultTheme = {
bannerEnablePermission: { bannerEnablePermission: {
borderBottomWidth: 1.5, borderBottomWidth: 1.5,
borderBottomColor: Colors.White, borderBottomColor: Colors.White,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
scannerContainer: { scannerContainer: {
borderRadius: 24, borderRadius: 24,
@@ -2012,18 +1889,14 @@ export const DefaultTheme = {
}, },
holdPhoneSteadyText: { holdPhoneSteadyText: {
color: Colors.Black, color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 15, fontSize: 15,
}, },
cameraFlipIcon: { cameraFlipIcon: {
height: 50, height: 50,
width: 50, width: 50,
}, },
iconText: { iconText: {fontFamily: 'Inter_600SemiBold', fontSize: 12, marginTop: 6},
fontFamily: 'Montserrat_600SemiBold',
fontSize: 12,
marginTop: 6,
},
}), }),
BottomTabBarStyle: StyleSheet.create({ BottomTabBarStyle: StyleSheet.create({
@@ -2031,7 +1904,7 @@ export const DefaultTheme = {
headerLeftContainerStyle: {paddingEnd: 13}, headerLeftContainerStyle: {paddingEnd: 13},
tabBarLabelStyle: { tabBarLabelStyle: {
fontSize: 12, fontSize: 12,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
tabBarStyle: { tabBarStyle: {
display: 'flex', display: 'flex',
@@ -2127,26 +2000,6 @@ export const DefaultTheme = {
marginTop: 10, marginTop: 10,
width: '80%', 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: { inputStyle: {
fontSize: 20, fontSize: 20,
fontWeight: '500', fontWeight: '500',
@@ -2309,7 +2162,7 @@ export const DefaultTheme = {
titleText: { titleText: {
fontSize: 17, fontSize: 17,
textAlign: 'left', textAlign: 'left',
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
paddingTop: 20, paddingTop: 20,
}, },
titleDescription: { titleDescription: {
@@ -2320,14 +2173,14 @@ export const DefaultTheme = {
}, },
noteTitleText: { noteTitleText: {
fontSize: 14, fontSize: 14,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
color: '#973C00', color: '#973C00',
marginBottom: 5, marginBottom: 5,
}, },
noteDescriptionText: { noteDescriptionText: {
fontSize: 13, fontSize: 13,
color: '#973C00', color: '#973C00',
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
lineHeight: 18, lineHeight: 18,
textAlign: 'left', textAlign: 'left',
marginLeft: -25, marginLeft: -25,
@@ -2346,7 +2199,7 @@ export const DefaultTheme = {
}, },
text: { text: {
fontSize: 14, fontSize: 14,
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
color: 'black', color: 'black',
flex: 1, 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 HomeScreenLogo from '../../../assets/Inji_Home_Logo.svg';
import InjiLogoSmall from '../../../assets/InjiLogo.svg'; import InjiLogoSmall from '../../../assets/InjiLogo.svg';
import i18next from '../../../i18n'; import i18next from '../../../i18n';
import {POINTER_SIZE} from '../ToolTip';
const Colors = { const Colors = {
Black: '#231F20', Black: '#231F20',
@@ -46,7 +45,6 @@ const Colors = {
Warning: '#f0ad4e', Warning: '#f0ad4e',
GrayText: '#6F6F6F', GrayText: '#6F6F6F',
mediumLightGrayText: '#A7A7A7', mediumLightGrayText: '#A7A7A7',
veryLightBluishGray: '#D9E1E7',
dorColor: '#CBCBCB', dorColor: '#CBCBCB',
plainText: '#F3E2FF', plainText: '#F3E2FF',
walletbindingLabel: '#000000', walletbindingLabel: '#000000',
@@ -72,16 +70,6 @@ const Colors = {
Mercury: '#E6E6E6', Mercury: '#E6E6E6',
Yellow: '#E8A94F', Yellow: '#E8A94F',
selectIDTextGradient: ['#F5F5F5', '#FFFFFF'], 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; export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -103,7 +91,6 @@ export const PurpleTheme = {
IconBg: Colors.Purple, IconBg: Colors.Purple,
popUp: Colors.Green, popUp: Colors.Green,
Icon: Colors.Purple, Icon: Colors.Purple,
SearchIcon: Colors.veryLightBluishGray,
GrayIcon: Colors.Gray50, GrayIcon: Colors.Gray50,
helpText: Colors.Gray44, helpText: Colors.Gray44,
borderBottomColor: Colors.Grey6, borderBottomColor: Colors.Grey6,
@@ -114,7 +101,6 @@ export const PurpleTheme = {
switchHead: Colors.Purple, switchHead: Colors.Purple,
switchTrackTrue: Colors.LightPurple, switchTrackTrue: Colors.LightPurple,
switchTrackFalse: Colors.Grey, switchTrackFalse: Colors.Grey,
switchCircleOff: Colors.White,
overlayBackgroundColor: Colors.White, overlayBackgroundColor: Colors.White,
rotatingIcon: Colors.Grey5, rotatingIcon: Colors.Grey5,
loadingLabel: Colors.Grey6, loadingLabel: Colors.Grey6,
@@ -156,10 +142,10 @@ export const PurpleTheme = {
uncheckedIcon: Colors.uncheckedIcon, uncheckedIcon: Colors.uncheckedIcon,
settingsLabel: Colors.Black, settingsLabel: Colors.Black,
chevronRightColor: Colors.Grey, chevronRightColor: Colors.Grey,
linearGradientStart: Colors.brandPrimary, linearGradientStart: Colors.startColor,
linearGradientEnd: Colors.brandPrimary, linearGradientEnd: Colors.endColor,
linearIconGradientStart: Colors.brandPrimary, linearIconGradientStart: Colors.startColor,
linearIconGradientEnd: Colors.brandPrimary, linearIconGradientEnd: Colors.startColor,
LinearGradientStroke: Colors.stroke, LinearGradientStroke: Colors.stroke,
warningLogoBgColor: Colors.warningLogoBg, warningLogoBgColor: Colors.warningLogoBg,
tooltipIcon: Colors.tooltip, tooltipIcon: Colors.tooltip,
@@ -167,16 +153,6 @@ export const PurpleTheme = {
urlLink: Colors.Purple, urlLink: Colors.Purple,
warningText: Colors.Red, warningText: Colors.Red,
PendingIcon: Colors.Yellow, 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({ Styles: StyleSheet.create({
title: { title: {
@@ -195,12 +171,12 @@ export const PurpleTheme = {
fieldItemTitle: { fieldItemTitle: {
backgroundColor: Colors.Transparent, backgroundColor: Colors.Transparent,
fontSize: 11, fontSize: 11,
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
}, },
fieldItemValue: { fieldItemValue: {
backgroundColor: Colors.Transparent, backgroundColor: Colors.Transparent,
fontSize: 12, fontSize: 12,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
marginTop: 3, marginTop: 3,
}, },
loadingSubtitle: { loadingSubtitle: {
@@ -209,7 +185,7 @@ export const PurpleTheme = {
}, },
verificationStatus: { verificationStatus: {
fontSize: 12, fontSize: 12,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
statusLabel: { statusLabel: {
color: Colors.Gray30, color: Colors.Gray30,
@@ -513,9 +489,6 @@ export const PurpleTheme = {
borderRadius: 10, borderRadius: 10,
backgroundColor: Colors.LightPurple, backgroundColor: Colors.LightPurple,
}, },
BackButtonBgGradient: {
borderRadius: 10,
},
imageCaptureButton: { imageCaptureButton: {
marginLeft: 130, marginLeft: 130,
marginRight: 50, marginRight: 50,
@@ -607,7 +580,7 @@ export const PurpleTheme = {
detailsText: { detailsText: {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 15, fontSize: 15,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
}, },
idInputContainer: { idInputContainer: {
width: Dimensions.get('window').width * 0.86, width: Dimensions.get('window').width * 0.86,
@@ -620,51 +593,9 @@ export const PurpleTheme = {
height: isIOS() ? 100 : 'auto', height: isIOS() ? 100 : 'auto',
}, },
picker: { picker: {
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 18, 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: { idInputBottom: {
position: 'relative', position: 'relative',
bottom: 18, bottom: 18,
@@ -683,7 +614,7 @@ export const PurpleTheme = {
marginVertical: 6, marginVertical: 6,
}, },
placeholder: { placeholder: {
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
hrLine: { hrLine: {
borderBottomColor: Colors.Gray44, borderBottomColor: Colors.Gray44,
@@ -731,45 +662,13 @@ export const PurpleTheme = {
}, },
boxShadow: generateBoxShadowStyle(), boxShadow: generateBoxShadowStyle(),
tooltipContainerStyle: { tooltipContainerStyle: {
backgroundColor: '#EBE6F3', backgroundColor: '#FAFAFA',
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,
borderWidth: 1, borderWidth: 1,
borderColor: '#E0E0E0', 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,
},
tooltipContentTitle: {
color: Colors.DeepPurple,
}, },
tooltipContentDescription: { tooltipContentDescription: {
color: Colors.RoyalPurple, color: Colors.toolTipContent,
marginTop: 10, marginTop: 10,
}, },
tooltipHrLine: { tooltipHrLine: {
@@ -807,7 +706,7 @@ export const PurpleTheme = {
marginTop: 10, marginTop: 10,
borderRadius: 4, borderRadius: 4,
fontSize: 10, fontSize: 10,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
lineHeight: 12, lineHeight: 12,
}, },
scanLayoutHeaderContainer: { scanLayoutHeaderContainer: {
@@ -818,7 +717,7 @@ export const PurpleTheme = {
}, },
scanLayoutHeaderTitle: { scanLayoutHeaderTitle: {
fontSize: 26, fontSize: 26,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
paddingTop: isIOS() ? 10 : 20, paddingTop: isIOS() ? 10 : 20,
paddingBottom: 10, paddingBottom: 10,
}, },
@@ -835,18 +734,18 @@ export const PurpleTheme = {
}, },
sendVPHeaderTitle: { sendVPHeaderTitle: {
fontSize: 18, fontSize: 18,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
sendVPHeaderSubTitle: { sendVPHeaderSubTitle: {
fontSize: 13, fontSize: 13,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
color: Colors.LightPurple, color: Colors.LightPurple,
maxWidth: '80%', maxWidth: '80%',
overflow: 'hidden', overflow: 'hidden',
}, },
HistoryHeaderTitleStyle: { HistoryHeaderTitleStyle: {
fontSize: 26, fontSize: 26,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
marginTop: isIOS() ? 5 : 15, marginTop: isIOS() ? 5 : 15,
}, },
tabBarIconCopilot: { tabBarIconCopilot: {
@@ -884,7 +783,7 @@ export const PurpleTheme = {
marginBottom: 12, marginBottom: 12,
}, },
disclosureTitle: { disclosureTitle: {
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
fontSize: 15, fontSize: 15,
color: Colors.Black, color: Colors.Black,
}, },
@@ -895,57 +794,41 @@ export const PurpleTheme = {
}, },
disclosureSelectButton: { disclosureSelectButton: {
fontSize: 14, fontSize: 14,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
}, },
}), }),
BannerStyles: StyleSheet.create({ BannerStyles: StyleSheet.create({
bannerStackContainer: {
position: 'absolute',
width: '100%',
alignItems: 'center',
zIndex: 100,
},
wrapper: {
width: '100%',
alignSelf: 'center',
},
container: { container: {
alignItems: 'center', alignItems: 'flex-start',
justifyContent: 'space-between', justifyContent: 'space-between',
backgroundColor: '#DB2E2E', backgroundColor: '#DB2E2E',
width: '100%', width: '100%',
height: 70,
position: 'relative', position: 'relative',
paddingHorizontal: 18, paddingHorizontal: 18,
paddingVertical: 12, paddingVertical: 12,
marginVertical: 1, marginVertical: 1,
columnGap: 7, columnGap: 7,
borderRadius: 10, },
text: {
textAlignVertical: 'center',
fontSize: 12,
lineHeight: 15,
padding: 1,
fontFamily: 'Inter_600SemiBold',
}, },
topBanner: { topBanner: {
marginTop: 10, marginTop: 10,
marginBottom: 10, marginBottom: 10,
}, },
text: {
textAlignVertical: 'center',
fontSize: 14,
lineHeight: 15,
padding: 1,
marginHorizontal: 8,
fontFamily: 'Montserrat_600SemiBold',
},
dismiss: {paddingLeft: 9}, dismiss: {paddingLeft: 9},
inProgress: { inProgress: {
backgroundColor: Colors.LightYellow, backgroundColor: Colors.OrangeBrown,
color: Colors.CharcoalBlue,
}, },
success: { success: {
backgroundColor: Colors.LightMintGreen, backgroundColor: Colors.Green,
color: Colors.CharcoalBlue,
}, },
error: { error: {
backgroundColor: Colors.LightRose, backgroundColor: Colors.LightRed,
color: Colors.CharcoalBlue,
}, },
}), }),
QrCodeStyles: StyleSheet.create({ QrCodeStyles: StyleSheet.create({
@@ -971,7 +854,7 @@ export const PurpleTheme = {
borderTopLeftRadius: 21, borderTopLeftRadius: 21,
borderTopRightRadius: 21, borderTopRightRadius: 21,
justifyContent: 'space-between', justifyContent: 'space-between',
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
paddingBottom: 10, paddingBottom: 10,
paddingRight: 15, paddingRight: 15,
paddingLeft: 130, paddingLeft: 130,
@@ -1007,7 +890,7 @@ export const PurpleTheme = {
color: Colors.Black, color: Colors.Black,
flex: 1, flex: 1,
fontSize: 33, fontSize: 33,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
height: 40, height: 40,
lineHeight: 28, lineHeight: 28,
margin: 8, margin: 8,
@@ -1018,7 +901,7 @@ export const PurpleTheme = {
borderColor: Colors.Purple, borderColor: Colors.Purple,
color: Colors.Black, color: Colors.Black,
flex: 1, flex: 1,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
fontSize: 29, fontSize: 29,
height: 40, height: 40,
margin: 8, margin: 8,
@@ -1028,33 +911,33 @@ export const PurpleTheme = {
TextStyles: StyleSheet.create({ TextStyles: StyleSheet.create({
header: { header: {
color: Colors.Black, color: Colors.Black,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
fontSize: 18, fontSize: 18,
lineHeight: 19, lineHeight: 19,
paddingTop: 5, paddingTop: 5,
}, },
subHeader: { subHeader: {
color: Colors.mediumLightGrayText, color: Colors.mediumLightGrayText,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
lineHeight: 19, lineHeight: 19,
fontSize: 13, fontSize: 13,
paddingTop: 4, paddingTop: 4,
}, },
semiBoldHeader: { semiBoldHeader: {
color: Colors.Black, color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 18, fontSize: 18,
lineHeight: 21, lineHeight: 21,
paddingTop: 4, paddingTop: 4,
}, },
retrieveIdLabel: { retrieveIdLabel: {
color: Colors.ShadeOfGrey, color: Colors.ShadeOfGrey,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
lineHeight: 18, lineHeight: 18,
}, },
helpHeader: { helpHeader: {
color: Colors.Black, color: Colors.Black,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
fontSize: 18, fontSize: 18,
lineHeight: 19, lineHeight: 19,
paddingTop: 5, paddingTop: 5,
@@ -1063,11 +946,11 @@ export const PurpleTheme = {
helpDetails: { helpDetails: {
margin: 5, margin: 5,
color: Colors.Gray44, color: Colors.Gray44,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
urlLinkText: { urlLinkText: {
color: Colors.Purple, color: Colors.Purple,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
aboutDetails: { aboutDetails: {
color: Colors.Black, color: Colors.Black,
@@ -1080,7 +963,7 @@ export const PurpleTheme = {
top: 65, top: 65,
left: 5, left: 5,
color: Colors.Red, color: Colors.Red,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 12, fontSize: 12,
minWidth: 200, minWidth: 200,
}, },
@@ -1090,21 +973,21 @@ export const PurpleTheme = {
lineHeight: 18, lineHeight: 18,
}, },
regular: { regular: {
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
fontSize: 14, fontSize: 14,
}, },
regularGrey: { regularGrey: {
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
fontSize: 15, fontSize: 15,
lineHeight: 19, lineHeight: 19,
color: Colors.ShadeOfGrey, color: Colors.ShadeOfGrey,
}, },
semibold: { semibold: {
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 15, fontSize: 15,
}, },
bold: { bold: {
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
fontSize: 15, fontSize: 15,
justifyContent: 'center', justifyContent: 'center',
}, },
@@ -1178,27 +1061,23 @@ export const PurpleTheme = {
}, },
}), }),
SearchBarStyles: StyleSheet.create({ SearchBarStyles: StyleSheet.create({
idleSearchBarBottomLine: {
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.Gray40,
},
searchBarContainer: { searchBarContainer: {
alignItems: 'center', alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: Colors.Purple,
}, },
clearIcon: { vcSearchBarContainer: {
position: 'absolute',
right: 45,
width: 40,
justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}, borderBottomWidth: 0.5,
vcSearchBarContainer: {}, borderTopWidth: 0.5,
innerSearchBarContainer: { borderColor: Colors.DimGray,
flexDirection: 'row', width: Dimensions.get('window').width,
alignItems: 'center',
width: '100%',
backgroundColor: Colors.White, backgroundColor: Colors.White,
borderColor: Colors.veryLightBluishGray,
borderRadius: 18,
borderWidth: 2,
marginTop: 10,
paddingHorizontal: 20,
}, },
vcSearchIcon: { vcSearchIcon: {
justifyContent: 'center', justifyContent: 'center',
@@ -1207,17 +1086,17 @@ export const PurpleTheme = {
paddingLeft: 15, paddingLeft: 15,
}, },
searchIcon: { searchIcon: {
width: 25,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', height: Dimensions.get('window').height * 0.055,
width: Dimensions.get('window').width * 0.1,
}, },
searchBar: { searchBar: {
textAlign: I18nManager.isRTL ? 'right' : 'left', textAlign: I18nManager.isRTL ? 'right' : 'left',
height: Dimensions.get('window').height * 0.055, height: Dimensions.get('window').height * 0.055,
flex: 1, width: Dimensions.get('window').width * 0.75,
fontFamily: 'Montserrat_500Medium', },
fontSize: 17, clearSearch: {
marginRight: 40, padding: 10,
}, },
}), }),
ButtonStyles: StyleSheet.create({ ButtonStyles: StyleSheet.create({
@@ -1295,7 +1174,7 @@ export const PurpleTheme = {
backgroundColor: Colors.White, backgroundColor: Colors.White,
borderWidth: 0, borderWidth: 0,
marginTop: -15, marginTop: -15,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
padding: 0, padding: 0,
}, },
timeoutHintContainer: { timeoutHintContainer: {
@@ -1398,7 +1277,7 @@ export const PurpleTheme = {
}), }),
BackupAndRestoreStyles: StyleSheet.create({ BackupAndRestoreStyles: StyleSheet.create({
backupProgressText: { backupProgressText: {
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
fontSize: 14, fontSize: 14,
color: Colors.Gray44, color: Colors.Gray44,
}, },
@@ -1412,7 +1291,7 @@ export const PurpleTheme = {
textAlign: 'center', textAlign: 'center',
lineHeight: 22, lineHeight: 22,
fontSize: 17, fontSize: 17,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
marginHorizontal: 30, marginHorizontal: 30,
}, },
cloudInfo: { cloudInfo: {
@@ -1425,7 +1304,7 @@ export const PurpleTheme = {
paddingHorizontal: 10, paddingHorizontal: 10,
textAlign: 'center', textAlign: 'center',
paddingTop: 15, paddingTop: 15,
fontFamily: 'Montserrat_500Medium', fontFamily: 'Inter_500Medium',
fontSize: 14, fontSize: 14,
letterSpacing: 0, letterSpacing: 0,
lineHeight: 17, lineHeight: 17,
@@ -1443,7 +1322,7 @@ export const PurpleTheme = {
headerText: { headerText: {
justifyContent: 'center', justifyContent: 'center',
paddingLeft: 12, paddingLeft: 12,
fontFamily: 'Montserrat_500Medium', fontFamily: 'Inter_500Medium',
fontWeight: '600', fontWeight: '600',
fontSize: 14, fontSize: 14,
letterSpacing: 0, letterSpacing: 0,
@@ -1504,7 +1383,7 @@ export const PurpleTheme = {
}, },
kebabHeaderStyle: { kebabHeaderStyle: {
justifyContent: 'space-between', justifyContent: 'space-between',
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
}, },
}), }),
MessageOverlayStyles: StyleSheet.create({ MessageOverlayStyles: StyleSheet.create({
@@ -1603,7 +1482,7 @@ export const PurpleTheme = {
sliderTitle: { sliderTitle: {
color: Colors.White, color: Colors.White,
marginBottom: 20, marginBottom: 20,
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
}, },
text: { text: {
color: Colors.White, color: Colors.White,
@@ -1685,7 +1564,7 @@ export const PurpleTheme = {
marginHorizontal: 9, marginHorizontal: 9,
}, },
issuerHeading: { issuerHeading: {
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 14, fontSize: 14,
paddingHorizontal: 3, paddingHorizontal: 3,
marginBottom: 2, marginBottom: 2,
@@ -1709,7 +1588,7 @@ export const PurpleTheme = {
image: {marginTop: -60, paddingBottom: 26}, image: {marginTop: -60, paddingBottom: 26},
title: { title: {
color: Colors.Black, color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 18, fontSize: 18,
lineHeight: 21, lineHeight: 21,
paddingTop: 4, paddingTop: 4,
@@ -1718,7 +1597,7 @@ export const PurpleTheme = {
}, },
message: { message: {
textAlign: 'center', textAlign: 'center',
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
fontSize: 14, fontSize: 14,
lineHeight: 20, lineHeight: 20,
marginTop: 6, marginTop: 6,
@@ -1728,7 +1607,7 @@ export const PurpleTheme = {
}, },
additionalMessage: { additionalMessage: {
color: Colors.Black, color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 18, fontSize: 18,
lineHeight: 21, lineHeight: 21,
paddingTop: 4, paddingTop: 4,
@@ -1768,16 +1647,16 @@ export const PurpleTheme = {
paddingHorizontal: 15, paddingHorizontal: 15,
paddingBottom: 10, paddingBottom: 10,
backgroundColor: '#fff', backgroundColor: '#fff',
elevation: 5, elevation: 5, // For Android
shadowColor: '#000', shadowColor: '#000', // For iOS
shadowOffset: {width: 0, height: 4}, // only downward shadow shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.1, shadowOpacity: 0.2,
shadowRadius: 4, shadowRadius: 4,
zIndex: 1, zIndex: 1,
}, },
heading: { heading: {
color: 'black', color: 'black',
fontFamily: 'Montserrat_700Bold', fontFamily: 'Inter_700Bold',
fontSize: 18, fontSize: 18,
lineHeight: 19, lineHeight: 19,
padding: 10, padding: 10,
@@ -1921,16 +1800,16 @@ export const PurpleTheme = {
purposeText: { purposeText: {
fontSize: 13, fontSize: 13,
position: 'relative', position: 'relative',
fontFamily: 'Montserrat_500Medium', fontFamily: 'Inter_500Medium',
}, },
cardsSelectedText: { cardsSelectedText: {
fontFamily: 'Montserrat_500Medium', fontFamily: 'Inter_500Medium',
color: '#000000', color: '#000000',
fontSize: 14, fontSize: 14,
}, },
selectIDText: { selectIDText: {
position: 'relative', position: 'relative',
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 16, fontSize: 16,
}, },
}), }),
@@ -1950,11 +1829,11 @@ export const PurpleTheme = {
justifyContent: 'space-between', justifyContent: 'space-between',
}, },
bannerTitle: { bannerTitle: {
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
bannerGuide: { bannerGuide: {
opacity: 0.8, opacity: 0.8,
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
}, },
bannerEnablePermissionContainer: { bannerEnablePermissionContainer: {
marginTop: 15, marginTop: 15,
@@ -1962,7 +1841,7 @@ export const PurpleTheme = {
bannerEnablePermission: { bannerEnablePermission: {
borderBottomWidth: 1.5, borderBottomWidth: 1.5,
borderBottomColor: Colors.White, borderBottomColor: Colors.White,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
scannerContainer: { scannerContainer: {
borderRadius: 24, borderRadius: 24,
@@ -2016,25 +1895,21 @@ export const PurpleTheme = {
}, },
holdPhoneSteadyText: { holdPhoneSteadyText: {
color: Colors.Black, color: Colors.Black,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
fontSize: 15, fontSize: 15,
}, },
cameraFlipIcon: { cameraFlipIcon: {
height: 50, height: 50,
width: 50, width: 50,
}, },
iconText: { iconText: {fontFamily: 'Inter_600SemiBold', fontSize: 12, marginTop: 6},
fontFamily: 'Montserrat_600SemiBold',
fontSize: 12,
marginTop: 6,
},
}), }),
BottomTabBarStyle: StyleSheet.create({ BottomTabBarStyle: StyleSheet.create({
headerRightContainerStyle: {paddingEnd: 13}, headerRightContainerStyle: {paddingEnd: 13},
headerLeftContainerStyle: {paddingEnd: 13}, headerLeftContainerStyle: {paddingEnd: 13},
tabBarLabelStyle: { tabBarLabelStyle: {
fontSize: 12, fontSize: 12,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
}, },
tabBarStyle: { tabBarStyle: {
display: 'flex', display: 'flex',
@@ -2129,26 +2004,6 @@ export const PurpleTheme = {
marginTop: 10, marginTop: 10,
width: '80%', 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: { inputStyle: {
fontSize: 20, fontSize: 20,
fontWeight: '500', fontWeight: '500',
@@ -2309,7 +2164,7 @@ export const PurpleTheme = {
titleText: { titleText: {
fontSize: 17, fontSize: 17,
textAlign: 'left', textAlign: 'left',
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
paddingTop: 20, paddingTop: 20,
}, },
titleDescription: { titleDescription: {
@@ -2320,14 +2175,14 @@ export const PurpleTheme = {
}, },
noteTitleText: { noteTitleText: {
fontSize: 14, fontSize: 14,
fontFamily: 'Montserrat_600SemiBold', fontFamily: 'Inter_600SemiBold',
color: '#973C00', color: '#973C00',
marginBottom: 5, marginBottom: 5,
}, },
noteDescriptionText: { noteDescriptionText: {
fontSize: 13, fontSize: 13,
color: '#973C00', color: '#973C00',
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
lineHeight: 18, lineHeight: 18,
textAlign: 'left', textAlign: 'left',
marginLeft: -25, marginLeft: -25,
@@ -2346,7 +2201,7 @@ export const PurpleTheme = {
}, },
text: { text: {
fontSize: 14, fontSize: 14,
fontFamily: 'Montserrat_400Regular', fontFamily: 'Inter_400Regular',
color: 'black', color: 'black',
flex: 1, flex: 1,
}, },

2
ios/Inji/Info.plist
View File

@@ -61,7 +61,7 @@
<key>NSCameraUsageDescription</key> <key>NSCameraUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your camera</string> <string>Allow $(PRODUCT_NAME) to access your camera</string>
<key>NSFaceIDUsageDescription</key> <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> <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Allow $(PRODUCT_NAME) to access your location</string> <string>Allow $(PRODUCT_NAME) to access your location</string>
<key>NSLocationWhenInUseUsageDescription</key> <key>NSLocationWhenInUseUsageDescription</key>

10
locales/ara.json
View File

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

6
locales/en.json
View File

@@ -445,7 +445,7 @@
} }
}, },
"MyVcsTab": { "MyVcsTab": {
"searchByName": "search...", "searchByName": "Search",
"bringYourDigitalID": "Bring your digital identity", "bringYourDigitalID": "Bring your digital identity",
"generateVcDescription": "Tap on \"Download card\" below to download your card", "generateVcDescription": "Tap on \"Download card\" below to download your card",
"generateVcFABDescription": "Tap on \"+\" below to download your card", "generateVcFABDescription": "Tap on \"+\" below to download your card",
@@ -1162,9 +1162,7 @@
"verify": "Verify", "verify": "Verify",
"emptyCodeError": "Code cannot be empty", "emptyCodeError": "Code cannot be empty",
"invalidCharacters": "Only letters and numbers are allowed", "invalidCharacters": "Only letters and numbers are allowed",
"TransactionCode": "Transasction Code", "TransactionCode": "Transasction Code"
"showMore": "Show more ↓",
"showLess": "Show less ↑"
}, },
"trustScreen": { "trustScreen": {
"description": "Make sure you recognize or trust this issuer. Once you trust this issuer:", "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": { "MyVcsTab": {
"searchByName": "maghanap...", "searchByName": "Maghanap",
"bringYourDigitalID": "Dalhin ang Iyong Digital ID", "bringYourDigitalID": "Dalhin ang Iyong Digital ID",
"generateVcDescription": "Upang i-download ang iyong card i-tap ang I-download card sa ibaba", "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", "generateVcFABDescription": "Upang i-download ang iyong card i-tap ang + sa ibaba",
@@ -1144,9 +1144,7 @@
"verify": "I-verify", "verify": "I-verify",
"emptyCodeError": "Hindi puwedeng walang laman ang code", "emptyCodeError": "Hindi puwedeng walang laman ang code",
"invalidCharacters": "Mga letra at numero lamang ang pinapayagan", "invalidCharacters": "Mga letra at numero lamang ang pinapayagan",
"TransactionCode": "Transaction Code", "TransactionCode": "Transaction Code"
"showMore": "Ipakita pa ↓",
"showLess": "Ipakita nang kaunti ↑"
}, },
"trustScreen": { "trustScreen": {
"description": "Siguraduhin mong kilala mo o pinagkakatiwalaan mo ang issuer na ito. Kapag pinagkatiwalaan mo sila:", "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": { "MyVcsTab": {
"searchByName": "खोजें...", "searchByName": "खोजें",
"downloadCard": "डाउनलोड कार्ड", "downloadCard": "डाउनलोड कार्ड",
"bringYourDigitalID": "अपनी डिजिटल आईडी लाओ", "bringYourDigitalID": "अपनी डिजिटल आईडी लाओ",
"generateVcDescription": "अपना कार्ड डाउनलोड करने के लिए नीचे डाउनलोड कार्ड टैप करें", "generateVcDescription": "अपना कार्ड डाउनलोड करने के लिए नीचे डाउनलोड कार्ड टैप करें",
@@ -1146,9 +1146,7 @@
"verify": "सत्यापित करें", "verify": "सत्यापित करें",
"emptyCodeError": "कोड खाली नहीं हो सकता", "emptyCodeError": "कोड खाली नहीं हो सकता",
"invalidCharacters": "केवल अक्षर और संख्याएँ मान्य हैं", "invalidCharacters": "केवल अक्षर और संख्याएँ मान्य हैं",
"TransactionCode": "लेन-देन कोड", "TransactionCode": "लेन-देन कोड"
"showMore": "अधिक दिखाएं ↓",
"showLess": "कम दिखाएं ↑"
}, },
"trustScreen": { "trustScreen": {
"description": "सुनिश्चित करें कि आप इस जारीकर्ता को पहचानते हैं या उस पर भरोसा करते हैं। एक बार जब आप भरोसा कर लेते हैं:", "description": "सुनिश्चित करें कि आप इस जारीकर्ता को पहचानते हैं या उस पर भरोसा करते हैं। एक बार जब आप भरोसा कर लेते हैं:",

6
locales/kan.json
View File

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

6
locales/tam.json
View File

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

53
package-lock.json generated
View File

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

8
routes/index.ts
View File

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

2
routes/main.ts
View File

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

28
screens/AppLayout.tsx
View File

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

4
screens/AuthScreen.tsx
View File

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

5
screens/AuthWebViewScreen.tsx
View File

@@ -7,7 +7,6 @@ import {
TouchableOpacity, TouchableOpacity,
Text, Text,
BackHandler, BackHandler,
SafeAreaView,
} from 'react-native'; } from 'react-native';
import {WebView} from 'react-native-webview'; import {WebView} from 'react-native-webview';
import {Ionicons} from '@expo/vector-icons'; import {Ionicons} from '@expo/vector-icons';
@@ -135,7 +134,7 @@ const AuthWebViewScreen: React.FC<any> = ({route, navigation}) => {
); );
return ( return (
<SafeAreaView style={{flex: 1}}> <View style={{flex: 1}}>
<Header /> <Header />
{shouldRenderWebView && !showWebView && ( {shouldRenderWebView && !showWebView && (
<WebView style={{width: 0, height: 0}} source={{uri: 'about:blank'}} /> <WebView style={{width: 0, height: 0}} source={{uri: 'about:blank'}} />
@@ -158,7 +157,7 @@ const AuthWebViewScreen: React.FC<any> = ({route, navigation}) => {
thirdPartyCookiesEnabled={false} thirdPartyCookiesEnabled={false}
/> />
)} )}
</SafeAreaView> </View>
); );
}; };

4
screens/BiometricScreen.tsx
View File

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

8
screens/History/HistoryScreen.tsx
View File

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

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

@@ -21,7 +21,15 @@ export const BindingVcWarningOverlay: React.FC<
padding={'10'} padding={'10'}
width={Dimensions.get('screen').width * 0.8} width={Dimensions.get('screen').width * 0.8}
height={Dimensions.get('screen').height * 0}> 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"> <Column crossAlign="center" margin="0 0 30 0">
<Text testID="alert" weight="semibold"> <Text testID="alert" weight="semibold">

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

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

108
screens/Home/MyVcsTab.tsx
View File

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

3
screens/Home/OnboardingOverlay.tsx
View File

@@ -1,11 +1,10 @@
import React, {useRef} from 'react'; import React, {useRef} from 'react';
import AppIntroSlider from 'react-native-app-intro-slider'; 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 {Icon, Overlay} from 'react-native-elements';
import {Button, Column, Text} from '../../components/ui'; import {Button, Column, Text} from '../../components/ui';
import {Theme} from '../../components/ui/styleUtils'; import {Theme} from '../../components/ui/styleUtils';
import {useTranslation} from 'react-i18next'; import {useTranslation} from 'react-i18next';
import {SafeAreaView} from "react-native-safe-area-context";
export const OnboardingOverlay: React.FC<OnboardingProps> = props => { export const OnboardingOverlay: React.FC<OnboardingProps> = props => {
const slider = useRef<AppIntroSlider>(); 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 controller = useViewVcModal(props);
const profileImage = controller.verifiableCredentialData.face; const profileImage = controller.verifiableCredentialData.face;
const verificationStatus = controller.verificationStatus; const verificationStatus = controller.verificationStatus;
const verificationStatusMessage = controller.verificationStatus?.isRevoked const verificationStatusMessage = controller.verificationStatus?.isRevoked ? "revoked" : controller.verificationStatus?.isExpired ? "expired" : controller.verificationStatus?.statusType;
? 'revoked'
: controller.verificationStatus?.isExpired
? 'expired'
: controller.verificationStatus?.statusType;
const [verifiableCredential, setVerifiableCredential] = useState(null); const [verifiableCredential, setVerifiableCredential] = useState(null);
const [svgTemplate, setSvgTemplate] = useState<string[] | null>(null); const [svgTemplate, setSvgTemplate] = useState<string[] | null>(null);
const [svgRendererError, setSvgRendererError] = useState<string[] | null>( const [svgRendererError, setSvgRendererError] = useState<string[] | null>(
@@ -73,7 +69,7 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
!controller.verifiableCredentialData.vcMetadata.isVerified && !controller.verifiableCredentialData.vcMetadata.isVerified &&
!controller.isVerificationInProgress !controller.isVerificationInProgress
) { ) {
props.vcItemActor.send({type: 'VERIFY'}); props.vcItemActor.send({ type: 'VERIFY' });
} }
}, [controller.verifiableCredentialData.vcMetadata.isVerified]); }, [controller.verifiableCredentialData.vcMetadata.isVerified]);
@@ -90,12 +86,11 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
setLoadingSvg(true); setLoadingSvg(true);
const vcJsonString = JSON.stringify(controller.credential.credential); const vcJsonString = JSON.stringify(controller.credential.credential);
const result = const result = await VcRenderer.getInstance().generateCredentialDisplayContent(
await VcRenderer.getInstance().generateCredentialDisplayContent( controller.verifiableCredentialData.format,
controller.verifiableCredentialData.format, wellknown ?? null,
wellknown ?? null, vcJsonString,
vcJsonString, );
);
setSvgTemplate(result); setSvgTemplate(result);
setSvgRendererError(null); setSvgRendererError(null);
@@ -180,100 +175,94 @@ export const ViewVcModal: React.FC<ViewVcModalProps> = props => {
headerTitle={t('title')} headerTitle={t('title')}
onDismiss={handleModalDismiss} onDismiss={handleModalDismiss}
headerElevation={2}> headerElevation={2}>
<View style={{position: 'relative', flex: 1}}> <BannerNotificationContainer showVerificationStatusBanner={false} />
<BannerNotificationContainer showVerificationStatusBanner={false} />
{controller.showVerificationStatusBanner && ( {controller.showVerificationStatusBanner && (
<BannerNotification <BannerNotification
type={verificationStatus?.statusType as BannerStatus} type={verificationStatus?.statusType as BannerStatus}
message={t(`VcVerificationBanner:${verificationStatusMessage}`, { message={t(`VcVerificationBanner:${verificationStatusMessage}`, {
vcDetails: `${verificationStatus?.vcType} ${ vcDetails: `${verificationStatus?.vcType} ${verificationStatus?.vcNumber ?? ""}`,
verificationStatus?.vcNumber ?? '' })}
}`, onClosePress={controller.RESET_VERIFICATION_STATUS}
})} key={'reVerificationInProgress'}
onClosePress={controller.RESET_VERIFICATION_STATUS} testId={'reVerificationInProgress'}
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}
/> />
)}
<MessageOverlay {!isVCLoaded(verifiableCredential) ? (
testID="walletBindingError" <ActivityIndicator />
isVisible={controller.isBindingError} ) : (
title={controller.walletBindingError} <VcDetailsContainer
onButtonPress={() => { fields={fields}
controller.CANCEL(); 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 {controller.isAcceptingBindingOtp && (
isVisible={ <OtpVerificationModal
controller.isWalletBindingInProgress || controller.isReverifyingVc
}
title={t('inProgress')}
progress
/>
{controller.toastVisible && <ToastItem message={controller.message} />}
<WalletBinding
service={props.vcItemActor} 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 <BindingVcWarningOverlay
testID="removeVcWarningOverlay" isVisible={controller.isBindingWarning}
service={props.vcItemActor} onConfirm={controller.CONFIRM}
vcMetadata={controller.verifiableCredentialData.vcMetadata} onCancel={controller.CANCEL}
/> />
<HistoryTab <MessageOverlay
service={props.vcItemActor} testID="walletBindingError"
vcMetadata={VCMetadata.fromVC( isVisible={controller.isBindingError}
controller.verifiableCredentialData.vcMetadata, title={controller.walletBindingError}
)} onButtonPress={() => {
/> controller.CANCEL();
</View> }}
/>
<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> </Modal>
); );
}; };

21
screens/HomeScreenLayout.tsx
View File

@@ -14,19 +14,32 @@ import {I18nManager, View} from 'react-native';
import {isIOS} from '../shared/constants'; import {isIOS} from '../shared/constants';
import {Copilot} from '../components/ui/Copilot'; import {Copilot} from '../components/ui/Copilot';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import { useTabBarVisibility } from '../shared/hooks/useTabBarVisibility';
export const HomeScreenLayout: React.FC<RootRouteProps> = props => { export const HomeScreenLayout: React.FC<RootRouteProps> = props => {
const {t} = useTranslation('IssuersScreen'); const {t} = useTranslation('IssuersScreen');
const {Navigator, Screen} = createNativeStackNavigator(); const {Navigator, Screen} = createNativeStackNavigator();
const { hideTabBar, showTabBar } = useTabBarVisibility();
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
const routeName = getFocusedRouteNameFromRoute(props.route); const routeName = getFocusedRouteNameFromRoute(props.route);
if (routeName === 'IssuersScreen') { if (routeName === 'IssuersScreen') {
hideTabBar(); props.navigation.setOptions({tabBarStyle: {display: 'none'}});
} else { } 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]); }, [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 {useTranslation} from 'react-i18next';
import {Column, Text, Button} from '../../components/ui'; import {Column, Text, Button} from '../../components/ui';
import {Theme} from '../../components/ui/styleUtils'; import {Theme} from '../../components/ui/styleUtils';
import {SvgImage} from '../../components/ui/svg';
import {View, ScrollView} from 'react-native'; import {View, ScrollView} from 'react-native';
import BiometricIcon from '../../components/BiometricIcon';
export const StaticAuthScreen: React.FC = () => { export const StaticAuthScreen: React.FC = () => {
const {t} = useTranslation('AuthScreen'); const {t} = useTranslation('AuthScreen');
@@ -30,7 +30,7 @@ export const StaticAuthScreen: React.FC = () => {
overflow: 'hidden', overflow: 'hidden',
}}> }}>
<Column crossAlign="center"> <Column crossAlign="center">
<BiometricIcon size={66} /> {SvgImage.fingerprintIcon(66)}
<Column margin="30 0 0 0"> <Column margin="30 0 0 0">
<Text <Text
testID="header" 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 {Column, Row, Text} from '../../components/ui';
import {Theme} from '../../components/ui/styleUtils'; import {Theme} from '../../components/ui/styleUtils';
import {SvgImage} from '../../components/ui/svg'; 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 {Image, Icon} from 'react-native-elements';
import {ScrollView, View} from 'react-native'; import {ScrollView, View} from 'react-native';
import {HelpScreen} from '../../components/HelpScreen'; import {HelpScreen} from '../../components/HelpScreen';
@@ -90,6 +90,7 @@ export const StaticHomeScreen: React.FC = () => {
</Row> </Row>
<SearchBar <SearchBar
searchBarTestID="searchBar" searchBarTestID="searchBar"
isVcSearch
editable={false} editable={false}
placeholder={t('MyVcsTab:searchByName')} placeholder={t('MyVcsTab:searchByName')}
/> />

164
screens/Issuers/IssuersScreen.tsx
View File

@@ -1,17 +1,20 @@
import React, {useEffect, useLayoutEffect, useState} from 'react'; import React, { useEffect, useLayoutEffect, useState } from 'react';
import {useTranslation} from 'react-i18next'; import { useTranslation } from 'react-i18next';
import {FlatList, View} from 'react-native'; import { FlatList, Pressable, View } from 'react-native';
import {Issuer} from '../../components/openId4VCI/Issuer'; import { Issuer } from '../../components/openId4VCI/Issuer';
import {Error} from '../../components/ui/Error'; import { Error } from '../../components/ui/Error';
import {Header} from '../../components/ui/Header'; import { Header } from '../../components/ui/Header';
import {Button, Column, Row, Text} from '../../components/ui'; import { Button, Column, Row, Text } from '../../components/ui';
import {Theme} from '../../components/ui/styleUtils'; import { Theme } from '../../components/ui/styleUtils';
import {RootRouteProps} from '../../routes'; import { RootRouteProps } from '../../routes';
import {HomeRouteProps} from '../../routes/routeTypes'; import { HomeRouteProps } from '../../routes/routeTypes';
import {useIssuerScreenController} from './IssuerScreenController'; import { useIssuerScreenController } from './IssuerScreenController';
import {Loader} from '../../components/ui/Loader'; import { Loader } from '../../components/ui/Loader';
import ScanIcon from '../../assets/scanIcon.svg'; import ScanIcon from '../../assets/scanIcon.svg';
import {isTranslationKeyFound, removeWhiteSpace} from '../../shared/commonUtil'; import {
isTranslationKeyFound,
removeWhiteSpace,
} from '../../shared/commonUtil';
import { import {
ErrorMessage, ErrorMessage,
getDisplayObjectForCurrentLanguage, getDisplayObjectForCurrentLanguage,
@@ -23,27 +26,31 @@ import {
sendInteractEvent, sendInteractEvent,
sendStartEvent, sendStartEvent,
} from '../../shared/telemetry/TelemetryUtils'; } from '../../shared/telemetry/TelemetryUtils';
import {TelemetryConstants} from '../../shared/telemetry/TelemetryConstants'; import { TelemetryConstants } from '../../shared/telemetry/TelemetryConstants';
import {MessageOverlay} from '../../components/MessageOverlay'; import { MessageOverlay } from '../../components/MessageOverlay';
import {SearchBar} from '../../components/ui/SearchBar'; import { SearchBar } from '../../components/ui/SearchBar';
import {SvgImage} from '../../components/ui/svg'; import { SvgImage } from '../../components/ui/svg';
import {BannerNotificationContainer} from '../../components/BannerNotificationContainer'; import { Icon } from 'react-native-elements';
import {CredentialTypeSelectionScreen} from './CredentialTypeSelectionScreen'; import { BannerNotificationContainer } from '../../components/BannerNotificationContainer';
import {QrScanner} from '../../components/QrScanner'; import { CredentialTypeSelectionScreen } from './CredentialTypeSelectionScreen';
import {AUTH_ROUTES} from '../../routes/routesConstants'; import { QrScanner } from '../../components/QrScanner';
import {TransactionCodeModal} from './TransactionCodeScreen'; import { IssuersModel } from '../../machines/Issuers/IssuersModel';
import {TrustModal} from '../../components/TrustModal'; import { AUTH_ROUTES } from '../../routes/routesConstants';
import { TransactionCodeModal } from './TransactionCodeScreen';
import { TrustModal } from '../../components/TrustModal';
import i18next from 'i18next';
export const IssuersScreen: React.FC< export const IssuersScreen: React.FC<
HomeRouteProps | RootRouteProps HomeRouteProps | RootRouteProps
> = props => { > = props => {
const model = IssuersModel;
const controller = useIssuerScreenController(props); const controller = useIssuerScreenController(props);
const {i18n, t} = useTranslation('IssuersScreen'); const { i18n, t } = useTranslation('IssuersScreen');
const issuers = controller.issuers; const issuers = controller.issuers;
let [filteredSearchData, setFilteredSearchData] = useState(issuers); let [filteredSearchData, setFilteredSearchData] = useState(issuers);
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [tapToSearch, setTapToSearch] = useState(false); const [tapToSearch, setTapToSearch] = useState(false);
const showFullScreenError = controller.isError; const [clearSearchIcon, setClearSearchIcon] = useState(false);
const showFullScreenError = controller.isError
const isVerificationFailed = controller.verificationErrorMessage !== ''; const isVerificationFailed = controller.verificationErrorMessage !== '';
@@ -51,7 +58,8 @@ export const IssuersScreen: React.FC<
const verificationErrorMessage = isTranslationKeyFound(translationKey, t) const verificationErrorMessage = isTranslationKeyFound(translationKey, t)
? t(translationKey) ? t(translationKey)
: t('errors.verificationFailed.ERR_GENERIC'); : t('errors.verificationFailed.ERR_GENERIC');
useLayoutEffect(() => { useLayoutEffect(() => {
if (controller.loadingReason || showFullScreenError) { if (controller.loadingReason || showFullScreenError) {
@@ -64,12 +72,13 @@ export const IssuersScreen: React.FC<
header: props => ( header: props => (
<Header <Header
goBack={props.navigation.goBack} goBack={props.navigation.goBack}
title={controller.isQrScanning ? t('download') : t('title')} title={ controller.isQrScanning?t('download'):t('title')}
testID="issuersScreenHeader" testID="issuersScreenHeader"
/> />
), ),
}); });
} }
}, [ }, [
controller.loadingReason, controller.loadingReason,
controller.errorMessageType, controller.errorMessageType,
@@ -84,10 +93,8 @@ export const IssuersScreen: React.FC<
if (controller.isAuthEndpointToOpen) { if (controller.isAuthEndpointToOpen) {
(props.navigation as any).navigate(AUTH_ROUTES.AuthView, { (props.navigation as any).navigate(AUTH_ROUTES.AuthView, {
authorizationURL: controller.authEndpount, authorizationURL: controller.authEndpount,
clientId: controller.selectedIssuer.client_id ?? 'wallet', clientId: controller.selectedIssuer.client_id ?? "wallet",
redirectUri: redirectUri: controller.selectedIssuer.redirect_uri ?? "io.mosip.residentapp.inji://oauthredirect",
controller.selectedIssuer.redirect_uri ??
'io.mosip.residentapp.inji://oauthredirect',
controller: controller, controller: controller,
}); });
} }
@@ -95,7 +102,7 @@ export const IssuersScreen: React.FC<
const onPressHandler = (id: string, protocol: string) => { const onPressHandler = (id: string, protocol: string) => {
sendStartEvent( sendStartEvent(
getStartEventData(TelemetryConstants.FlowType.vcDownload, {id: id}), getStartEventData(TelemetryConstants.FlowType.vcDownload, { id: id }),
); );
sendInteractEvent( sendInteractEvent(
getInteractEventData( getInteractEventData(
@@ -117,9 +124,9 @@ export const IssuersScreen: React.FC<
return ( return (
controller.errorMessageType === ErrorMessage.TECHNICAL_DIFFICULTIES || controller.errorMessageType === ErrorMessage.TECHNICAL_DIFFICULTIES ||
controller.errorMessageType === controller.errorMessageType ===
ErrorMessage.CREDENTIAL_TYPE_DOWNLOAD_FAILURE || ErrorMessage.CREDENTIAL_TYPE_DOWNLOAD_FAILURE ||
controller.errorMessageType === controller.errorMessageType ===
ErrorMessage.AUTHORIZATION_GRANT_TYPE_NOT_SUPPORTED || ErrorMessage.AUTHORIZATION_GRANT_TYPE_NOT_SUPPORTED ||
controller.errorMessageType === ErrorMessage.NETWORK_REQUEST_FAILED controller.errorMessageType === ErrorMessage.NETWORK_REQUEST_FAILED
); );
} }
@@ -128,6 +135,11 @@ export const IssuersScreen: React.FC<
setTapToSearch(true); setTapToSearch(true);
}; };
const clearSearchText = () => {
filterIssuers('');
setClearSearchIcon(false);
};
const goBack = () => { const goBack = () => {
if ( if (
controller.errorMessageType && controller.errorMessageType &&
@@ -159,6 +171,11 @@ export const IssuersScreen: React.FC<
}); });
setFilteredSearchData(filteredData); setFilteredSearchData(filteredData);
setSearch(searchText); setSearch(searchText);
if (searchText !== '') {
setClearSearchIcon(true);
} else {
setClearSearchIcon(false);
}
}; };
if (controller.isSelectingCredentialType) { if (controller.isSelectingCredentialType) {
return <CredentialTypeSelectionScreen {...props} />; return <CredentialTypeSelectionScreen {...props} />;
@@ -178,7 +195,7 @@ export const IssuersScreen: React.FC<
primaryButtonText="goBack" primaryButtonText="goBack"
primaryButtonEvent={controller.RESET_VERIFY_ERROR} primaryButtonEvent={controller.RESET_VERIFY_ERROR}
primaryButtonTestID="goBack" primaryButtonTestID="goBack"
customStyles={{marginTop: '30%'}} customStyles={{ marginTop: '30%' }}
/> />
); );
} }
@@ -186,16 +203,14 @@ export const IssuersScreen: React.FC<
return issuerTrustConsentComponent(); return issuerTrustConsentComponent();
} }
if (controller.isTxCodeRequested) { if (controller.isTxCodeRequested) {
return ( return <TransactionCodeModal
<TransactionCodeModal visible={controller.isTxCodeRequested}
visible={controller.isTxCodeRequested} onDismiss={controller.CANCEL}
onDismiss={controller.CANCEL} onVerify={controller.TX_CODE_RECEIVED}
onVerify={controller.TX_CODE_RECEIVED} inputMode= {controller.txCodeDisplayDetails.inputMode}
inputMode={controller.txCodeDisplayDetails.inputMode} description={controller.txCodeDisplayDetails.description}
description={controller.txCodeDisplayDetails.description} length={controller.txCodeDisplayDetails.length}
length={controller.txCodeDisplayDetails.length} />
/>
);
} }
if (controller.isBiometricsCancelled) { if (controller.isBiometricsCancelled) {
@@ -238,7 +253,7 @@ export const IssuersScreen: React.FC<
primaryButtonTestID="tryAgain" primaryButtonTestID="tryAgain"
primaryButtonText={ primaryButtonText={
controller.errorMessageType != ErrorMessage.TECHNICAL_DIFFICULTIES && controller.errorMessageType != ErrorMessage.TECHNICAL_DIFFICULTIES &&
controller.errorMessageType != controller.errorMessageType !=
ErrorMessage.AUTHORIZATION_GRANT_TYPE_NOT_SUPPORTED ErrorMessage.AUTHORIZATION_GRANT_TYPE_NOT_SUPPORTED
? 'tryAgain' ? 'tryAgain'
: undefined : undefined
@@ -257,6 +272,7 @@ export const IssuersScreen: React.FC<
/> />
); );
} }
if (controller.isQrScanning) { if (controller.isQrScanning) {
return qrScannerComponent(); return qrScannerComponent();
@@ -264,21 +280,15 @@ export const IssuersScreen: React.FC<
function qrScannerComponent() { function qrScannerComponent() {
return ( return (
<Column crossAlign="center"> <Column crossAlign="center">
<QrScanner onQrFound={controller.QR_CODE_SCANNED} /> <QrScanner
onQrFound={controller.QR_CODE_SCANNED}
/>
</Column> </Column>
); );
} }
function issuerTrustConsentComponent() { function issuerTrustConsentComponent() {
return ( return <TrustModal isVisible={true} logo={controller.issuerLogo} name={controller.issuerName} onConfirm={controller.ON_CONSENT_GIVEN} onCancel={controller.CANCEL} />
<TrustModal
isVisible={true}
logo={controller.issuerLogo}
name={controller.issuerName}
onConfirm={controller.ON_CONSENT_GIVEN}
onCancel={controller.CANCEL}
/>
);
} }
return ( return (
@@ -301,6 +311,19 @@ export const IssuersScreen: React.FC<
onChangeText={filterIssuers} onChangeText={filterIssuers}
onLayout={() => 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> </Row>
<Text <Text
testID="issuersScreenDescription" testID="issuersScreenDescription"
@@ -310,26 +333,19 @@ export const IssuersScreen: React.FC<
}}> }}>
{t('description')} {t('description')}
</Text> </Text>
{search === '' && ( {search === '' && <View style={{ height: 85 }}><Issuer defaultLogo={ScanIcon} displayDetails={{
<View style={{height: 85}}> title: t('offerTitle'),
<Issuer locale: i18n.language,
defaultLogo={ScanIcon} description: t('offerDescription'),
displayDetails={{ }} onPress={
title: t('offerTitle'), controller.SCAN_CREDENTIAL_OFFER_QR_CODE
locale: i18n.language, } testID={'credentalOfferButton'} /></View>}
description: t('offerDescription'),
}}
onPress={controller.SCAN_CREDENTIAL_OFFER_QR_CODE}
testID={'credentalOfferButton'}
/>
</View>
)}
<Column scroll style={Theme.IssuersScreenStyles.issuersContainer}> <Column scroll style={Theme.IssuersScreenStyles.issuersContainer}>
{controller.issuers.length > 0 && ( {controller.issuers.length > 0 && (
<FlatList <FlatList
data={filteredSearchData} data={filteredSearchData}
renderItem={({item}) => ( renderItem={({ item }) => (
<Issuer <Issuer
testID={removeWhiteSpace(item.issuer_id)} testID={removeWhiteSpace(item.issuer_id)}
key={item.issuer_id} key={item.issuer_id}
@@ -352,3 +368,5 @@ export const IssuersScreen: React.FC<
</React.Fragment> </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 {Modal} from '../../components/ui/Modal';
import {CancelDownloadModal} from './ConfirmationModal'; import {CancelDownloadModal} from './ConfirmationModal';
import {Icon, Input} from 'react-native-elements'; import {Icon, Input} from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient';
export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => { export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
const {t} = useTranslation('transactionCodeScreen'); const {t} = useTranslation('transactionCodeScreen');
@@ -113,9 +112,7 @@ export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
setTextLineCount(e.nativeEvent.lines.length); setTextLineCount(e.nativeEvent.lines.length);
} }
}}> }}>
{props.description {t(`${props.description || t('description')}`)}
? t(props.description)
: t('description')}
</Text> </Text>
{textLineCount > maxLines && ( {textLineCount > maxLines && (
<Text <Text
@@ -123,7 +120,9 @@ export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
style={ style={
Theme.TransactionCodeScreenStyle.showMoreButton Theme.TransactionCodeScreenStyle.showMoreButton
}> }>
{showFullDescription ? t('showLess') : t('showMore')} {showFullDescription
? t('Show less ↑')
: t('Show more ↓')}
</Text> </Text>
)} )}
</Column> </Column>
@@ -172,72 +171,44 @@ export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
</> </>
) : ( ) : (
<> <>
<LinearGradient <Input
colors={ containerStyle={{
transactionCode.length > 0 width: Dimensions.get('window').width - 80,
? Theme.Colors.GradientColors alignSelf: 'center',
: [ }}
Theme.Colors.TransactionCodeBorderColor, placeholder={t('placeholder')}
Theme.Colors.TransactionCodeBorderColor, placeholderTextColor="#ACACAC"
] inputContainerStyle={{
borderBottomColor: '#C1C1C1',
borderBottomWidth: 1,
marginBottom: 16,
}}
inputStyle={
Theme.TransactionCodeScreenStyle.inputStyle
} }
start={{x: 0, y: 0}} maxLength={props.length ?? 30}
end={{x: 1, y: 0}} autoFocus
style={ secureTextEntry={!showCode}
Theme.TransactionCodeScreenStyle value={transactionCode}
.transactionGradientContainer keyboardType={
}> props.inputMode === 'numeric'
<View ? 'numeric'
style={{ : 'default'
backgroundColor: }
Theme.Colors.TransactionCodeBackgroundColor, onChangeText={handleChange}
borderRadius: 16, rightIcon={
overflow: 'hidden', <Icon
}}> name={showCode ? 'eye-off' : 'eye'}
<Input type="feather"
containerStyle={{ size={20}
width: Dimensions.get('window').width - 80, color="#888"
alignSelf: 'center', onPress={() => setShowCode(prev => !prev)}
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)}
/>
}
/> />
</View> }
</LinearGradient> />
<Button <Button
disabled={transactionCode.length == 0} disabled={transactionCode.length == 0}
title={t('verify')} title="Verify"
type="gradient" type="gradient"
onPress={handleVerify} onPress={handleVerify}
/> />

194
screens/MainLayout.tsx
View File

@@ -27,19 +27,19 @@ const {Navigator, Screen} = createBottomTabNavigator();
export const MainLayout: React.FC = () => { export const MainLayout: React.FC = () => {
const {t} = useTranslation('MainLayout'); const {t} = useTranslation('MainLayout');
const {appService} = useContext(GlobalContext); const {appService} = useContext(GlobalContext);
const scanService = appService.children.get('scan'); const scanService = appService.children.get('scan');
const options: BottomTabNavigationOptions = {
tabBarShowLabel: true,
tabBarActiveTintColor: Theme.Colors.IconBg,
...Theme.BottomTabBarStyle,
};
const navigation = useNavigation<ScanLayoutNavigation>(); const navigation = useNavigation<ScanLayoutNavigation>();
const linkCode = useSelector(appService, selectIsLinkCode); const linkCode = useSelector(appService, selectIsLinkCode);
const options: BottomTabNavigationOptions = {
tabBarShowLabel: true,
tabBarActiveTintColor: Theme.Colors.IconBg,
...Theme.BottomTabBarStyle,
};
const authorizationRequest = useSelector( const authorizationRequest = useSelector(
appService, appService,
selectAuthorizationRequest, selectAuthorizationRequest,
@@ -51,96 +51,96 @@ export const MainLayout: React.FC = () => {
} }
}, [linkCode, authorizationRequest]); }, [linkCode, authorizationRequest]);
return ( return (
<CopilotProvider <CopilotProvider
stopOnOutsideClick stopOnOutsideClick
androidStatusBarVisible androidStatusBarVisible
tooltipComponent={CopilotTooltip} tooltipComponent={CopilotTooltip}
tooltipStyle={Theme.Styles.copilotStyle} tooltipStyle={Theme.Styles.copilotStyle}
stepNumberComponent={() => null} stepNumberComponent={() => null}
animated> animated>
<Navigator <Navigator
initialRouteName={mainRoutes[0].name} initialRouteName={mainRoutes[0].name}
screenOptions={({route}) => ({ screenOptions={({route}) => ({
tabBarAccessibilityLabel: route.name, tabBarAccessibilityLabel: route.name,
...options, ...options,
})}> })}>
{mainRoutes.map((route, index) => ( {mainRoutes.map((route, index) => (
<Screen <Screen
key={route.name} key={route.name}
name={route.name} name={route.name}
component={route.component} component={route.component}
listeners={{ listeners={{
tabPress: e => { tabPress: e => {
if (route.name == share.name) { if (route.name == share.name) {
scanService?.send(ScanEvents.RESET()); scanService?.send(ScanEvents.RESET());
} }
}, },
}} }}
options={{ options={{
...route.options, ...route.options,
title: t(route.name), title: t(route.name),
tabBarIcon: ({focused}) => ( tabBarIcon: ({focused}) => (
<Column <Column
{...testIDProps(route.name + 'Icon')} {...testIDProps(route.name + 'Icon')}
align="center" align="center"
crossAlign="center" crossAlign="center"
style={focused ? Theme.Styles.bottomTabIconStyle : null}> style={focused ? Theme.Styles.bottomTabIconStyle : null}>
{route.name === 'home' ? ( {route.name === 'home' ? (
focused ? ( focused ? (
<LinearGradient <LinearGradient
colors={Theme.Colors.GradientColorsLight} colors={Theme.Colors.GradientColorsLight}
start={Theme.LinearGradientDirection.start} start={Theme.LinearGradientDirection.start}
end={Theme.LinearGradientDirection.end} end={Theme.LinearGradientDirection.end}
style={{ style={{
width: 36, width: 36,
height: 36, height: 36,
borderRadius: 10, borderRadius: 10,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}}> }}>
<View>{SvgImage[`${route.name}`](focused)}</View> <View>{SvgImage[`${route.name}`](focused)}</View>
</LinearGradient> </LinearGradient>
) : ( ) : (
<View>{SvgImage[`${route.name}`](focused)}</View> <View>{SvgImage[`${route.name}`](focused)}</View>
) )
) : ( ) : (
<Copilot <Copilot
title={t(`copilot:${route.name}Title`)} title={t(`copilot:${route.name}Title`)}
description={t(`copilot:${route.name}Message`)} description={t(`copilot:${route.name}Message`)}
order={2 + index} order={2 + index}
targetStyle={Theme.Styles.tabBarIconCopilot} targetStyle={Theme.Styles.tabBarIconCopilot}
children={ children={
<> <>
{focused ? ( {focused ? (
<LinearGradient <LinearGradient
style={{ style={{
width: 36, width: 36,
height: 36, height: 36,
borderRadius: 10, borderRadius: 10,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}} }}
colors={Theme.Colors.GradientColorsLight} colors={Theme.Colors.GradientColorsLight}
start={Theme.LinearGradientDirection.start} start={Theme.LinearGradientDirection.start}
end={Theme.LinearGradientDirection.end}> end={Theme.LinearGradientDirection.end}>
{SvgImage[`${route.name}`](focused)} {SvgImage[`${route.name}`](focused)}
</LinearGradient> </LinearGradient>
) : ( ) : (
<View>{SvgImage[`${route.name}`](focused)}</View> <View>{SvgImage[`${route.name}`](focused)}</View>
)} )}
</> </>
} }
/> />
)} )}
</Column> </Column>
), ),
tabBarAccessibilityLabel: isIOS() ? t(route.name) : route.name, tabBarAccessibilityLabel: isIOS() ? t(route.name) : route.name,
tabBarTestID: route.name, tabBarTestID: route.name,
}} }}
/> />
))} ))}
</Navigator> </Navigator>
</CopilotProvider> </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 {Button, Column, Row, Text} from '../../components/ui';
import {Theme} from '../../components/ui/styleUtils'; import {Theme} from '../../components/ui/styleUtils';
import {useQrLogin} from './QrLoginController'; import {useQrLogin} from './QrLoginController';
import {Image, View} from 'react-native'; import {Image} from 'react-native';
import {ListItem} from 'react-native-elements'; import {ListItem, Switch} from 'react-native-elements';
import {Modal} from '../../components/ui/Modal'; import {Modal} from '../../components/ui/Modal';
import {QrLoginRef} from '../../machines/QrLogin/QrLoginMachine'; import {QrLoginRef} from '../../machines/QrLogin/QrLoginMachine';
import {ScrollView} from 'react-native'; import {ScrollView} from 'react-native';
import {getClientNameForCurrentLanguage} from '../../i18n'; import {getClientNameForCurrentLanguage} from '../../i18n';
import Toggle from '../../components/Toggle';
export const QrConsent: React.FC<QrConsentProps> = props => { export const QrConsent: React.FC<QrConsentProps> = props => {
const {t} = useTranslation('QrLogin'); const {t} = useTranslation('QrLogin');
@@ -101,10 +100,12 @@ export const QrConsent: React.FC<QrConsentProps> = props => {
</ListItem.Title> </ListItem.Title>
</ListItem.Content> </ListItem.Content>
<Toggle <Switch
value={controller.isShare[claim]} value={controller.isShare[claim]}
onToggle={value => controller.SELECT_CONSENT(value, claim)} onValueChange={() =>
testID="voluntaryClaimToggle" controller.SELECT_CONSENT(controller.isShare[claim], claim)
}
color={Theme.Colors.Icon}
/> />
</ListItem> </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 {getDetailedViewFields} from '../../shared/openId4VCI/Utils';
import {VCProcessor} from '../../components/VC/common/VCProcessor'; import {VCProcessor} from '../../components/VC/common/VCProcessor';
import VcRenderer from '../../shared/vcRenderer/VcRenderer'; import VcRenderer from '../../shared/vcRenderer/VcRenderer';
import {BannerNotificationContainer} from '../../components/BannerNotificationContainer';
export const ReceiveVcScreen: React.FC = () => { export const ReceiveVcScreen: React.FC = () => {
const {t} = useTranslation('ReceiveVcScreen'); const {t} = useTranslation('ReceiveVcScreen');
@@ -54,12 +53,11 @@ export const ReceiveVcScreen: React.FC = () => {
setLoadingSvg(true); setLoadingSvg(true);
const vcJsonString = JSON.stringify(controller.credential.credential); const vcJsonString = JSON.stringify(controller.credential.credential);
const result = const result = await VcRenderer.getInstance().generateCredentialDisplayContent(
await VcRenderer.getInstance().generateCredentialDisplayContent( verifiableCredentialData.vcMetadata.format,
verifiableCredentialData.vcMetadata.format, wellknown ?? null,
wellknown ?? null, vcJsonString,
vcJsonString, );
);
setSvgTemplate(result); setSvgTemplate(result);
setSvgRendererError(null); setSvgRendererError(null);
@@ -97,7 +95,6 @@ export const ReceiveVcScreen: React.FC = () => {
return ( return (
<React.Fragment> <React.Fragment>
<BannerNotificationContainer />
{controller.isDisplayingIncomingVC && ( {controller.isDisplayingIncomingVC && (
<Column <Column
scroll scroll

81
screens/Request/RequestLayout.tsx
View File

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

5
screens/Request/RequestScreen.tsx
View File

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

22
screens/Scan/ScanLayoutController.ts
View File

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

8
screens/Scan/SendVPScreenController.ts
View File

@@ -49,10 +49,13 @@ import {ActivityLogEvents} from '../../machines/activityLog';
import {VPShareActivityLog} from '../../components/VPShareActivityLogEvent'; import {VPShareActivityLog} from '../../components/VPShareActivityLogEvent';
import {isIOS} from '../../shared/constants'; import {isIOS} from '../../shared/constants';
import { getFaceAttribute } from '../../components/VC/common/VCUtils'; import { getFaceAttribute } from '../../components/VC/common/VCUtils';
import { useTabBarVisibility } from '../../shared/hooks/useTabBarVisibility';
type MyVcsTabNavigation = NavigationProp<RootRouteProps>; type MyVcsTabNavigation = NavigationProp<RootRouteProps>;
const changeTabBarVisible = (visible: string) => {
Theme.BottomTabBarStyle.tabBarStyle.display = visible;
};
export function useSendVPScreen() { export function useSendVPScreen() {
const {t} = useTranslation('SendVPScreen'); const {t} = useTranslation('SendVPScreen');
const {appService} = useContext(GlobalContext); const {appService} = useContext(GlobalContext);
@@ -61,7 +64,6 @@ export function useSendVPScreen() {
const activityLogService = appService.children.get('activityLog')!!; const activityLogService = appService.children.get('activityLog')!!;
const navigation = useNavigation<MyVcsTabNavigation>(); const navigation = useNavigation<MyVcsTabNavigation>();
const openID4VPService = scanService.getSnapshot().context.OpenId4VPRef; const openID4VPService = scanService.getSnapshot().context.OpenId4VPRef;
const {showTabBar} = useTabBarVisibility();
// input descriptor id to VCs mapping // input descriptor id to VCs mapping
const [inputDescriptorIdToSelectedVcKeys, setInputDescriptorIdToSelectedVcKeys] = useState<Record<string, [string]>>( const [inputDescriptorIdToSelectedVcKeys, setInputDescriptorIdToSelectedVcKeys] = useState<Record<string, [string]>>(
{}, {},
@@ -272,7 +274,7 @@ export function useSendVPScreen() {
scanService.send(ScanEvents.RESET()); scanService.send(ScanEvents.RESET());
setTimeout(() => { setTimeout(() => {
navigation.navigate(BOTTOM_TAB_ROUTES.home, {screen: 'HomeScreen'}); navigation.navigate(BOTTOM_TAB_ROUTES.home, {screen: 'HomeScreen'});
showTabBar(); changeTabBarVisible('flex');
}, 0); }, 0);
}, },
SELECT_VC_ITEM: 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 {BOTTOM_TAB_ROUTES} from '../../routes/routesConstants';
import {VCItemMachine} from '../../machines/VerifiableCredential/VCItemMachine/VCItemMachine'; import {VCItemMachine} from '../../machines/VerifiableCredential/VCItemMachine/VCItemMachine';
import {Theme} from '../../components/ui/styleUtils'; import {Theme} from '../../components/ui/styleUtils';
import { useTabBarVisibility } from '../../shared/hooks/useTabBarVisibility';
type MyVcsTabNavigation = NavigationProp<RootRouteProps>; type MyVcsTabNavigation = NavigationProp<RootRouteProps>;
const changeTabBarVisible = (visible: string) => {
Theme.BottomTabBarStyle.tabBarStyle.display = visible;
};
export function useSendVcScreen() { export function useSendVcScreen() {
const {appService} = useContext(GlobalContext); const {appService} = useContext(GlobalContext);
const scanService = appService.children.get('scan')!!; const scanService = appService.children.get('scan')!!;
const vcMetaService = appService.children.get('vcMeta')!!; const vcMetaService = appService.children.get('vcMeta')!!;
const navigation = useNavigation<MyVcsTabNavigation>(); const navigation = useNavigation<MyVcsTabNavigation>();
const {showTabBar} = useTabBarVisibility();
const [selectedIndex, setSelectedIndex] = useState<number>(null); const [selectedIndex, setSelectedIndex] = useState<number>(null);
@@ -73,7 +75,7 @@ export function useSendVcScreen() {
RETRY_VERIFICATION: () => scanService.send(ScanEvents.RETRY_VERIFICATION()), RETRY_VERIFICATION: () => scanService.send(ScanEvents.RETRY_VERIFICATION()),
GO_TO_HOME: () => { GO_TO_HOME: () => {
navigation.navigate(BOTTOM_TAB_ROUTES.home, {screen: 'HomeScreen'}); navigation.navigate(BOTTOM_TAB_ROUTES.home, {screen: 'HomeScreen'});
showTabBar(); changeTabBarVisible('flex');
}, },
SELECT_VC_ITEM: SELECT_VC_ITEM:
(index: number) => (vcRef: ActorRefFrom<typeof VCItemMachine>) => { (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={() => { onDismiss={() => {
setShowAboutInji(!showAboutInji); setShowAboutInji(!showAboutInji);
}}> }}>
<View style={{position: 'relative', flex: 1}}> <BannerNotificationContainer />
<BannerNotificationContainer /> <LinearGradient
<LinearGradient colors={Theme.Colors.GradientColorsLight}
colors={Theme.Colors.GradientColorsLight} start={Theme.LinearGradientDirection.start}
start={Theme.LinearGradientDirection.start} end={Theme.LinearGradientDirection.end}>
end={Theme.LinearGradientDirection.end}> <Row
<Row testID="appID"
testID="appID" crossAlign="flex-start"
crossAlign="flex-start" style={Theme.Styles.primaryRow}>
style={Theme.Styles.primaryRow}> <Row>
<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} />
<Text <Text
weight="semibold" weight="semibold"
style={Theme.AboutInjiScreenStyle.poweredByTextStyle} style={Theme.AboutInjiScreenStyle.appIdTitleStyle}>
color="black"> {t('appID')}
{t('poweredBy')}
</Text> </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> </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> </Modal>
</React.Fragment> </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 {Copilot} from '../../components/ui/Copilot';
import {useCopilot} from 'react-native-copilot'; import {useCopilot} from 'react-native-copilot';
import {useNavigation, useRoute, RouteProp} from '@react-navigation/native'; 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 {TelemetryConstants} from '../../shared/telemetry/TelemetryConstants';
import {SUPPORTED_KEY_TYPES} from '../../shared/constants'; 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 { HelpIcon } from '../../components/ui/HelpIcon';
import { SafeAreaView } from 'react-native-safe-area-context';
const {RNSecureKeystoreModule} = NativeModules; const {RNSecureKeystoreModule} = NativeModules;
@@ -102,7 +108,6 @@ export const KeyManagementScreen: React.FC<KeyManagementScreenProps> = () => {
}; };
return ( return (
<SafeAreaView style={{flex: 1, backgroundColor: '#ffffff'}}>
<View <View
style={{ style={{
flex: 1, flex: 1,
@@ -129,61 +134,58 @@ export const KeyManagementScreen: React.FC<KeyManagementScreenProps> = () => {
triggerComponent={ HelpIcon() } triggerComponent={ HelpIcon() }
/> />
</View> </View>
<View style={{...Theme.KeyManagementScreenStyle.copilotViewStyle, position: "relative"}}> <BannerNotificationContainer />
<BannerNotificationContainer /> <View style={Theme.KeyManagementScreenStyle.copilotViewStyle}>
<View style={{flex:1}}> <Copilot
<Copilot title={t('copilot:keyManagementTitle')}
title={t('copilot:keyManagementTitle')} description={t('copilot:keyManagementDesc')}
description={t('copilot:keyManagementDesc')} order={7}
order={7} children={
children={ <DragList
<DragList style={Theme.KeyManagementScreenStyle.dragViewStyleSettingsScreen}
style={Theme.KeyManagementScreenStyle.dragViewStyleSettingsScreen} scrollEnabled={false}
scrollEnabled={false} data={keyOrder}
data={keyOrder} renderItem={renderItem}
renderItem={renderItem} keyExtractor={item => item.value}
keyExtractor={item => item.value} onReordered={handleReorder}
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> </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> </View>
</SafeAreaView>
); );
}; };

116
screens/Settings/ReceivedCardsModal.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import {useTranslation} from 'react-i18next'; import {useTranslation} from 'react-i18next';
import {RefreshControl, View} from 'react-native'; import {RefreshControl} from 'react-native';
import {Centered, Column, Text} from '../../components/ui'; import {Centered, Column, Text} from '../../components/ui';
import {Icon} from 'react-native-elements'; import {Icon} from 'react-native-elements';
import {Theme} from '../../components/ui/styleUtils'; import {Theme} from '../../components/ui/styleUtils';
@@ -9,7 +9,6 @@ import {ViewVcModal} from '../Home/ViewVcModal';
import {VcItemContainer} from '../../components/VC/VcItemContainer'; import {VcItemContainer} from '../../components/VC/VcItemContainer';
import {VCItemContainerFlowType} from '../../shared/Utils'; import {VCItemContainerFlowType} from '../../shared/Utils';
import {CopilotProvider} from 'react-native-copilot'; import {CopilotProvider} from 'react-native-copilot';
import {BannerNotificationContainer} from '../../components/BannerNotificationContainer';
export const ReceivedCardsModal: React.FC<ReceivedCardsProps> = ({ export const ReceivedCardsModal: React.FC<ReceivedCardsProps> = ({
isVisible, isVisible,
@@ -25,66 +24,63 @@ export const ReceivedCardsModal: React.FC<ReceivedCardsProps> = ({
headerTitle={t('header')} headerTitle={t('header')}
headerElevation={2} headerElevation={2}
onDismiss={onDismiss}> onDismiss={onDismiss}>
<View style={{position: 'relative', flex: 1}}> <Column
<BannerNotificationContainer /> scroll
<Column pX={15}
scroll refreshControl={
pX={15} <RefreshControl
refreshControl={ refreshing={controller.isRefreshingVcs}
<RefreshControl onRefresh={controller.REFRESH}
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"
/> />
}>
<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> </Modal>
); );
}; };

21
screens/Settings/SettingScreen.tsx
View File

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

18
screens/backupAndRestore/BackupAndRestoreScreen.tsx
View File

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

18
shared/hooks/useFont.ts
View File

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