Merge pull request #93 from CudoVentures/cudos-dev

Cudos dev

index.html

@@ -16,5 +16,6 @@
     <!-- End Google Tag Manager (noscript) -->
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script> var global = global || window; </script>
   </body>
 </html>

package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.10",
+    "@cosmostation/cosmos-client": "^0.0.1",
+    "@cosmostation/extension-client": "0.1.7",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@fontsource/poppins": "^4.5.5",

src/App.tsx

@@ -8,18 +8,20 @@ import { Routes, Route, useLocation, Navigate } from 'react-router-dom'
 import { fetchRedelegations } from 'api/getAccountRedelegations'
 import { fetchUndedelegations } from 'api/getAccountUndelegations'
 import BigNumber from 'bignumber.js'
-import { ConnectLedger } from 'ledgers/KeplrLedger'
 import { updateUser } from 'store/profile'
 import { updateUserTransactions } from 'store/userTransactions'
 import { fetchRewards } from 'api/getRewards'
 import NotificationPopup from 'components/NotificationPopup'
 import { fetchDelegations } from 'api/getAccountDelegations'
+import CosmosNetworkConfig from 'ledgers/CosmosNetworkConfig'
+import { connectKeplrLedger } from 'ledgers/KeplrLedger'
+import { connectCosmostationLedger } from 'ledgers/CosmoStationLedger'
 import { switchLedgerType } from 'ledgers/utils'
 import { getUnbondingBalance } from 'api/getUnbondingBalance'
 import { getStakedBalance, getWalletBalance } from './utils/projectUtils'
 import { useApollo } from './graphql/client'
 import Layout from './components/Layout'
-import RequireKeplr from './components/RequireKeplr/RequireKeplr'
+import RequireLedger from './components/RequireLedger/RequireLedger'
 import ConnectWallet from './containers/ConnectWallet/ConnectWallet'
 import Dashboard from './containers/Dashboard'
 import Proposals from './containers/Proposals'
@@ -41,9 +43,9 @@ const App = () => {
 
   const dispatch = useDispatch()
 
-  const connectAccount = useCallback(async () => {
+  const connectAccount = useCallback(async (ledgerType: string) => {
     try {
-      const { address, keplrName } = await ConnectLedger()
+      const { address, accountName } = await switchLedgerType(ledgerType)
       if (address !== lastLoggedAddress || lastLoggedAddress === '') {
         dispatch(
           updateUserTransactions({
@@ -72,7 +74,8 @@ const App = () => {
         updateUser({
           address,
           lastLoggedAddress: address,
-          keplrName,
+          connectedLedger: ledgerType,
+          accountName,
           balance: new BigNumber(balance),
           availableRewards: new BigNumber(totalRewards),
           stakedValidators: validatorArray,
@@ -100,12 +103,21 @@ const App = () => {
         })
       )
 
-      await connectAccount()
+      await connectAccount(CosmosNetworkConfig.KEPLR_LEDGER)
     })
 
+    if (window.cosmostation) {
+      window.cosmostation.cosmos.on('accountChanged', async () => {
+        await connectAccount(CosmosNetworkConfig.COSMOSTATION_LEDGER)
+      })
+    }
+
     return () => {
       window.removeEventListener('keplr_keystorechange', async () => {
-        await connectAccount()
+        await connectAccount(CosmosNetworkConfig.KEPLR_LEDGER)
+      })
+      window.removeEventListener('accountChanged', async () => {
+        await connectAccount(CosmosNetworkConfig.COSMOSTATION_LEDGER)
       })
     }
   }, [])
@@ -125,7 +137,7 @@ const App = () => {
         {location.pathname === '/' ? null : (
           <Layout>
             <Routes>
-              <Route element={<RequireKeplr />}>
+              <Route element={<RequireLedger />}>
                 <Route path="dashboard">
                   <Route index element={<Dashboard />} />
                 </Route>

src/components/Dialog/components/DelegationModal/Delegation.tsx

@@ -54,14 +54,19 @@ const Delegation: React.FC<DelegationProps> = ({ modalProps, handleModal }) => {
   const [delegationAmount, setDelegationAmount] = useState<string>('')
   const { validator, amount, fee } = modalProps
 
-  const { address } = useSelector(({ profile }: RootState) => profile)
+  const { address, connectedLedger } = useSelector(
+    ({ profile }: RootState) => profile
+  )
   const dispatch = useDispatch()
 
   useEffect(() => {
     const loadBalance = async () => {
-      const walletBalance = await (
-        await signingClient
-      ).getBalance(address, CosmosNetworkConfig.CURRENCY_DENOM)
+      const client = await signingClient(connectedLedger)
+
+      const walletBalance = await client.getBalance(
+        address,
+        CosmosNetworkConfig.CURRENCY_DENOM
+      )
 
       setBalance(
         new BigNumber(walletBalance.amount)
@@ -90,9 +95,9 @@ const Delegation: React.FC<DelegationProps> = ({ modalProps, handleModal }) => {
       value: msg
     }
 
-    const gasUsed = await (
-      await signingClient
-    ).simulate(address, [msgAny], 'memo')
+    const client = await signingClient(connectedLedger)
+
+    const gasUsed = await client.simulate(address, [msgAny], 'memo')
 
     const gasLimit = Math.round(gasUsed * feeMultiplier)
 
@@ -153,15 +158,12 @@ const Delegation: React.FC<DelegationProps> = ({ modalProps, handleModal }) => {
     handleModal({ status: ModalStatus.LOADING })
 
     try {
-      const walletAccount = await window.keplr.getKey(
-        import.meta.env.VITE_APP_CHAIN_ID
-      )
-
       const delegationResult = await delegate(
-        walletAccount.bech32Address,
+        address,
         validator?.address || '',
         amount || '',
-        ''
+        '',
+        connectedLedger
       )
 
       handleModal({

src/components/Layout/UserInfo.tsx

@@ -6,6 +6,8 @@ import BigNumber from 'bignumber.js'
 import { RootState } from 'store'
 import { updateUser } from 'store/profile'
 import { copyToClipboard, formatAddress } from 'utils/projectUtils'
+import KeplrLogo from 'assets/vectors/keplr-logo.svg'
+import CosmostationLogo from 'assets/vectors/cosmostation-logo.svg'
 import LinkIcon from 'assets/vectors/link-icon.svg'
 import CopyIcon from 'assets/vectors/copy-icon.svg'
 import ArrowIcon from 'assets/vectors/arrow-down.svg'
@@ -16,7 +18,7 @@ import { styles } from './styles'
 const UserInfo = () => {
   const navigate = useNavigate()
   const dispatch = useDispatch()
-  const { address, lastLoggedAddress, keplrName } = useSelector(
+  const { address, accountName, connectedLedger } = useSelector(
     (state: RootState) => state.profile
   )
 
@@ -40,15 +42,16 @@ const UserInfo = () => {
     dispatch(
       updateUser({
         address: '',
-        keplrName: '',
+        accountName: '',
         lastLoggedAddress: address,
         balance: new BigNumber(0),
         availableRewards: new BigNumber(0),
         stakedValidators: [],
         stakedBalance: new BigNumber(0),
         delegations: [],
         redelegations: [],
-        undelegations: []
+        undelegations: [],
+        connectedLedger: ''
       })
     )
     navigate('/')
@@ -58,17 +61,30 @@ const UserInfo = () => {
     <Box sx={styles.user} onMouseLeave={() => setOpen(false)}>
       <Box onMouseEnter={() => setOpen(true)} sx={styles.userContainer}>
         <Box sx={styles.userInnerContainer}>
+          <Box>
+            <img
+              src={connectedLedger === 'Keplr' ? KeplrLogo : CosmostationLogo}
+              alt="Logo"
+              style={{ position: 'absolute', left: 15, top: 12 }}
+            />
+          </Box>
           <Typography variant="body2">
             Hi,
             <Typography component="span" variant="body2" fontWeight={700}>
-              {` ${getMiddleEllipsis(keplrName, { beginning: 8, ending: 4 })}`}
+              {` ${getMiddleEllipsis(accountName, {
+                beginning: 8,
+                ending: 4
+              })}`}
             </Typography>
           </Typography>
           <Box>
             <img
               style={{
                 cursor: 'pointer',
-                transform: open ? 'rotate(180deg)' : 'rotate(360deg)'
+                transform: open ? 'rotate(180deg)' : 'rotate(360deg)',
+                position: 'absolute',
+                right: 15,
+                top: 20
               }}
               src={ArrowIcon}
               alt="Arrow Icon"

src/components/Layout/styles.ts

@@ -12,14 +12,18 @@ export const styles: SxMap = {
     position: 'relative',
     background: custom.backgrounds.primary,
     borderRadius: '35px',
-    height: '48px'
+    height: '48px',
+    display: 'flex',
+    justifyContent: 'space-around'
   }),
   userInnerContainer: {
     fontSize: '14px',
     fontWeight: '500',
     display: 'flex',
-    justifyContent: 'space-between',
+    justifyContent: 'space-around',
     alignItems: 'center',
+    alignContent: 'center',
+    alignSelf: 'center',
     whiteSpace: 'nowrap'
   },
   dropdownMenuContainer: ({ custom }) => ({
@@ -58,7 +62,6 @@ export const styles: SxMap = {
     }
   }),
   footerContainer: {
-    // position: 'relative',
     display: 'flex',
     justifyContent: 'flex-start',
     alignItems: 'center',
@@ -73,6 +76,7 @@ export const styles: SxMap = {
     marginRight: '20px'
   }),
   user: ({ custom }) => ({
+    position: 'relative',
     maxWidth: '224px',
     maxHeight: '48px',
     borderRadius: '55px',

src/components/RequireKeplr/RequireKeplr.tsx → src/components/RequireLedger/RequireLedger.tsx

@@ -2,7 +2,7 @@ import { Navigate, useLocation, Outlet } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { RootState } from 'store'
 
-const RequireKeplr = () => {
+const RequireLedger = () => {
   const { address } = useSelector((state: RootState) => state.profile)
   const location = useLocation()
 
@@ -13,4 +13,4 @@ const RequireKeplr = () => {
   )
 }
 
-export default RequireKeplr
+export default RequireLedger