add Request Testnet SUI on Discord button (MystenLabs#8042)

- Added request token from Discord - added Plausible event tracking https://user-images.githubusercontent.com/8676844/216609502-4d1934ea-d63c-4a06-a4dc-4643058e4efe.mov
Jsnpit · Feb 6, 2023 · f0158de · f0158de
1 parent 990472a
commit f0158de
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 8 deletions.
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx
@@ -66,12 +66,8 @@ function MyTokens({
                 </>
             ) : (
                 <div className={st.emptyWallet}>
-                    <div className={st.emptyWalletIcon} />
-                    <div className={st.emptyWalletTitle}>
-                        Your wallet contains no SUI.
-                    </div>
-                    {emptyWalletDescription}
                     <FaucetRequestButton trackEventSource="home" />
+                    {emptyWalletDescription}
                 </div>
             )}
         </Loading>

diff --git a/apps/wallet/src/ui/app/shared/button/Button.module.scss b/apps/wallet/src/ui/app/shared/button/Button.module.scss
@@ -40,11 +40,16 @@
 
     &.secondary {
         background: none;
-        color: colors.$sui-blue-steel-dark;
-        border: 1px solid colors.$gray-55;
+        color: colors.$sui-steel-blue;
+        border: 1px solid colors.$sui-steel-blue;
         border-radius: 12px;
     }
 
+    &.secondary:hover {
+        border-color: colors.$sui-blue-steel-dark;
+        color: colors.$sui-blue-steel-dark;
+    }
+
     &.primary {
         background: colors.$cta-blue;
         color: colors.$white;
@@ -74,7 +79,7 @@
     }
 
     &.large {
-        padding: 12px 20px;
+        padding: 13px 20px;
         border-radius: 12px;
         gap: 8px;
 

diff --git a/apps/wallet/src/ui/app/shared/faucet/request-button/FaucetDiscordLink.tsx b/apps/wallet/src/ui/app/shared/faucet/request-button/FaucetDiscordLink.tsx
@@ -0,0 +1,45 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { ArrowUpRight16 } from '@mysten/icons';
+import cl from 'classnames';
+
+import ExternalLink from '_components/external-link';
+import { trackEvent } from '_shared/plausible';
+
+import type { ButtonProps } from '_app/shared/button';
+
+//TODO: Remove delete this file after testnet
+const TESTNET_DISCORD_LINK =
+    'https://discord.com/channels/916379725201563759/1037811694564560966';
+
+export function FaucetDiscordLink({
+    mode = 'primary',
+    trackEventSource,
+}: {
+    mode?: ButtonProps['mode'];
+    trackEventSource: 'home' | 'settings';
+}) {
+    return (
+        <ExternalLink
+            className={cl(
+                'flex flex-nowrap max-w-full items-center justify-center rounded-xl px-5 py-3.5 gap-2 no-underline font-semibold text-body',
+                mode === 'primary'
+                    ? 'bg-hero-dark text-white hover:bg-hero'
+                    : 'bg-white text-steel border-solid border-color-steel border hover:border-color-steel-dark hover:text-steel-dark'
+            )}
+            href={TESTNET_DISCORD_LINK}
+            showIcon={false}
+            onClick={() =>
+                trackEvent('DiscordRequestSUIToken', {
+                    props: { source: trackEventSource },
+                })
+            }
+        >
+            Request Testnet SUI on Discord
+            <ArrowUpRight16
+                className={cl(mode === 'primary' ? 'text-white' : 'text-steel')}
+            />
+        </ExternalLink>
+    );
+}
diff --git a/apps/wallet/src/ui/app/shared/faucet/request-button/index.tsx b/apps/wallet/src/ui/app/shared/faucet/request-button/index.tsx
@@ -6,6 +6,7 @@ import { toast } from 'react-hot-toast';
 
 import FaucetMessageInfo from '../message-info';
 import { useFaucetMutation } from '../useFaucetMutation';
+import { FaucetDiscordLink } from './FaucetDiscordLink';
 import { API_ENV_TO_INFO } from '_app/ApiProvider';
 import Button from '_app/shared/button';
 import Icon, { SuiIcons } from '_components/icon';
@@ -28,6 +29,17 @@ function FaucetRequestButton({
     const network = useAppSelector(({ app }) => app.apiEnv);
     const networkName = API_ENV_TO_INFO[network].name.replace(/sui\s*/gi, '');
     const mutation = useFaucetMutation();
+
+    //TODO: remove this TestNet check after testnet
+    if (network === 'testNet') {
+        return (
+            <FaucetDiscordLink
+                mode={mode}
+                trackEventSource={trackEventSource}
+            />
+        );
+    }
+
     return mutation.enabled ? (
         <Button
             mode={mode}