feat: credential overview

[janrtvld]

RPReplay_Final1685371507.mov

[TimoGlastra]

Really like the recently added vs all credentials. it seems like a good way to clear the clutter! Maybe it could even be a favourites, or frequently used list in the future

[TimoGlastra]

Nice!

[TimoGlastra]

I agree with this change. Reason I kept it loading as that's the pattern used by the react-hooks AFJ extension and if we start using more types from there it will be inconsistent.

[janrtvld]

I've removed the bottom tab bar and moved the scan button to the top. Not sure if we want the color? Or should we just make it a plain button?

[TimoGlastra]

I've removed the bottom tab bar and moved the scan button to the top. Not sure if we want the color? Or should we just make it a plain button?

Maybe we can add some gradient to the button. But this is just a random thought so please ignore this if I'm saying something stupid

[TimoGlastra]

Also, seems there's merge confilcts

[janrtvld]

Whats the trick for the CI? :) @TimoGlastra

[TimoGlastra]

Pushed some changs to fix the CI @janrxyz.

This was the issue:

  ➤ YN0000: │ @@ -2624,9 +2624,8 @@
  ➤ YN0000: │      "@aries-framework/openid4vc-client": ^0.4.0-alpha.126
  ➤ YN0000: │      "@aries-framework/react-hooks": 0.4.2
  ➤ YN0000: │      "@aries-framework/react-native": ^0.4.0-alpha.126
  ➤ YN0000: │      "@hyperledger/aries-askar-react-native": 0.1.0-dev.8
  ➤ YN0028: │ -    "@sphereon/openid4vci-client": ^0.4.0
  ➤ YN0000: │    peerDependencies:
  ➤ YN0000: │      "@hyperledger/aries-askar-react-native": 0.1.0-dev.8
  ➤ YN0000: │    languageName: unknown
  ➤ YN0000: │    linkType: soft
  ➤ YN0000: │ 
  ➤ YN0028: │ The lockfile would have been modified by this install, which is explicitly forbidden.

[TimoGlastra]

Not for now, but I think we should extract this to a spearate component in the future. That will make it cleaner IMO:

	<CredentialCardsList 
	  title="Recently Added"
	  credentials={record.slice(0 ,3)}
	  onPressCredential={(credential) => navigateToCredentialDetail(credential.id)}
	/>

And the implementation:

const CredentialCardsList = ({ credentials }) => {

   const height = BASE_CREDENTIAL_CARD_HEIGHT + credentials.length * CREDENTIAL_TOP_INFO_OFFSET

  return (
        <YStack g="lg" width="100%">
          <Heading variant="h3" textAlign="left">
            Recently added
          </Heading>
          <ZStack
            f={0}
            flexBasis="auto"
            height={height}
          >
            {credentials.map((c, idx) => {
              const credential = x.credential
              return (
                <XStack
                  key={x.id}
                  mt={72 * idx}
                  br={borderRadiusSizes.xl}
                  borderColor="$lightTranslucent"
                  borderWidth={0.5}
                >
                  <CredentialCard
                    onPress={() => navigateToCredentialDetail(x.id)}
                    iconUrl={credential.issuer.iconUrl}
                    name={credential.name}
                    issuerName={credential.issuer.name}
                    subtitle={credential.description}
                    bgColor={credential?.credentialBranding?.backgroundColor}
                    shadow={false}
                  />
                </XStack>
              )
            })}
          </ZStack>
        </YStack>
  )
}

[TimoGlastra]

another magic number. Is the overlap 100PX and we render 72PX?