gnosis safe message

gallery-so · Apr 18, 2024 · faeeeff · faeeeff
1 parent 6a9cff0
commit faeeeff
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 19 deletions.
diff --git a/apps/web/src/components/WalletSelector/multichain/DelegateCashMessage.tsx b/apps/web/src/components/WalletSelector/multichain/DelegateCashMessage.tsx
@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 
-import { Button } from '~/components/core/Button/Button';
 import GalleryLink from '~/components/core/GalleryLink/GalleryLink';
 import { VStack } from '~/components/core/Spacer/Stack';
 import { BaseM, TitleS } from '~/components/core/Text/Text';
@@ -11,11 +10,7 @@ import { contexts } from '~/shared/analytics/constants';
 
 import { walletIconMap } from './WalletButton';
 
-type Props = {
-  reset: () => void;
-};
-
-export default function DelegateCashMessage({ reset }: Props) {
+export default function DelegateCashMessage() {
   return (
     <EmptyState title="">
       <VStack gap={24}>
@@ -88,15 +83,6 @@ export default function DelegateCashMessage({ reset }: Props) {
             .
           </StyledText>
         </VStack>
-        <Button
-          // no need to track backing out of informational dialog
-          eventElementId={null}
-          eventName={null}
-          eventContext={null}
-          onClick={reset}
-        >
-          Back
-        </Button>
       </VStack>
     </EmptyState>
   );

diff --git a/apps/web/src/components/WalletSelector/multichain/GnosisSafeMessage.tsx b/apps/web/src/components/WalletSelector/multichain/GnosisSafeMessage.tsx
@@ -0,0 +1,87 @@
+import { contexts } from 'shared/analytics/constants';
+import styled from 'styled-components';
+
+import GalleryLink from '~/components/core/GalleryLink/GalleryLink';
+import { VStack } from '~/components/core/Spacer/Stack';
+import { BaseM, TitleS } from '~/components/core/Text/Text';
+import transitions from '~/components/core/transitions';
+import { EmptyState } from '~/components/EmptyState/EmptyState';
+import { GALLERY_TWITTER, GALLERY_WARPCAST_CHANNEL } from '~/constants/urls';
+
+import { walletIconMap } from './WalletButton';
+
+export function GnosisSafeMessage() {
+  return (
+    <EmptyState title="">
+      <VStack gap={24}>
+        <VStack align="center" gap={4}>
+          <Icon src={walletIconMap['gnosis_safe']} />
+          <TitleS>Connect with Gnosis Safe</TitleS>
+        </VStack>
+        <VStack align="flex-start">
+          <TitleS>New users</TitleS>
+          <StyledText>
+            Please create a Gallery account using Email, Farcaster, or hot wallet, then reach out to
+            our team via{' '}
+            <GalleryLink
+              href={GALLERY_TWITTER}
+              eventElementId="Twitter Link"
+              eventName="Twitter Link Click"
+              eventContext={contexts.Authentication}
+            >
+              Twitter
+            </GalleryLink>{' '}
+            or{' '}
+            <GalleryLink
+              href={GALLERY_WARPCAST_CHANNEL}
+              eventElementId="Farcaster Link"
+              eventName="Farcaster Link Click"
+              eventContext={contexts.Authentication}
+            >
+              Farcaster
+            </GalleryLink>{' '}
+            and we will link your Gnosis address for you.
+          </StyledText>
+        </VStack>
+        <VStack align="flex-start">
+          <TitleS>Existing users</TitleS>
+          <StyledText>
+            If you'd like to connect your Gnosis address to an existing Gallery account, please
+            reach out to our team via{' '}
+            <GalleryLink
+              href={GALLERY_TWITTER}
+              eventElementId="Twitter Link"
+              eventName="Twitter Link Click"
+              eventContext={contexts.Authentication}
+            >
+              Twitter
+            </GalleryLink>{' '}
+            or{' '}
+            <GalleryLink
+              href={GALLERY_WARPCAST_CHANNEL}
+              eventElementId="Farcaster Link"
+              eventName="Farcaster Link Click"
+              eventContext={contexts.Authentication}
+            >
+              Farcaster
+            </GalleryLink>
+            .
+          </StyledText>
+        </VStack>
+      </VStack>
+    </EmptyState>
+  );
+}
+
+const StyledText = styled(BaseM)`
+  text-align: left;
+`;
+
+const Icon = styled.img`
+  width: 24px;
+  height: 24px;
+  margin: 5px;
+
+  transform: scale(1);
+  transition: transform ${transitions.cubic};
+`;
diff --git a/apps/web/src/components/WalletSelector/multichain/MultichainWalletSelector.tsx b/apps/web/src/components/WalletSelector/multichain/MultichainWalletSelector.tsx
@@ -18,8 +18,7 @@ import { ConnectionMode } from '../WalletSelector';
 import DelegateCashMessage from './DelegateCashMessage';
 import { EthereumAddWallet } from './EthereumAddWallet';
 import { EthereumAuthenticateWallet } from './EthereumAuthenticateWallet';
-import { GnosisSafeAddWallet } from './GnosisSafeAddWallet';
-import { GnosisSafeAuthenticateWallet } from './GnosisSafeAuthenticateWallet';
+import { GnosisSafeMessage } from './GnosisSafeMessage';
 import { SupportedAuthMethod, supportedAuthMethods } from './supportedAuthMethods';
 import { TezosAddWallet } from './tezos/TezosAddWallet';
 import { TezosAuthenticateWallet } from './tezos/TezosAuthenticateWallet';
@@ -96,7 +95,10 @@ export default function MultichainWalletSelector({
       return (
         <WalletSelectorWrapper>
           <Web3WalletProvider>
-            <GnosisSafeAddWallet queryRef={query} reset={reset} />
+            <GnosisSafeMessage />
+            {/*
+            Gnosis flow currently broken; we should fix eventually
+            <GnosisSafeAddWallet queryRef={query} reset={reset} /> */}
           </Web3WalletProvider>
         </WalletSelectorWrapper>
       );
@@ -106,7 +108,10 @@ export default function MultichainWalletSelector({
       return (
         <WalletSelectorWrapper>
           <Web3WalletProvider>
-            <GnosisSafeAuthenticateWallet reset={reset} />
+            <GnosisSafeMessage />
+            {/*
+            Gnosis flow currently broken; we should fix eventually
+            <GnosisSafeAuthenticateWallet reset={reset} /> */}
           </Web3WalletProvider>
         </WalletSelectorWrapper>
       );

diff --git a/apps/web/src/constants/urls.ts b/apps/web/src/constants/urls.ts
@@ -6,3 +6,4 @@ export const GALLERY_TWITTER = 'https://twitter.com/gallery';
 export const GALLERY_DISCORD = 'https://discord.gg/MREFJFvBTe';
 export const GALLERY_MEMBERSHIP_OPENSEA = 'https://opensea.io/collection/gallery-membership-cards';
 export const GALLERY_BLOG = 'https://gallery.mirror.xyz';
+export const GALLERY_WARPCAST_CHANNEL = 'https://warpcast.com/~/channel/gallery';