From 0af498c4f36d42bdc72c74b240cf192f0ee5339d Mon Sep 17 00:00:00 2001
From: Junho Yeo <i@junho.io>
Date: Tue, 18 Oct 2022 13:42:46 +0900
Subject: [PATCH] [web] Show loading while connecting wallet (#376)

---
 .../WalletConnector/WalletConnector.tsx       | 46 ++++++++++++++++++-
 .../components/system/ActivityIndicator.tsx   | 32 +++++++++++++
 .../bento-web/src/components/system/index.ts  |  1 +
 3 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 packages/bento-web/src/components/system/ActivityIndicator.tsx

diff --git a/packages/bento-web/src/components/WalletConnector/WalletConnector.tsx b/packages/bento-web/src/components/WalletConnector/WalletConnector.tsx
index 62fb0aa9..fa86208c 100644
--- a/packages/bento-web/src/components/WalletConnector/WalletConnector.tsx
+++ b/packages/bento-web/src/components/WalletConnector/WalletConnector.tsx
@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { AnimatePresence, motion } from 'framer-motion';
 import { useTranslation } from 'next-i18next';
 import { useCallback, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
@@ -9,6 +9,7 @@ import { WALLETS } from '@/constants/wallets';
 import { Colors } from '@/styles';
 import { toast } from '@/utils';
 
+import { ActivityIndicator } from '../system';
 import {
   connectKaikas,
   connectKeplr,
@@ -79,13 +80,22 @@ export const WalletConnector: React.FC<WalletSelectorProps> = ({
           default:
             break;
         }
+
+        toast({
+          type: 'success',
+          title: 'Wallet Connected!',
+        });
       } catch (error: any) {
         const typedError = error as Error;
         console.error(typedError);
+        let errorMessage = typedError?.message || 'Unknown Error';
+        if (errorMessage.length >= 120) {
+          errorMessage = errorMessage.substring(0, 120) + '...';
+        }
         toast({
           type: 'error',
           title: 'Ownership Verification Failed',
-          description: typedError?.message ?? undefined,
+          description: errorMessage,
         });
       }
 
@@ -154,6 +164,21 @@ export const WalletConnector: React.FC<WalletSelectorProps> = ({
         </IconList>
         <span className="title">{t('Phantom')}</span>
       </WalletButton>
+
+      <AnimatePresence>
+        {isLoading && (
+          <LoadingContainer
+            {...{
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { ease: 'linear' },
+            }}
+          >
+            <ActivityIndicator size={56} borderSize={8} />
+          </LoadingContainer>
+        )}
+      </AnimatePresence>
     </WalletList>
   );
 };
@@ -225,3 +250,20 @@ const IconList = styled.div.attrs({
     width: 72px;
   }
 `;
+
+const LoadingContainer = styled(motion.div)`
+  background-color: rgba(0, 56, 255, 0.45);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  pointer-events: all;
+  cursor: default;
+`;
diff --git a/packages/bento-web/src/components/system/ActivityIndicator.tsx b/packages/bento-web/src/components/system/ActivityIndicator.tsx
new file mode 100644
index 00000000..f0b86a6e
--- /dev/null
+++ b/packages/bento-web/src/components/system/ActivityIndicator.tsx
@@ -0,0 +1,32 @@
+import styled, { css, keyframes } from 'styled-components';
+
+const rotate = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+
+type Props = {
+  color?: string;
+  borderSize: number;
+  size: number;
+};
+
+export const ActivityIndicator = styled.div<Props>`
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  animation: ${rotate} linear infinite 0.75s;
+
+  ${({ color = 'rgba(255, 255, 255, 0.85)', borderSize, size }) => css`
+    color: ${color};
+    border-top-color: ${color};
+    border-right-color: ${color};
+
+    width: ${size}px;
+    height: ${size}px;
+
+    border-width: ${borderSize}px;
+  `}
+`;
diff --git a/packages/bento-web/src/components/system/index.ts b/packages/bento-web/src/components/system/index.ts
index 736e7820..91ce01b6 100644
--- a/packages/bento-web/src/components/system/index.ts
+++ b/packages/bento-web/src/components/system/index.ts
@@ -1,3 +1,4 @@
+export { ActivityIndicator } from './ActivityIndicator';
 export { AnimatedToolTip } from './AnimatedToolTip';
 export { AssetMedia } from './AssetMedia';
 export { Badge } from './Badge';