From e3973c802621b6c0c18ba84652bff95e192b2de1 Mon Sep 17 00:00:00 2001
From: Mati Dastugue <mdastugu@amazon.com>
Date: Thu, 18 Feb 2021 14:07:30 -0300
Subject: [PATCH] Added help center article link to step 2

---
 .../SafeOwnersConfirmationsForm/index.tsx           | 13 +++++++++++++
 .../components/SafeOwnersConfirmationsForm/style.ts |  8 ++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx b/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx
index 8dd4c27d..0d02b3ee 100644
--- a/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx
+++ b/src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx
@@ -1,5 +1,6 @@
 import InputAdornment from '@material-ui/core/InputAdornment'
 import MenuItem from '@material-ui/core/MenuItem'
+import { Icon, Link, Text } from '@gnosis.pm/safe-react-components'
 import { makeStyles } from '@material-ui/core/styles'
 import CheckCircle from '@material-ui/icons/CheckCircle'
 import * as React from 'react'
@@ -159,6 +160,18 @@ const SafeOwnersForm = (props): React.ReactElement => {
           Add additional owners (e.g. wallets of your teammates) and specify how many of them have to confirm a
           transaction before it gets executed. You can also add/remove owners and change the signature threshold after
           your Safe is created.
+          <Link
+            href="https://help.gnosis-safe.io/en/articles/4772567-what-gnosis-safe-setup-should-i-use"
+            target="_blank"
+            className={classes.link}
+            rel="noreferrer"
+            title="Learn about which Safe setup to use"
+          >
+            <Text size="xl" as="span" color="primary">
+              Learn about which Safe setup to use
+            </Text>
+            <Icon size="sm" type="externalLink" color="primary" />
+          </Link>
         </Paragraph>
       </Block>
       <Hairline />
diff --git a/src/routes/open/components/SafeOwnersConfirmationsForm/style.ts b/src/routes/open/components/SafeOwnersConfirmationsForm/style.ts
index 61c73caf..6b55841f 100644
--- a/src/routes/open/components/SafeOwnersConfirmationsForm/style.ts
+++ b/src/routes/open/components/SafeOwnersConfirmationsForm/style.ts
@@ -8,6 +8,14 @@ export const styles = createStyles({
   title: {
     padding: `${md} ${lg}`,
   },
+  link: {
+    paddingLeft: `${sm}`,
+    '& svg': {
+      position: 'relative',
+      top: '1px',
+      left: '3px',
+    },
+  },
   owner: {
     flexDirection: 'column',
     marginTop: '12px',