Add DAO DAO support

package.json

@@ -7,6 +7,7 @@
     "@bugsnag/plugin-react": "^7.16.1",
     "@cosmjs/proto-signing": "^0.32.4",
     "@cosmjs/stargate": "^0.32.4",
+    "@dao-dao/cosmiframe": "^0.1.0",
     "@injectivelabs/sdk-ts": "^1.14.33",
     "@skip-go/widget": "^3.2.0",
     "@terra-money/terra.js": "^3.1.10",

src/components/App.js

@@ -35,6 +35,7 @@ import {
 } from 'react-bootstrap-icons'
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import GitHubButton from 'react-github-btn'
+import { Cosmiframe } from '@dao-dao/cosmiframe'
 import Logo from '../assets/logo.png'
 import Logo2x from '../assets/[email protected]'
 import Logo3x from '../assets/[email protected]'
@@ -55,6 +56,7 @@ import Wallet from '../utils/Wallet.mjs';
 import SendModal from './SendModal';
 import KeplrSignerProvider from '../utils/KeplrSignerProvider.mjs';
 import LeapSignerProvider from '../utils/LeapSignerProvider.mjs';
+import CosmiframeSignerProvider from '../utils/CosmiframeSignerProvider.mjs';
 import { truncateAddress } from '../utils/Helpers.mjs';
 import CosmostationSignerProvider from '../utils/CosmostationSignerProvider.mjs';
 
@@ -70,7 +72,8 @@ class App extends React.Component {
     this.signerProviders = [
       new KeplrSignerProvider(window.keplr),
       new LeapSignerProvider(window.leap),
-      new CosmostationSignerProvider(window.cosmostation?.providers?.keplr, window.cosmostation?.cosmos)
+      new CosmostationSignerProvider(window.cosmostation?.providers?.keplr, window.cosmostation?.cosmos),
+      new CosmiframeSignerProvider(new Cosmiframe(["https://daodao.zone", "https://dao.daodao.zone"]))
     ]
     this.signerConnectors = {}
     this.connectAuto = this.connectAuto.bind(this);
@@ -172,7 +175,15 @@ class App extends React.Component {
       localStorage.setItem('connected', storedKey)
     }
 
-    const signerProvider = this.getSignerProvider(providerKey || storedKey)
+    let signerProvider = this.getSignerProvider(providerKey || storedKey)
+
+    await Promise.all(this.signerProviders.map(async provider => {
+      const connected = await provider.autoconnect();
+      if (connected && !signerProvider) {
+        signerProvider = provider;
+        manual = true;
+      }
+    }))
 
     if(!signerProvider) return
 
@@ -187,7 +198,7 @@ class App extends React.Component {
     const { network } = this.props
     if (!network || !signerProvider.available()) return
 
-    if (!manual && (providerKey !== storedKey || !signerProvider.connected())) {
+    if (!manual && providerKey !== storedKey) {
       return
     }
 
@@ -734,6 +745,7 @@ class App extends React.Component {
                             ) : (
                               <>
                                 {this.signerProviders.map(provider => {
+                                  if(!provider.visible) return null
                                   const disabledWallets = this.props.network?.disabledWallets || []
                                   return <Dropdown.Item as="button" key={provider.name} onClick={() => this.connect(provider.name, true)} disabled={!provider.available() || disabledWallets.includes(provider.name)}>Connect {provider.label}</Dropdown.Item>
                                 })}

src/components/Coin.js

@@ -38,7 +38,7 @@ function Coin(props) {
     return 6
   }
 
-  if(!denom){
+  if(!denom || amount === undefined){
     return null
   }
 

src/components/NetworkChecks.js

@@ -59,7 +59,7 @@ function NetworkChecks(props) {
     <ul className={className} style={props.style}>
       {([
         renderCheck({
-          title: <strong>{`$${price && price.usd.toLocaleString(undefined, { maximumFractionDigits: 8, minimumFractionDigits: 2 })}`}</strong>,
+          title: <strong>{`$${price?.usd && price.usd.toLocaleString(undefined, { maximumFractionDigits: 8, minimumFractionDigits: 2 })}`}</strong>,
           failTitle: 'Price unknown',
           state: price?.usd,
           identifier: 'price',

src/components/SendModal.js

@@ -112,7 +112,7 @@ function SendModal(props) {
   }
 
   function coinAmount(){
-    if(!state.amountValue) return null
+    if(!state.amountValue || !asset) return null
 
     const decimals = pow(10, asset.decimals)
     const denomAmount = multiply(state.amountValue, decimals)

src/utils/CosmiframeSignerProvider.mjs

@@ -0,0 +1,30 @@
+import _ from 'lodash'
+import SignerProvider from "./SignerProvider.mjs"
+
+export default class CosmiframeSignerProvider extends SignerProvider {
+  name = 'cosmiframe'
+  label = 'DAO DAO'
+  visible = false
+  isReady = false
+  // keychangeEvent = 'keplr_keystorechange'
+
+  constructor(provider) {
+    super(provider.getKeplrClient())
+    this.client = provider
+  }
+
+  available() {
+    return this.isReady
+  }
+
+  async autoconnect() {
+    const isReady = await this.client.isReady()
+    if(isReady) {
+      // sleep for 1 second to allow DAODAO to connect fully
+      await new Promise(r => setTimeout(r, 1000));
+      this.isReady = true
+      this.visible = true
+    }
+    return isReady
+  }
+}

src/utils/SignerProvider.mjs

@@ -1,4 +1,5 @@
 export default class SignerProvider {
+  visible = true
   suggestChainSupport = true
   authzAminoLiftedValueSupport = true
 
@@ -10,10 +11,6 @@ export default class SignerProvider {
     return !!this.provider
   }
 
-  connected() {
-    return this.available()
-  }
-
   isLedger() {
     return this.key?.isNanoLedger || this.key?.isHardware;
   }
@@ -26,6 +23,10 @@ export default class SignerProvider {
     return !!this.signer?.signAmino
   }
 
+  async autoconnect() {
+    return false
+  }
+
   async connect(network) {
     const { chainId } = network
     this.key = null