https://elastos-wiki.netlify.app/assets/js/a5b0c723.827bc0c9.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[9589],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>h});var o=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e,t){if(null==e)return{};var n,o,i=function(e,t){if(null==e)return{};var n,o,i={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var c=o.createContext({}),l=function(e){var t=o.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=l(e.components);return o.createElement(c.Provider,{value:t},e.children)},u="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},w=o.forwardRef((function(e,t){var n=e.components,i=e.mdxType,r=e.originalType,c=e.parentName,d=a(e,["components","mdxType","originalType","parentName"]),u=l(n),w=i,h=u["".concat(c,".").concat(w)]||u[w]||p[w]||r;return n?o.createElement(h,s(s({ref:t},d),{},{components:n})):o.createElement(h,s({ref:t},d))}));function h(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var r=n.length,s=new Array(r);s[0]=w;var a={};for(var c in t)hasOwnProperty.call(t,c)&&(a[c]=t[c]);a.originalType=e,a[u]="string"==typeof e?e:i,s[1]=a;for(var l=2;l<r;l++)s[l]=n[l];return o.createElement.apply(null,s)}return o.createElement.apply(null,n)}w.displayName="MDXCreateElement"},2064:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>a,metadata:()=>l,toc:()=>u});var o=n(7462),i=n(3366),r=(n(7294),n(3905)),s=["components"],a={title:"User Interface"},c=void 0,l={unversionedId:"sdk/general/connectivity/guides/ui",id:"sdk/general/connectivity/guides/ui",title:"User Interface",description:'A nice "connect wallet" flow',source:"@site/../docs/7.sdk/general/connectivity/guides/ui.md",sourceDirName:"7.sdk/general/connectivity/guides",slug:"/sdk/general/connectivity/guides/ui",permalink:"/sdk/general/connectivity/guides/ui",draft:!1,editUrl:"https://github.com/elastos/Elastos.Wiki/edit/master/website/../docs/7.sdk/general/connectivity/guides/ui.md",tags:[],version:"current",lastUpdatedBy:"racollette",lastUpdatedAt:1676425989,formattedLastUpdatedAt:"Feb 15, 2023",frontMatter:{title:"User Interface"},sidebar:"sdkSidebar",previous:{title:"Ethereum",permalink:"/sdk/general/connectivity/guides/ethereum"},next:{title:"Customization",permalink:"/sdk/general/connectivity/guides/customization"}},d={},u=[{value:"A nice &quot;connect wallet&quot; flow",id:"a-nice-connect-wallet-flow",level:2},{value:"Use case 1: Optional DID, mandatory crypto address",id:"use-case-1-optional-did-mandatory-crypto-address",level:3},{value:"Use case 2: Crypto address only, no connectivity SDK",id:"use-case-2-crypto-address-only-no-connectivity-sdk",level:3},{value:"Wallet connect connectivity issues",id:"wallet-connect-connectivity-issues",level:3}],p={toc:u},w="wrapper";function h(e){var t=e.components,n=(0,i.Z)(e,s);return(0,r.kt)(w,(0,o.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h2",{id:"a-nice-connect-wallet-flow"},'A nice "connect wallet" flow'),(0,r.kt)("p",null,'Even without talking about the connectivity SDK, many Web3 dApps - including popular ones - still struggle to provide the perfect "connect wallet" experience for their DeFi projects.'),(0,r.kt)("p",null,'You will sometimes see "connect with Metamask" when you are in a mobile wallet built-in browser (which doesn\'t make sense, and actually means "use the injected provider"). Or "Wallet connect", when you are in a built-in browser as well (which also doesn\'t make sense, as built-in browsers use injected web3 providers, they don\'t need wallet connect).'),

1(0,r.kt)("p",null,"To try to help you as a dApp developer, here is a suggested pseudo-algorithm to let your app decide what should be shown when."),(0,r.kt)("h3",{id:"use-case-1-optional-did-mandatory-crypto-address"},"Use case 1: Optional DID, mandatory crypto address"),(0,r.kt)("p",null,"If your dApp needs users to provide a EVM address (ethereum compatible) and a DID, but it can live without a provided DID:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},'if (mobile) {\n  if (window.ethereum) {\n    // you are in a mobile wallet\n    if (window.elastos) {\n      // The mobile wallet has DID / elastos capabilities (Essentials)\n      // -> show "Sign in with DID" -> calls connSDK.requestCredentials() -> after connection, use connectivity.getActiveConnector().getWeb3Provider() to access ethereum commands\n    } else {\n      // The mobile wallet has no elastos capability (token pocket, trust wallet, MM mobile)\n      // -> show "You cannot use DIDs" (because mobile wallets usually intercept the wallet connect requests and keep them for themselves)\n      // -> show "Connect" (this will use the injected window.ethereum for ethereum transactions)\n    }\n  } else {\n    // You are in a standard mobile browser like chrome or safari mobile\n    // -> show "Sign in with DID" -> calls connSDK.requestCredentials() -> the conn sdk will use wallet connect and sign in with DID -> after connection, use connectivity.getActiveConnector().getWeb3Provider() to access ethereum commands\n    // -> show "Wallet connect" -> any mobile wallet can be used. But this will bind the eth address only, not the DID\n  }\n} else {\n  // Desktop\n  if (window.ethereum) {\n    // MM plugin is installed\n    // -> show "Sign in with DID" -> calls connSDK.requestCredentials() -> the conn sdk will use wallet connect and sign in with DID -> after connection, use connectivity.getActiveConnector().getWeb3Provider() to access ethereum commands\n    // -> show "Connect" (this will use the injected window.ethereum for ethereum transactions)\n  } else {\n    // no crypto plugin\n    // -> show "Sign in with DID" -> calls connSDK.requestCredentials() -> the conn sdk will use wallet connect and sign in with DID -> after connection, use connectivity.getActiveConnector().getWeb3Provider() to access ethereum commands\n    // -> show "Wallet connect" -> any mobile wallet can be used. But this will bind the eth address only, not the DID\n  }\n}\n')),(0,r.kt)("h3",{id:"use-case-2-crypto-address-only-no-connectivity-sdk"},"Use case 2: Crypto address only, no connectivity SDK"),(0,r.kt)("p",null,"For your reference as well as for comparison of the 2 use cases, even if this is not part of the connectivity SDK, here is the flow f your dApp needs users to provide only an EVM address (Ethereum compatible):"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},'if (mobile) {\n  if (window.ethereum) {\n    // you are in a mobile wallet\n    // -> show "Direct connect" (this will use the injected window.ethereum for ethereum transactions)\n  } else {\n    // You are in a standard mobile browser like chrome or safari mobile\n    // -> show "Wallet connect" -> any mobile wallet can be used.\n  }\n} else {\n  // Desktop\n  if (window.ethereum) {\n    // MM plugin is installed\n    // -> show "Direct connect" (this will use the injected window.ethereum for ethereum transactions)\n    // -> show "Wallet connect" -> any mobile wallet can be used.\n  } else {\n    // No crypto plugin on the desktop browser\n    // -> show "Wallet connect" -> any mobile wallet can be used.\n  }\n}\n')),(0,r.kt)("admonition",{type:"caution"},(0,r.kt)("p",{parentName:"admonition"},"Don't forget to use the right web3 instance after connection!")),(0,r.kt)("p",null,'Here is a code that shows how to avoid common developers mistakes, who are used to use "window.ethereum" and are sometimes confused when web3 provider instances coming from other locations are involved:'),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-ts"},"let web3;\n\u200b\nconnectPopup() {\n  doConnectionProcess();\n  if (connectedThroughInjectedWeb3)\n    web3 = window.ethereum;\n  else {\n    // Case 1: if using the connectivity SDK\n    web3 = connectivity.getActiveConnector().getWeb3Provider();\n    // Case 2: if using wallet connect directly\n    web3 = [Your wallet connect provider];\n  }\n}\n\u200b\n// Example of further call to the web3 instance\ngetBalance() {\n  web3.getBalance(); // DO\n  window.ethereum.getBalance() // DON'T\n}\n")),(0,r.kt)("h3",{id:"wallet-connect-connectivity-issues"},"Wallet connect connectivity issues"),(0,r.kt)("p",null,'When adding a "connect with wallet connect" button in your dApp, it\'s advised to always kill the current wallet connect session first, to force a new connection. This is particularly useful in case the remote wallet app and the dApp get disconnected or desynchronised somehow.'),(0,r.kt)("p",null,'By killing the session, this gives a "fresh start" to the wallet connect connectivity.'))}h.isMDXComponent=!0}}]);