google button

0xsequence · May 10, 2024 · 404a765 · 404a765
1 parent 2674fc5
commit 404a765
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 14 deletions.
diff --git a/examples/react/vite.config.js.timestamp-1715364539653-a9974b0d24473.mjs b/examples/react/vite.config.js.timestamp-1715364539653-a9974b0d24473.mjs
@@ -0,0 +1,45 @@
+// vite.config.js
+import { defineConfig } from "file:///home/samuele/repos/kit/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/index.js";
+import dns from "dns";
+import react from "file:///home/samuele/repos/kit/node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected]_/node_modules/@vitejs/plugin-react/dist/index.mjs";
+import { nodePolyfills } from "file:///home/samuele/repos/kit/node_modules/.pnpm/[email protected][email protected][email protected]_@[email protected][email protected]_/node_modules/vite-plugin-node-polyfills/dist/index.js";
+import viteTsconfigPaths from "file:///home/samuele/repos/kit/node_modules/.pnpm/[email protected][email protected][email protected]_@[email protected][email protected]_/node_modules/vite-tsconfig-paths/dist/index.mjs";
+import svgrPlugin from "file:///home/samuele/repos/kit/node_modules/.pnpm/[email protected][email protected][email protected][email protected]_@[email protected][email protected]_/node_modules/vite-plugin-svgr/dist/index.js";
+dns.setDefaultResultOrder("verbatim");
+var vite_config_default = defineConfig(() => {
+  return {
+    plugins: [
+      react(),
+      nodePolyfills({
+        include: ["buffer"],
+        globals: {
+          Buffer: true
+        }
+      }),
+      viteTsconfigPaths(),
+      svgrPlugin()
+    ],
+    define: {
+      "process.env.PACKAGE_VERSION": JSON.stringify(process.env.npm_package_version)
+    },
+    resolve: {
+      dedupe: ["wagmi", "viem"]
+    },
+    build: {
+      minify: false
+    },
+    server: {
+      minify: false,
+      port: 4444,
+      fs: {
+        // Allow serving files from one level up to the project root
+        allow: [".."]
+      }
+    },
+    base: ""
+  };
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9zYW11ZWxlL3JlcG9zL2tpdC9leGFtcGxlcy9yZWFjdFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL2hvbWUvc2FtdWVsZS9yZXBvcy9raXQvZXhhbXBsZXMvcmVhY3Qvdml0ZS5jb25maWcuanNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL2hvbWUvc2FtdWVsZS9yZXBvcy9raXQvZXhhbXBsZXMvcmVhY3Qvdml0ZS5jb25maWcuanNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJ1xuaW1wb3J0IGRucyBmcm9tICdkbnMnXG5pbXBvcnQgcmVhY3QgZnJvbSAnQHZpdGVqcy9wbHVnaW4tcmVhY3QnXG5pbXBvcnQgeyBub2RlUG9seWZpbGxzIH0gZnJvbSAndml0ZS1wbHVnaW4tbm9kZS1wb2x5ZmlsbHMnXG5pbXBvcnQgdml0ZVRzY29uZmlnUGF0aHMgZnJvbSAndml0ZS10c2NvbmZpZy1wYXRocydcbmltcG9ydCBzdmdyUGx1Z2luIGZyb20gJ3ZpdGUtcGx1Z2luLXN2Z3InXG5cbmRucy5zZXREZWZhdWx0UmVzdWx0T3JkZXIoJ3ZlcmJhdGltJylcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKCgpID0+IHtcbiAgcmV0dXJuIHtcbiAgICBwbHVnaW5zOiBbXG4gICAgICByZWFjdCgpLFxuICAgICAgbm9kZVBvbHlmaWxscyh7XG4gICAgICAgIGluY2x1ZGU6IFsnYnVmZmVyJ10sXG4gICAgICAgIGdsb2JhbHM6IHtcbiAgICAgICAgICBCdWZmZXI6IHRydWVcbiAgICAgICAgfVxuICAgICAgfSksXG4gICAgICB2aXRlVHNjb25maWdQYXRocygpLFxuICAgICAgc3ZnclBsdWdpbigpXG4gICAgXSxcbiAgICBkZWZpbmU6IHtcbiAgICAgICdwcm9jZXNzLmVudi5QQUNLQUdFX1ZFUlNJT04nOiBKU09OLnN0cmluZ2lmeShwcm9jZXNzLmVudi5ucG1fcGFja2FnZV92ZXJzaW9uKVxuICAgIH0sXG4gICAgcmVzb2x2ZToge1xuICAgICAgZGVkdXBlOiBbJ3dhZ21pJywgJ3ZpZW0nXVxuICAgIH0sXG4gICAgYnVpbGQ6IHtcbiAgICAgIG1pbmlmeTogZmFsc2VcbiAgICB9LFxuICAgIHNlcnZlcjoge1xuICAgICAgbWluaWZ5OiBmYWxzZSxcbiAgICAgIHBvcnQ6IDQ0NDQsXG4gICAgICBmczoge1xuICAgICAgICAvLyBBbGxvdyBzZXJ2aW5nIGZpbGVzIGZyb20gb25lIGxldmVsIHVwIHRvIHRoZSBwcm9qZWN0IHJvb3RcbiAgICAgICAgYWxsb3c6IFsnLi4nXVxuICAgICAgfVxuICAgIH0sXG4gICAgYmFzZTogJydcbiAgfVxufSlcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBb1MsU0FBUyxvQkFBb0I7QUFDalUsT0FBTyxTQUFTO0FBQ2hCLE9BQU8sV0FBVztBQUNsQixTQUFTLHFCQUFxQjtBQUM5QixPQUFPLHVCQUF1QjtBQUM5QixPQUFPLGdCQUFnQjtBQUV2QixJQUFJLHNCQUFzQixVQUFVO0FBRXBDLElBQU8sc0JBQVEsYUFBYSxNQUFNO0FBQ2hDLFNBQU87QUFBQSxJQUNMLFNBQVM7QUFBQSxNQUNQLE1BQU07QUFBQSxNQUNOLGNBQWM7QUFBQSxRQUNaLFNBQVMsQ0FBQyxRQUFRO0FBQUEsUUFDbEIsU0FBUztBQUFBLFVBQ1AsUUFBUTtBQUFBLFFBQ1Y7QUFBQSxNQUNGLENBQUM7QUFBQSxNQUNELGtCQUFrQjtBQUFBLE1BQ2xCLFdBQVc7QUFBQSxJQUNiO0FBQUEsSUFDQSxRQUFRO0FBQUEsTUFDTiwrQkFBK0IsS0FBSyxVQUFVLFFBQVEsSUFBSSxtQkFBbUI7QUFBQSxJQUMvRTtBQUFBLElBQ0EsU0FBUztBQUFBLE1BQ1AsUUFBUSxDQUFDLFNBQVMsTUFBTTtBQUFBLElBQzFCO0FBQUEsSUFDQSxPQUFPO0FBQUEsTUFDTCxRQUFRO0FBQUEsSUFDVjtBQUFBLElBQ0EsUUFBUTtBQUFBLE1BQ04sUUFBUTtBQUFBLE1BQ1IsTUFBTTtBQUFBLE1BQ04sSUFBSTtBQUFBO0FBQUEsUUFFRixPQUFPLENBQUMsSUFBSTtBQUFBLE1BQ2Q7QUFBQSxJQUNGO0FBQUEsSUFDQSxNQUFNO0FBQUEsRUFDUjtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==
diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/GoogleLogo.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/GoogleLogo.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export const GoogleLogo = () => (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+    <g>
+      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+      <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+      <path fill="none" d="M0 0h48v48H0z"></path>
+    </g>
+  </svg>
+)
diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx
@@ -23,6 +23,7 @@ import { appleAuthHelpers, useScript } from 'react-apple-signin-auth'
 
 import { ExtendedWalletList } from './ExtendedWalletList'
 import { Banner } from './Banner'
+import { GoogleLogo } from './GoogleLogo'
 
 import { KitConfig } from '../../index'
 import { LocalStorageKey, defaultSignInOptions } from '../../../constants'
@@ -267,21 +268,62 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => {
                 return (
                   <Box key={connector.uid} aspectRatio="1/1" alignItems="center" justifyContent="center">
                     {connector._wallet.id === 'google-waas' && (
-                      <Box width="10" height="10" overflow="hidden" borderRadius="sm" alignItems="center" justifyContent="center">
-                        <GoogleLogin
-                          type="icon"
-                          size="large"
-                          nonce={getStorageItem(LocalStorageKey.WaasSessionHash)}
-                          onSuccess={credentialResponse => {
-                            if (credentialResponse.credential) {
-                              storage?.setItem(LocalStorageKey.WaasGoogleIdToken, credentialResponse.credential)
-                              onConnect(connector)
-                            }
-                          }}
-                          onError={() => {
-                            console.log('Login Failed')
+                      <Box position="relative" opacity={{ hover: '80' }}>
+                        <Box
+                          width="10"
+                          height="10"
+                          overflow="hidden"
+                          borderRadius="sm"
+                          alignItems="center"
+                          justifyContent="center"
+                          style={{ opacity: 0.0000001 }}
+                        >
+                          <GoogleLogin
+                            type="icon"
+                            size="large"
+                            nonce={getStorageItem(LocalStorageKey.WaasSessionHash)}
+                            onSuccess={credentialResponse => {
+                              if (credentialResponse.credential) {
+                                storage?.setItem(LocalStorageKey.WaasGoogleIdToken, credentialResponse.credential)
+                                onConnect(connector)
+                              }
+                            }}
+                            onError={() => {
+                              console.log('Login Failed')
+                            }}
+                          />
+                        </Box>
+                        <Box
+                          background="backgroundSecondary"
+                          borderRadius="xs"
+                          display="flex"
+                          justifyContent="center"
+                          alignItems="center"
+                          position="absolute"
+                          pointerEvents="none"
+                          style={{
+                            width: '40px',
+                            height: '40px',
+                            paddingTop: '2px',
+                            paddingBottom: '2px',
+                            paddingLeft: '12px',
+                            paddingRight: '12px',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
                           }}
-                        />
+                        >
+                          <Box
+                            position="relative"
+                            style={{
+                              width: '18px',
+                              top: '2px',
+                              left: '2px'
+                            }}
+                          >
+                            <GoogleLogo />
+                          </Box>
+                        </Box>
                       </Box>
                     )}