Add: Update GoodID and claim flow

dev-release

@@ -44,7 +44,7 @@ const args = process.argv.slice(2);
 
   console.log("2. Build sdk-v2");
   await run("yarn workspace @gooddollar/web3sdk-v2 install");
-  await run("yarn workspace @gooddollar/web3sdk-v2 build");
+  await run("yarn workspace @gooddollar/web3sdk-v2 build:release");
 
   console.log("3. Publish sdk-v2");
   await run("npm publish --access public --tag beta", { cwd: pkgDir("sdk-v2") });

packages/good-design/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gooddollar/good-design",
   "repository": "https://github.com/GoodDollar/GoodWeb3-mono/packages/good-design",
-  "version": "0.1.45",
+  "version": "0.1.45-beta.efda7af",
   "scripts": {
     "build": "yarn install && yarn dev:clean && tsc && yarn copy:assets && yalc publish --push",
     "build:release": "yarn dev:clean && tsc -p tsconfig.release.json && yarn copy:assets",
@@ -27,7 +27,7 @@
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
     "@babel/runtime": "^7.18.9",
-    "@gooddollar/web3sdk-v2": "latest",
+    "@gooddollar/web3sdk-v2": "0.2.22-beta.efda7af",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",
@@ -47,7 +47,6 @@
     "@types/react-helmet": "^6.1.6",
     "@types/react-native": "0.70.4",
     "@usedapp/core": "^1.2.6",
-    "@web3-onboard/react": "^2.8.7",
     "babel-jest": "^27.3.1",
     "babel-loader": "^8.2.3",
     "babel-plugin-module-resolver": "^4.1.0",
@@ -94,6 +93,8 @@
     "react-inlinesvg": "2.3.0",
     "react-native": "0.70.4",
     "react-native-animatable": "^1.4.0",
+    "react-native-fs": "^2.20.0",
+    "react-native-image-picker": "^7.1.2",
     "react-native-mask-input": "^1.2.2",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-svg": "^12.1.1",
@@ -105,6 +106,7 @@
     "react-native-webview": "^13.2.2",
     "react-number-format": "^5.1.1",
     "react-use-promise": "^0.5.0",
+    "react-use-wizard": "^2.3.0",
     "require-from-string": "^2.0.2"
   }
 }

packages/good-design/src/apps/goodid/idcard/GoodIdCard.theme.tsx

@@ -0,0 +1,55 @@
+export const GoodIdCard = {
+  baseStyle: {
+    paddingX: 4,
+    paddingTop: 4,
+    paddingBottom: 2,
+    space: 4,
+    width: 343,
+    borderRadius: 15,
+    bgColor: "greyCard",
+    shadow: "1",
+    fontStyles: {
+      title: {
+        fontFamily: "heading",
+        fontSize: "xl",
+        fontWeight: 700,
+        color: "primary"
+      },
+      subHeading: {
+        fontFamily: "subheading",
+        fontWeight: 600,
+        color: "goodGrey.600"
+      },
+      subContent: {
+        fontFamily: "subheading",
+        fontSize: "sm",
+        color: "goodGrey.600"
+      },
+      footer: {
+        fontFamily: "subheading",
+        fontSize: "2xs",
+        color: "goodGrey.600"
+      }
+    }
+  }
+};
+
+export const CardRowItem = {
+  baseStyle: {
+    width: "45%",
+    fontStyles: {
+      subHeading: {
+        fontFamily: "subheading",
+        fontWeight: 700,
+        color: "goodGrey.600",
+        fontSize: "sm"
+      },
+      subContent: {
+        fontFamily: "subheading",
+        fontWeight: 400,
+        color: "goodGrey.450",
+        fontSize: "xs"
+      }
+    }
+  }
+};

packages/good-design/src/apps/goodid/idcard/GoodIdCard.tsx

@@ -0,0 +1,114 @@
+import React, { useMemo } from "react";
+import { Center, HStack, Heading, Text, VStack, IStackProps } from "native-base";
+import { useAggregatedCertificates } from "@gooddollar/web3sdk-v2";
+
+import { withTheme } from "../../../theme";
+import SvgXml from "../../../core/images/SvgXml";
+import UnknownAvatarSvg from "../../../assets/svg/unknown-avatar.svg";
+import GdVerifiedSvg from "../../../assets/svg/gdverified.svg";
+import { truncateMiddle } from "../../../utils";
+
+interface GoodIdCardProps extends IStackProps {
+  account: string;
+  isWhitelisted: boolean;
+  avatar?: string;
+  fullname?: string;
+  expiryDate?: string;
+  fontStyles?: any;
+}
+
+const CardRowItem = withTheme({ name: "CardRowItem" })(
+  ({
+    credentialLabel,
+    verifiedValue,
+    fontStyles,
+    ...props
+  }: {
+    credentialLabel: string;
+    verifiedValue?: string;
+    fontStyles?: any;
+  }) => {
+    const { subHeading, subContent } = fontStyles ?? {};
+
+    return (
+      <VStack {...props}>
+        <Text {...subHeading}>{credentialLabel}</Text>
+        <HStack space={1} alignItems="center">
+          <Text {...subContent}>{verifiedValue ?? `Your ${credentialLabel.toLowerCase()}`}</Text>
+          {verifiedValue && (
+            <Center mt="-3px">
+              <SvgXml src={GdVerifiedSvg} height="16" width="16" />
+            </Center>
+          )}
+        </HStack>
+      </VStack>
+    );
+  }
+);
+
+const GoodIdCard = withTheme({ name: "GoodIdCard", skipProps: "credentialsList" })(
+  ({ account, isWhitelisted, avatar, fullname, expiryDate, ...props }: GoodIdCardProps) => {
+    const { title, subHeading, subContent, footer } = props.fontStyles ?? {};
+    const truncatedAccount = truncateMiddle(account, 11);
+
+    const certificates = useAggregatedCertificates(account);
+
+    const verifiedValues = useMemo(() => {
+      let Age: string | null = null,
+        Gender: string | null = null,
+        Country: string | null = null;
+
+      const filtered = certificates?.filter(
+        certificate => certificate.typeName === "Identity" || certificate.typeName === "Location"
+      );
+
+      filtered?.forEach(({ certificate, typeName }) => {
+        const { credentialSubject } = certificate ?? {};
+        if (credentialSubject && typeName === "Identity") {
+          const { age: VerifiableAgeCredential, gender: VerifiableGenderCredential } = credentialSubject;
+
+          Age = Age ?? `${VerifiableAgeCredential.from}-${VerifiableAgeCredential.to}`;
+          Gender = Gender ?? VerifiableGenderCredential;
+        }
+
+        if (credentialSubject && typeName === "Location") {
+          Country = Country ?? credentialSubject.countryCode;
+        }
+      });
+
+      return { Age, Gender, Country };
+    }, [certificates]);
+
+    return (
+      <VStack {...props}>
+        <HStack justifyContent="space-between">
+          <VStack>
+            <Heading {...title}>GoodID</Heading>
+            <HStack space={1} alignItems="center">
+              <Text {...subHeading}>{truncatedAccount}</Text>
+              {isWhitelisted && (
+                <Center mt="-3px">
+                  <SvgXml src={GdVerifiedSvg} height="16" width="16" />
+                </Center>
+              )}
+            </HStack>
+            {fullname && <Text {...subContent}>{fullname}</Text>}
+          </VStack>
+          <VStack justifyContent="flex-start">
+            <SvgXml src={avatar ?? UnknownAvatarSvg} height="56" width="56" />
+          </VStack>
+        </HStack>
+        <HStack space={2} flexWrap="wrap">
+          {Object.entries(verifiedValues).map(([label, value]) => (
+            <CardRowItem key={label} credentialLabel={label} verifiedValue={value ?? "-"} />
+          ))}
+        </HStack>
+        <HStack>
+          <Text {...footer}>{expiryDate ?? "Expires on February 12, 2099"}</Text>
+        </HStack>
+      </VStack>
+    );
+  }
+);
+
+export default GoodIdCard;

packages/good-design/src/apps/goodid/idcard/index.ts

@@ -0,0 +1 @@
+export { default as GoodIdCard } from "./GoodIdCard";

packages/good-design/src/apps/goodid/index.ts

@@ -0,0 +1 @@
+export * from "./idcard";