chore-fix: styling, links, copy

packages/good-design/src/apps/ubi/wizard/ClaimWizard.tsx

@@ -40,7 +40,7 @@ const WizardWrapper: FC<PropsWithChildren<{ skipOffer: Error | boolean | undefin
 
   const customTitle = {
     title: /*i18n*/ {
-      id: "Please sign with \n your wallet \n({remainingClaims} transactions left)",
+      id: "Please sign with \n your wallet \n({remainingClaims} transaction(s) left)",
       values: { remainingClaims: remainingClaims }
     }
   };
@@ -90,7 +90,7 @@ const WizardWrapper: FC<PropsWithChildren<{ skipOffer: Error | boolean | undefin
       {error ? <ErrorModal error={error} onClose={handleClose} overlay="dark" /> : null}
 
       {isClaiming && withSignModals ? (
-        <TxModal type="sign" customTitle={customTitle} isPending={isClaiming} />
+        <TxModal type="signMultiClaim" customTitle={customTitle} isPending={isClaiming} />
       ) : remainingClaims !== undefined ? (
         <TxModal
           type="send"

packages/good-design/src/core/buttons/LearnButton.tsx

@@ -7,8 +7,6 @@ import { Image } from "../images";
 import { linksNew } from "../constants";
 import { TransText } from "../layout";
 
-export type learnSources = "send" | "bridging" | "network" | "sign" | "identity";
-
 type LearnButtonType = {
   icon?: any;
   label?: string;

packages/good-design/src/core/constants.ts

@@ -1,7 +1,7 @@
 import BillyWaiting from "../assets/images/billy-waiting.png";
 import BillySign from "../assets/images/billy-sign.png";
 
-export type learnSources = "send" | "bridging" | "network" | "sign" | "identity";
+export type learnSources = "send" | "bridging" | "network" | "sign" | "signMultiClaim" | "identity";
 type links = { link: string; label: string; icon: any };
 
 export const linksNew: Record<learnSources, links> = {
@@ -25,8 +25,13 @@ export const linksNew: Record<learnSources, links> = {
     label: /*i18n*/ "What is signing?",
     icon: BillySign
   },
+  signMultiClaim: {
+    link: "https://gooddollar.notion.site/What-is-signing-b0019fe6c43241068050c9aa16e87ee1",
+    label: /*i18n*/ "What is signing?",
+    icon: BillySign
+  },
   identity: {
-    link: "https://www.notion.so/gooddollar/Get-G-873391f31aee4a18ab5ad7fb7467acb3",
+    link: "https://docs.gooddollar.org/about-the-protocol/sybil-resistance",
     label: /*i18n*/ "Learn about the identification process",
     icon: BillySign
   }

packages/good-design/src/core/modals/BasicModal.tsx

@@ -86,7 +86,7 @@ const BasicModal: FC<BasicModalProps> = ({
             ..._modalContainer,
             maxWidth: 343,
             paddingTop: 0,
-            paddingBottom: 24,
+            paddingBottom: footer ? 0 : 24,
             paddingLeft: 0,
             paddingRight: 0
           }}
@@ -127,7 +127,10 @@ const BasicModal: FC<BasicModalProps> = ({
             </NBModal.Content>
           </VStack>
           {footer ? (
-            <VStack paddingTop={0} paddingLeft={6} paddingRight={6} paddingBottom={6}>
+            <VStack
+              paddingTop={0}
+              style={{ ...Platform.select({ android: { paddingLeft: 6, paddingRight: 6, paddingBottom: 6 } }) }}
+            >
               <NBModal.Actions borderTopWidth={hasBottomBorder ? 1 : 0} {..._footer} padding="0" bgColor={bgColor}>
                 {footer}
                 {actionButton ? <Button.Group space={2}>{actionButton}</Button.Group> : null}

packages/good-design/src/core/web3/modals/TxModal.tsx

@@ -1,13 +1,14 @@
 import React, { FC } from "react";
 import { noop } from "lodash";
 import { TransactionStatus } from "@usedapp/core";
+import { VStack } from "native-base";
 
 import { TransText } from "../../layout";
 import BasicStyledModal from "./BasicStyledModal";
 import { LearnButton } from "../../buttons";
 
 interface ITxModalProps {
-  type: "send" | "sign" | "identity";
+  type: "send" | "sign" | "signMultiClaim" | "identity";
   isPending: boolean;
   customTitle?: { title: { id: string; values: any } };
   onClose?: () => void;
@@ -21,10 +22,14 @@ const txModalCopy = {
     content:
       /*i18n*/ "To complete this action, sign with your wallet. It can take a moment for a transaction to be validated."
   },
+  signMultiClaim: {
+    title: "",
+    content: /*i18n*/ "To complete this action, sign with your wallet."
+  },
   identity: {
-    title: /*i18n*/ "Please sign with \n your wallet",
+    title: /*i18n*/ "Sign to Verify Uniqueness",
     content:
-      /*i18n*/ "We need to know you’re you! Please sign\nwith your wallet to verify your identity.\n Don’t worry, no link is kept between your\nidentity record and your wallet address."
+      /*i18n*/ "You’ll be asked to sign with your wallet to begin the verification.You may have to do this again from time to time."
   },
   send: {
     title: /*i18n*/ "Waiting for \n confirmation",
@@ -34,6 +39,35 @@ const txModalCopy = {
 
 const TxModalContent = ({ content }: { content: string }) => <TransText t={content} variant="sm-grey-650" />;
 
+const TxContentMultiClaim = ({ content }: { content: string }) => (
+  <VStack space={2} paddingX={2}>
+    <TransText t={content} variant="sm-grey-650" />
+    <TransText
+      t={/*i18n*/ "It may take over a minute for transaction(s) to be signed."}
+      variant="sm-grey-650"
+      fontWeight="bold"
+    />
+  </VStack>
+);
+
+const TxContentIdentity = ({ content }: { content: string }) => (
+  <VStack space={2} paddingX={2}>
+    <TransText
+      t={/*i18n*/ "You’re almost there! To claim G$, you need prove you are a unique human."}
+      variant="sm-grey-650"
+      fontWeight="bold"
+    />
+    <TransText t={content} variant="sm-grey-650" />
+  </VStack>
+);
+
+const ContentComponent = {
+  sign: TxModalContent,
+  signMultiClaim: TxContentMultiClaim,
+  identity: TxContentIdentity,
+  send: TxModalContent
+};
+
 export const TxModal: FC<ITxModalProps> = ({
   isPending,
   onClose = noop,
@@ -42,14 +76,16 @@ export const TxModal: FC<ITxModalProps> = ({
   ...props
 }: ITxModalProps) => {
   const { title, content } = txModalCopy[type];
+  const Content = ContentComponent[type];
+
   return (
     <BasicStyledModal
       {...props}
       type="learn"
       show={isPending}
       onClose={onClose}
       title={customTitle ?? title}
-      body={<TxModalContent content={content} />}
+      body={<Content content={content} />}
       footer={<LearnButton type={type} />}
       withOverlay="dark"
       withCloseButton={false}

packages/good-design/src/stories/W3Wrapper.tsx

@@ -18,7 +18,7 @@ const config: Config = {
   readOnlyChainId: 42220,
   readOnlyUrls: {
     122: "https://rpc.fuse.io",
-    42220: "http://127.0.0.1:8545"
+    42220: "https://forno.celo.org"
   }
 };