🔀Merge branch '942-feature-algodex-launchpad-for-creating-and-listing-asas' of https://github.com/algodex/algodex-react into 985-modify-the-choose-asset-input-field-on-token-sale-page

Author: treasurechic

components/LaunchPad/CreatorAddress.tsx

@@ -3,17 +3,26 @@ import React from 'react'
 //MUI Components
 import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
 
 // Custom coponent
 import { CopyIcon } from './copyIcon'
 import { truncatedWalletAddress } from 'components/helpers'
+import { styles } from './styles.css'
+import useWallets from '@/hooks/useWallets'
 
 type creatorAddressTypes = {
-  address?: string
+  activeWallet?: any
 }
 
-export const CreatorAddress = ({ address }: creatorAddressTypes) => {
-  const isConnected = typeof address !== 'undefined'
+export const CreatorAddress = ({ activeWallet }: creatorAddressTypes) => {
+  const { peraDisconnect, myAlgoDisconnect } = useWallets(null)
+  const walletDisconnectMap = {
+    'my-algo-wallet': myAlgoDisconnect,
+    'wallet-connect': peraDisconnect
+  }
+
+  const isConnected = typeof activeWallet !== 'undefined'
   return (
     <>
       <Box
@@ -38,9 +47,9 @@ export const CreatorAddress = ({ address }: creatorAddressTypes) => {
                 fontWeight: 500
               }}
             >
-              {truncatedWalletAddress(address, 4)}
+              {truncatedWalletAddress(activeWallet.address, 4)}
             </Typography>
-            <CopyIcon content={address} />
+            <CopyIcon content={activeWallet.address} />
           </>
         ) : (
           <Typography
@@ -55,6 +64,29 @@ export const CreatorAddress = ({ address }: creatorAddressTypes) => {
           </Typography>
         )}
       </Box>
+      {isConnected && (
+        <Button
+          type="button"
+          onClick={() => {
+            walletDisconnectMap[activeWallet.type](activeWallet)
+          }}
+          sx={{
+            color: 'white',
+            backgroundColor: 'gray.150',
+            px: '10px',
+            py: '1px',
+            fontWeight: 500,
+            fontSize: '12px',
+            border: '2px solid',
+            transition: 'all ease .3s',
+            '&:hover': {
+              color: 'white'
+            }
+          }}
+        >
+          DISCONNECT
+        </Button>
+      )}
     </>
   )
 }

components/LaunchPad/Sale/CreateTokenSale.tsx

@@ -150,7 +150,7 @@ export const CreateTokenSale = () => {
         <Typography variant="body1" sx={{ fontWeight: 600, color: 'white', lineHeight: 1.2 }}>
           Creator/Reserve Address:
         </Typography>
-        <CreatorAddress address={activeWallet?.address} />
+        <CreatorAddress activeWallet={activeWallet ? activeWallet : undefined} />
       </Box>
       <Typography variant="body1" sx={{ ...styles.body1, marginBottom: '24px' }}>
         A sale must be started from either the Creator or the Reserve wallet of the ASA. Ensure the

components/LaunchPad/Sale/ManageTokenSale.tsx

@@ -36,7 +36,7 @@ const initialValues = {
   pricePerToken: 0.75,
   showPricePerToken: false,
   totalForSale: 14600,
-  showTotalForSale: false,
+  showTotalForSale: false
 }
 
 export const ManageTokenSale = () => {
@@ -78,7 +78,7 @@ export const ManageTokenSale = () => {
         <Typography variant="body1" sx={{ fontWeight: 600, color: 'white', lineHeight: 1.2 }}>
           Creator Address:
         </Typography>
-        <CreatorAddress address={activeWallet?.address} />
+        <CreatorAddress activeWallet={activeWallet ? activeWallet : undefined} />
       </Box>
       <Typography variant="body1" sx={{ ...styles.body1, marginBottom: '30px' }}>
         You can only manage sales that have been created with the connected wallet. If you do not

components/LaunchPad/Token/CreateToken.tsx

@@ -38,7 +38,7 @@ import CircularProgress from '@mui/material/CircularProgress'
 import OutlinedInput from '@/components/Input/OutlinedInput'
 import { styles } from '../styles.css'
 import { ErrorMessage } from '../ErrorMessage'
-import { algodClient } from '@/components/helpers'
+import { isValidAddr } from '@/components/helpers'
 import { NumberFormatCustom } from '@/components/Wallet/PlaceOrder/Form/TradeInputs'
 import { Tip } from '../Tip'
 
@@ -135,16 +135,6 @@ export const CreateToken = () => {
     return pattern.test(url)
   }
 
-  const isValidAddr = async (addr: string) => {
-    //Check your if account exist on Algorand
-    try {
-      await algodClient().accountInformation(addr).do()
-      return true
-    } catch (error) {
-      return false
-    }
-  }
-
   const onSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
     e.preventDefault()
     let _error = false
@@ -269,7 +259,7 @@ export const CreateToken = () => {
         <Typography variant="body1" sx={{ fontWeight: 600, color: 'white', lineHeight: 1.2 }}>
           Creator Address:
         </Typography>
-        <CreatorAddress address={activeWallet?.address} />
+        <CreatorAddress activeWallet={activeWallet ? activeWallet : undefined} />
       </Box>
       <Typography variant="body1" sx={{ ...styles.body1, marginBottom: '24px' }}>
         Creator Address defaults to the wallet that’s currently connected. If you want to create an