feat: download abi from bundle page

package.json

@@ -63,6 +63,7 @@
 		"react-dom": "18.1.0",
 		"react-gtm-module": "^2.0.11",
 		"react-image-file-resizer": "^0.4.7",
+		"slug": "^8.2.2",
 		"subscriptions-transport-ws": "^0.11.0",
 		"superagent": "^7.1.6",
 		"tabler-icons-react": "^1.50.0",

src/components/Bundles/BundleContainer.tsx

@@ -16,12 +16,13 @@ import { MeemAPI } from '@meemproject/api'
 import { makeFetcher, useWallet } from '@meemproject/react'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
+import { Download, Rocket } from 'tabler-icons-react'
 import {
 	Contracts,
 	SubGetBundleByIdSubscription
 } from '../../../generated/graphql'
 import { SUB_GET_BUNDLE_BY_ID } from '../../graphql/contracts'
-import { downloadFile } from '../../lib/utils'
+import { downloadFile, formatFilename } from '../../lib/utils'
 import { Page } from '../../styles/Page'
 import { DemoCode } from '../Atoms/DemoCode'
 import { BundleForm } from './BundleForm'
@@ -114,6 +115,33 @@ export const BundleContainer: React.FC = () => {
 		setIsSaving(false)
 	}
 
+	const handleDownloadABI = async () => {
+		try {
+			const bundle = data?.Bundles[0]
+			if (!bundle) {
+				showNotification({
+					title: 'Error',
+					message: 'Bundle not found',
+					color: 'red'
+				})
+				return
+			}
+
+			downloadFile(
+				`${formatFilename(bundle.name)}.json`,
+				JSON.stringify(bundle.abi)
+			)
+			showNotification({
+				title: 'Success!',
+				message: 'ABI file generated.',
+				color: 'green'
+			})
+		} catch (e) {
+			log.crit(e)
+		}
+		setIsSaving(false)
+	}
+
 	useEffect(() => {
 		if (!hasInitialized && data?.Bundles[0]) {
 			form.setValues({
@@ -161,6 +189,7 @@ export const BundleContainer: React.FC = () => {
 				<Space h={8} />
 				<div className={classes.row}>
 					<Button
+						leftIcon={<Download />}
 						onClick={async () => {
 							const genTypes = makeFetcher<
 								MeemAPI.v1.GenerateTypes.IQueryParams,
@@ -191,6 +220,15 @@ export const BundleContainer: React.FC = () => {
 
 					<Space w={16} />
 					<Button
+						disabled={isLoading || isSaving}
+						onClick={handleDownloadABI}
+						leftIcon={<Download />}
+					>
+						Download ABI
+					</Button>
+					<Space w={16} />
+					<Button
+						leftIcon={<Rocket />}
 						loading={isSaving}
 						disabled={isLoading || isSaving}
 						onClick={() => setIsOpen(true)}

src/components/ManageDiamond/ManageDiamondContainer.tsx

@@ -45,7 +45,7 @@ import {
 	WalletContractInstances
 } from '../../../generated/graphql'
 import { SUB_GET_CONTRACTS_BY_ADDRESS } from '../../graphql/contracts'
-import { downloadFile } from '../../lib/utils'
+import { downloadFile, formatFilename } from '../../lib/utils'
 import { Page } from '../../styles/Page'
 import { Address } from '../Atoms/Address'
 import { DemoCode } from '../Atoms/DemoCode'
@@ -316,7 +316,10 @@ export const ManageDiamondContainer: React.FC = () => {
 				}
 			})
 
-			downloadFile(`${fileName}.json`, JSON.stringify(facetABI))
+			downloadFile(
+				`${formatFilename(fileName)}.json`,
+				JSON.stringify(facetABI)
+			)
 			showNotification({
 				title: 'Success!',
 				message: 'ABI file generated.',

src/graphql/contracts.tsx

@@ -307,6 +307,7 @@ export const SUB_GET_BUNDLE_BY_ID = gql`
 			id
 			name
 			description
+			abi
 			BundleContracts(order_by: { order: asc }) {
 				id
 				order

src/lib/utils.ts

@@ -1,3 +1,5 @@
+import slug from 'slug'
+
 export type ArrayElement<ArrayType extends readonly unknown[]> =
 	ArrayType extends readonly (infer ElementType)[] ? ElementType : never
 
@@ -16,3 +18,7 @@ export function downloadFile(filename: string, text: string) {
 
 	document.body.removeChild(element)
 }
+
+export function formatFilename(name: string) {
+	return slug(name, { lower: true }).substr(0, 200)
+}

yarn.lock

@@ -13913,6 +13913,11 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+slug@^8.2.2:
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/slug/-/slug-8.2.2.tgz#33b019a857a11fc4773c1e9a9f60e3da651a9e5d"
+  integrity sha512-5ByW6qXqPeG0Tmlkh24JhdXhvQsbaJSjVr3GgGxUV0BSskZKKBZZfFWxezap8+fh1vxBN9GVbqI1V6nqAFxlBg==
+
 smart-buffer@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"