hide debug wallet by default

macalinao · macalinao · commit 91be0bb544bc · 2022-05-29T15:02:37.000-05:00
diff --git a/packages/example/craco.config.js b/packages/example/craco.config.js
@@ -16,6 +16,7 @@ module.exports = {
   typescript: { enableTypeChecking: false },
   webpack: {
     configure: (config) => {
+      config.ignoreWarnings = [/Failed to parse source map/];
       config.plugins.unshift(
         new webpack.ProvidePlugin({
           Buffer: ["buffer", "Buffer"],
diff --git a/packages/example/package.json b/packages/example/package.json
@@ -52,8 +52,12 @@
     "@types/react-dom": "18.0.5",
     "babel-loader": "^8.2.5",
     "babel-preset-react-app": "^10.0.1",
+    "react-dev-utils": "^12.0.1",
     "typescript": "^4.7.2",
     "webpack": "^5.72.1"
   },
+  "resolutions": {
+    "@solana/buffer-layout": "^4"
+  },
   "repository": "git@github.com:GokiProtocol/walletkit.git"
 }
diff --git a/packages/example/src/App.tsx b/packages/example/src/App.tsx
@@ -1,3 +1,4 @@
+import { css } from "@emotion/react";
 import { WalletKitProvider } from "@gokiprotocol/walletkit";
 
 import { Body } from "./Body";
@@ -20,7 +21,18 @@ const App: React.FC = () => {
       defaultNetwork="devnet"
       app={{
         name: "My App",
+        icon: (
+          <img
+            css={css`
+              width: 48px;
+              height: 48px;
+            `}
+            src="https://goki.so/assets/android-chrome-256x256.png"
+            alt="icon"
+          />
+        ),
       }}
+      debugMode={false} // you may want to set this in REACT_APP_DEBUG_MODE
     >
       <Body />
     </WalletKitProvider>
diff --git a/packages/walletkit/src/WalletKitProvider.tsx b/packages/walletkit/src/WalletKitProvider.tsx
@@ -24,6 +24,7 @@ export const WalletKitProvider: React.FC<Props> = ({
   children,
   app,
   initialStep = ModalStep.Intro,
+  debugMode = false,
   ...solanaProviderArgs
 }: Props) => {
   const [showWalletSelector, setShowWalletSelector] = useState<boolean>(false);
@@ -40,6 +41,7 @@ export const WalletKitProvider: React.FC<Props> = ({
           initialStep={initialStep}
           isOpen={showWalletSelector}
           onDismiss={() => setShowWalletSelector(false)}
+          debugMode={debugMode}
         />
         {children}
       </WalletKitContext.Provider>
diff --git a/packages/walletkit/src/components/WalletSelectorModal/WalletStepSelect/index.tsx b/packages/walletkit/src/components/WalletSelectorModal/WalletStepSelect/index.tsx
@@ -15,7 +15,7 @@ export interface ProviderInfo {
   mustInstall: boolean;
 }
 
-const getWalletProviders = (): readonly ProviderInfo[] => {
+const getWalletProviders = (debugMode = false): readonly ProviderInfo[] => {
   const base = (
     Object.entries(DEFAULT_WALLET_PROVIDERS) as readonly [
       DefaultWalletType,
@@ -49,8 +49,12 @@ const getWalletProviders = (): readonly ProviderInfo[] => {
         ),
       })
     )
-    // no secret key for now
-    .filter((p) => p.type !== DefaultWalletType.SecretKey);
+    .filter((p) =>
+      debugMode
+        ? true
+        : p.type !== DefaultWalletType.SecretKey &&
+          p.type !== DefaultWalletType.ReadOnly
+    );
   return [
     ...base,
     {
@@ -69,11 +73,13 @@ const getWalletProviders = (): readonly ProviderInfo[] => {
 interface Props {
   onSelect?: (info: ProviderInfo) => void;
   onInstall?: (info: WalletProviderInfo) => void;
+  debugMode?: boolean;
 }
 
 export const WalletStepSelect: React.FC<Props> = ({
   onSelect,
   onInstall,
+  debugMode,
 }: Props) => {
   const [showUninstalled, setShowUninstalled] = useState<boolean>(false);
   const [providerInfo, setProviderInfo] = useState<readonly ProviderInfo[]>(
@@ -83,10 +89,10 @@ export const WalletStepSelect: React.FC<Props> = ({
   useEffect(() => {
     // wait a second for everything to load
     const timeout = setTimeout(() => {
-      setProviderInfo(getWalletProviders());
+      setProviderInfo(getWalletProviders(debugMode));
     }, 1_000);
     return () => clearTimeout(timeout);
-  }, []);
+  }, [debugMode]);
 
   return (
     <>
diff --git a/packages/walletkit/src/components/WalletSelectorModal/index.tsx b/packages/walletkit/src/components/WalletSelectorModal/index.tsx
@@ -32,6 +32,7 @@ export const WalletSelectorModal: React.FC<Props> = ({
   app,
   onWalletKitError = defaultOnWalletKitError,
   initialStep = ModalStep.Intro,
+  debugMode,
   ...modalProps
 }: Props) => {
   const appIcon = useMemo(() => app.icon ?? <DefaultAppIcon />, [app.icon]);
@@ -92,6 +93,7 @@ export const WalletSelectorModal: React.FC<Props> = ({
       )}
       {step === ModalStep.Select && (
         <WalletStepSelect
+          debugMode={debugMode}
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onSelect={async (info) => {
             // Allow the wallet to disconnect before attempting to reconnect.
diff --git a/packages/walletkit/src/types.ts b/packages/walletkit/src/types.ts
@@ -26,4 +26,8 @@ export interface WalletKitArgs {
    * Called when an error occurs.
    */
   onWalletKitError?: (err: Error) => void;
+  /**
+   * Whether or not to display the debug and secret key wallets in the list.
+   */
+  debugMode?: boolean;
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3731,6 +3731,7 @@ __metadata:
     jsbi: "npm:^4.3.0"
     polished: "npm:^4.2.2"
     react: "npm:^18.1.0"
+    react-dev-utils: "npm:^12.0.1"
     react-dom: "npm:^18.1.0"
     react-scripts: "npm:5.0.1"
     tiny-invariant: "npm:^1.2.0"
@@ -9084,28 +9085,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001251":
-  version: 1.0.30001252
-  resolution: "caniuse-lite@npm:1.0.30001252"
-  checksum: 01a27bbbb2d6651f84845792677e4f6b23a9abda58885eddf2c826d83c8a6d093b272c9a2a4b3fc9c59d9f31a79292b14bd6da3915bc924fc04483d1d0cb7daa
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001272, caniuse-lite@npm:^1.0.30001286, caniuse-lite@npm:^1.0.30001291":
-  version: 1.0.30001294
-  resolution: "caniuse-lite@npm:1.0.30001294"
-  checksum: 8e4e4dd2abd48bda5b13ca32e3326ec95d00a03b17cbfd8b41ec49abe170006a6a0cfdc3aba2257ccab745054e717d0443db1a43d537e14d6fbdeba98d45e0e9
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001280":
-  version: 1.0.30001282
-  resolution: "caniuse-lite@npm:1.0.30001282"
-  checksum: ad726093371677e4415c5ec527c6ac5da80da0dfb85b9bc4229998ffcfecb8c75668bc62bbfe261c71c9d37eb29a7204373f00efbe8ccdd8ce012353919974bb
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001332":
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001251, caniuse-lite@npm:^1.0.30001272, caniuse-lite@npm:^1.0.30001280, caniuse-lite@npm:^1.0.30001286, caniuse-lite@npm:^1.0.30001291, caniuse-lite@npm:^1.0.30001332":
   version: 1.0.30001344
   resolution: "caniuse-lite@npm:1.0.30001344"
   checksum: 0144ec3e40a06ce363cf3cc4e69fe2520b91b828a280b4b258254e1b3e34c6bd0aec1c0bfd7e208e76f6d5c91707e7ee554d025cf2f24785d9b32f5557c16de0

Original file line number	Diff line number	Diff line change
`@@ -26,4 +26,8 @@ export interface WalletKitArgs {`
`26`	`26`	`* Called when an error occurs.`
`27`	`27`	`*/`
`28`	`28`	`onWalletKitError?: (err: Error) => void;`
	`29`	`+ /**`
	`30`	`+ * Whether or not to display the debug and secret key wallets in the list.`
	`31`	`+ */`
	`32`	`+ debugMode?: boolean;`
`29`	`33`	`}`