# Fidgets

Users can pick from a library of configurable Fidgets to customize and add functionality to the [Spaces](https://docs.nounspace.com/nounspace-alpha/spaces) on their [Profile](https://docs.nounspace.com/nounspace-alpha/spaces/profile) and [Homebase](https://docs.nounspace.com/nounspace-alpha/spaces/homebase). We’ll start by developing a handful of fidgets that can be configured to support a wide variety of Web3 protocols and communities. Once the concept has been validated, we’ll create a framework enabling anyone to develop their own open source Fidgets. 

### Development Quick Start

*<mark style="color:red;">While Nounspace is in Alpha, Fidgets can be contributed in the form of React components with the above specifications. Just make a PR to the</mark>* [*<mark style="color:red;">Github</mark>*](https://github.com/Nounspace/nounspace.ts) *<mark style="color:red;">and we'll review it and add it to the Fidgets library!</mark>*&#x20;

**Example Fidget -** \[ /src/fidgets/example.tsx ]

**Fidget Testing**\
If you want to test out a fidget you've developed, the easiest way to get it to display is through the Homebase page - \[ */src/pages/homebase/index.tsx* ]

* The `fidgets` constant defines a list of all available fidgets
  * Add another fidget in this list (take note of the 'id' field for the next step)
* The `defaultLayoutData` constant defines a list of which fidgets will be displayed
  * Add another fidget in this list (mapping the the 'i' field to the 'id' of your fidget)&#x20;

### Fidget Configuration

**Fields**\
Fields let developers define their own set of user editable variables for the fidget.

**Size**\
Fidgets need a set of established sizes to fit onto the default grid layout.&#x20;

```typescript
  size: {
    minHeight: NumericRange<1,36>;
    maxHeight: NumericRange<1,36>;
    minWidth: NumericRange<1,36>;
    maxWidth: NumericRange<1,36>;
  }
```

**Settings**\
Fidgets need a set of established sizes to fit onto the default grid layout.&#x20;

## Planned Fidgets

#### [Music](https://shapeshift.notion.site/Music-387fffe8952e46af9a961c63a3662cfb?pvs=4)

Play on your profile or homebase.

<div align="left"><img src="https://lh7-us.googleusercontent.com/a27G2Y_nUoOHqmMCQmYVhlD80-S8ZKUWvN8kvn2ItFuQSV8vcopE5xt2H-3z8sszF4EaTtJapipfUwKRdQJ6RA3WyBfMm7NS80C_HlU1qQ75KMUoSHjFnEYpbEmdidwkr_s4NBG9X9WELeAQHjEhTrw" alt="" height="130.1760007022472" width="295"></div>

[**Nounish Auctions**](https://shapeshift.notion.site/Nounish-Auctions-213cd9b63f6a42eb88de2c3516b513d6?pvs=4)

View/display auctions for Nouns or Nouns Forks on your profile or homebase, and enable users to place bids and settle auctions.

<div align="left"><img src="https://lh7-us.googleusercontent.com/mqzS98k2VK9xVJ5RYj5iNdvTLEoO3P0P_yqNlXwmA8zmWt7eJz62ltq4GXxQqbXNys5KBkMZT1gOlTryq8sZFezv65awPihk1KTgxyyFlDPalRlqYtNnte59FFzShjhrcE0moN0igSMTfH88plZ2Jvw" alt="" height="231.54690265486727" width="414"></div>

[**Nounish Governance**](https://shapeshift.notion.site/Nounish-Governance-3f956aea25bc4213aa7ee567a2625fb7?pvs=21)

View/display proposal and candidate details for Nouns or Nouns Forks on your profile or homebase.

<div align="left"><img src="https://lh7-us.googleusercontent.com/5BJdS1e3KEFkdRJ4CYW4buQfb7GCEQJYBeqtObRAhwi5hlG161XlCdjPFBmoPIg0hrcdUtVJwvg-N2NVeScUSADuy0SWTFiRsJQhZWuSz9jJm-CF2bpoUqIM3Ks8AMU9oxdKqwZJJ3vIm-jWSUyQ130" alt="" height="304.74516695957817" width="340"></div>

**⚡** [**SnapShot Governance**](https://shapeshift.notion.site/Nounish-Governance-3f956aea25bc4213aa7ee567a2625fb7?pvs=21/SnapShot-Governance-c286e8ea05764013be7b5d9e98b1206e?pvs=21)

View/display proposal and candidate details for any SnapShot governance space on your profile or homebase.

<div align="left"><img src="https://lh7-us.googleusercontent.com/hnhWUhOqeWRWuxaiqwuXl3sGGAYbaJ2XRqrc3uT5uu3XoB1X88C6VTWYQe1n_lCbxGZjwcfYxp7rpVzLy0V4G33-LtiCV_UJcL1zEgjM3zDRnfdpzJzTCXRmv7zNFGDD9Sl2PKdSRU72YRNnpO_jg_0" alt="" height="300.27777777777777" width="299"></div>

⚖️ [**Balance**](https://shapeshift.notion.site/Nounish-Governance-3f956aea25bc4213aa7ee567a2625fb7?pvs=21/Balance-fcf849da97ff4609bb96fb0eba57cb8e?pvs=21)

View/display an address/treasury balance on your profile or homebase.

![](https://lh7-us.googleusercontent.com/HNKoci7usPFz3G0_O8G9FGcw3j3a9R_8_25Kaf2a6qPvfZcNDdjxy2WqS4PqS3AJcjTr2AlWXH3Xh_Np7BuV516S0x2RjTD2zmWXZDvApKUsoA2F53m98F-LhaoXgM545RWL3Acn3d5yjZoTQPCcLdQ) ![](https://lh7-us.googleusercontent.com/j5LbnPGtaI46oZ7oTceoJb3WTE0qBqL9k7OEhjGJ9rYbDBfMw6_ERcS5xdIn9mVU7owbiX7jNbAs_DkA86MxyBNIY6ySlBpWVuPsx3bfiCFsqakj2s59KNXBev7sgjEyTTJ3kRbAVcUTe1PsbHPswRg)

<br>

[**Frame**](https://shapeshift.notion.site/Frame-ab3df7f12f62413cbc62268d9a7ad77b?pvs=4)

View/display frames on your profile or homebase.

<div align="left"><img src="https://lh7-us.googleusercontent.com/u8WMUwRA0Tr0EhPhfbTSOwE53-avUTPKJ_EGM4zraP795N5hSAY1u_hHwaTb6iAmUMvkFZInCPHueq1r1448W_RLSqx1Cqr2yNEZZh3oyA6bWmUPmq9YOA-UZ9uobLlgMWSL3UK2ClX5FfRLo3Nz4ho" alt="" height="306.45376712328766" width="259"></div>

[**Gallery**](https://shapeshift.notion.site/Gallery-108085ffab0b4f999941825be46e0ca7?pvs=21)

View/display Images and NFTs on your profile or homebase.

<div align="left"><img src="https://lh7-us.googleusercontent.com/hK3-kZPuQyKq2SAr4PRL1fYGJhKuUtuGxHlGkEAqBqdcl5-d0LIWG8z8sR4dK_GLb-VsW-R5eGKN7yRk-MxIQp4LreZWnJeKWTa7BiX-xUjlAZ_eMzSoq8FoY9q1jtYItc6JM3z_P1lkijwRhTTyx-w" alt="" height="139" width="139"></div>

[**Profile/channel feed**](https://shapeshift.notion.site/Profile-channel-feed-07b9a79ebb044150aef9e1924f75368a?pvs=21)

View/display profiles/channels on your profile or homebase.

[**Tip Allowance**](https://shapeshift.notion.site/Tip-Allowance-9525e198fabe4710932da245d189c998?pvs=21)

View/display your current Degen, Drakula, or \[other tippable token] on your profile or homebase

[**IPFS Frontend**](https://shapeshift.notion.site/IPFS-Frontend-d354181ae9384c43b78a5342cc1c9dad?pvs=21)

View/display content \[including entire frontends] hosted on IPFS on your profile or homebase.

<div align="left"><img src="https://lh7-us.googleusercontent.com/zcYPkokbNCFQBu0va_WDecaxjdqbw-_Mk7Ikg3LeyFU79VC2nzxN-VzRpglU_pPxwaXUP5VCraFIQPqHU8-hrfulGJ89OF1xZGUFmqiW0GlI_n7wvJunWoVSy8ACU7BeOX2vvMI8WiJikSJTTN6zksg" alt="" height="229.33291979613736" width="366"></div>

[**iFrame**](https://shapeshift.notion.site/iFrame-8da39ff17c9f45f9aa785cfe582ea334?pvs=21)

View/display entire websites or apps on your profile or homebase.

<div align="left"><img src="https://lh7-us.googleusercontent.com/BZCFQVTsKdRkJQ0ZFB5fhun2jmK_C_XGzcdAeFQ2I4QdHKV6IfZRv9m7HG_jwT10CswqUuHqTq8UNfWDz6QMqrg8l03rXRrpgfqwFMhT9f6iNck7PyoDBNTHO6w-nQnkCeL4BKdtx60zhTmUhDo8HcA" alt="" height="297.47236286212444" width="371"></div>

ℹ️ [**RSS Feed**](https://shapeshift.notion.site/RSS-Feed-46576531a07f4c88881c5b6490be0c3b?pvs=21)

View/display RSS Feeds from other sites on my profile or homebase.<br>

[**Token Swap**](https://shapeshift.notion.site/Token-Swap-a54ed5c13a6d4bedb73c7c9ea3530d7a?pvs=21)

Display a swap modal on your profile or homebase enabling your and your followers to trade.

<div align="left"><img src="https://lh7-us.googleusercontent.com/plth0FUv55XrP2mEKb890p29F_ORyp2GnmBZkGWvv3l0sOoaXbOFCAfxBUIbAg-HLw9uqCBFjXZ29KUwGzGkgN5SmO7XfE57dcxmR79IyZFbhgDKxEBRdxRNte4poLshUweB_MrZBxlbQfwYHZxXZWg" alt="" height="166.82076539855072" width="223"></div>

[**Podcasts**](https://shapeshift.notion.site/Podcasts-49031f5bae1f4e4b977265d748488bb4?pvs=21)

Embed a podcast feed and player on your profile or homebase.

<div align="left"><img src="https://lh7-us.googleusercontent.com/20mLGvh7ACJ5I40ywYLTqwrb_itPiUcJmM45UAveMB0rIjfL11AtGkG7BhKYQrObV25eY_spqBHZs-dS6icbzcvv9MqjlKjv-ERR8fVrrRBk2ndD7WEE0POFTUzBQwo8IUVlC7XdeOBYWRwp6_ckeQE" alt="" height="217.9718309859155" width="212"></div>