fix: errors

.github/workflows/publish-realtoken-aa-modal-package.yaml

@@ -29,6 +29,6 @@ jobs:
 
       - name: Publish
         working-directory: ./packages/@real-token/aa-modal
-        run: yarn publish
+        run: yarn publish .
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

packages/@real-token/aa-modal/package.json

@@ -5,23 +5,23 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/cjs/index.cjs",
-  "module": "./dist/esm/index.js",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": {
         "types": "./dist/index.d.ts",
-        "default": "./dist/esm/index.js"
+        "default": "./dist/index.esm.js"
       },
       "require": {
         "types": "./dist/index.d.ts",
-        "default": "./dist/cjs/index.cjs"
+        "default": "./dist/index.cjs.js"
       }
     }
   },
   "scripts": {
-    "build": "rollup -c",
+    "build": "webpack",
     "yalc:publish": "yalc add .",
     "yalc:push": "yalc push --sig --replace",
     "prepublishOnly": "yarn build"
@@ -30,40 +30,51 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/runtime": "^7.24.7",
     "@tabler/icons-react": "^3.19.0",
-    "esbuild": "^0.24.0",
     "tslib": "^2.7.0"
   },
   "peerDependencies": {
     "@mantine/core": "^7.13.2",
     "@mantine/modals": "^7.13.2",
-    "@real-token/aa-core": "^1.0.3",
+    "@real-token/aa-core": "^1.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@real-token/aa-core": "^1.0.3",
+    "@babel/core": "^7.24.7",
+    "@babel/plugin-transform-runtime": "^7.25.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@babel/runtime": "^7.24.7",
     "@mantine/core": "^7.13.2",
     "@mantine/modals": "^7.13.2",
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@svgr/rollup": "^8.1.0",
+    "@real-token/aa-core": "^1.0.8",
     "@types/node": "^22.7.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "postcss": "^8.4.31",
+    "css-loader": "^7.1.2",
+    "css-modules-typescript-loader": "^4.0.1",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
+    "mini-css-extract-plugin": "^2.9.1",
+    "node-polyfill-webpack-plugin": "^4.0.0",
+    "postcss": "^8.4.47",
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^10.0.6",
     "postcss-preset-mantine": "^1.11.0",
     "postcss-simple-vars": "^7.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.13.0",
-    "rollup-plugin-banner2": "^1.2.2",
-    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-esbuild": "^6.1.1",
-    "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-polyfill-node": "^0.13.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "typescript": "^5.6.2"
+    "style-loader": "^4.0.0",
+    "svg-inline-loader": "^0.8.2",
+    "typescript": "^5.6.2",
+    "typescript-declaration-webpack-plugin": "^0.3.0",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-merge": "^6.0.1",
+    "webpack-node-externals": "^3.0.0",
+    "websocket-polyfill": "^1.0.0"
   }
 }

packages/@real-token/aa-modal/src/AaModal.tsx

@@ -1,19 +1,24 @@
-import { FC, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { ContextModalProps } from "@mantine/modals";
 import { Flex, Text, Button, LoadingOverlay } from "@mantine/core";
-import { RealtokenLogo } from "./RealtokenLogo";
+import { RealtokenLogo } from "./assets/RealtokenLogo/RealtokenLogo";
 import { ModalButton } from "./Buttons/ModalButton";
 import { IconArrowLeft, IconBrandGoogle, IconWallet } from "@tabler/icons-react";
 import classes from './AaModal.module.css';
-import { useAA } from "@real-token/aa-core";
+import { LoginConfig, ProviderProps, useAA } from "@real-token/aa-core";
 import { Providers } from "./Providers";
 import { ExternalButton } from "./Buttons/ExternalButton/ExternalButton";
 import { MetamaskLogo } from "./assets/Metamask/MetamaskLogo";
 import { CoinbaseWalletLogo } from "./assets/CoinbaseWalletLogo/CoinbaseWalletLogo";
+import { WalletConnectLogo } from "./assets/WalletConnectLogo/WalletConnect";
 
-export const AaModal: FC<ContextModalProps> = ({ context, id, innerProps }) => {
+export const AaModal: FC<ContextModalProps<{ aa: ProviderProps }>> = ({ innerProps, context: { closeModal }, id }) => {
 
-    const { login, loginReady } = useAA();
+    const { loginReady, login, loginConfig, walletAddress } = useAA();
+
+    useEffect(() => {
+        if(walletAddress && walletAddress !== '') closeModal(id);
+    },[walletAddress])
 
     const [connectExternalWallet, setConnectExternalWallet] = useState(false);
 
@@ -47,11 +52,11 @@ export const AaModal: FC<ContextModalProps> = ({ context, id, innerProps }) => {
                         />
                     </ExternalButton>
                     <ExternalButton 
-                        label="Coinbase Wallet"
-                        onClick={() => login('coinbase')}
+                        label="WalletConnect (V2)"
+                        onClick={() => login('wallet-connect-v2')}
                     >
-                        <CoinbaseWalletLogo 
-                            width={56}
+                        <WalletConnectLogo 
+                            // width={56}
                             height={56}
                         />
                     </ExternalButton>
@@ -73,10 +78,11 @@ export const AaModal: FC<ContextModalProps> = ({ context, id, innerProps }) => {
                     <ModalButton
                         leftSection={<IconBrandGoogle />}
                         onClick={() => login('auth', { loginProvider: 'google' }) }
+                        variant={'outline'}
                     >
                         <Text fw={600}>{'Continue with google'}</Text>
                     </ModalButton>
-                    <Providers />
+                    <Providers loginConfig={loginConfig as LoginConfig}/>
                 </Flex>
                 <Text fz={12} c={'dimmed'}>{'We do not share any data related to your social logins.'}</Text>
             </Flex>

packages/@real-token/aa-modal/src/Buttons/Buttons.module.css

@@ -8,4 +8,5 @@
 .root:hover{
     border-color: #FAAE1D;
     background-color: #FAAE1D;
+    color: light-dark(black, white);
 }

packages/@real-token/aa-modal/src/Buttons/ProviderButton.tsx

@@ -5,7 +5,7 @@ import { useAA } from '@real-token/aa-core';
 export const ProviderButton = ({ provider, ...props }: ActionIconProps & { provider: string }) => {
     const { login } = useAA();
     return(
-        <ActionIcon 
+        <ActionIcon
             {...props}
             classNames={{
                 root: classes.root
@@ -14,6 +14,7 @@ export const ProviderButton = ({ provider, ...props }: ActionIconProps & { provi
                 width: '100%',
             }}
             onClick={() => login('auth', { loginProvider: provider })}
+            variant={'outline'}
         >
             {props.children}
         </ActionIcon>

packages/@real-token/aa-modal/src/Providers.tsx

@@ -1,5 +1,5 @@
 import { IconBrandApple, IconBrandDiscord, IconBrandFacebook, IconBrandGoogle, IconBrandTwitch, IconBrandTwitter, IconMinus, IconPlus } from "@tabler/icons-react";
-import { useAA, LoginConfig } from "@real-token/aa-core";
+import { LoginConfig } from "@real-token/aa-core";
 import { ReactNode, useState } from "react";
 import { ActionIcon, Flex, SimpleGrid, Text } from "@mantine/core";
 import { ProviderButton } from "./Buttons/ProviderButton";
@@ -18,10 +18,14 @@ const loginProvidersToLogo: Map<LoginProvider, ReactNode> = new Map([
 
 const MAX_PROVIDERS_SHOWN = 4;
 
-export const Providers = () => {
+interface ProvidersProps{
+    loginConfig: LoginConfig
+}
+export const Providers = ({ loginConfig }: ProvidersProps) => {
 
-    const { loginConfig } = useAA();
-    const providers = Object.keys(loginConfig as LoginConfig).filter((provider) => provider !== 'google');
+    if(!loginConfig) return null;
+
+    const providers = Object.keys(loginConfig).filter((provider) => provider !== 'google');
 
     const [showAll, setShowAll] = useState(false);
 
@@ -42,6 +46,7 @@ export const Providers = () => {
                         width: '100%',
                     }}
                     onClick={() => setShowAll(!showAll)}
+                    variant={'outline'}
                 >
                     <Flex align={'center'} justify={'center'} gap={4}>
                         {showAll ? <IconMinus size={12}/> : <IconPlus size={12}/>}