Merge pull request #134 from blend-capital/wallet-alerts

Wallet alerts

.github/workflows/release_ipfs.yml

@@ -0,0 +1,50 @@
+name: Build and Release to IPFS
+
+on:
+  push:
+    tags:
+      - 'v*' # triggered whenever a new tag (previxed with "v") is pushed to the repository
+
+jobs:
+  build-and-release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          npm-version: '10.x'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run build script
+        run: npm run build:mainnet
+
+      - name: Create tarball
+        run: tar -czf app.tar.gz out/
+
+      - name: pinata
+        id: pinata
+        uses: aave/pinata-action@a3409e26f4cb859a2d9984109317caac53db5f68
+        with:
+          PINATA_API_KEY: ${{ secrets.PINATA_API_KEY }}
+          PINATA_SECRET_KEY: ${{ secrets.PINATA_SECRET_KEY }}
+          PIN_ALIAS: 'app-blend-${{ github.head_ref || github.ref }}'
+          BUILD_LOCATION: './out'
+          CID_VERSION: 1
+
+      - name: Create release
+        uses: softprops/action-gh-release@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.event.payload.tag }}
+          release_name: ${{ github.event.payload.tag }}
+          body: '## Blend UI Release\n\nThis release contains the latest build of the Blend UI.\n\n IPFS CID: ${{ steps.pinata.outputs.hash }}'
+          draft: false
+          prerelease: false
+          files: app.tar.gz

package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@blend-capital/blend-sdk": "^1.1.0",
-    "@creit.tech/stellar-wallets-kit": "0.8.1",
+    "@creit.tech/stellar-wallets-kit": "0.8.2",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@mui/icons-material": "^5.8.4",

src/components/common/WalletWarning.tsx

@@ -15,9 +15,19 @@ export const WalletWarning = () => {
   const loadUserData = useStore((state) => state.loadUserData);
 
   const [openCon, setOpenCon] = React.useState(false);
+  const [openError, setOpenError] = React.useState(false);
+
+  const handleConnectWallet = (successful: boolean) => {
+    if (successful) {
+      setOpenCon(true);
+    } else {
+      setOpenError(true);
+    }
+  };
 
   const handleSnackClose = () => {
     setOpenCon(false);
+    setOpenError(false);
   };
 
   useEffect(() => {
@@ -59,8 +69,7 @@ export const WalletWarning = () => {
       ) : (
         <OpaqueButton
           onClick={() => {
-            connect();
-            setOpenCon(true);
+            connect(handleConnectWallet);
           }}
           palette={theme.palette.warning}
           sx={{
@@ -104,6 +113,27 @@ export const WalletWarning = () => {
           Wallet connected.
         </Alert>
       </Snackbar>
+      <Snackbar
+        open={openError}
+        autoHideDuration={4000}
+        onClose={handleSnackClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+      >
+        <Alert
+          onClose={handleSnackClose}
+          severity="error"
+          sx={{
+            backgroundColor: theme.palette.error.opaque,
+            alignItems: 'center',
+            width: '100%',
+          }}
+        >
+          Unable to connect wallet.
+        </Alert>
+      </Snackbar>
     </>
   );
 };

src/components/nav/WalletMenu.tsx

@@ -23,10 +23,19 @@ export const WalletMenu = () => {
   const theme = useTheme();
   const { connect, disconnect, connected, walletAddress, isLoading } = useWallet();
 
-  //snackbars
+  // snackbars
   const [openCon, setOpenCon] = React.useState(false);
   const [openDis, setOpenDis] = React.useState(false);
   const [openCopy, setOpenCopy] = React.useState(false);
+  const [openError, setOpenError] = React.useState(false);
+
+  const handleConnectWallet = (successful: boolean) => {
+    if (successful) {
+      setOpenCon(true);
+    } else {
+      setOpenError(true);
+    }
+  };
 
   const handleDisconnectWallet = () => {
     disconnect();
@@ -42,6 +51,7 @@ export const WalletMenu = () => {
     setOpenCon(false);
     setOpenDis(false);
     setOpenCopy(false);
+    setOpenError(false);
   };
 
   const [anchorElDropdown, setAnchorElDropdown] = React.useState<null | HTMLElement>(null);
@@ -52,10 +62,11 @@ export const WalletMenu = () => {
   };
 
   const handleClickConnect = () => {
-    connect();
+    connect(handleConnectWallet);
   };
 
   const handleClose = () => {
+    handleSnackClose();
     setAnchorElDropdown(null);
   };
 
@@ -188,6 +199,27 @@ export const WalletMenu = () => {
           Wallet address copied to clipboard.
         </Alert>
       </Snackbar>
+      <Snackbar
+        open={openError}
+        autoHideDuration={4000}
+        onClose={handleSnackClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+      >
+        <Alert
+          onClose={handleClose}
+          severity="error"
+          sx={{
+            backgroundColor: theme.palette.error.opaque,
+            alignItems: 'center',
+            width: '100%',
+          }}
+        >
+          Unable to connect wallet.
+        </Alert>
+      </Snackbar>
     </>
   );
 };

src/contexts/wallet.tsx

@@ -46,7 +46,7 @@ export interface IWalletContext {
   walletId: string | undefined;
 
   isLoading: boolean;
-  connect: () => Promise<void>;
+  connect: (handleSuccess: (success: boolean) => void) => Promise<void>;
   disconnect: () => void;
   clearLastTx: () => void;
   restore: (sim: SorobanRpc.Api.SimulateTransactionRestoreResponse) => Promise<void>;
@@ -164,37 +164,41 @@ export const WalletProvider = ({ children = null as any }) => {
   /**
    * Connect a wallet to the application via the walletKit
    */
-  async function handleSetWalletAddress() {
+  async function handleSetWalletAddress(): Promise<boolean> {
     try {
       const publicKey = await walletKit.getPublicKey();
+      if (publicKey === '' || publicKey == undefined) {
+        console.error('Unable to load wallet key: ', publicKey);
+        return false;
+      }
       setWalletAddress(publicKey);
       setConnected(true);
       await loadUserData(publicKey);
-      setLoading(false);
+      return true;
     } catch (e: any) {
-      setLoading(false);
       console.error('Unable to load wallet information: ', e);
+      return false;
     }
   }
 
   /**
    * Open up a modal to connect the user's browser wallet
    */
-  async function connect() {
+  async function connect(handleSuccess: (success: boolean) => void) {
     try {
       setLoading(true);
       await walletKit.openModal({
         onWalletSelected: async (option: ISupportedWallet) => {
           walletKit.setWallet(option.id);
           setAutoConnect(option.id);
-          await handleSetWalletAddress();
-        },
-        onClosed: () => {
-          setLoading(false);
+          let result = await handleSetWalletAddress();
+          handleSuccess(result);
         },
       });
+      setLoading(false);
     } catch (e: any) {
       setLoading(false);
+      handleSuccess(false);
       console.error('Unable to connect wallet: ', e);
     }
   }